Author
HTML5 introduces semantic tags (<header>, <footer>, <article>, <section>), built-in multimedia support with <video> and <audio>, drawing via <canvas>, enhanced forms, APIs like Web Storage and Geolocation, and better mobile responsiveness using <meta name="viewport">.
Semantic elements clearly describe their meaning (e.g., <article>, <nav>, <header>).
Non-semantic elements like <div> and <span> do not convey meaning.
Semantic elements improve accessibility and SEO.
data-* attribute in HTML5.data-* attributes store custom data in HTML elements for use with JavaScript.
Example:
<div data-user-id="101" data-role="admin">User Info</div>
<script>
console.log(document.querySelector('div').dataset.userId);
</script>
<article> and <section>?<article> represents self-contained, independent content like a blog post.
<section> groups related content thematically, like chapters or sections in a document.
contenteditable attribute work?When contenteditable="true" is applied to an element, users can edit its text directly in the browser.
<div contenteditable="true">Edit this text!</div>
required – Field must not be emptypattern – Defines regex for inputmin, max, maxlength – Restrict values or lengthtype – Enforces format (e.g., email, number)<input type="email" required>
<input type="text" pattern="[A-Za-z]{3,}">
<figure> and <figcaption>?They group and describe visual or code elements.
<figure>
<img src="chart.png" alt="Sales Chart">
<figcaption>Quarterly Sales Report</figcaption>
</figure>
<meta name="viewport"> tag make a page responsive?It adjusts the layout for mobile devices.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
ARIA (Accessible Rich Internet Applications) improves accessibility by defining roles and labels for assistive technologies.
Example:
<button aria-label="Close">X</button>
defer and async in <script> tags| Attribute | Execution Time | Order Maintained |
|---|---|---|
async |
Executes as soon as loaded | ❌ No |
defer |
Executes after HTML parsing | ✅ Yes |
<script async src="analytics.js"></script>
<script defer src="app.js"></script>
| Storage | Persistence | Capacity |
|---|---|---|
| localStorage | Until manually cleared | ~10MB |
| sessionStorage | Until tab closed | ~5MB |
localStorage.setItem('user', 'John');
sessionStorage.setItem('theme', 'dark');
<canvas> element?It provides a 2D drawing surface for graphics using JavaScript.
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 50, 50);
</script>
<canvas> and <svg>| Feature | <canvas> |
<svg> |
|---|---|---|
| Type | Pixel-based | Vector-based |
| Scalability | Loses quality on zoom | Infinite scaling |
| Use Case | Games, animations | Charts, logos |
<!DOCTYPE html>webkit-, moz-)Void (self-closing) elements don’t have closing tags.
Examples: <br>, <img>, <hr>, <meta>, <input>, <link>
Attributes usable on any HTML element:
id, class, style, title, lang, hidden, tabindex, draggable, contenteditable
<script>, <link>, and <style>?| Tag | Purpose |
|---|---|
<script> |
Adds or links JavaScript |
<link> |
Links external CSS or files |
<style> |
Embeds internal CSS |
<details> and <summary> element?They create collapsible sections.
<details>
<summary>Show More</summary>
<p>Hidden content here.</p>
</details>
<picture> tag used for?It helps serve responsive images for different devices.
<picture>
<source srcset="large.jpg" media="(min-width:800px)">
<img src="small.jpg" alt="Example Image">
</picture>
images/pic.jpghttps://example.com/images/pic.jpg<button> and <input type="button">?<button> can contain HTML inside (e.g., icons or styled text).
<input type="button"> is self-closing and text-only (via value).
<fieldset> and <legend>?Used to group related form fields and provide labels.
<fieldset>
<legend>Personal Info</legend>
<input type="text" placeholder="Name">
</fieldset>
<template> tag?It stores HTML markup that is not rendered immediately and can be cloned dynamically using JavaScript.
<template id="card">
<div class="card">Hello</div>
</template>
Developers can define new tags using Web Components.
class MyCard extends HTMLElement {}
customElements.define('my-card', MyCard);
They add structured data for SEO using Schema.org.
<div itemscope itemtype="<https://schema.org/Person>">
<span itemprop="name">John</span>
</div>
<noscript> tag?It displays fallback content when JavaScript is disabled.
<noscript>Your browser does not support JavaScript.</noscript>