New tags and features you should know
HTML5 added a batch of new tags and features that make pages more semantic, more media-friendly, and easier to build without plugins. This page runs through the ones you are most likely to use.
What is HTML5?
HTML5 is the current version of Hypertext Markup Language – the code that describes web pages. It brings semantic elements, built-in graphics and multimedia support, improved forms, and a set of APIs for things like offline storage and drag-and-drop.
Semantic elements
One of the most useful additions is semantic elements. They tell browsers, search engines, and assistive technologies what kind of content they contain, rather than leaving everything as anonymous <div> boxes.
Key semantic elements
<header>: Introductory content or navigational links.<footer>: Footer for a document or section.<nav>: Navigational links.<article>: Independent, self-contained content.<section>: A section in a document.<aside>: Content indirectly related to the main content.
Example of using semantic elements
<article>
<header>
<h1>HTML5 Rocks!</h1>
</header>
<section>
<p>Introduction to HTML5...</p>
</section>
<aside>
<h2>Related Topics</h2>
<!-- Related links or content -->
</aside>
<footer>
<p>Written by Jane Doe</p>
</footer>
</article>Graphics: canvas and SVG
HTML5 adds the <canvas> element for drawing graphics with JavaScript, and lets you embed Scalable Vector Graphics (SVG) directly in your HTML.
Canvas example
<canvas id="myCanvas" width="200" height="100"></canvas>You draw on the canvas with JavaScript – the element itself is just a blank surface.
SVG integration
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>Multimedia: audio and video
Embedding audio and video got much simpler with the <audio> and <video> elements – no Flash required.
Audio example
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>Video example
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>Form enhancements
HTML5 added new input types and attributes that give browsers more to work with – built-in validation, date pickers, sliders, and so on.
New input types
type="email"type="date"type="range"type="search"
Example of new form elements
<form>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">
<input type="submit" value="Submit">
</form>New APIs and global attributes
HTML5 also introduced APIs for offline web apps, drag-and-drop, and more. Global attributes like contenteditable and data-* (for custom data attributes) extend what you can do in markup.
Contenteditable attribute
<div contenteditable="true">You can edit this text.</div>Drag and drop API
HTML5 adds attributes and events that make drag and drop easier to implement.
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)">Why HTML5 matters
HTML5 is not just a list of new tags. It reflects how the web actually gets used now – multimedia, interactive forms, and meaningful structure, without relying on plugins or endless <div> soup.
Best practices with HTML5
- Use semantic elements wisely: Pick the element that matches the content, not just the one that looks right in CSS.
- Graceful degradation: Make sure pages still work in browsers that do not fully support HTML5 features.
- Validate your code: Use tools like the W3C Markup Validation Service to check your HTML.
HTML5 gives you the building blocks for richer, more structured pages. Learn the semantic tags first – they are the ones you will use on almost every site you build.