HTML tags are divided into two broad categories:
Semantic tags clearly describe what the content inside them represents — both to the browser and to developers.
| Tag | Meaning / Use | Description |
|---|---|---|
<header> |
Header section | Represents the top section of a page or a section, usually containing logo, navigation, or heading. |
<nav> |
Navigation bar | Contains links for navigating the website (menus, links, etc.). |
<main> |
Main content | Contains the dominant content of the document — unique per page. |
<section> |
Thematic grouping | Groups related content under one theme (like a chapter, article category, etc.). |
<article> |
Independent content | Represents self-contained content like a blog post, article, or forum entry. |
<aside> |
Sidebar / related info | Contains information related to the main content — like ads, quotes, or side notes. |
<footer> |
Footer section | Appears at the bottom — holds copyright, contact info, links, etc. |
<figure> |
Image with caption | Used to wrap images, charts, or illustrations with an optional <figcaption>. |
<figcaption> |
Caption for figure | Describes the <figure> content (like image caption). |
<mark> |
Highlight text | Highlights or marks text as relevant. |
<time> |
Time or date | Represents a time or date; can include machine-readable format (datetime). |
<address> |
Contact info | Contains contact or address info (author, company, etc.). |
<details> |
Expandable info box | Used to show/hide additional details. Works with <summary>. |
<summary> |
Summary for details | Defines the visible heading for a <details> element. |
<dialog> |
Dialog box | Represents a popup or modal dialog window. |
<data> |
Machine-readable data | Associates content with a value (for scripts or data processing). |
<em> |
Emphasis | Gives stress/emphasis to text (italic by default). |
<strong> |
Strong importance | Gives strong importance (bold by default). |
<abbr> |
Abbreviation | Defines abbreviations or acronyms (<abbr title="HyperText Markup Language">HTML</abbr>). |
<cite> |
Citation | Used for citing a creative work (book, movie, paper, etc.). |
<code> |
Inline code | Used for code snippets inside text. |
<pre> |
Preformatted text | Displays text exactly as written (for code blocks, ASCII art, etc.). |
<blockquote> |
Block quote | Long quotations (usually indented). |
<q> |
Short quote | Inline quotation marks. |
<dfn> |
Definition term | Defines a term being described. |
<var> |
Variable | Represents a variable in math or programming. |
<samp> |
Sample output | Represents sample output from a program or command. |
<kbd> |
Keyboard input | Represents user input from a keyboard. |
<bdi> |
Bi-directional isolation | Isolates text that might have different direction (useful for languages like Arabic). |
<bdo> |
Bi-directional override | Forces text direction (left-to-right or right-to-left). |
<progress> |
Progress bar | Shows task completion progress. |
<meter> |
Gauge | Displays a scalar measurement within a range (like battery level, score, etc.). |
<output> |
Calculation result | Shows result of a calculation or script. |
🟢 Purpose of Semantic Tags:
These tags don’t convey meaning, only used for structure, grouping, or styling.
| Tag | Meaning / Use | Description |
|---|---|---|
<div> |
Division | A generic block-level container. Used for layout or grouping. |
<span> |
Inline container | A generic inline container, used to style a part of text or element. |
<br> |
Line break | Breaks a line; used to move content to the next line. |
<hr> |
Horizontal rule | Draws a horizontal line (divider). |
<b> |
Bold | Makes text bold (no added meaning). |
<i> |
Italic | Italicizes text (no added meaning). |
<u> |
Underline | Underlines text. |
<small> |
Smaller text | Reduces font size (often for side notes). |
<sub> |
Subscript | Text below the baseline (like H₂O). |
<sup> |
Superscript | Text above baseline (like x²). |
<center> |
Center text | (Deprecated) Used to center-align text or content. |
<font> |
Font style | (Deprecated) Used to change font style, color, or size — replaced by CSS. |
<big> |
Bigger text | (Deprecated) Increases text size slightly. |