Week 7: Meaningful Structure and Media

Learn to structure pages semantically and embed audio, video, and other content.

Explore Chapter 7

Chapter 7: Adding Meaning and Media

Introduction to Semantic HTML

Semantic HTML refers to using HTML elements that accurately describe the meaning and structure of the content they contain, rather than just focusing on presentation.

Why Use Semantic HTML?

Accessibility: Screen readers and assistive technologies use semantic elements to understand the page structure and navigate content effectively for users with disabilities.
SEO (Search Engine Optimization): Search engines can better understand the context and importance of different parts of your content, potentially improving search rankings.
Maintainability: Semantic markup makes the code clearer and easier for developers (including your future self) to understand and maintain.
Clarity: Using tags like `
`, `
`, and `
` clearly defines the purpose of different sections.

Instead of relying solely on generic containers like `<div>` and `<span>` for everything, semantic HTML encourages using tags that convey meaning.

Common Semantic Structural Elements

<header>: Represents introductory content for its nearest ancestor sectioning content or sectioning root element. Often contains headings, logos, navigation, search forms.
<nav>: Represents a section of a page whose purpose is to provide navigation links (either within the current document or to other documents).
<main>: Represents the dominant content of the `<body>` of a document. There should only be one `<main>` element per page.
<article>: Represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g., a forum post, a magazine or newspaper article, a blog entry).
<section>: Represents a generic standalone section of a document, which doesn't have a more specific semantic element to represent it. Typically includes a heading.
<aside>: Represents a portion of a document whose content is only indirectly related to the document's main content (e.g., sidebars, pull quotes, advertising).
<footer>: Represents a footer for its nearest ancestor sectioning content or sectioning root element. Often contains authorship information, copyright data, links to related documents.

Example Layout Structure

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Semantic Layout Example</title>
</head>
<body>

  <header>
    <h1>My Awesome Website</h1>
    <nav>
      <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <h2>Main Article Title</h2>
      <p>This is the main content of the page...</p>
      <section>
        <h3>Subsection Title</h3>
        <p>Content within a section of the article.</p>
      </section>
    </article>

    <aside>
      <h3>Related Links</h3>
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
      </ul>
    </aside>
  </main>

  <footer>
    <p>© 2025 My Awesome Website. All rights reserved.</p>
  </footer>

</body>
</html>

Embedding Audio and Video

HTML provides specific elements for embedding audio and video content directly into your web pages.

Audio (`<audio>`)

The `<audio>` element is used to embed sound content.

<audio controls>
  <source src="audio/my-song.mp3" type="audio/mpeg">
  <source src="audio/my-song.ogg" type="audio/ogg">
  Your browser does not support the audio element. <!-- Fallback content -->
</audio>

`controls`: A boolean attribute that displays standard audio controls (play/pause, volume, etc.).
`<source>`: Allows you to specify multiple audio sources. The browser will use the first format it supports. The `src` attribute points to the audio file, and `type` specifies the MIME type of the audio.
Fallback content (text between the tags) is displayed in browsers that don't support the `<audio>` element.
Other attributes include `autoplay`, `loop`, `muted`, `preload`.

Video (`<video>`)

The `<video>` element is used to embed video content.

<video controls width="400" height="300" poster="images/video-poster.jpg">
  <source src="video/my-movie.mp4" type="video/mp4">
  <source src="video/my-movie.webm" type="video/webm">
  <track label="English" kind="subtitles" srclang="en" src="subtitles/my-movie-en.vtt" default>
  Your browser does not support the video tag. <!-- Fallback content -->
</video>

`controls`: Displays standard video controls.
`width` / `height`: Sets the dimensions of the video player (CSS is often preferred for responsive sizing).
`poster`: Specifies an image to be shown while the video is downloading, or until the user hits the play button.
`<source>`: Works like in `<audio>` for providing multiple video formats (e.g., MP4, WebM, Ogg).
`<track>`: Used to specify timed text tracks (like subtitles or captions). Attributes include `kind`, `src`, `srclang`, `label`, `default`.
Other attributes include `autoplay`, `loop`, `muted`, `preload`.

Embedding Other Content (<iframe>)

An `<iframe>` (Inline Frame) is used to embed another HTML document within the current one. This is commonly used for embedding maps, videos from third-party sites (like YouTube), advertisements, or other external content.

<!-- Embedding a YouTube Video -->
<iframe width="560" height="315"
        src="https://www.youtube.com/embed/dQw4w9WgXcQ"
        title="YouTube video player"
        frameborder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen>
</iframe>

<!-- Embedding a Google Map -->
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d..."
        width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy">
</iframe>

Key Attributes of <iframe>:

`src`: Specifies the URL of the page to embed.
`width` / `height`: Define the dimensions of the frame (CSS is often preferred).
`title`: Provides a description of the frame's content for accessibility. Important!
`frameborder`: (Deprecated, use CSS `border` instead) Specifies whether to display a border around the iframe (0 = no border, 1 = border).
`allow`: Specifies a feature policy for the iframe (e.g., what browser features it can access like camera, microphone, fullscreen).
`allowfullscreen`: A boolean attribute that allows the iframe content to go fullscreen.
`loading="lazy"`: A modern attribute that suggests the browser should defer loading the iframe until it's close to the viewport, improving initial page load performance.

Be cautious when embedding content from untrusted sources using iframes, as it can pose security risks.