HTML Lists, Audio, Video, iframe & HTML5 Elements Explained

Welcome to the Complete HTML Course. In this post, you will learn how to structure content properly using lists, how to add media like audio and video, how iframes work, and the basics of modern HTML5 elements.

This post covers Lesson 13 to Lesson 15: HTML Lists, Media Elements, iframe, and HTML5 Basics with live editable examples.

Lesson 13: HTML Lists (Clean Content Structure)

Lists are used to display information in a clear and readable format. They are heavily used in menus, sidebars, documentation, and blog content.

Unordered List (<ul>)

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Ordered List (<ol>)

<ol>
  <li>Learn HTML</li>
  <li>Learn CSS</li>
  <li>Learn JavaScript</li>
</ol>

Description List (<dl>)

<dl>
  <dt>HTML</dt>
  <dd>Structure of web pages</dd>
  <dt>CSS</dt>
  <dd>Styling and layout</dd>
</dl>

Lesson 14: HTML Media (Audio & Video)

HTML allows you to embed media directly into web pages without using third-party plugins.

Audio Element

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  Your browser does not support audio.
</audio>

Video Element

<video controls width="300">
  <source src="video.mp4" type="video/mp4">
  Your browser does not support video.
</video>

controls attribute shows play, pause and volume buttons.

Lesson 15: iframe & HTML5 Basics

The iframe element is used to embed another webpage inside your current page.

iframe Example

<iframe src="https://maxoncodes.com" width="100%" height="200"></iframe>

HTML5 Semantic Elements (Complete Real-World Example)

HTML5 semantic elements clearly define the structure and meaning of a web page. They help SEO, accessibility, and make your code easier to understand and maintain.

Complete Semantic Page Layout

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Semantic HTML Example</title>
</head>
<body>

  <header>
    <h1>MaxonCodes</h1>
    <p>Learn Web Development the Right Way</p>
  </header>

  <nav>
    <a href="#">Home</a> |
    <a href="#">Courses</a> |
    <a href="#">Blog</a> |
    <a href="#">Contact</a>
  </nav>

  <main>

    <section>
      <h2>HTML Course</h2>
      <p>
        This section contains lessons related to HTML basics
        and advanced concepts.
      </p>
    </section>

    <article>
      <h2>Why Semantic HTML Matters</h2>
      <p>
        Semantic HTML improves SEO, accessibility,
        and makes your code professional.
      </p>
    </article>

  </main>

  <footer>
    <p>© 2026 MaxonCodes. All rights reserved.</p>
  </footer>

</body>
</html>

Explanation of Each Semantic Tag

<header> – Top section of a page or section. Usually contains logo, title, or intro content.
<nav> – Holds main navigation links. Helps search engines understand site structure.
<main> – The primary content of the page. Only one <main> per page.
<section> – Groups related content with a heading. Used for chapters or topic blocks.
<article> – Independent, reusable content. Blog posts, news articles, comments.
<footer> – Bottom section for copyright, links, or extra info.

SEO Tip:
Search engines understand semantic tags better than random <div> containers.

Warning!
Do not use semantic tags just for styling. Use CSS for design, HTML for structure.

Success! You now understand how real websites are structured using HTML5 semantic elements.

HTML5 elements improve SEO, accessibility, and code readability.

Common Beginner Mistakes

Using lists for layout
Autoplay media without user consent
Overusing iframes

What You Learned in Beginner Post #5

All types of HTML lists
Embedding audio and video
Using iframe safely
HTML5 basics

🎉 Great job!
You’ve successfully completed Beginner Post #6. Consistency is what turns beginners into pros. Practice daily, then move ahead with confidence.

Next Beginner Post

🚀 Level Up: Next HTML Lesson: Accessibility, SEO & Performance →

Maxoncodes