10 HTML Tags You Should Know - wbr, template, time, kbd, code and More

Most developers learn the obvious HTML tags early on — <div>, <p>, <h1>, <a>, <img>. But HTML has over 100 elements in its specification, and some of the most useful ones are the least talked about. They exist precisely to solve real problems you are probably working around with JavaScript or CSS right now.

In this guide we will cover 10 HTML tags that every developer should know — what they do, why they exist, how to use them correctly, and what problems they solve that generic divs cannot.

1. <wbr> — Word Break Opportunity

The <wbr> tag stands for Word Break Opportunity. It tells the browser that a specific spot in a long word or string is an acceptable place to insert a line break if needed — but only if the line actually needs to wrap. If the word fits on one line, the browser ignores the tag completely.

This is useful for long URLs, file paths, technical strings, or compound words that would otherwise overflow their container or cause a horizontal scrollbar.

<!-- Without wbr — this URL might overflow its container -->
<p>Visit: https://www.example.com/very/long/path/to/some/resource</p>

<!-- With wbr — browser can break here if needed -->
<p>Visit: https://www.example.com<wbr>/very<wbr>/long<wbr>/path<wbr>/to<wbr>/some<wbr>/resource</p>

Unlike a hyphen or a zero-width space, <wbr> does not add any visible character when a break occurs — the line just wraps cleanly at that point with no dash or extra space.

2. <template> — Hidden Reusable HTML

The <template> tag holds HTML that you want to render later using JavaScript — not immediately when the page loads. Its contents are completely inert when the page loads: scripts inside it do not run, images do not load, and the content is invisible. It is only activated when you clone and insert it with JavaScript.

Before <template> existed, developers stored hidden HTML in script tags with fake types, or built DOM elements entirely in JavaScript. Both approaches are messy. The template element is the proper, semantic way to store reusable markup.

<!-- HTML — template is invisible on page load -->
<template id="userCard">
  <div class="card">
    <h3 class="card-name"></h3>
    <p class="card-role"></p>
  </div>
</template>

<div id="container"></div>
<button onclick="addCard()">Add User Card</button>

// JavaScript — clone and insert the template
function addCard() {
  const template  = document.getElementById("userCard");
  const clone     = template.content.cloneNode(true); // deep clone

  clone.querySelector(".card-name").textContent = "Randhir Singh";
  clone.querySelector(".card-role").textContent = "Full Stack Developer";

  document.getElementById("container").appendChild(clone);
}

Every time you call the function, a fresh copy of the template is cloned and inserted with different data — no repeated HTML in your markup, no JavaScript building DOM from scratch.

3. <time> — Semantic Dates and Times

The <time> tag represents a specific date, time, or duration in a machine-readable format. It looks like plain text to the user but carries structured metadata that browsers, search engines, and assistive technologies can understand.

The datetime attribute contains the machine-readable value while the content between the tags shows the human-readable version:

<!-- Date only -->
<p>Published on <time datetime="2026-07-21">July 21, 2026</time></p>

<!-- Date and time with timezone -->
<p>Event starts at <time datetime="2026-07-21T18:00:00+05:30">6:00 PM IST</time></p>

<!-- Duration -->
<p>Course duration: <time datetime="PT2H30M">2 hours 30 minutes</time></p>

<!-- Year and month -->
<p>Released in <time datetime="2026-01">January 2026</time></p>

Google uses the <time> tag to understand publication dates for blog posts and articles — which can affect how recently your content is perceived in search results. Always use it for dates in article metadata.

4. <blockquote> — Semantic Quotations

The <blockquote> tag marks a section of content that is quoted from another source. It is the semantically correct way to display quotes rather than styling a plain div to look like a quote. The cite attribute links to the original source.

<blockquote cite="https://www.wikipedia.org/wiki/HTML">
  <p>
    HTML is the standard markup language for creating web pages.
    HTML describes the structure of a web page semantically and
    originally included cues for the appearance of the document.
  </p>
  <footer>— <cite>Wikipedia, HTML article</cite></footer>
</blockquote>

"HTML is the standard markup language for creating web pages. HTML describes the structure of a web page semantically."

Browsers apply default indentation to blockquotes. You can style them with CSS to match your design — adding a coloured left border, italic text, or a quote icon — while keeping the semantic meaning intact.

For inline quotes (within a paragraph), use the <q> tag instead. Browsers automatically add quotation marks around it:

<p>As Tim Berners-Lee once said, <q>The web is more a social creation than a technical one.</q></p>

5. <kbd> — Keyboard Input

The <kbd> tag represents keyboard input — any text the user should type or any key they should press. It is the semantic way to show keyboard shortcuts, command-line input, or any instruction that involves pressing a key.

