HTML5 New Features

HTML5 isn’t just an upgrade — it’s a reimagination. It introduced modern elements, smarter forms, richer interactivity, and built-in features developers used to rely on JavaScript or plugins for. Let’s explore some of the most exciting and practical additions.

HTML5 introduced several new <input> types that make form validation and interaction smoother and more semantic.

Examples of New Input Types:

<form>
  Date: <input type="date"><br>
  Email: <input type="email"><br>
  Number: <input type="number" min="1" max="10"><br>
  Range: <input type="range" min="0" max="100"><br>
  Color: <input type="color"><br>
  Search: <input type="search">
</form>

[ Browser renders appropriate controls: calendar, slider, etc. ]

These input types improve user experience and reduce the need for custom scripts.

With HTML5, you can store data on the user's browser — no server required. This is useful for saving preferences, carts, or game scores.

Storing and Retrieving Data

<button onclick="saveCherry()">Save Cherry</button>
<button onclick="loadCherry()">Load Cherry</button>
<p id="output"></p>

<script>
function saveCherry() {
  localStorage.setItem('fruit', 'Cherry');
}

function loadCherry() {
  const fruit = localStorage.getItem('fruit');
  document.getElementById('output').innerText = fruit ? 'Saved: ' + fruit : 'Nothing saved yet.';
}
</script>

[ Click "Save Cherry" → then "Load Cherry" → Text updates with saved value ]

Make any HTML element editable — without a form or JavaScript. Perfect for note-taking, CMS interfaces, or quick content testing.

<p contenteditable="true">You can edit this banana fact right in the browser.</p>

[ You can click and type directly inside the paragraph ]

Custom attributes starting with data- let you store extra information right in your HTML elements — ideal for dynamic content, tooltips, or JavaScript hooks.

<div id="fruitBox" data-fruit="apple" onclick="showFruit()">
  Click me to see what's inside!
</div>

<script>
function showFruit() {
  const box = document.getElementById("fruitBox");
  alert("The fruit is: " + box.dataset.fruit);
}
</script>

[ Clicking the box shows “The fruit is: apple” ]

HTML5 made the web smarter, leaner, and more user-friendly. Here’s what you’ve unlocked today:

• Use of new <input> types for better UX
• Storing data with localStorage
• Editable content using contenteditable
• Dynamic attributes with data-*
• A clearer understanding of HTML5 vs HTML4

Choose the option that lists all and only the correct statements.

1. Making text fields editable inline
2. Allowing users to edit content directly on the page
3. Making a whole page editable
4. Automatically saving edits to the server

Choose the option that lists all and only the correct statements.

1. Built-in support for multimedia
2. Improved semantic elements like section and article
3. Better form input types and validation
4. Removal of all CSS usage

Coming up: We’ll explore how HTML5 works hand-in-hand with modern CSS and JavaScript to create rich, app-like user experiences — all in the browser.