Learn Web: HTML Fundamentals — Semantic Structure, Forms, Tables, and Accessibility

HTML Fundamentals — Semantic Structure, Forms, Tables, and Accessibility

DodaTech Updated Jun 20, 2026 7 min read

HTML (HyperText Markup Language) is the backbone of every webpage — it provides the structure that CSS styles and JavaScript brings to life with interactivity.

What You’ll Learn

Semantic HTML elements and why they matter
Building accessible forms with validation
Creating structured tables for data
Embedding images, video, and audio
Accessibility basics for inclusive web design

Why It Matters

HTML is the only language browsers understand natively. Every framework, every library, every tool in web development ultimately produces HTML. Getting HTML right — using semantic elements, proper forms, and accessible patterns — improves your SEO, makes your site usable by people with disabilities, and ensures your code works across all browsers.

Real-world use: When Durga Antivirus Pro displays its scan results dashboard, every progress bar, status update, and action button is built with HTML elements. Users navigating with screen readers rely on semantic HTML to understand the interface without seeing it.

Semantic HTML

Semantic HTML means using elements that describe their meaning rather than just their appearance. Instead of <div id="nav">, use <nav>. Instead of <div class="article">, use <article>.

    flowchart LR
  A[Non-Semantic<br/>&lt;div&gt; &lt;span&gt;] --> B[Semantic<br/>&lt;header&gt; &lt;nav&gt; &lt;main&gt; &lt;article&gt;]
  B --> C[Better SEO]
  B --> D[Screen Reader Compatible]
  B --> E[Maintainable Code]
  style B fill:#4af,color:#fff

Why Semantic HTML Matters

Accessibility — Screen readers use semantic elements to navigate pages. A <nav> element lets users skip to navigation quickly.
SEO — Search engines give more weight to content in semantic elements like <article>, <h1>-<h6>, and <header>.
Readability — Code with <header>, <main>, <footer> is easier to understand than a pile of <div> elements.

<!-- Non-semantic (bad) -->
<div class="header">
  <div class="nav">
    <div class="nav-item">Home</div>
  </div>
</div>
<div class="main-content">
  <div class="article">
    <div class="title">Article Title</div>
  </div>
</div>

<!-- Semantic (good) -->
<header>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
    </ul>
  </nav>
</header>
<main>
  <article>
    <h1>Article Title</h1>
    <p>Article content goes here.</p>
  </article>
</main>
<footer>
  <p>&copy; 2026 DodaTech</p>
</footer>

The Full Semantic Layout

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Semantic HTML Example</title>
</head>
<body>
  <header>
    <h1>DodaTech Tutorials</h1>
    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/tutorials">Tutorials</a></li>
        <li><a href="/about">About</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <h2>Getting Started with HTML</h2>
      <p>Published on <time datetime="2026-06-20">June 20, 2026</time></p>
      <section>
        <h3>What is HTML?</h3>
        <p>HTML is the standard markup language for creating web pages.</p>
      </section>
    </article>

    <aside>
      <h3>Related Tutorials</h3>
      <ul>
        <li><a href="/css-fundamentals">CSS Fundamentals</a></li>
        <li><a href="/javascript-fundamentals">JavaScript Basics</a></li>
      </ul>
    </aside>
  </main>

  <footer>
    <p>Built by the developers of Doda Browser and Durga Antivirus Pro.</p>
  </footer>
</body>
</html>

HTML Forms

Forms are how users send data to your server — login, registration, search, checkout, and feedback all rely on forms. Accessible forms with proper validation improve user experience and data quality.

Form Structure

<form action="/submit" method="POST" novalidate>
  <fieldset>
    <legend>Personal Information</legend>

    <label for="name">Full Name:</label>
    <input type="text" id="name" name="name" required
           placeholder="Enter your full name"
           aria-describedby="name-hint">
    <span id="name-hint">Enter your first and last name.</span>

    <label for="email">Email Address:</label>
    <input type="email" id="email" name="email" required
           placeholder="you@example.com">

    <label for="password">Password:</label>
    <input type="password" id="password" name="password" required
           minlength="8"
           pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
           title="Must contain at least one number, one uppercase, and one lowercase letter">

    <label for="country">Country:</label>
    <select id="country" name="country">
      <option value="">Select a country</option>
      <option value="us">United States</option>
      <option value="uk">United Kingdom</option>
      <option value="in">India</option>
    </select>

    <label>
      <input type="checkbox" name="subscribe" checked>
      Subscribe to newsletter
    </label>
  </fieldset>

  <button type="submit">Register</button>
</form>

HTML5 Input Types

HTML5 introduced specialized input types with built-in validation:

Input Type	Purpose	Example
`text`	General text input	Name, username
`email`	Email addresses	Validates `@` and domain
`url`	Website URLs	Validates URL format
`number`	Numeric input	Age, quantity
`tel`	Telephone numbers	Triggers numeric keyboard on mobile
`date`	Date picker	Calendar selection
`range`	Slider control	Volume, brightness
`color`	Color picker	Hex color selection
`file`	File upload	Images, documents

HTML Tables

Tables display structured data — pricing plans, comparison charts, schedules, and data grids. Use <thead>, <tbody>, and <tfoot> for proper table structure.

<table>
  <caption>DodaTech Subscription Plans</caption>
  <thead>
    <tr>
      <th scope="col">Feature</th>
      <th scope="col">Free</th>
      <th scope="col">Pro</th>
      <th scope="col">Enterprise</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Users</th>
      <td>1</td>
      <td>10</td>
      <td>Unlimited</td>
    </tr>
    <tr>
      <th scope="row">Storage</th>
      <td>5 GB</td>
      <td>50 GB</td>
      <td>1 TB</td>
    </tr>
    <tr>
      <th scope="row">Support</th>
      <td>Community</td>
      <td>Email</td>
      <td>24/7 Phone</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">Price</th>
      <td>Free</td>
      <td>$29/mo</td>
      <td>$99/mo</td>
    </tr>
  </tfoot>
