HTML Structure, Semantics and Media

HTML gives information a machine-readable structure. Browsers use that structure to build the document object model, search engines use it to understand content and assistive technologies use it for navigation. Good HTML begins with meaning; CSS controls presentation and JavaScript supplies behavior.

1. Document structure and meaning

HTML describes document structure rather than a sequence of computations. The doctype selects standards mode, html encloses the document, head holds metadata and body holds displayed content. A meaningful page title identifies the document in browser tabs and search results. Headings express a hierarchy; choosing a heading only because it looks large weakens document organization. Paragraphs, ordered and unordered lists and descriptive hyperlinks make information easier to navigate.

Semantic elements describe purpose: nav groups major navigation, main contains the principal content, article represents a self-contained item and section groups a thematic region. A div is a generic container. An image's alt text communicates its purpose when the image cannot be perceived; purely decorative images normally use empty alternative text. Native HTML controls provide useful keyboard and accessibility behavior. ARIA supplies additional accessibility semantics where necessary and should not contradict native behavior.

2. Tables, embedding and graphics

Use tables for tabular relationships, with th identifying header cells and caption identifying the table. rowspan and colspan merge cells across rows and columns. An iframe embeds another browsing context; its permissions and sandbox policy should match the required behavior. Audio and video elements expose media playback and captions improve access to spoken content. Canvas provides a bitmap drawing surface controlled by script, whereas SVG represents shapes as document elements.

<article>
  <h1>Web Programming</h1>
  <p>Read the <a href="guide.html">reference guide</a>.</p>
  <img src="network.png" alt="Browser connected to an application server">
</article>

Relative links resolve against the document's base URL. Microdata uses attributes such as itemscope and itemprop to attach machine-readable meaning to visible information. Browser geolocation is an API, not an HTML tag and access requires permission under the browser's security rules.

3. Choosing elements deliberately

An anchor navigates to a resource; a button performs an action. Using a clickable div instead of a button creates extra work for keyboard handling, focus and accessible naming. Strong indicates importance and em indicates emphasis; visual styling should be handled by CSS when meaning is not changing. A description list uses dl with dt and dd for terms and descriptions. Link relations such as stylesheet explain the relationship of a linked resource to the document.

Audio and video can include multiple source candidates and fallback content. A track can supply captions or subtitles. Canvas drawing changes pixels rather than creating accessible text nodes for every shape, so equivalent content may be needed elsewhere. ARIA labels supply accessible naming when native text does not do so, but adding a role cannot manufacture all the keyboard behavior of a native control. Meaningful source order remains useful when styles fail or a screen reader navigates the page.

4. A complete document skeleton

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Practical lessons in web programming">
  <title>Web Programming Handbook</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <a href="/">Web Handbook</a>
    <nav aria-label="Primary navigation">
      <a href="/lessons">Lessons</a>
      <a href="/practice">Practice</a>
    </nav>
  </header>
  <main id="content">
    <article>
      <h1>Understanding Semantic HTML</h1>
      <p>Semantic elements communicate the role of their content.</p>
    </article>
  </main>
  <footer><p>&copy; 2026 Web Handbook</p></footer>
</body>
</html>

The doctype requests standards mode. charset lets bytes be decoded correctly. The viewport declaration lets mobile browsers use the device width. lang assists pronunciation and language-aware tools. The title names the document in tabs and history, while the visible subject normally appears in an h1.

The browser parses markup into a tree. Invalid nesting can trigger error recovery and produce a DOM different from the source a developer expected. Validate markup and inspect the resulting DOM rather than relying on automatic repair.

5. Headings and landmarks

Heading levels describe containment. An h2 begins a subsection of the h1; an h3 begins a subsection of that h2. CSS can change appearance without damaging this hierarchy.

Element	Appropriate use
`header`	Introductory content for a page or section
`nav`	A major group of navigation links
`main`	The page's dominant content
`article`	A composition that can stand independently
`section`	A thematic grouping, normally with a heading
`aside`	Related but secondary content
`footer`	Closing information for a page or section

These elements are not interchangeable layout boxes. A section should express a meaningful region; a div remains appropriate when no semantic element fits.

6. Text, lists and links

Use paragraphs for prose, ol when sequence matters, ul when it does not and dl for name-description groups. strong conveys importance and em conveys stress emphasis; they are not merely bold and italic commands.

