HTML5 Semantics & Multimedia

Legacy Review

We previously learned that using <table> for webpage layouts is obsolete. We replaced them with <div> tags. However, building an entire website out of hundreds of `

` tags creates a new problem: Div Soup.

Step 1: The Problem with "Div Soup"

If your header, footer, navigation, and articles are all just <div> tags, the browser, search engines (like Google), and screen readers (for blind users) cannot tell which part of your page is actually important.

HTML5 introduced Semantic Elements. These are tags that act exactly like a <div>, but their names describe their meaning to the machine reading the code.

Step 2: The Core HTML5 Semantic Tags

• <header>: Represents the introductory content or a set of navigational links at the top of a page or section.
• <nav>: Defines a block of major navigation links.
• <main>: Contains the dominant content of the document. There should only be ONE `
  ` tag per page.
• <article>: Represents a self-contained, independent piece of content that makes sense on its own (e.g., a blog post, a news story, a forum comment).
• <section>: Groups related content together (e.g., a "Contact Us" section or an "About Our Team" section). Often contains a heading.
• <aside>: Content indirectly related to the main content (e.g., a sidebar with related links or advertisements).
• <footer>: Contains copyright data, author information, or lower-level links at the bottom of the page.

The Code: A Modern Semantic Layout

<header>
  <h1>Tech Engineering Blog</h1>
</header>

<nav>
  <a href="#home">Home</a> | <a href="#code">Coding</a>
</nav>

<main>
  <article>
    <h2>Why Semantics Matter</h2>
    <p>They drastically improve SEO (Search Engine Optimization).</p>
  </article>
  
  <aside>
    <h3>Related Posts</h3>
    <p>Link to CSS Tutorial...</p>
  </aside>
</main>

<footer>
  <p>© 2026 Tech Blog</p>
</footer>

Output (Styled as a Wireframe):

HEADER <header>

NAVIGATION <nav>

MAIN CONTENT / ARTICLE <article>

SIDEBAR <aside>

FOOTER <footer>

SEO Advantage: If you put your main text inside an <article>, Google's algorithm knows that this is the most valuable text on the page, and will prioritize it in search results over the text found in the <footer> or <aside>.

Step 3: Native Multimedia (Audio)

Before HTML5, embedding a song or a video required clunky third-party plugins like Adobe Flash. HTML5 introduced the <audio> and <video> tags, which allow browsers to play media natively.

The <audio> tag requires the controls attribute if you want the user to see a play/pause button. Inside the tag, we use <source> tags to provide the file. We provide multiple sources because some browsers support MP3, while others prefer OGG format.

The Code:

<audio controls>
  <source src="podcast.mp3" type="audio/mpeg">
  <source src="podcast.ogg" type="audio/ogg">
  <!-- Fallback text if the browser is ancient -->
  Your browser does not support the audio element.
</audio>

Output (Native Browser Player):

Step 4: Native Multimedia (Video)

The <video> tag works exactly like the audio tag, but includes extra attributes for visual presentation.

• width & height: Sets the physical size of the player on the screen.
• controls: Displays the play, pause, volume, and fullscreen buttons.
• poster: Displays an image (like a YouTube thumbnail) before the user clicks play.
• muted: Starts the video with the sound off. (Modern browsers usually block autoplay unless the video is also muted).
• loop: Makes the video start over automatically when it finishes.

The Code:

<video width="100%" controls poster="thumbnail.jpg" muted>
  <source src="lecture.mp4" type="video/mp4">
  <source src="lecture.webm" type="video/webm">
  Your browser does not support the video tag.
</video>

Output (Native Browser Player):

Final Quiz: Test Your HTML5 Logic

Click the buttons below to check your understanding of Semantic tags and Multimedia.

1. What is the primary difference between a <div> and an <article>?

A) An <article> automatically adds a border around the text.

Incorrect. Semantic tags do not inherently change how the page looks; they only change what the code *means*.

B) A <div> is meaningless to search engines, while an <article> explicitly tells search engines "this is an independent, complete piece of content."

Correct! Semantics provide context to machines, vastly improving SEO and screen reader accessibility.

C) An <article> can only contain text, while a <div> can contain images.

Incorrect. An article can contain images, videos, and anything else related to that piece of content.

2. If you want to group several related paragraphs under a specific heading (like a "Contact Info" block), which semantic tag is best?

A) <nav>

Incorrect. `<nav>` is strictly for major navigation links.

B) <aside>

Incorrect. `<aside>` is for content that is only tangentially related to the main flow.

C) <section>

Correct! `<section>` is used to group related thematic content together, usually accompanied by a heading.

3. Look at this code: `<video src="movie.mp4"></video>`. Why will the user be frustrated when viewing this page?

A) Because it is missing the `controls` attribute.

Correct! Without the `controls` attribute, the video will appear on the screen as a static image, and the user will have no play button to start it.

B) Because mp4 is an unsupported format.

Incorrect. MP4 is the most universally supported video format in HTML5.

C) Because it is missing the `loop` attribute.

Incorrect. A video does not need to loop to be functional.

4. What is the purpose of the `poster` attribute in the video tag?

A) It allows the user to download the video.

Incorrect. Downloading is handled by the `download` attribute on anchor tags.

B) It displays a placeholder image (thumbnail) before the video starts playing.

Correct! The `poster` provides a preview image so the user isn't just staring at a black rectangle while the video buffers.

C) It embeds the video inside a picture frame.

Incorrect. It does not alter the physical borders of the video player.

HTML Track Complete!

Congratulations! You have learned the entire structural foundation of the Web. From legacy tables and fonts to modern HTML5 semantics and multimedia. You are now officially ready to move to the presentation layer.

Shall we begin the Introduction to CSS (Cascading Style Sheets) next?