<!-- Showing keyboard shortcuts -->
<p>To save your file, press <kbd>Ctrl</kbd> + <kbd>S</kbd></p>
<p>To undo, press <kbd>Ctrl</kbd> + <kbd>Z</kbd></p>
<p>To open a new tab, press <kbd>Ctrl</kbd> + <kbd>T</kbd></p>

<!-- Showing command-line input -->
<p>Run: <kbd>npm install</kbd> to install dependencies</p>

Style it to look like real keyboard keys:

kbd {
  background: #374151;
  color: #e5e7eb;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid #4b5563;
  border-bottom-width: 3px; /* gives a 3D key effect */
  font-family: monospace;
  font-size: 0.875rem;
}

6. <code> — Inline Code

The <code> tag is used for inline code within a paragraph of text. It renders in a monospace font by default and semantically signals to browsers and screen readers that this is computer code, not regular text.

<!-- Inline code -->
<p>Use the <code>console.log()</code> function to debug JavaScript.</p>
<p>Set the <code>font-size</code> property to control text size.</p>

<!-- For multi-line code blocks — wrap code inside pre -->
<pre>
  <code>
    function greet(name) {
      return "Hello, " + name;
    }
  </code>
</pre>

Use <code> for short inline mentions of code within prose. For full code blocks, always wrap <code> inside a <pre> element — which preserves whitespace and line breaks.

7. <video> — Native Video Player

The <video> tag embeds a native video player directly in your page — no Flash, no third-party plugin, no JavaScript required for basic playback. The controls attribute adds play/pause, volume, and fullscreen controls automatically.

<video
  width="640"
  height="360"
  controls
  autoplay
  muted
  loop
  poster="thumbnail.jpg">

  <source src="video.mp4"  type="video/mp4">
  <source src="video.webm" type="video/webm">

  <!-- Fallback for browsers that don't support video tag -->
  Your browser does not support the video element.

</video>

Key attributes explained:

• controls — shows the built-in player controls
• autoplay — starts playing automatically (requires muted in most browsers)
• muted — starts with audio off (required for autoplay to work)
• loop — repeats the video when it ends
• poster — thumbnail image shown before the video plays
• Multiple <source> tags — browser picks the first format it supports

8. <audio> — Native Audio Player

The <audio> tag works exactly like <video> but for audio files. It supports MP3, WAV, OGG, and AAC formats:

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  Your browser does not support the audio element.
</audio>

Both <video> and <audio> have a full JavaScript API — you can control them programmatically with methods like .play(), .pause(), .currentTime, and events like timeupdate and ended.

const video = document.querySelector("video");

// Play and pause programmatically
video.play();
video.pause();

// Jump to a specific time (in seconds)
video.currentTime = 30;

// Detect when video ends
video.addEventListener("ended", () => {
  console.log("Video finished playing");
});

9. <pre> — Preformatted Text

The <pre> tag preserves whitespace exactly as written in the HTML — spaces, tabs, and line breaks are all rendered as-is. Without it, HTML collapses multiple spaces into one and ignores line breaks entirely.

<!-- Without pre — all spaces collapsed, no line breaks -->
<p>
  Line one
  Line two
  Line three
</p>
<!-- All rendered as: "Line one Line two Line three" on one line -->

<!-- With pre — whitespace preserved exactly -->
<pre>
  Line one
  Line two
  Line three
</pre>
<!-- Rendered on three separate lines with indentation preserved -->

Always use <pre><code> together for code blocks — <pre> preserves the indentation and line breaks, and <code> provides the semantic meaning.

10. <hr> — Thematic Break

The <hr> tag represents a thematic break between sections of content — a shift in topic, scene, or thought. Most browsers render it as a horizontal line, but its semantic meaning is about the content transition, not the visual line.

<!-- Between two sections with different topics -->
<section>
  <h2>Getting Started</h2>
  <p>Install the dependencies first...</p>
</section>

<hr>

<section>
  <h2>Advanced Configuration</h2>
  <p>Once you have the basics working...</p>
</section>

Style it with CSS to match your design:

hr {
  border: none;
  border-top: 1px solid #374151;
  margin: 2rem 0;
}

/* Decorative gradient hr */
hr.fancy {
  border: none;
  height: 2px;
  background: linear-gradient(to right, transparent, #facc15, transparent);
  margin: 2rem 0;
}

Quick Reference — All 10 Tags

Final Thought

Using semantic HTML tags properly is one of the best things you can do for your website — it improves accessibility for screen reader users, helps search engines understand your content, makes your code more readable for other developers, and often reduces the need for extra CSS and JavaScript to replicate what HTML already does natively.

Start by adding <time> to your article dates, <kbd> to your keyboard shortcut documentation, and <code> every time you mention code within a paragraph. Small changes, but they add up to a meaningfully better, more professional codebase.

Know a useful HTML tag that is not on this list? Tell us about it on our contact page — we would love to add more to this guide.