HTML5 Overview | Modern HTML Features & Elements

Introduction to HTML5

HTML5 was a major evolution of HTML that introduced and standardized features for creating more structured, interactive, and multimedia-rich webpages without relying as heavily on plugins and older presentation-based markup.

HTML5 expanded the capabilities of HTML with semantic elements, native audio and video, improved forms, graphics, and features designed for modern websites and web applications. Although the term HTML5 is still widely used, HTML is now maintained as a continuously updated Living Standard.

Simpler Document Structure

HTML5 simplified several parts of a basic HTML document. The document type declaration became much shorter, and commonly used declarations such as character encoding were also simplified.

HTML5 Doctype

<!doctype html>

The short <!doctype html> declaration tells browsers to render the document in standards mode. Modern HTML documents continue to use this declaration.

Character Encoding

<meta charset="utf-8">

The charset declaration identifies the character encoding used by the document. UTF-8 is the standard choice for modern webpages and supports a very large range of characters and symbols.

Semantic HTML Elements

One of the important developments associated with HTML5 was the introduction of additional semantic elements. Semantic elements describe the purpose or meaning of different parts of a webpage rather than simply defining how they should appear.

Common semantic elements include:

<header>
<nav>
<main>
<section>
<article>
<aside>
<footer>

Using meaningful elements can make HTML easier to understand and maintain while also providing useful structure for browsers and assistive technologies.

Example Semantic Structure

<header>
  <h1>Example Web</h1>
</header>

<nav>
  <a href="/">Home</a>
  <a href="/about.html">About</a>
</nav>

<main>
  <article>
    <h2>Learning HTML</h2>
    <p>HTML provides the structure of a webpage.</p>
  </article>
</main>

<footer>
  <p>&copy; Example Web</p>
</footer>

Native Audio & Video

HTML5 introduced native elements for embedding audio and video directly in webpages. Before native multimedia support became widely available, websites frequently depended on browser plugins to provide similar functionality.

Video

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

Audio

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

The <video> and <audio> elements allow browsers to provide built-in multimedia playback controls without requiring a separate plugin.

Graphics & Drawing

HTML5 also introduced the <canvas> element for creating graphics through scripting. HTML documents can also include SVG graphics, which use markup to describe scalable vector images.

Canvas

<canvas width="400" height="200">
  Your browser does not support the canvas element.
</canvas>

The <canvas> element provides a drawing surface that JavaScript can use to create graphics, animations, charts, games, and other visual content.

SVG

<svg width="100" height="100" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="green"></circle>
</svg>

SVG graphics are resolution-independent, allowing them to scale without losing image quality.

Improved HTML Forms

HTML5 expanded HTML forms with additional input types and attributes that allow browsers to provide more appropriate controls and built-in functionality for collecting user information.

Examples of commonly used input types include:

<input type="email">
<input type="url">
<input type="number">
<input type="date">
<input type="range">
<input type="color">

Depending on the input type and browser, these controls can provide features such as specialized keyboards, date selectors, range controls, color selectors, and built-in form validation.

Form Attributes

Modern forms also support useful attributes such as required, placeholder, pattern, min, max, and autocomplete.

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

Obsolete HTML Features

As HTML evolved, a number of older elements and attributes became obsolete. Many were originally used to control presentation, while others were replaced by newer technologies or better approaches.

For example, older elements such as <font>, <center>, and <frame> should not be used in modern HTML. Presentation should generally be handled with CSS, while modern HTML elements should be used to describe the structure and meaning of content.

Browsers may continue to recognize some obsolete markup for compatibility with older webpages, but browser support does not mean that the markup should be used when creating new pages.

HTML Living Standard

HTML5 is an important part of HTML's history, but modern HTML is no longer developed primarily as a sequence of numbered releases. HTML is maintained by WHATWG as the HTML Living Standard, which is continuously updated as the web platform evolves.

This means that when creating webpages today, the goal is generally to write modern HTML rather than target a particular numbered version such as HTML5. The familiar <!doctype html> declaration remains the standard doctype used for modern HTML documents.

Summary

HTML5 was a major step in the evolution of HTML, introducing and standardizing semantic elements, native multimedia, improved forms, graphics capabilities, simpler document syntax, and features needed by increasingly interactive websites. These developments helped shape the HTML used on the web today.

Modern HTML continues to build on this foundation through the HTML Living Standard, allowing the language to evolve continuously rather than waiting for another numbered HTML version.