HTML provides many tags for structuring content, formatting text, creating links, displaying images, building tables, collecting form data, embedding media, and defining semantic page layouts. This guide organizes all important HTML tags by category with examples and practical usage.
HTML tags are markup instructions used to define elements on a web page. Most HTML elements have an opening tag, content, and a closing tag.
<p>This is a paragraph.</p>Some tags are void elements, meaning they do not need a closing tag.
<img src="html-logo.png" alt="HTML logo" />
<br />
<input type="text" name="username" />| Category | Common Tags | Usage |
|---|---|---|
| Document Structure | <!doctype>, <html>, <head>, <body> | Defines the basic structure of an HTML document. |
| Metadata | <title>, <meta>, <link>, <base>, <style> | Provides page information for browsers, SEO, and stylesheets. |
| Text Content | <h1> to <h6>, <p>, <blockquote>, <pre> | Creates headings, paragraphs, quotes, and preformatted text. |
| Formatting | <strong>, <em>, <b>, <i>, <mark> | Formats or emphasizes inline text. |
| Links | <a> | Creates links to pages, files, emails, phones, and page sections. |
| Images and Media | <img>, <picture>, <audio>, <video>, <source> | Displays images, audio, video, and responsive media. |
| Lists | <ul>, <ol>, <li>, <dl>, <dt>, <dd> | Creates ordered, unordered, and description lists. |
| Tables | <table>, <thead>, <tbody>, <tr>, <th>, <td> | Displays structured data in rows and columns. |
| Forms | <form>, <input>, <label>, <textarea>, <select>, <button> | Collects user input and submits data. |
| Semantic Layout | <header>, <nav>, <main>, <section>, <article>, <aside>, <footer> | Defines meaningful page regions for SEO and accessibility. |
| Scripting | <script>, <noscript>, <template>, <slot> | Adds JavaScript, fallback content, and reusable templates. |
| Tag | Usage | Example |
|---|---|---|
<!doctype html> | Declares the document as HTML5. | <!doctype html> |
<html> | Root element of the page. | <html lang="en"> |
<head> | Contains metadata, title, CSS links, and SEO tags. | <head>...</head> |
<body> | Contains visible page content. | <body>Page content</body> |
<!doctype html>
<html lang="en">
<head>
<title>HTML Tags List</title>
</head>
<body>
<h1>All HTML Tags</h1>
</body>
</html>| Tag | Usage | Example |
|---|---|---|
<title> | Defines browser tab title and search result title. | <title>HTML Tutorial</title> |
<meta> | Defines charset, viewport, description, robots, and other metadata. | <meta name="description" content="Learn HTML tags." /> |
<link> | Links external resources like CSS, canonical URLs, and icons. | <link rel="stylesheet" href="/style.css" /> |
<base> | Defines a base URL for relative links. | <base href="https://example.com/" /> |
<style> | Adds internal CSS styles. | <style>body { margin: 0; }</style> |
| Tag | Usage | Example |
|---|---|---|
<h1> to <h6> | Creates heading hierarchy. | <h1>Main Title</h1> |
<p> | Creates a paragraph. | <p>Learn HTML tags.</p> |
<br> | Adds a line break. | Line one<br />Line two |
<hr> | Adds a thematic break. | <hr /> |
<blockquote> | Represents a long quotation. | <blockquote>Quote text</blockquote> |
<pre> | Preserves whitespace and line breaks. | <pre>Formatted text</pre> |
<code> | Represents inline code. | <code>npm install</code> |
<abbr> | Defines an abbreviation. | <abbr title="HyperText Markup Language | PHPKINGDOM">HTML</abbr> |
<address> | Represents contact information. | <address>contact@example.com</address> |
| Tag | Usage | Example |
|---|---|---|
<strong> | Marks important text. | <strong>Important</strong> |
<b> | Makes text bold visually. | <b>Bold text</b> |
<em> | Emphasizes text semantically. | <em>Read carefully</em> |
<i> | Displays alternate voice or italic text. | <i>Technical term</i> |
<mark> | Highlights relevant text. | <mark>Highlighted</mark> |
<small> | Represents small print or side comments. | <small>Terms apply</small> |
<del> | Shows deleted text. | <del>$99</del> |
<ins> | Shows inserted text. | <ins>$79</ins> |
<sub> | Creates subscript text. | H<sub>2</sub>O |
<sup> | Creates superscript text. | 10<sup>2</sup> |
<span> | Generic inline wrapper. | <span class="badge">New</span> |
HTML elements are often grouped as inline or block-level tags. Inline tags stay inside the flow of text, while block tags start on a new line and usually take up the full available width.
| Type | Common Tags | Behavior |
|---|---|---|
| Inline | <span>, <a>, <strong>, <em>, <img> | Flows with surrounding text and only takes the space it needs. |
| Block | <div>, <p>, <h1> to <h6>, <section>, <article> | Starts on a new line and stretches across the available width. |
<p>
Learn <strong>HTML</strong> with <a href="/tutorials/html/">examples</a>.
</p>Inline tags are useful for styling or linking small pieces of content without breaking the line.
<section>
<h2>HTML Basics</h2>
<p>This is a block-level section with its own space.</p>
</section>Block tags are useful for organizing page sections, content areas, forms, and layouts.
<span> is a common inline wrapper.<div> is a common block wrapper.<img> is inline by default, even though it behaves like a replaced element.<p> cannot contain block-level elements.| Tag | Usage | Example |
|---|---|---|
<a> | Creates a hyperlink. | <a href="/tutorials/html/">HTML Tutorial</a> |
<img> | Displays an image. | <img src="html.png" alt="HTML logo" /> |
<picture> | Provides responsive image sources. | <picture><source /><img /></picture> |
<source> | Defines media source files. | <source src="video.mp4" type="video/mp4" /> |
<audio> | Embeds audio. | <audio controls></audio> |
<video> | Embeds video. | <video controls></video> |
<track> | Adds captions or subtitles. | <track kind="captions" src="captions.vtt" /> |
<iframe> | Embeds external pages, videos, or maps. | <iframe src="https://example.com" title="Example | PHPKINGDOM"></iframe> |
| Tag | Usage | Example |
|---|---|---|
<ul> | Creates an unordered list. | <ul><li>HTML</li></ul> |
<ol> | Creates an ordered list. | <ol><li>Step one</li></ol> |
<li> | Defines a list item. | <li>HTML</li> |
<dl> | Creates a description list. | <dl>...</dl> |
<dt> | Defines a term in a description list. | <dt>HTML</dt> |
<dd> | Defines the description of a term. | <dd>Markup language</dd> |
| Tag | Usage | Example |
|---|---|---|
<table> | Creates a table. | <table>...</table> |
<caption> | Adds a table title. | <caption>Student Scores</caption> |
<thead> | Groups header rows. | <thead>...</thead> |
<tbody> | Groups body rows. | <tbody>...</tbody> |
<tfoot> | Groups footer rows. | <tfoot>...</tfoot> |
<tr> | Creates a table row. | <tr>...</tr> |
<th> | Creates a header cell. | <th scope="col">Name</th> |
<td> | Creates a data cell. | <td>John</td> |
<colgroup> | Groups table columns. | <colgroup><col /></colgroup> |
<col> | Defines column properties. | <col span="2" /> |
| Tag | Usage | Example |
|---|---|---|
<form> | Creates a form container. | <form action="/submit" method="post"></form> |
<label> | Labels a form field. | <label for="email">Email</label> |
<input> | Creates an input control. | <input type="email" name="email" /> |
<textarea> | Creates a multi-line text field. | <textarea name="message"></textarea> |
<select> | Creates a dropdown list. | <select name="course"></select> |
<option> | Defines a dropdown option. | <option value="html">HTML</option> |
<optgroup> | Groups dropdown options. | <optgroup label="Frontend"></optgroup> |
<button> | Creates a button. | <button type="submit">Submit</button> |
<fieldset> | Groups related form controls. | <fieldset>...</fieldset> |
<legend> | Adds a title to a fieldset. | <legend>Contact Info</legend> |
<datalist> | Provides input suggestions. | <datalist id="browsers"></datalist> |
<output> | Displays calculated output. | <output name="result">10</output> |
<progress> | Shows task progress. | <progress value="70" max="100"></progress> |
<meter> | Shows a scalar measurement. | <meter value="8" min="0" max="10"></meter> |
| Tag | Usage | Example |
|---|---|---|
<header> | Defines page or section header. | <header><h1>Site Title</h1></header> |
<nav> | Defines navigation links. | <nav><a href="/">Home</a></nav> |
<main> | Defines main page content. | <main>Main content</main> |
<section> | Groups related content. | <section><h2>Features</h2></section> |
<article> | Defines independent content. | <article>Blog post</article> |
<aside> | Defines supporting content. | <aside>Related links</aside> |
<footer> | Defines footer content. | <footer>Copyright</footer> |
<figure> | Groups media or illustrations. | <figure><img /></figure> |
<figcaption> | Adds caption to a figure. | <figcaption>HTML diagram</figcaption> |
<time> | Represents date or time. | <time datetime="2026-06-23">June 23, 2026</time> |
<details> | Creates expandable content. | <details><summary>More</summary>Text</details> |
<summary> | Defines visible heading for details. | <summary>Read more</summary> |
<dialog> | Creates a dialog or modal. | <dialog>Modal content</dialog> |
| Tag | Usage | Example |
|---|---|---|
<script> | Adds JavaScript. | <script src="/app.js"></script> |
<noscript> | Shows fallback content when JavaScript is disabled. | <noscript>Enable JavaScript.</noscript> |
<template> | Defines reusable hidden markup. | <template id="card">...</template> |
<slot> | Defines placeholder content inside Web Components. | <slot name="title"></slot> |
<canvas> | Draws graphics with JavaScript. | <canvas id="chart"></canvas> |
<svg> | Creates scalable vector graphics. | <svg viewBox="0 0 100 100"></svg> |
const template = document.querySelector("#card");
if (template) {
const clone = template.content.cloneNode(true);
document.body.appendChild(clone);
}Some older HTML tags are obsolete and should not be used in modern web development. Use CSS and semantic HTML instead.
| Old Tag | Status | Modern Replacement |
|---|---|---|
<font> | Obsolete | Use CSS font styles. |
<center> | Obsolete | Use CSS text alignment or layout. |
<big> | Obsolete | Use CSS font-size. |
<strike> | Obsolete | Use <del> or CSS. |
<frame> | Obsolete | Use modern layouts or <iframe> when needed. |
<frameset> | Obsolete | Use semantic HTML and CSS layout. |
<marquee> | Obsolete/non-standard | Use CSS animations carefully. |
<h1> for the main page topic.<h2>, then <h3>.<main>, <article>, and <section>.<nav> for important navigation links.alt text for informative images.<label> for form fields.<caption> and <th> for accessible tables.<div> for everything instead of semantic tags.alt text for meaningful images.<font> or <center>.<head> instead of <body>.Pro Tip
When choosing an HTML tag, think about meaning first. Use semantic tags for structure, form tags for input, table tags for data, and CSS for visual design.
You now understand all important HTML tags by category, their usage, examples, SEO benefits, accessibility benefits, obsolete tags, and common mistakes.