Html5 new features and apis
What's New in HTML5?
HTML5 introduced major improvements to HTML, including new semantic elements, multimedia support, form enhancements, and powerful JavaScript APIs — eliminating the need for many third-party plugins.
New Semantic Elements
html
<header>Site header</header>
<nav>Navigation</nav>
<main>Main content</main>
<article>Self-contained content</article>
<section>Thematic grouping</section>
<aside>Sidebar content</aside>
<footer>Site footer</footer>
<figure>
<img src="photo.jpg" alt="A description">
<figcaption>Photo caption</figcaption>
</figure>
<details>
<summary>Click to expand</summary>
<p>Hidden content revealed on click</p>
</details>Native Multimedia
html
<!-- Video -->
<video controls width="600">
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
Your browser does not support video.
</video>
<!-- Audio -->
<audio controls>
<source src="song.mp3" type="audio/mpeg">
</audio>No need for Flash or other plugins.
New Form Input Types
html
<input type="email" placeholder="user@example.com">
<input type="url" placeholder="https://...">
<input type="tel" placeholder="+380...">
<input type="number" min="0" max="100" step="5">
<input type="range" min="0" max="100">
<input type="date">
<input type="time">
<input type="color">
<input type="search">New Form Attributes
html
<input type="text" required placeholder="Name" autofocus>
<input type="email" pattern="[a-z]+@[a-z]+\.[a-z]+" autocomplete="email">
<form novalidate>...</form>New JavaScript APIs
| API | Description |
|---|---|
| Canvas API | 2D drawing via <canvas> element |
| Geolocation | Get user's geographic location |
| Web Storage | localStorage and sessionStorage |
| Web Workers | Run scripts in background threads |
| WebSocket | Full-duplex communication with servers |
| Drag and Drop | Native drag-and-drop functionality |
| History API | Manipulate browser history (pushState, replaceState) |
| Fetch API | Modern replacement for XMLHttpRequest |
| Intersection Observer | Detect element visibility in viewport |
| Service Workers | Offline support and background sync |
Canvas vs SVG
| Feature | Canvas | SVG |
|---|---|---|
| Type | Raster (pixel-based) | Vector (shape-based) |
| Scalability | Loses quality on zoom | Scales perfectly |
| DOM access | No (just pixels) | Yes (each shape is a DOM node) |
| Best for | Games, image editing, data visualization | Icons, logos, illustrations, charts |
| Event handling | Manual (coordinate-based) | Built-in (per element) |
Important:
HTML5 isn't just about new tags — it's a platform with powerful APIs. The semantic elements improve accessibility and SEO, while the JavaScript APIs enable rich web applications without plugins.
Short Answer
Interview readyPremium
A concise answer to help you respond confidently on this topic during an interview.