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.
- <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.