Quick answerThe most-used HTML tags are <h1>–<h6> (headings), <p> (paragraph), <a href> (link), <img src alt> (image), <ul>/<ol>/<li> (lists), <table>/<tr>/<td> (tables), <div>/<span> (containers), <form>/<input>/<button> (forms) and the semantic <header>, <nav>, <main>, <article>, <footer>.
Document structure
| Tag | Purpose | Example |
|---|---|---|
<!DOCTYPE html> | Declares HTML5 — first line | <!DOCTYPE html> |
<html> | Root element | <html lang="en"> |
<head> | Metadata container | <head>…</head> |
<title> | Tab and search-result title | <title>Home</title> |
<meta> | Charset, viewport, description | <meta charset="utf-8"> |
<link> | Stylesheet, icon | <link rel="stylesheet" href="style.css"> |
<script> | JavaScript | <script src="app.js" defer></script> |
<body> | Visible content | <body>…</body> |
Text
| Tag | Purpose | Example |
|---|---|---|
<h1>–<h6> | Headings, 1 most important | <h2>Pricing</h2> |
<p> | Paragraph | <p>Hello.</p> |
<br> | Line break | Line one<br>Line two |
<strong> / <em> | Important / emphasised | <strong>Warning</strong> |
<mark> | Highlight | <mark>new</mark> |
<code> / <pre> | Code / preformatted block | <pre><code>…</code></pre> |
<blockquote> | Quotation | <blockquote>…</blockquote> |
<sup> / <sub> | Superscript / subscript | x<sup>2</sup> |
<hr> | Thematic break | <hr> |
Links and media
| Tag | Example |
|---|---|
| Link | <a href="https://example.com">Visit</a> |
| New tab | <a href="…" target="_blank" rel="noopener">…</a> |
| Email / phone | <a href="mailto:hi@x.com"> · <a href="tel:+15551234"> |
| Image | <img src="cat.jpg" alt="A cat" width="400" height="300"> |
| Figure | <figure><img …><figcaption>Caption</figcaption></figure> |
| Video | <video src="clip.mp4" controls></video> |
| Audio | <audio src="song.mp3" controls></audio> |
| Embed a page | <iframe src="…" title="…"></iframe> |
Lists
<ul><li>Bullet</li></ul>
<ol><li>Numbered</li></ol>
<dl><dt>Term</dt><dd>Definition</dd></dl>Tables
<table>
<thead><tr><th>Name</th><th>Age</th></tr></thead>
<tbody><tr><td>Ana</td><td>31</td></tr></tbody>
</table>Build one visually with the HTML table generator.
Forms
| Tag | Example |
|---|---|
| Form | <form action="/send" method="post">…</form> |
| Label + input | <label>Email <input type="email" name="email" required></label> |
| Input types | text email password number date checkbox radio file range color |
| Text area | <textarea name="msg" rows="4"></textarea> |
| Dropdown | <select><option>A</option></select> |
| Button | <button type="submit">Send</button> |
Semantic HTML5 layout
| Tag | Use for |
|---|---|
<header> | Site or section header |
<nav> | Main navigation links |
<main> | The page's main content (once per page) |
<article> | Self-contained content: post, card, comment |
<section> | A themed group with its own heading |
<aside> | Sidebar, related links |
<footer> | Footer |
<div> / <span> | Generic block / inline container when nothing else fits |
<details><summary> | Collapsible section without JavaScript |
Special characters
< < · > > · & & · non-breaking space · © © — full list in HTML character codes.
Frequently asked questions
How many HTML tags are there?
About 110 elements are in the current standard, but around 30 cover nearly every page.
What is the difference between div and span?
<div> is a block container that starts on a new line; <span> is an inline container inside a line of text.
Should I use <b> or <strong>?
Use <strong> for important text and <em> for emphasis — they carry meaning for screen readers. <b> and <i> are for purely stylistic bold or italic.
Which tags need closing?
Most do. Void elements — <br>, <hr>, <img>, <input>, <meta>, <link> and a few others — don't.
Where can I practise these tags?
Paste any snippet into the online HTML editor to see it live.