Scribd
Upload
3 views11 pages

HTML semantics elements

The document provides a comprehensive overview of HTML semantic elements, explaining their importance for readability, accessibility, and SEO. It categorizes elements into various sections such as document structure, sectioning elements, text content, content grouping, lists, tables, forms, and media embedding, detailing their specific functions. This guide serves as a resource for developers to create clean and maintainable HTML code.

Uploaded by

Hans
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views11 pages

HTML semantics elements

The document provides a comprehensive overview of HTML semantic elements, explaining their importance for readability, accessibility, and SEO. It categorizes elements into various sections such as document structure, sectioning elements, text content, content grouping, lists, tables, forms, and media embedding, detailing their specific functions. This guide serves as a resource for developers to create clean and maintainable HTML code.

Uploaded by

Hans
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 11

@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).

You might also like