HTML5 New Elements And Features

HTML5 introduced many new elements and features that make coding easier, more semantic, and more powerful. These help developers build modern, accessible, and media-rich websites.

Table of Contents

New Semantic Elements

HTML5 added elements that describe the structure of content more clearly, both to the browser and developers. It improves:

Code readability
Accessibility (screen readers)
SEO (search engines)

Element	Description
`<header>`	Introduces the site or section, often includes logo, navigation, etc.
`<main>`	Holds the main content of the page, excluding header/footer.
`<section>`	Groups related content inside an article (e.g. subsections).
`<article>`	A self-contained piece of content (e.g. blog post, news article).
`<footer>`	Bottom of page or article; includes copyright, contact, or nav links.
`<nav>`	Defines navigation links (e.g. menus, table of contents).
`<aside>`	Sidebar or complementary info (e.g. ads, related links, author bio).
	Used inside `<main>` when the aside content is related to the main content
	Used outside `<main>` when the aside is site-wide or not directly related to the specific content

Example:

<header>
  <h1>My Awesome Blog</h1>
  <nav>
      <a href="#">Home</a> |
      <a href="#">Articles</a> |
      <a href="#">About</a>
    </nav>
</header>

<main>
  <article>
    <h2>First Post</h2>
    <p>Hello readers!</p>
    
    <section>
        <h3>First post list</h3>
        <ul>
          <li>List item 1</li>
          <li>List item 2</li>
          <li>List item 3</li>
        </ul>
      </section>      
  </article>    
</main>

<aside>
      <h4>Related Articles</h4>
      <ul>
        <li><a href="#">Article 2</a></li>
        <li><a href="#">Article 3</a></li>
      </ul>
</aside>

<footer>
  <p>© 2025 My Awesome Blog</p>
</footer>

<header>
  <h1>My Awesome Blog</h1>
  <nav>
      <a href="#">Home</a> |
      <a href="#">Articles</a> |
      <a href="#">About</a>
    </nav>
</header>

<main>
  <article>
    <h2>First Post</h2>
    <p>Hello readers!</p>
    
    <section>
        <h3>First post list</h3>
        <ul>
          <li>List item 1</li>
          <li>List item 2</li>
          <li>List item 3</li>
        </ul>
      </section>      
  </article>    
</main>

<aside>
      <h4>Related Articles</h4>
      <ul>
        <li><a href="#">Article 2</a></li>
        <li><a href="#">Article 3</a></li>
      </ul>
</aside>

<footer>
  <p>© 2025 My Awesome Blog</p>
</footer>

Some more Semantic Elements are:

<figure> – Represents self-contained content, often with a caption.
<figcaption> – Caption for a <figure>.
<mark> – Highlights text (like a highlighter).
<time> – Represents a date or time.
<progress> – Displays a progress bar.
<meter> – Shows a scalar measurement (e.g. disk usage, battery level).
<summary> – Summary or label for a <details> element.
<details> – Disclosure widget to show/hide additional content.
<dialog> – Defines a dialog box or popup window.
<address> – Defines Contact information

Media Elements

HTML5 brought built-in support for audio and video without plugins.

Element	Description
`<audio>`	Embeds audio content.
`<video>`	Embeds video content.
`<source>`	Defines multiple media resources (used with `<audio>` and `<video>`).
`<track>`	Adds subtitles or captions to media.

Example:

<video width="300" controls>
  <source src="demo.mp4" type="video/mp4">
  <p>Your browser does not support video. <a href="demo.mp4">Download</a></p>
</video>

<video width="300" controls>
  <source src="demo.mp4" type="video/mp4">
  <p>Your browser does not support video. <a href="demo.mp4">Download</a></p>
</video>

Graphics Elements

HTML5 supports <canvas> for drawing and <svg> for vector graphics.

<canvas> → A drawing surface for 2D graphics via JavaScript.
<svg> → Inline scalable vector graphics (SVG was adopted more directly into HTML5).

Example:

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000"></canvas>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000"></canvas>

Form Enhancements

HTML5 added new input types that improve user experience and validation.

Input Types	Example
`email`	`<input type="email">`
`url`	`<input type="url">`
`tel`	`<input type="tel">`
`date`	`<input type="date">`
`range`	`<input type="range">`
`color`	`<input type="color">`
`search`	`<input type="search">`

Example:

<form>
  <label for="email">Email:</label>
  <input type="email" id="email" required>
  
  <label for="url">Website:</label>
  <input type="url" id="url">
  
  <label for="range">Select range:</label>
  <input type="range" id="range" min="0" max="10">
</form>

<form>
  <label for="email">Email:</label>
  <input type="email" id="email" required>
  
  <label for="url">Website:</label>
  <input type="url" id="url">
  
  <label for="range">Select range:</label>
  <input type="range" id="range" min="0" max="10">
</form>

Practice Challenge

Create a page with <header>, <article>, and <footer>.
Add a form with an email and date input.
Insert a <canvas> element.