HTML5 Elements
New Elements in HTML5
Section titled “New Elements in HTML5”HTML5 introduced a range of new elements designed to improve document structure, semantics, forms, multimedia handling, and graphics capabilities.
Semantic/Structural Elements
Section titled “Semantic/Structural Elements”These elements provide more meaningful ways to structure your page content, benefiting accessibility, SEO, and code clarity compared to relying solely on generic <div> elements.
| Tag | Description |
|---|---|
<header> | Defines introductory content for a document or section (e.g., logo, navigation, heading). |
<footer> | Defines a footer for a document or section (e.g., copyright info, contact links). |
<nav> | Defines a block of major navigation links. |
<main> | Defines the main, unique content of the document. There should only be one <main> element per page (not nested within article, aside, header, footer, or nav). |
<article> | Defines self-contained, independently distributable content (e.g., blog post, news story, forum comment). |
<section> | Defines a thematic grouping of content, typically with a heading. More generic than <article> or <nav>. |
<aside> | Defines content tangentially related to the main content around it (e.g., sidebar, pull quote, related links). |
<figure> | Defines self-contained content, often referenced from the main text (e.g., image, diagram, code snippet). |
<figcaption> | Defines a caption or legend for a <figure> element. |
<time> | Defines a specific period in time or a date. Can include a datetime attribute for machine-readable format. |
<mark> | Defines marked or highlighted text for reference or notation purposes. |
Using these elements appropriately makes your HTML more descriptive and understandable to both browsers and developers.
Interactive Elements
Section titled “Interactive Elements”| Tag | Description |
|---|---|
<details> | Defines additional details that the user can view or hide on demand (creates a disclosure widget). |
<summary> | Defines the visible heading for a <details> element. Clicking the summary toggles the visibility of the details. |
<dialog> | Defines a dialog box, modal, or other interactive component, such as an inspector or window. Can be controlled via JavaScript (showModal(), close()). |
New Form Elements and Input Types
Section titled “New Form Elements and Input Types”HTML5 significantly enhanced forms with new elements and input types for better user experience and validation.
New Form Elements:
Section titled “New Form Elements:”| Tag | Description |
|---|---|
<datalist> | Provides an ‘autocomplete’ feature for <input> elements. Contains <option> elements with pre-defined suggestions. |
<output> | Represents the result of a calculation or user action (often updated via JavaScript). |
<progress> | Displays the progress of a task (e.g., file upload, loading state). |
<meter> | Represents a scalar measurement within a known range (a gauge), like disk usage or password strength. |
Deprecated Form Elements:
Section titled “Deprecated Form Elements:”The <keygen> element, intended for generating key pairs, is now deprecated and should not be used due to lack of browser support and security concerns.
New Input Types:
Section titled “New Input Types:”As covered previously, HTML5 added numerous <input> types:
email,url,telnumber,rangedate,time,datetime-local,month,weeksearch,color,file
New Input Attributes:
Section titled “New Input Attributes:”Attributes like required, pattern, min, max, step, multiple, placeholder, autocomplete, autofocus, list (for <datalist>), and form-related attributes (formaction, formenctype, etc.) provide enhanced control and validation.
Refer to the HTML Forms chapters for detailed usage.
Graphics Elements
Section titled “Graphics Elements”| Tag | Description |
|---|---|
<canvas> | Provides a resolution-dependent bitmap canvas for drawing graphics, game graphs, or other visual images on the fly, usually with JavaScript. |
<svg> | Defines a container for Scalable Vector Graphics (SVG). SVG uses an XML-based format to describe vector images, which scale without losing quality. |
Both enable powerful graphical capabilities directly within HTML.
Media Elements
Section titled “Media Elements”| Tag | Description |
|---|---|
<audio> | Embeds sound content (music or other audio streams). |
<video> | Embeds video content. |
<source> | Specifies multiple media resources for <video> or <audio>, allowing the browser to choose the most suitable format. |
<track> | Specifies timed text tracks (like subtitles or captions) for <video> or <audio>. |
These elements provide native browser support for multimedia, replacing the need for obsolete plugins like Flash.
Other Notable Elements
Section titled “Other Notable Elements”| Tag | Description |
|---|---|
<wbr> | Defines a word break opportunity – a position within text where the browser may optionally break a line. |
<bdi> | Isolates a part of text that might be formatted in a different direction (left-to-right or right-to-left) from other text surrounding it. Useful for embedding user-generated content. |
<ruby>, <rt>, <rp> | Used for displaying ruby annotations, common in East Asian typography (e.g., showing pronunciation above characters). |