Hidden features of HTML

html

responsive-design

best-practices

semantic-elements

byNikita Barsukov·Feb 9, 2025

Use the <template> tag to efficiently manage dynamic HTML content. This allows preparation of DOM fragments that can be activated and worked with using JavaScript at runtime:

<template id="user-card">
  <!-- Here's our fancy user card template invisible to the naked eye -->
  <div class="card">Username: <span class="name"></span></div>
</template>
<script>
  const userCardTemplate = document.getElementById('user-card').content;
  const newUserCard = userCardTemplate.cloneNode(true);

  // Presto! New user "John Doe" comes to life
  newUserCard.querySelector('.name').innerText = 'John Doe';
  document.body.appendChild(newUserCard);
</script>

This technique streamlines page performance by delaying rendering and keeps markup tidy.

Turbo-charging forms with label tags

The humble <label> in HTML forms can be a boon for usability. Pair it with the for attribute, and you've got labels linked to input elements, improving interaction and accessibility:

<!-- One tag to rule them all. Try clicking the label text -->
<label for="username">Username:</label>
<input type="text" name="username" id="username">

This allows labels to focus the linked input. Clicking is the new typing!

Make elements editable with contentEditable

The contentEditable attribute turns any HTML element into an editable field. Suddenly, your HTML document becomes a WYSIWYG editor:

<div contentEditable="true">
  <!-- Feel free to shelter your pet from the storm inside -->
  I'm editable, yay!
</div>

Editing in the browser has never been easier. Check out an interactive demo: w3schools editable table demo.

Structured dropdowns using optgroup

Bring some order to those long dropdown menus with the <optgroup> within <select> elements. No more messy dropdowns:

<!-- Standing in well-arranged queues, like a well-choreographed ballet -->
<select name="car">
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
  <optgroup label="Japanese Cars">
    <option value="toyota">Toyota</option>
    <option value="honda">Honda</option>
  </optgroup>
</select>

It offers a grouped view of options. Not just a pretty face, eh?

The <base> tag sets a base URL for all relative URLs in a document. Managing site navigation and link management has never been easier:

<head>
  <!-- One link to bind them all -->
  <base href="https://www.example.com/">
</head>

Now all relative links reference from this specified base. Watch out for any surprise redirents!

Serving assets with protocol-relative URLs

Use the clever src="//domain.example" trick to make your assets protocol-agnostic. No need to worry whether it's HTTP or HTTPS:

<!-- Ready to serve assets, whatever your protocol -->
<img src="//domain.example/img/logo.png" alt="Logo">

Besides being clever, this can prevent mixed-content errors. Watch out for older browsers though!

Using data-* attributes for custom data

The data-* attribute family is there to associate custom data with HTML elements. It's a powerful tool when you need to smuggle data within your HTML:

<div data-pet-type="dog" data-pet-name="Max">
  <!-- Max is a good boy 🐶 -->
  ...
</div>

Data attributes: take control of your HTML jungle!

Aria roles for smooth accessibility

ARIA (Accessible Rich Internet Applications) roles may not be "hidden", but they certainly are crucial for web accessibility. For the betterment of all users, including those using assistive technologies:

<!-- Open sesame! -->
<button aria-expanded="false" aria-controls="menu">Menu</button>
<div id="menu" role="menu">...</div>

ARIA roles: The often unseen heroes of web accessibility!

Power of semantic elements

HTML5 introduced several semantic elements like <article>, <section>, <nav>, and <footer>, which not only make your code easier to read but also enhance its SEO and accessibility:

<!-- Semantic HTML: making your code beautiful, on the inside and out -->
<article>
  <h2>Blog Post Title</h2>
  <p>Published on April 4, 2023</p>
  <section>
    <h3>Introduction</h3>
    <p>Welcome to my blog post...</p>
  </section>
</article>