Chapters: JavaScript HTML & CSS JSON XML YAML ← Full TOC

🏗️ HTML5 Elements — Document structure, semantic, form, and media elements

HTML5 elements give meaning to web content. Semantic elements like <header>, <nav>, <main>, <article>, and <footer> replace generic <div> for better accessibility and SEO.

📋 Elements, Properties & Values

Element / Property	Syntax / Values	Description
<!DOCTYPE html>	<!DOCTYPE html>	Required first line — declares HTML5 document
<html lang>	<html lang="en">	Root element with language attribute
<head>	<head>...</head>	Document metadata container
<meta charset>	<meta charset="UTF-8">	Character encoding declaration
<meta viewport>	<meta name="viewport" content="width=device-width, initial-scale=1">	Responsive scaling for mobile
<title>	<title>Page Title</title>	Browser tab title and SEO title
<link>	<link rel="stylesheet" href="style.css">	Link external resource (CSS, icon, etc.)
<script>	<script src="app.js" defer></script>	Link JavaScript — use defer for end-of-head
<body>	<body>...</body>	Visible content container
<header>	<header>	Site or section header (semantic)
<nav>	<nav>	Navigation links (semantic)
<main>	<main>	Primary content — only one per page
<article>	<article>	Self-contained content (blog post, news)
<section>	<section>	Thematic group of content
<aside>	<aside>	Sidebar or tangentially related content
<footer>	<footer>	Site or section footer (semantic)
<h1>-<h6>	<h1>Heading</h1>	Headings — h1 once per page for SEO
<p>	<p>Paragraph</p>	Paragraph of text
<a href>	<a href="url" target="_blank">Link</a>	Hyperlink — target=_blank opens new tab
<img>	<img src="img.jpg" alt="description" loading="lazy">	Image — alt required for accessibility
<ul><li>	<ul><li>Item</li></ul>	Unordered list
<ol><li>	<ol><li>Item</li></ol>	Ordered list
<table>	<table><thead><tr><th>...	Table with header row and data rows
<form>	<form method="post" action="/submit">	Form container
<input>	<input type="text" name="x" required placeholder="...">	Form input — many types
<input types>	text/email/password/number/date/checkbox/radio/file/range/search	Input type attribute values
<textarea>	<textarea name="msg" rows="4"></textarea>	Multi-line text input
<select><option>	<select name="lang"><option value="js">JavaScript</option>	Dropdown menu
<button>	<button type="submit">Submit</button>	Clickable button
<label>	<label for="inputId">Name:</label>	Accessible input label
<div>	<div class="container">	Generic block container
<span>	<span class="highlight">text</span>	Generic inline container
<strong><em>	<strong>bold</strong> <em>italic</em>	Bold / italic with semantic meaning
<code><pre>	<pre><code>code here</code></pre>	Code block
<video>	<video src="vid.mp4" controls autoplay muted loop>	HTML5 video
<audio>	<audio src="track.mp3" controls>	HTML5 audio
<canvas>	<canvas id="c" width="400" height="300">	Drawing surface for JavaScript
<svg>	<svg viewBox="0 0 100 100">	Scalable vector graphics inline
<details><summary>	<details><summary>Click to expand</summary>...</details>	Native accordion/disclosure
<dialog>	<dialog id="modal">	Native modal dialog (open with .showModal())
data-* attributes	<div data-id="42" data-user="alice">	Custom data attributes for JavaScript
aria-* attributes	aria-label / aria-hidden / aria-expanded	Accessibility attributes (ARIA)
role attribute	role="button" / role="navigation"	ARIA landmark roles

💡 Example

Save as .html or .css and open in any browser.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="HTML5 semantic structure demo — MyWebUniversity">
  <meta property="og:title" content="HTML5 Demo | MyWebUniversity">
  <link rel="canonical" href="https://www.MyWebUniversity.com/demo.html">
  <title>HTML5 Semantic Demo | MyWebUniversity</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <nav aria-label="Main navigation">
      <a href="/">Home</a>
      <a href="/courses">Courses</a>
      <a href="/about">About</a>
    </nav>
    <h1>MyWebUniversity</h1>
  </header>

  <main>
    <article>
      <h2>Introduction to HTML5</h2>
      <p>HTML5 is the standard markup language for web pages.
         It introduced <strong>semantic elements</strong> for better
         <em>accessibility</em> and SEO.</p>

      <!-- Image with accessibility -->
      <img src="html5-logo.png" alt="HTML5 logo" loading="lazy" width="200">

      <!-- Form with validation -->
      <form method="post" action="/enroll" novalidate>
        <label for="name">Full Name:</label>
        <input type="text" id="name" name="name" required
               placeholder="Alice Smith" autocomplete="name">

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

        <label for="course">Course:</label>
        <select id="course" name="course">
          <option value="js">JavaScript</option>
          <option value="py">Python</option>
          <option value="go">Go</option>
        </select>

        <label for="level">Experience (1-10):</label>
        <input type="range" id="level" name="level" min="1" max="10" value="5">

        <button type="submit">Enroll Now</button>
      </form>
    </article>

    <aside>
      <h3>Quick Links</h3>
      <ul>
        <li><a href="/chapter-30.html">JavaScript</a></li>
        <li><a href="/chapter-32.html">JSON</a></li>
      </ul>

      <!-- Native details/summary accordion -->
      <details>
        <summary>What is semantic HTML?</summary>
        <p>Semantic HTML uses elements that describe their meaning
           to both browsers and developers, improving accessibility.</p>
      </details>
    </aside>
  </main>

  <footer>
    <p>&copy; 2026 MyWebUniversity.com &mdash;
       <a href="/toc1.html">Table of Contents</a></p>
  </footer>

  <script src="app.js" defer></script>
</body>
</html>

🏠 Index | CSS3 & Layout →