</table>

Key table accessibility features:

<caption> provides a title for the table
scope="col" and scope="row" associate headers with cells
<thead>, <tbody>, <tfoot> group rows logically

Media Elements

HTML provides native elements for embedding images, video, and audio.

Images

<!-- Basic image with alt text -->
<img src="diagram.webp" alt="Flowchart showing HTTP request lifecycle"
     loading="lazy" width="800" height="600">

<!-- Responsive image with picture element -->
<picture>
  <source srcset="hero-wide.webp" media="(min-width: 1200px)">
  <source srcset="hero-tablet.webp" media="(min-width: 768px)">
  <img src="hero-mobile.webp" alt="Hero banner for DodaTech"
       loading="lazy" width="800" height="400">
</picture>

<!-- Figure with caption -->
<figure>
  <img src="chart.webp" alt="Monthly website traffic chart"
       loading="lazy" width="600" height="400">
  <figcaption>Figure 1: Website traffic for Q1 2026</figcaption>
</figure>

Video and Audio

<!-- Video with controls and fallback -->
<video controls width="640" height="360" preload="metadata">
  <source src="tutorial.mp4" type="video/mp4">
  <source src="tutorial.webm" type="video/webm">
  <track src="subtitles-en.vtt" kind="subtitles" srclang="en" label="English">
  <p>Your browser does not support video. <a href="tutorial.mp4">Download the file</a>.</p>
</video>

<!-- Audio with controls -->
<audio controls preload="metadata">
  <source src="podcast.mp3" type="audio/mpeg">
  <source src="podcast.ogg" type="audio/ogg">
  <p>Your browser does not support audio. <a href="podcast.mp3">Download the file</a>.</p>
</audio>

Accessibility Basics

Web accessibility ensures people with disabilities can use your website. About 15% of the world’s population experiences some form of disability.

Key Accessibility Principles

Use semantic HTML — Screen readers rely on element meaning, not appearance.
Provide alt text — Every <img> needs descriptive alt text. Decorative images use alt="".
Label form inputs — Every <input>, <select>, and <textarea> needs an associated <label>.
Use headings correctly — One <h1> per page, then <h2>, <h3> in hierarchical order.
Ensure keyboard access — All interactive elements must be reachable and operable via keyboard.

<!-- Accessible icon button -->
<button aria-label="Close dialog">
  <span aria-hidden="true">&times;</span>
</button>

<!-- Accessible skip link -->
<a href="#main-content" class="skip-link">Skip to main content</a>

ARIA Attributes

ARIA (Accessible Rich Internet Applications) attributes supplement HTML when native semantics aren’t enough:

<!-- ARIA live region for dynamic updates -->
<div aria-live="polite" aria-atomic="true">
  Scan progress: 75% complete
</div>

<!-- ARIA for custom controls -->
<div role="tablist">
  <button role="tab" aria-selected="true" aria-controls="panel-1">Tab 1</button>
  <button role="tab" aria-selected="false" aria-controls="panel-2">Tab 2</button>
</div>
<div role="tabpanel" id="panel-1">Content for tab 1</div>
<div role="tabpanel" id="panel-2" hidden>Content for tab 2</div>

Common Errors

Missing alt attributes on images — Screen readers will read the filename if alt text is missing.
Nesting <button> inside <a> — Both are interactive elements and cannot be nested. Use one or the other.
Using <br> for spacing — Use CSS margin or padding instead of <br> for layout spacing.
Forgetting the lang attribute — The <html lang="en"> attribute helps screen readers pronounce text correctly.
Duplicate id values — IDs must be unique on each page. Duplicates break form labels and accessibility.

Practice Questions

What is the difference between <div> and <article>? <div> is a generic container with no semantic meaning. <article> represents a self-contained piece of content that could be independently distributed or reused.
Why is the <label> element important for form accessibility? Labels associate text with form controls. Screen readers announce the label when the input receives focus, and clicking the label focuses the input — making forms easier to use for everyone.
What does the loading="lazy" attribute do on images? It tells the browser to defer loading the image until it’s about to enter the viewport, reducing initial page load time and saving bandwidth.
How do you make a table header cell? Use <th> instead of <td> for header cells. Add scope="col" for column headers and scope="row" for row headers to improve accessibility.
What is a “skip link” and why is it important? A skip link is a hidden link that becomes visible on focus, allowing keyboard and screen reader users to jump directly to the main content without tabbing through navigation.

Challenge

Build a product comparison page using semantic HTML that includes a pricing table, a registration form with at least five different input types, an embedded video, and proper heading hierarchy. Ensure every image has alt text and every form input has a label.

Real-World Task

Create an accessible feedback form for Durga Antivirus Pro that includes fields for name, email, product version (dropdown), rating (star radio buttons), and comments (textarea). Use proper labels, fieldset grouping, and ARIA attributes. The form should submit to a backend endpoint.

Next: CSS Fundamentals | Next: JavaScript Fundamentals | Related: Accessibility Guide

Built by the developers of Doda Browser, DodaZIP, and Durga Antivirus Pro.

Previous Web Development Overview — Complete Beginner's Guide Next CSS Fundamentals — Complete Guide to Selectors, Layout, and Responsive Design

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Web Development

More in Web Development