Semantics refers to the meaning and structure of words and phrases in a language.
Semantic HTML elements describe its content. Most HTML elements have a semantic meaning. The div element being an exception.
Semantic HTML is important for SEO, screen readers and assistive technology, and makes elements and their purpose clear during development.
Core elements
Don’t use a div if you need one of these
<header>for defining the heading of the document or section.<nav>for sections with navigation links<ul>with nested anchor tags in<li>elements
<main><section>to group related info.<article>like a blog post<figure>for illustrations and diagrams.- you can nest a
<img />in the figure tags for the sake of semantic HTML. <figcapture>to caption the figure below the<img />element, within the<figure>element.
- you can nest a
<footer><address>
<header>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Products</a>
<a href="#">Contact</a>
</nav>
</header>The <header> element is used to represent introductory content like page navigation and other introductory information.
<header>
<h1>Main Page Title Goes Here</h1>
<img src="example-logo.png" alt="Example logo" />
</header>Structural hierarchy
Proper use of headings is an important part of structural hierarchy.
Have one h1 element on a page, followed by h2 elements and h3 elements – that would be semantically correct.
- Don’t put an h3 heading between h1 and h2 headings.
- It might be tempting to use an h3 element for stylistic reasons (because it’s smallish), but rather use CSS to control font size and maintain good semantic structure.
Presentational vs semantic HTML
Presentational HTML is an older form of HTML with elements that are not mostly deprecated used in a stylistic way.
It’s good to know they exist but not use them. Semantic HTML is the recommended practice.
<font size="5" color="blue">This text is large and blue </font>- size values range is 1 - 7 with a default of 3
- `
This text is centered. ` – Deprecated <big> This text is one level bigger than the surrounding text </big>- Deprecated
When to use the <i> and <em> elements
Both elements make text appear italic.
The emphasis element makes text italic and was originally use in a presentational way, but is now used for highlighting a different voice or mood, another language, technical terms, and thoughts. It indicates text that is somehow different rather than important.
For example, you can use <i> (idiomatic text element) with the lang attribute for a French phrase.
<p>There is a certain <i lang="fr">je ne sais quoi</i> in the air.</p>Use the <em> element to emphasize and important bit of text but limit it to a few words. Use it for a word to stress in a sentence.
<p>Never give up on <em>your</em> dreams.</p>The and elements should not be used for presentation purposes only, that is it should not be used to make text italic if the text doesn’t have a special purpose.
When to use <b> and <strong> elements
Both elements make text appear bold.
Use the ‘bring attention to’ (<b>) element to highlight keywords in summaries or product names in reviews.
Use the <strong> element to emphasize the importance of text and communicate a sense of urgency – it is a semantic element.
<p><strong>Warning</strong> This product may cause allergic reaction.</p>How to use description lists
Description lists are used to represent any list with a key-value construction like dictionaries, recipe ingredients, product specifications, FAQs.
Description lists consists of the <dl> container, the description term, <dt>, and the description details, <dd>.
The description details will be indented to the right.
<dl>
<dt>Flour</dt>
<dd>2 cups</dd>
<dt>Sugar</dt>
<dd>2 tablespoons</dd>
</dl>Block and inline quotes
You can add a long quote in a <blockquote> element and even add a URL source of the quote, which won’t be shown on the page but is useful for Google and screen readers. Use blockquote for extended quotes.
If you want the citation to appear on the page, use the <cite> element instead of the attribute.
You need to add your own quotation marks with blockquotes and the text will render as slightly indented.
<div>
<blockquote cite="https://www.freecodecamp.org/news/learn-to-code-book/">
"Can you imagine what it would be like to be a successful developer? To have built software systems that people rely upon?"
</blockquote>
<p>—Quincy Larson, <cite>How to Learn to Code and Get a Developer Job [Full Book].</cite></p>
</div>Use the inline quotation element to quote a few words of text. Browsers will add the quotation marks. Use inline quotes to add short quotations from other sources to paragraphs.
<p>As Quincy Larson said,
<q cite="https://www.freecodecamp.org/news/learn-to-code-book/">
Momentum is everything.
</q>
</p>Abbreviations
Acronyms and initialisms are two forms of abbreviations, which function is to shorten a phrase.
‘HTML’ is an example of an initialism, as you read it as “H, T, M, L”.
‘GUI’ is an acronym, as you read the letters as words like “Graphical User Interface”.
Use the <abbr> element to wrap an abbreviation. The element doesn't style the presentation any differently, unless you use the optional title` attribute is option to add the full form of the abbreviation that can be viewed in a tooltip.
Use the element where additional context might be useful.
<p>
<abbr title="HyperText Markup Language">HTML</abbr> is the foundation of the web.
</p>Addresses
Use the semantic <address> element (rather than a <div>) to include the physical address, phone number, and email address to business or personal pages.
The tel:+ value in the href renders as a clickable link in some devices. The mailto: element is perceived as spam by users and is unfortunately used by spammers.
<address>
<h2>Company Name</h2>
<p>
1234 Elm Street<br />
Springfield, IL 62701<br />
United States
</p>
<p>Phone: <a href="tel:+15555555555">+1 (555) 555-5555</a></p>
<p>Email: <a href="mailto:contact@company.com">contact@company.com</a></p>
</address>Time and dates
Use the
The datetime value should be id in the international standard ISO 8601 format starting with the year, followed by the letter T and the military time. It’s a machine-readable format that helps search engine results and the browser process date and time information effectively.
You can omit the date and only have the time like "20:00".
<p>
The graduation will be on <time datetime="2024-06-15T15:00">June 15</time>
</p>Displaying equations and chemical formulas
Use CSS if you need super- or sub-script text for styling purposes only.
- Display exponents and superior lettering with the
<sup>superscript element:
<p>2<sup>2</sup> (2 squared) is 4</p>- Display chemical formulas (and footnotes) using the
<sub>subscript element, for example the2in carbon dioxide:
<p>CO<sub>2</sub></p>Display code
Use the inline element to display computer code within text with the browser default of monospace text:
<p>
To set the text color to blue in CSS, use the following code:
<code>color: blue;</code>
</p>
To display multiple lines of code, wrap the <code> element in the preformatted text element, <pre>:
The code sample in the following example will be displayed indented to the right because the
element displays the code as it’s literally formatted.
<pre>
<code>
body {
color: red;
}
</code>
</pre>
The U, S, and Ruby elements
u
Use the <u> element (unarticulated annotation element) to denote non-textual annotation, such as spelling errors.
Text withing the <u> element displays with a black underline.
<p>
You can use the unarticulated annotation element to highlight
<u>incccccort</u> <u>spling</u> <u>issuess</u>.
</p>
s
The strikethrough element, <s>, is used for text that is no longer relevant.
It shouldn’t be used to show changes to a document; just remove the text.
<p><s>Tomorrow's hike will be meeting at noon</s></p>
<p>Due to unforeseen weather conditions, the hike has been cancelled.</p>
ruby
The <ruby> element can be used to add the pronunciation of East Asian characters.
<rp> is the ruby fallback parenthesis element if a browser doesn’t support the Ruby element<rt> displays the text for the ruby annotation
For example:
<ruby> 明日 <rp>(</rp>Ashita<rp>)</rp></ruby>
Internal links
Internal links: used to link to another section of the page by using href="#id" on an a element and giving the destination element the same id. This is commonly used for skip links, table of contents, or long pages with multiple sections.
<a href="#about-section">Go to About Section</a>
<section id="about-section">
<h2>About</h2>
<p>This is the about section of the page.</p>
</section>
Reference