--- 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 [`
  • `](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: * [`
    `](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/article) * [`