The importance of semantic HTML: conveying meaning, not just presentation.
Semantic HTML involves using tags that describe the meaning and structure of the content they enclose. This is crucial for search engines to understand and rank your content, and for assistive technologies like screen readers to provide a better user experience for people with disabilities. Using semantic elements like <article>, <nav>, and <footer> creates a more accessible, meaningful, and SEO-friendly web page.
Example 1: The <article> Element
<article>
<h2>The Future of Renewable Energy</h2>
<p>Solar and wind power continue to be leading sources...</p>
</article>
Explanation The <article> tag clearly identifies a complete, standalone composition, such as a blog post or news story. This helps search engines and screen readers recognize the primary content on the page.
Example 2: The <nav> Element
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About Us</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
Explanation Using <nav> semantically defines the main navigation section of your website. This allows users with screen readers to easily find and skip to the navigation links.
Example 3: The <header> Element
<header>
<h1>My Awesome Website</h1>
<p>Your one-stop shop for amazing content!</p>
</header>
Explanation The <header> element represents the introductory content for its nearest ancestor section or for the entire page. It typically contains headings, logos, or taglines, providing important context.
Example 4: The <footer> Element
<footer>
<p>© 2025 My Awesome Website. All rights reserved.</p>
<p><a href="/privacy-policy">Privacy Policy</a></p>
</footer>
Explanation The <footer> element defines the footer for a document or section. It provides a clear, semantic container for information like copyright details and related links.
Example 5: The <main> Element
<main>
<h2>Main Content Title</h2>
<p>This is the primary content of the page, excluding sidebars, headers, and footers.</p>
</main>
Explanation The <main> tag is used to enclose the central topic of a document. A document must only have one <main> element, and it helps assistive technologies quickly identify the core content.
Emphasis (<em>) and strong importance (<strong>)
The <em> tag is used to apply stress emphasis to a word or phrase, which subtly changes the meaning of the sentence. In contrast, the <strong> tag indicates that the content has strong importance, seriousness, or urgency, often displayed as bold text by browsers.
Example 1: Using <em> for Emphasis
<p>I am <em>so</em> excited to learn HTML.</p>
Explanation Here, <em> places a spoken emphasis on the word "so." This implies a higher level of excitement compared to the rest of the sentence.
Example 2: Using <strong> for Importance
<p><strong>Warning:</strong> Do not touch the hot surface.</p>
Explanation The <strong> tag is used to convey a serious warning. It tells the user that this piece of information is critically important.
Example 3: Nested Emphasis and Importance
<p>You <strong><em>must</em></strong> complete this task by Friday.</p>
Explanation You can nest these tags to increase the level of importance or emphasis. In this case, the instruction is both highly important and has verbal emphasis.
Example 4: <em> for a Contrasting Tone
<p>We thought we had everything, but we forgot the <em>one</em> thing that mattered.</p>
Explanation The <em> tag is used here to emphasize a specific word that creates a pivot or contrast in the sentence's meaning.
Example 5: <strong> for a Call to Action
<p>Please review the document and <strong>click "Submit"</strong> when you are finished.</p>
Explanation The <strong> tag makes the primary action, "click 'Submit'", stand out, indicating its importance in the sequence of steps.
Strikethrough (<s>), subscript (<sub>), and superscript (<sup>)
The <s> tag is used to represent information that is no longer accurate or relevant, like a discounted price. The <sub> tag defines subscript text, which appears smaller and below the baseline, commonly used for chemical formulas. The <sup> tag defines superscript text, appearing smaller and above the baseline, often used for footnotes or mathematical exponents.
Example 1: Using <s> for an Old Price
<p>Special Offer: <s>$99.99</s> Now only $49.99!</p>
Explanation The <s> tag semantically indicates that the original price of $99.99 is no longer valid, effectively striking it out.
Example 2: Using <sub> for a Chemical Formula
<p>The chemical formula for water is H<sub>2</sub>O.</p>
Explanation The <sub> tag correctly formats the number "2" as a subscript, which is essential for accurately writing chemical notations.
Example 3: Using <sup> for a Mathematical Exponent
<p>The equation for the area of a square is side<sup>2</sup>.</p>
Explanation The <sup> tag properly displays the number "2" as a superscript, which is the standard way to denote an exponent in mathematics.
Example 4: Using <sup> for an Ordinal Number
<p>This is my 1<sup>st</sup> attempt at learning HTML.</p>
Explanation Superscript can be used to style ordinal numbers, making "st" appear raised next to the number "1" for a polished look.
Example 5: Combining Subscript and Superscript
<p>A common isotope of Uranium is U<sup>235</sup><sub>92</sub>.</p>
Explanation This example combines both <sup> and <sub> tags to accurately represent the mass number and atomic number in nuclear notation.
Highlighting text (<mark>)
The <mark> tag is used to highlight a portion of text for reference or notation purposes, indicating its relevance in a particular context. It's semantically different from using <strong> because it doesn't imply importance, but rather relevance. A common use case is highlighting search terms within a result set.
Example 1: Highlighting a Search Term
<p>Your search for "<mark>semantic HTML</mark>" returned 500 results. The term <mark>semantic HTML</mark> refers to using tags that convey meaning.</p>
Explanation In this scenario, <mark> is used to make the user's search query stand out within the search results page, showing its relevance.
Example 2: Drawing Attention in a Quote
<blockquote>
<p>It is not the critic who counts; not the man who points out how the strong man stumbles, <mark>or where the doer of deeds could have done them better</mark>.</p>
</blockquote>
Explanation Here, <mark> highlights a specific passage within a blockquote that the author wants to bring to the reader's attention for analysis.
Example 3: Highlighting Code for Explanation
<p>In the line <code>let x = 10;</code>, the part <mark>let x</mark> is the variable declaration.</p>
Explanation This shows how <mark> can be useful in technical tutorials to highlight the specific part of a code sample being discussed.
Example 4: Marking a Relevant Date
<p>The project was initiated on January 15, 2024, but the key milestone was achieved on <mark>May 30, 2024</mark>.</p>
Explanation The <mark> tag makes the most relevant date in the sentence easy to spot, serving as a visual reference point for the reader.
Example 5: Indicating User-Generated Content
<p>Welcome back, Alex! Your profile has been updated. Newest addition: <mark>Loves hiking</mark>.</p>
Explanation In a dynamic web application, <mark> can be used to show users what information has been newly added or changed since their last visit.
Defining abbreviations (<abbr>)
The <abbr> tag is used to define an abbreviation or an acronym. By including the full expansion in the title attribute, you provide valuable information for screen readers, search engines, and users who hover over the term.
Example 1: A Common Web Acronym
<p>You can style web pages using <abbr title="Cascading Style Sheets">CSS</abbr>.</p>
Explanation This code defines "CSS" as an abbreviation. When a user hovers over "CSS," a tooltip will appear showing "Cascading Style Sheets."
Example 2: An Organizational Abbreviation
<p>The <abbr title="World Health Organization">WHO</abbr> declared the pandemic in 2020.</p>
Explanation This example correctly marks up the acronym for a major organization, improving accessibility and clarity for all readers.
Example 3: Abbreviation Without a title
<p>Please RSVP by this Friday.</p>
<p>Please <abbr title="Répondez s'il vous plaît">RSVP</abbr> by this Friday.</p>
Explanation While an <abbr> tag can be used without a title, it's most useful when the expansion is provided. The second line shows the best practice.
Example 4: First Use on a Page
<p>The <abbr title="HyperText Markup Language">HTML</abbr> specification is maintained by the W3C. Learning <abbr>HTML</abbr> is the first step.</p>
Explanation It's a common practice to define an abbreviation with the <abbr> tag the first time it's used on a page to provide context immediately.
Example 5: Combining with Other Elements
<p>Learn more about the <a href="https://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a>.</p>
Explanation The <abbr> tag can be nested inside other elements, like an anchor tag (<a>), to provide both functionality (a link) and semantic meaning (an abbreviation).
Indicating contact information (<address>)
The <address> tag is used to provide contact information for the author or owner of a document or an article. This can include a name, email address, physical address, phone number, or social media links. It should not be used for arbitrary addresses, only for contact information related to the content.
Example 1: Basic Author Contact
<address>
Written by Jane Doe.<br>
Visit us at: example.com<br>
Somewhere, USA
</address>
Explanation This shows a simple use of the <address> tag to provide authorship and location details for the content of the page.
Example 2: Using a mailto Link
<address>
Contact the author: <a href="mailto:jane.doe@example.com">Jane Doe</a>.
</address>
Explanation The <address> tag is the semantically correct place to put a mailto link for the document's author or maintainer.
Example 3: Contact for an <article>
<article>
<h2>How to Bake Sourdough</h2>
<p>A detailed guide to baking...</p>
<footer>
<address>
By John Smith. Questions? Email <a href="mailto:j.smith@example.com">me</a>.
</address>
</footer>
</article>
Explanation When placed inside an <article>, the <address> tag provides contact information specifically for that article, not the entire page.
Example 4: Linking to a Social Media Profile
<address>
Follow us on <a href="https://twitter.com/example">Twitter</a>.
</address>
Explanation Contact information is not limited to physical or email addresses. A link to a social media profile is also appropriate within an <address> tag.
Example 5: Multiple Forms of Contact
<address>
John Appleseed<br>
Email: <a href="mailto:j.appleseed@example.com">j.appleseed@example.com</a><br>
Phone: <a href="tel:+15551234567">(555) 123-4567</a>
</address>
Explanation This example demonstrates how to structure multiple types of contact information, including mailto and tel links, within a single <address> block.