Link text should describe its destination. “Read the accessibility guide” communicates more than “click here,” particularly when links are listed out of context. A root-relative URL such as /courses/html starts at the current origin, while courses/html starts relative to the current document path.

Use an anchor for navigation and a button for an action. Making a div clickable does not automatically provide focus, keyboard activation, a role or an accessible name.

7. Images and responsive sources

Alternative text communicates an image's purpose in context:

<img src="request-flow.png"
     alt="Browser sends an HTTP request to a server, which returns a response"
     width="960" height="540">

If adjacent prose already explains the image, shorter text may avoid repetition. A decorative flourish uses alt=""; omitting alt can cause assistive software to announce the filename. Intrinsic width and height let the browser reserve the aspect ratio and reduce layout movement.

<picture>
  <source media="(min-width: 900px)" srcset="campus-wide.webp">
  <img src="campus-small.webp" alt="Students working in a programming laboratory">
</picture>

picture allows source selection for art direction or format support. Use figure and figcaption when media and its caption form a self-contained unit.

8. Accessible data tables

Tables represent relationships between rows and columns; they should not be used for page layout.

<table>
  <caption>Workshop schedule</caption>
  <thead>
    <tr><th scope="col">Day</th><th scope="col">Topic</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">Monday</th><td>HTML semantics</td></tr>
    <tr><th scope="row">Tuesday</th><td>Accessible forms</td></tr>
  </tbody>
</table>

caption identifies the table, th marks header cells and scope clarifies whether a simple header applies to a row or column. thead, tbody and tfoot group rows. rowspan and colspan can express grouped relationships, but excessive merging makes a table difficult to understand and adapt to small screens.

9. Audio, video and timed text

<video controls width="640" poster="lesson-cover.jpg">
  <source src="lesson.webm" type="video/webm">
  <source src="lesson.mp4" type="video/mp4">
  <track kind="captions" src="lesson-en.vtt" srclang="en" label="English" default>
  <p><a href="lesson.mp4">Download the lesson video</a>.</p>
</video>

Multiple sources allow format selection. controls exposes playback controls. Captions represent dialogue and meaningful sounds; subtitles primarily translate dialogue. Important prerecorded audio may also need a transcript. Autoplay with sound creates usability problems and is commonly blocked.

10. Iframes and embedded content

An iframe creates a nested browsing context. Give it a descriptive title and only required permissions:

<iframe src="https://maps.example/embed/campus"
        title="Map showing the training centre"
        loading="lazy"
        sandbox="allow-scripts">
</iframe>

sandbox restricts capabilities and tokens selectively restore them. The allow attribute controls selected features. Third-party embeds introduce privacy, performance and security concerns. Their documents may also be constrained by the same-origin policy.

11. Canvas and SVG

Canvas is a script-controlled bitmap: drawing changes pixels and individual shapes do not become DOM nodes. It suits rapidly redrawn scenes, image processing and pixel-oriented work. SVG represents graphics as elements. Shapes remain scalable, stylable and individually addressable.

Requirement	Canvas	SVG
Representation	Pixels	Vector elements
Scaling	Can become blurry	Remains sharp
Per-shape DOM access	No	Yes
Frequent large redraws	Often suitable	Many nodes can become expensive
Semantic structure	Requires alternatives	Elements can carry titles and descriptions

Choose according to interaction, scale, accessibility and performance rather than assuming one is always faster.

12. Native semantics, ARIA and microdata

Prefer native elements. A button already supports focus and keyboard activation; role="button" on a div supplies only a role and leaves behavior to the developer. ARIA can add names, descriptions, states and relationships when native HTML cannot express them, but it should not contradict native semantics.

Microdata attaches machine-readable properties to visible content using itemscope, itemtype and itemprop. It describes data; it does not replace ordinary structure or accessible text. Geolocation is a permission-controlled browser API, not an HTML tag.

13. Practical considerations

title names the document or tab; h1 identifies the visible main heading.
Heading levels communicate hierarchy, not font size.
main holds dominant content; article holds a self-contained composition.
Empty alternative text is correct for decorative images, not informative ones.
th establishes a header relationship; bold content in td does not.
Canvas stores pixels, whereas SVG retains shape elements.
An iframe creates another browsing context and needs a useful title.
ARIA does not automatically supply keyboard behavior.
A button performs an action; an anchor navigates.
Browser geolocation requires permission and JavaScript.