221 lines
15 KiB
Markdown
221 lines
15 KiB
Markdown
---
|
|
title: "Semantics - Glossary | MDN"
|
|
chunk: 1/3
|
|
source: "https://developer.mozilla.org/en-US/docs/Glossary/Semantics"
|
|
category: "reference"
|
|
tags: "web, html, css, javascript, documentation"
|
|
date_saved: "2026-05-05T05:44:53.434231+00:00"
|
|
instance: "kb-cron"
|
|
---
|
|
|
|
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Glossary/Semantics#content)
|
|
* [Skip to search](https://developer.mozilla.org/en-US/docs/Glossary/Semantics#search)
|
|
|
|
[ MDN ](https://developer.mozilla.org/en-US/)
|
|
HTML
|
|
[HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML)
|
|
|
|
HTML reference
|
|
|
|
* [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements)
|
|
* [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes)
|
|
* [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes)
|
|
* [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references")
|
|
|
|
HTML guides
|
|
|
|
* [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images)
|
|
* [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet)
|
|
* [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats)
|
|
* [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides")
|
|
|
|
Markup languages
|
|
|
|
* [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG)
|
|
* [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML)
|
|
* [XML](https://developer.mozilla.org/en-US/docs/Web/XML)
|
|
|
|
CSS
|
|
[CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS)
|
|
|
|
CSS reference
|
|
|
|
* [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties)
|
|
* [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors)
|
|
* [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules)
|
|
* [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values)
|
|
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references")
|
|
|
|
CSS guides
|
|
|
|
* [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction)
|
|
* [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using)
|
|
* [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts)
|
|
* [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color)
|
|
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides")
|
|
|
|
Layout cookbook
|
|
|
|
* [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts)
|
|
* [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element)
|
|
* [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card)
|
|
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook)
|
|
|
|
JavaScriptJS
|
|
[JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
|
|
|
|
JS reference
|
|
|
|
* [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects)
|
|
* [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators)
|
|
* [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements)
|
|
* [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions)
|
|
* [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references")
|
|
|
|
JS guides
|
|
|
|
* [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling)
|
|
* [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration)
|
|
* [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects)
|
|
* [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes)
|
|
* [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides")
|
|
|
|
Web APIs
|
|
[Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API)
|
|
|
|
Web API reference
|
|
|
|
* [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API)
|
|
* [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
|
|
* [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API)
|
|
* [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API)
|
|
* [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API)
|
|
* [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API)
|
|
* [See all…](https://developer.mozilla.org/en-US/docs/Web/API "See all Web API guides")
|
|
|
|
Web API guides
|
|
|
|
* [Using the Web animation API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API)
|
|
* [Using the Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
|
|
* [Working with the History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API/Working_with_the_History_API)
|
|
* [Using the Web speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API)
|
|
* [Using web workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers)
|
|
|
|
All
|
|
[All web technology](https://developer.mozilla.org/en-US/docs/Web)
|
|
|
|
Technologies
|
|
|
|
* [Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility)
|
|
* [HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP)
|
|
* [URI](https://developer.mozilla.org/en-US/docs/Web/URI)
|
|
* [Web extensions](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions)
|
|
* [WebAssembly](https://developer.mozilla.org/en-US/docs/WebAssembly)
|
|
* [WebDriver](https://developer.mozilla.org/en-US/docs/Web/WebDriver)
|
|
* [See all…](https://developer.mozilla.org/en-US/docs/Web "See all web technology references")
|
|
|
|
Topics
|
|
|
|
* [Media](https://developer.mozilla.org/en-US/docs/Web/Media)
|
|
* [Performance](https://developer.mozilla.org/en-US/docs/Web/Performance)
|
|
* [Privacy](https://developer.mozilla.org/en-US/docs/Web/Privacy)
|
|
* [Security](https://developer.mozilla.org/en-US/docs/Web/Security)
|
|
* [Progressive web apps](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps)
|
|
|
|
Learn
|
|
[Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development)
|
|
|
|
Frontend developer course
|
|
|
|
* [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started)
|
|
* [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core)
|
|
* [MDN Curriculum](https://developer.mozilla.org/en-US/curriculum/)
|
|
* [Check out the video course from Scrimba, our partner](https://scrimba.com/frontend-path-c0j?via=mdn-learn-navbar)
|
|
|
|
Learn HTML
|
|
|
|
* [Structuring content with HTML module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content)
|
|
|
|
Learn CSS
|
|
|
|
* [CSS styling basics module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics)
|
|
* [CSS layout module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout)
|
|
|
|
Learn JavaScript
|
|
|
|
* [Dynamic scripting with JavaScript module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting)
|
|
|
|
Tools
|
|
Discover our tools
|
|
* [Playground](https://developer.mozilla.org/en-US/play)
|
|
* [HTTP Observatory](https://developer.mozilla.org/en-US/observatory)
|
|
|
|
* [Border-image generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-image_generator)
|
|
* [Border-radius generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-radius_generator)
|
|
* [Box-shadow generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Box-shadow_generator)
|
|
* [Color format converter](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_format_converter)
|
|
* [Color mixer](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_mixer)
|
|
* [Shape generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Shapes/Shape_generator)
|
|
|
|
About
|
|
Get to know MDN better
|
|
* [About MDN](https://developer.mozilla.org/en-US/about)
|
|
* [Advertise with us](https://developer.mozilla.org/en-US/advertising)
|
|
|
|
* [Community](https://developer.mozilla.org/en-US/community)
|
|
* [MDN on GitHub](https://github.com/mdn)
|
|
|
|
[Blog](https://developer.mozilla.org/en-US/blog/)
|
|
1. [Glossary](https://developer.mozilla.org/en-US/docs/Glossary)
|
|
2. [Semantics](https://developer.mozilla.org/en-US/docs/Glossary/Semantics)
|
|
|
|
# Semantics
|
|
In programming, **Semantics** refers to the _meaning_ of a piece of code — for example "what effect does running that line of JavaScript have?", or "what purpose or role does that HTML element have" (rather than "what does it look like?".)
|
|
## In this article
|
|
* [Semantics in JavaScript](https://developer.mozilla.org/en-US/docs/Glossary/Semantics#semantics_in_javascript)
|
|
* [Semantics in CSS](https://developer.mozilla.org/en-US/docs/Glossary/Semantics#semantics_in_css)
|
|
* [Semantics in HTML](https://developer.mozilla.org/en-US/docs/Glossary/Semantics#semantics_in_html)
|
|
* [Semantic elements](https://developer.mozilla.org/en-US/docs/Glossary/Semantics#semantic_elements)
|
|
* [See also](https://developer.mozilla.org/en-US/docs/Glossary/Semantics#see_also)
|
|
|
|
## [Semantics in JavaScript](https://developer.mozilla.org/en-US/docs/Glossary/Semantics#semantics_in_javascript)
|
|
In JavaScript, consider a function that takes a string parameter, and returns an [`<li>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/li) element with that string as its `textContent`. Would you need to look at the code to understand what the function did if it was called `build('Peach')`, or `createLiWithContent('Peach')`?
|
|
## [Semantics in CSS](https://developer.mozilla.org/en-US/docs/Glossary/Semantics#semantics_in_css)
|
|
In CSS, consider styling a list with `li` elements representing different types of fruits. Would you know what part of the DOM is being selected with `div > ul > li`, or `.fruits__item`?
|
|
## [Semantics in HTML](https://developer.mozilla.org/en-US/docs/Glossary/Semantics#semantics_in_html)
|
|
In HTML, for example, the [h1](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/Heading_Elements) element is a semantic element, which gives the text it wraps around the role (or meaning) of "a top level heading on your page."
|
|
By default, most browser's [user agent stylesheet](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Cascade/Introduction#user-agent_stylesheets) will style an [h1](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/Heading_Elements) with a large font size to make it _look_ like a heading (although you could style it to look like anything you wanted).
|
|
On the other hand, you could make any element _look_ like a top level heading. Consider the following:
|
|
This will render it to look like a top level heading, but it has no semantic value, so it will not get any extra benefits as described above. It is therefore a good idea to use the right HTML element for the right job.
|
|
HTML should be coded to represent the _data_ that will be populated and not based on its default presentation styling. Presentation (how it should look), is the sole responsibility of [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS).
|
|
Some of the benefits from writing semantic markup are as follows:
|
|
* Search engines will consider its contents as important keywords to influence the page's search rankings (see [SEO](https://developer.mozilla.org/en-US/docs/Glossary/SEO))
|
|
* Screen readers can use it as a signpost to help visually impaired users navigate a page
|
|
* Finding blocks of meaningful code is significantly easier than searching through endless `div`s with or without semantic or namespaced classes
|
|
* Suggests to the developer the type of data that will be populated
|
|
* Semantic naming mirrors proper custom element/component naming
|
|
|
|
When approaching which markup to use, ask yourself, "What element(s) best describe/represent the data that I'm going to populate?" For example, is it a list of data?; ordered, unordered?; is it an article with sections and an aside of related information?; does it list out definitions?; is it a figure or image that needs a caption?; should it have a header and a footer in addition to the global site-wide header and footer?; etc.
|
|
## [Semantic elements](https://developer.mozilla.org/en-US/docs/Glossary/Semantics#semantic_elements)
|
|
These are _some_ of the roughly 100 semantic [elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements) available:
|
|
* [`<article>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/article)
|
|
* [`<aside>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/aside)
|
|
* [`<details>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/details)
|
|
* [`<figcaption>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/figcaption)
|
|
* [`<figure>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/figure)
|
|
* [`<footer>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/footer)
|
|
* [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/form)
|
|
* [`<header>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/header)
|
|
* [`<main>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/main)
|
|
* [`<mark>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/mark)
|
|
* [`<nav>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/nav)
|
|
* [`<section>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/section)
|
|
* [`<summary>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/summary)
|
|
* [`<time>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/time)
|
|
|
|
## [See also](https://developer.mozilla.org/en-US/docs/Glossary/Semantics#see_also)
|
|
* [HTML element reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements#inline_text_semantics) on MDN
|
|
* [Using HTML sections and outlines](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/Heading_Elements#usage_notes) on MDN
|
|
* [The meaning of semantics in computer science](https://en.wikipedia.org/wiki/Semantics#Computer_science) on Wikipedia
|
|
* Related glossary terms:
|
|
* [SEO](https://developer.mozilla.org/en-US/docs/Glossary/SEO) |