Thirty most common html tags for beginning developers
Essential Document Structure
- <!DOCTYPE html>
- Not technically a tag, but a declaration that tells the browser the document is HTML5.
- <html>
- The root element that wraps all other content on the page.
- <html>
- The root element that wraps all other content on the page.
- <head>
- A container for metadata, such as the page title and links to CSS stylesheets.
- <title>
- Sets the title shown in the browser tab; it is the only required element inside the head.
- <body>
- Contains all the visible content of the webpage, like text and images.
- <meta>
- Provides information about the page (e.g., character encoding or viewport settings for mobile responsiveness).
- <link>
- Connects the HTML document to external resources, most commonly CSS files.
- <script>
- Used to embed or link to JavaScript code for interactivity.
Text Content & Hierarchy
- <h1> to <h2>
- Defines headings of varying importance, with <h1> being the largest/most important and <h6> the smallest.
- <p>
- Used for paragraphs of text.
- <br>
- A self-closing tag that inserts a single line break.
- <hr>
- A horizontal rule used to separate content sections visually.
- <!--...-->
- Used for writing comments that are visible only in the code, not on the rendered page.
Formatting & Inline Styling
- <strong>
- Indicates important text, typically rendered in bold.
- <em>
- Emphasizes text, typically rendered in italics.
- <span>
- A generic inline container used for styling specific parts of text without starting a new line.
- <blockquote>
- Used for long quotations, typically indented from the rest of the text.
- <code>
- Displays text in a monospace font, ideal for representing computer code.
Links & Media
- <a>
- The "anchor" tag used to create hyperlinks to other pages or files.
- <img>
- Embeds images; it requires src (source) and alt (description) attributes.
Lists & Tables
- <ul>
- Creates an unordered list (usually bullet points).
- <ol>
- Creates an ordered list (usually numbered).
- <li>
- Defines an individual item within an ordered or unordered list.
- <table>
- The container for creating data tables.
- <tr>
- Defines a row within a table.
- <td>
- Defines a standard data cell in a table.
Structural & Semantic Containers
- <div>
- A generic block-level container used to group elements for layout or styling.
- <header>
- Represents introductory content or navigation links at the top of a page or section.
- <nav>
- A container for major navigation links.
- <footer>
- Defines the footer for a page or section, often containing copyright info or contact details.