Common HTML Elements
HTML elements are the building blocks of webpages. Below, we cover over 20 of the most commonly used HTML elements that you need to know when creating and structuring webpages. Each element is described with its syntax and an example.
1. <html> Element
The <html> element is the root element of an HTML document. It contains all other elements.
2. <head> Element
The <head> element contains metadata, such as the title of the page and links to stylesheets and scripts.
3. <title> Element
The <title> element defines the title of the webpage, which appears on the browser tab.
4. <body> Element
The <body> element contains the visible content of the webpage.
5. <p> Element
The <p> element represents a paragraph of text.
6. <h1> to <h6> Elements
Heading elements <h1> to <h6> define headings of different levels, with <h1> being the most important and <h6> the least important.
7. <a> Element
The <a> element defines a hyperlink, which can be used to link to another webpage or resource.
8. <img> Element
The <img> element is used to embed images into the webpage. It is a void element, meaning it doesn't have a closing tag.
9. <ul>, <ol>, and <li> Elements
The <ul> element creates an unordered list (bulleted), and the <ol> element creates an ordered list (numbered). The <li> element represents a list item.
10. <div> Element
The <div> element is a block-level container used to group content together for styling or layout purposes.
11. <span> Element
The <span> element is an inline container used to group content within text for styling purposes.
12. <br> Element
The <br> element inserts a line break in the text. It is a void element and doesn't require a closing tag.
13. <hr> Element
The <hr> element represents a horizontal rule, which is typically used to separate content sections.
14. <strong> and <em> Elements
The <strong> element makes text bold, and the <em> element emphasizes text, usually by making it italicized.
15. <table>, <tr>, <th>, and <td> Elements
The <table> element defines a table, <tr> represents a table row, <th> represents a table header, and <td> represents a table cell.
16. <form> Element
The <form> element is used to create a form for user input. It can contain various input elements such as text fields, checkboxes, and submit buttons.
17. <input> Element
The <input> element is used to create interactive controls for forms, such as text fields, checkboxes, radio buttons, etc.
18. <button> Element
The <button> element defines a clickable button, which can be used in forms or for triggering scripts.
19. <select> and <option> Elements
The <select> element creates a dropdown list, and the <option> element defines the items within that list.
20. <textarea> Element
The <textarea> element creates a multi-line text input field.
21. <iframe> Element
The <iframe> element embeds another HTML document within the current one.
22. <link> Element
The <link> element defines the relationship between the current document and an external resource, typically used to link stylesheets.
23. <script> Element
The <script> element is used to embed or reference JavaScript code.
24. <meta> Element
The <meta> element provides metadata about the HTML document, such as the description, keywords, and character set.
25. <footer> Element
The <footer> element represents the footer section of the document, typically containing copyright information, links, or contact details.
Conclusion
This lesson covered some of the most commonly used HTML elements, providing the foundation for building a functional and well-structured webpage. Understanding these elements is crucial for web development and will help you create accessible and organized websites.
0 Comments