Semantic HTML Markups Tags
Here are all the semantic HTML elements, grouped by their general purpose:
Document Structure:
<header> - Document or section header
<main> - Main content area
<footer> - Document or section footer
<article> - Self-contained contentv
<section> - Thematic grouping of content
<aside> - Sidebar content
<nav> - Navigation links
<div> - Generic container (technically not semantic but included for context)
Text Content:
<p> - Paragraph
<blockquote> - Extended quotation
<pre> - Preformatted text
<figure> - Self-contained content with optional caption
<figcaption> - Caption for figure element
<address> - Contact information
<hr> - Thematic break
<details> - Additional details
<summary> - Summary for details element
Lists:
<ul> - Unordered list
<ol> - Ordered list
<li> - List item
<dl> - Description list
<dt> - Description term
<dd> - Description details
Text-Level Semantics:
<a>c - Hyperlink
<em> - Emphasized text
<strong> - Important text
<small> - Side comments
<cite> - Citation
<q> - Short quotation
<abbr> - Abbreviation
<time> - Date/time
<code> - Computer code
<var> - Variable
The <samp> tag is used to identify text that is a sample output from a computer program, like error messages, response text, or terminal output. This helps distinguish it from regular text or user input.
Error Message:
Error 404: File not found
Console Output:
Hello, World!
Command Response:
Directory successfully created.
The <kbd> (keyboard) tag is used to represent user keyboard input or keyboard keys in HTML. It's particularly useful when writing documentation, tutorials, or any content that needs to show keyboard shortcuts or commands.
Keyboard Shortcuts Press
Ctrl +
C to copy
System Commands Enter
cd documents in the terminal
Gaming Controls Press
W to move forward
<sub> - Subscript text
<sup> - Superscript text
<mark> - Highlighted text
<dfn> - Definition term
<ruby> - Ruby annotation
<rt> - Ruby text
<rp> - Ruby parentheses
Embedded Content:
<picture> - Container for multiple image sources
<figure> - Self-contained content
<figcaption> - Caption for figure
<audio> - Sound content
<video> - Video content
<track> - Text track for media elements
<map> - Image map
<area> - Area in image map
Tables:
<table> - Table
<caption> - Table caption
<thead> - Table header group
<tbody> - Table body
<tfoot> - Table footer group
<tr> - Table row
<th> - Table header cell
<td> - Table data cell
<col> - Table column
<colgroup> - Table column group
Forms:
<form> - Form
<fieldset> - Group of form controls
<legend> - Caption for fieldset
<label> - Label for form control
<input> - Input control
<button> - Clickable button
<select>- Selection control
<datalist> - Predefined options for input
<optgroup> - Group of options
<option> - Option in select/datalist
<textarea> - Multiline text input
<output> - Calculation result
Unlike <meter>, <progress> is specifically for showing the completion of a task, rather than a static measurement. Most browsers display it as a progress bar that fills from left to right.
Download Progress:
Video Loading:
Task Completion:
Most browsers will display this as a gauge or progress bar with different colors based on the thresholds.
Disk Usage:
80% full
Quiz Score:
75 out of 100
Battery Level:
30%
Interactive Elements:
<details> - Disclosure widget
<summary> - Summary/caption for details
<dialog>> - Dialog box/window
<menu> - Menu list