HTML Elements Reference

Complete documentation for HTML elements, organized by category and purpose.

Available Elements

Text and Content Elements

• <p> - Paragraph element for text content
• <span> - Inline generic container
• <div> - Block-level generic container
• <a> - Anchor element for links
• <abbr> - Abbreviation element
• <acronym> - Acronym element (deprecated)
• <address> - Contact information element

Semantic Structure Elements

• <header> - Header section of a document or section
• <nav> - Navigation links container
• <section> - Thematic grouping of content
• <article> - Self-contained content

Media Elements

• <img> - Image element for displaying pictures

Element Categories

Block-Level Elements

Elements that typically start on a new line and take up the full available width:

• <div>, <p>, <header>, <nav>, <section>, <article>, <address>

Inline Elements

Elements that flow within text content and only take up necessary width:

• <span>, <a>, <abbr>, <acronym>, <img>

Usage Guidelines

Semantic HTML Best Practices

1. Choose elements based on meaning, not appearance
   • Use <nav> for navigation, not just any list of links
   • Use <article> for standalone content, not just any container
2. Maintain proper document structure
   • Use heading elements (h1-h6) in hierarchical order
   • Nest elements appropriately
3. Consider accessibility
   • Use semantic elements to help screen readers
   • Include appropriate ARIA attributes when needed

Common Patterns

<!-- Typical page structure -->
<header>
  <nav>
    <!-- Navigation links -->
  </nav>
</header>

<main>
  <article>
    <header>
      <!-- Article header -->
    </header>
    <section>
      <!-- Article content -->
    </section>
  </article>
</main>

Getting Help

• Each element page includes syntax, examples, and best practices
• Look for the "When to use" sections for guidance on proper usage
• Check browser compatibility information where relevant