HTML5 was a big leap forward. It introduced a bunch of new features that made HTML more powerful, more semantic, and more fun to write. Let me walk you through some of the best ones.
New HTML5 Elements
HTML5 added semantic tags like <article>, <section>, <nav>, <header>, <footer>, and <aside> that we already covered. It also added <figure> and <figcaption> for marking up images with captions, and <mark> for highlighted text.
<figure>
<img src="photo.jpg" alt="Sunset over the ocean">
<figcaption>A beautiful sunset at the beach</figcaption>
</figure>
Native Form Validation
Before HTML5, you needed JavaScript to validate forms. Now you can use attributes like required, minlength, maxlength, pattern, min, and max directly in your HTML. The browser handles the validation and shows error messages automatically.
<input type="email" name="email" required>
<input type="text" name="username" minlength="3" maxlength="20" required>
<input type="number" name="age" min="13" max="120">
Data Attributes
Custom data-* attributes let you store extra information in HTML elements. JavaScript can read these values easily. They are perfect for storing IDs, configuration, or any data that does not have a dedicated attribute.
<button data-user-id="42" data-role="admin">Edit Profile</button>
The Picture Element
<picture> lets you serve different images for different screen sizes or formats. You provide multiple <source> options, and the browser picks the best one. Great for responsive images and modern formats like WebP.
<picture>
<source srcset="photo.webp" type="image/webp">
<source srcset="photo.jpg" type="image/jpeg">
<img src="photo.jpg" alt="A scenic view">
</picture>
Figure and Figcaption
<figure> wraps self-contained content like images, diagrams, or code snippets. <figcaption> adds a caption. The two together create a semantic unit that keeps the caption tied to the content, even if the layout shifts.