HTML Fundamentals

HTML gives structure and meaning to content. Focus on semantic elements so browsers, assistive tech, and search engines all understand your page.

HTML Structure

A valid HTML document starts with a doctype, followed by the html root. Inside it lives the head with metadata and the body with visible content.

html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Document title</title>
  </head>
  <body>
    <header>Site name</header>
    <main>
      <h1>Page heading</h1>
      <p>Content...</p>
    </main>
    <footer>© 2025 Your Name</footer>
  </body>
</html>
Headings & Text Elements

Use heading tags h1 through h6 to create a logical document outline. Combine with text elements like p, strong, em, and others for rich content.

Heading Hierarchy
Text Elements
html
<!-- Complete text example -->
<article>
  <h1>The Importance of Semantic HTML</h1>
  
  <p>Writing semantic HTML is <strong>crucial</strong> for web accessibility. 
  It helps <em>assistive technologies</em> understand your content structure.</p>
  
  <h2>Key Benefits</h2>
  <p>Using proper HTML tags provides several advantages:</p>
  
  <ul>
    <li><strong>SEO:</strong> Search engines better understand your content</li>
    <li><strong>Accessibility:</strong> Screen readers can navigate effectively</li>
    <li><strong>Maintainability:</strong> Code is easier to read and update</li>
  </ul>
  
  <blockquote>
    <p>"The power of the Web is in its universality. 
    Access by everyone regardless of disability is an essential aspect."</p>
    <cite>— Tim Berners-Lee, W3C Director</cite>
  </blockquote>
  
  <p><small>Last updated: <time datetime="2025-09-29">September 29, 2025</time></small></p>
</article>
Lists

HTML provides three types of lists: unordered (ul), ordered (ol), and description lists (dl). Each serves different semantic purposes.

Unordered & Ordered Lists
Description Lists
Semantic Tags

Semantic elements describe their meaning: use header, nav, main, article, section, aside, and footer to reflect document structure. This improves accessibility and SEO compared to generic div elements.

header
nav
main + article
aside + footer
Images & Media

Images, audio, and video enrich web content. Always provide alternative text for images and use proper semantic markup for accessibility.

Images
Audio & Video
Tables

Tables display tabular data with rows and columns. Use proper table structure withthead, tbody, th, and td for accessibility.

Complete Table Example
Simple Table
Table with Colspan/Rowspan
Forms

Forms collect user input. Always pair inputs with label, group related controls with fieldset and legend, and use native validation via attributes like required and type.

Text Inputs
Textarea & Select
Checkboxes & Radio Buttons
Complete Contact Form

Additional Input Types

Modern HTML5 Input Types

Form Best Practices:

  • Always use label elements with for attributes or wrap inputs
  • Use name attributes for server submission and id for labels
  • Provide helpful placeholder text and validation messages
  • Group related fields with fieldset and legend
  • Use appropriate input types for better mobile UX and validation
  • Include required attributes and other validation constraints
  • Prefer native inputs over custom widgets for accessibility