@thedevspacehq www.thedevspace.
io
HTML
Semantic Elements
A COMPLETE LIST
Full Stack Development Course
for Beginners
www.thedevspace.io
Swipe
@thedevspacehq www.thedevspace.io
Semantic elements are HTML elements
that clearly describe their meaning both
to the browser and the developer. They
make your HTML more readable and
accessible (especially for screen readers
and SEO).
Semantic elements help:
Screen readers understand content
structure.
Search engines better index and rank
pages.
Developers maintain and scale clean
code.
Swipe
@thedevspacehq www.thedevspace.io
DOCUMENT STRUCTURE
Element Description
Root element that wraps the entire
<html>
HTML document.
Contains metadata like title, styles, and
<head>
scripts.
Sets the page title shown in browser
<title>
tabs.
Contains all the visible content on the
<body>
page.
Swipe
@thedevspacehq www.thedevspace.io
SECTIONING ELEMENTS
Element Description
Intro content like logos, site names, or
<header>
nav menus.
Contains main navigation links for the
<nav>
site.
Core content unique to the current
<main>
page.
Groups related content under a
<section>
common theme.
Standalone, reusable content (e.g. blog
<article>
post).
Content related to the main content (e.g.
<aside>
sidebar).
Bottom section for links, copyrights, or
<footer>
contacts.
Swipe
@thedevspacehq www.thedevspace.io
TEXT CONTENT
Element Description
Headings, from most to least
<h1>–<h6>
important.
<p> Paragraph of text.
<blockquote> Long quotation from another source.
<q> Short inline quotation.
Abbreviation or acronym with
<abbr>
optional expansion.
<cite> Title of a referenced creative work.
<dfn> Term being defined in the context.
Swipe
@thedevspacehq www.thedevspace.io
TEXT CONTENT
Element Description
<time> Specific date/time or duration.
<address> Contact or location details.
<pre> Preserves whitespace and formatting.
<code> Inline snippet of computer code.
<kbd> User keyboard input.
<samp> Output from a program or system.
Represents a variable in text or
<var>
formulas.
Swipe
@thedevspacehq www.thedevspace.io
CONTENT GROUPING
Element Description
Generic block-level container (non-
<div>
semantic).
Generic inline container (non-
<span>
semantic).
<hr> Thematic break or shift in topic.
<br> Line break, used in text formatting.
Swipe
@thedevspacehq www.thedevspace.io
LISTS
Element Description
<ul> Unordered list (bulleted).
<ol> Ordered list (numbered).
<li> List item in ul or ol.
<dl> Description list for key-value pairs.
<dt> Term or name in a description list.
<dd> Definition or description of the term.
Swipe
@thedevspacehq www.thedevspace.io
TABLES
Element Description
<table> Defines a data table.
<caption> Title or explanation for the table.
<thead> Header group of the table.
<tbody> Main content group of the table.
<tfoot> Footer group of the table.
<tr> A single row of cells.
<th> Header cell for a column or row.
<td> Standard data cell in a table.
Swipe
@thedevspacehq www.thedevspace.io
FORMS
Element Description
<form> Collects and submits user input.
<fieldset> Groups related form controls.
<legend> Caption for a <fieldset>.
<label> Describes a form input’s purpose.
<input> Field for user input of various types.
<textarea> Multi-line text input.
<button> Clickable button (submit, reset, etc.).
<select> Drop-down list of options.
<option> Single option in a <select>.
<optgroup Group of related <option> items.
>
Swipe
@thedevspacehq www.thedevspace.io
MEDIA EMBEDDING
Element Description
Self-contained media with optional
<figure>
caption.
<figcaption> Caption for the content in <figure>.
<picture> Container for multiple image sources.
<img> Embeds an image.
<audio> Embeds sound content.
<video> Embeds video content.
<source> Media source for <video> or <audio>.
Text tracks for media (subtitles,
<track>
captions).
