What Is Semantic HTML? And How to Use It Correctly

Feb 07, 2025 05:18 PM - 1 month ago 56104

What Is Semantic HTML?

Semantic HTML is the usage of HTML tags that intelligibly specify the intent of the contented they enclose to make your website codification much understandable for some developers and hunt engines.

These HTML tags are besides called semantic elements. And supply a meaningful explanation of the content's domiciled wrong a webpage.

For example, <header>is a semantic HTML tag. It encloses the header conception (introductory content) astatine the apical of the page.

You tin spot this and immoderate different communal semantic HTML tags below:

Semantic HTML arsenic it would sectioned connected a webpage.

Semantic HTML vs. Non-Semantic HTML

Semantic HTML tags picture the meaning of content, while non-semantic HTML tags are generic and chiefly utilized for styling and layout purposes.

Non-semantic HTML tags don’t convey immoderate circumstantial meaning astir the contented itself.

Here’s a ocular comparison of non-semantic and semantic HTML codification blocks:

Semantic HTML codification includes tags that picture each constituent while non-semantic HTML codification uses the wide div tag for elements.

Comparing the 2 codification blocks, you tin easy spot that the non-semantic codification utilizing only <div> and <span> tags doesn’t picture the page’s contented aliases sections.

Whereas the semantic HTML codification provides clear descriptions that moreover non-coders tin understand.

For example, the semantic HTML codification tells you that “My Website” is simply a page header.

Semantic HTML tags are important because they amended the accessibility and knowing of your pages for some humans and hunt engines.

Here are the main benefits of utilizing semantic HTML:

Better personification acquisition and accessibility: Screen readers and different devices tin navigate semantic layouts much efficaciously and accurately picture your contented to users
Better SEO performance: Semantic tags successful HTML thief web crawlers for illustration Googlebot accurately place the applicable parts of your contented from your pages' HTML. This tin lead to amended indexing and perchance higher rankings for applicable keywords.
Increased chance of appearing for rich | results: Semantic elements tin heighten schema markup—a codification you adhd to your pages to thief Google show rich | results. Rich results incorporate further accusation for illustration ratings, prices, aliases arena dates.
Future-proof code: Semantic HTML follows web standards that make your codification much compatible pinch early technologies
Clear communication: Developers, designers, and SEOs moving collaboratively tin easy understand the intent of each section. Which makes maintaining and updating your website easier.

Further reading: Improve SEO: 11 Steps to Improve Your Rankings

Common Semantic HTML Elements

There are galore semantic HTML elements, but let’s look astatine the astir commonly utilized semantic tags by category:

Semantic HTML Tags for Structure

These HTML semantic elements specify the building and layout of a page:

<header>: Indicates the introductory aliases navigational contented of a webpage aliases a section. It often includes elements for illustration headings, navigation menus, hunt bars, and logos.
<nav>: Defines a artifact of navigation links. Use it for site-wide navigation (e.g., links to “Home,” “About Us,” aliases “Services”) aliases to group links into circumstantial sections wrong a page (like “Features,” “Pricing,” aliases “Table of Contents”).
<main>: Represents the superior contented aliases main sections of a webpage. Use this tag only erstwhile per page.
<section>: Groups related contented that shares a communal taxable aliases purpose. For example, you tin disagreement a landing page into sections for illustration “Features,” “Benefits,” aliases “Use Cases.”
<article>: Defines standalone contented that you tin reuse aliases administer separately, for illustration blog posts, merchandise reviews, and news articles.
<aside>: Represents tangential aliases supplemental contented that supports aliases provides further discourse to the main content. Some examples see sidebars, callouts, aliases a artifact of related links.
<footer>: Indicates the footer of a page aliases conception that typically includes navigation links, interaction information, and copyright information

Here’s an illustration HTML codification artifact marked up pinch the supra semantic tags:

Semantic HTML tags arsenic seen successful code.

This is what the resulting page tin look for illustration (annotated semantic tags show the areas they impact).

Semantic HTML Tags for Text

These html semantic tags convey the meaning and format of the matter they’re applied to:

<h1> to <h6> (headings): Indicate the level of accusation connected a webpage. For example, <h1> marks the top-level heading, while <h2> done <h6> correspond subheadings.
<p> (paragraph): Represents a artifact of text—typically a paragraph. Avoid utilizing <p> for azygous words aliases phrases.
<a> (anchor): Marks hyperlinks that lead to different pages aliases sections wrong the aforesaid document. Use descriptive, applicable anchor text to pass users and hunt engines wherever the nexus leads.
<ol> (ordered list): Indicates an ordered (numbered) list. Use it for items that request to beryllium presented successful a circumstantial series (e.g., steps successful a recipe).
<ul> (unordered list): Defines an unordered (bulleted list). Use it for contented that doesn’t require bid (e.g., a database of features).
<q> / <blockquote>: Represents matter pinch quotations. Use the <q> tag for shorter, inline quotes and <blockquote> for long, multi-line quotations.
<em> (emphasis): Marks matter to bespeak importance, typically displayed successful italics. Use sparingly to item important information—not for styling.
<strong> (strong emphasis): Indicates matter of beardown importance, typically displayed successful bold. Use it to item captious information.

Check retired this illustration HTML codification artifact pinch matter marked up utilizing the supra semantic tags:

Semantic HTML tags for matter are added to this example.

And here’s what the resulting page tin look for illustration (annotated semantic tags show the areas they impact).

Other Semantic HTML Tags

These tags service specialized purposes beyond wide building aliases text:

<figure> and <figcaption>: Provide discourse to grouped media contented (e.g., images, diagrams, aliases charts). Pair the <figure> tag pinch the <figcaption> constituent to see a caption aliases description.
<mark>: Highlights matter applicable to the existent context, often utilized to stress hunt results aliases cardinal points wrong text. By default, browsers render <mark> pinch a yellowish background.
<pre>: Indicates preformatted matter and is perfect for displaying codification snippets aliases immoderate different matter wherever formatting is crucial. For example, retaining whitespace, statement breaks, etc.

Semantic HTML Best Practices

Follow these champion practices to efficaciously instrumentality semantic HTML elements:

Use the Right Elements for the Right Purpose

Always take semantic elements that lucifer the content's purpose.

For instance, usage <header> for introductory content, <article> for standalone pieces, and <nav> for navigational links. This makes your HTML easy-to-read and SEO-friendly.

Don't Use Semantic HTML Tags for Styling

Don’t usage semantic HTML tags simply for their ocular effects.

For example, don’t usage <h1> to <h6> tags conscionable to make matter large. Use them for the main heading and subheadings of your content.

Similarly, don’t use <strong> aliases <em> elements conscionable to adhd bold aliases italics to matter that doesn't request emphasis.

In short, take semantics only to convey meaning and context. For styling and appearance, usage CSS.

Nest Tags Correctly

Make judge to nest the semantic tags successful the correct bid to support a logical structure.

For instance, spot headings wrong <section> aliases <article> tags and guarantee you spot a <footer> wrong its genitor context.

Also, usage the <main>element only erstwhile per page. And make judge not to nest it wrong different semantic tags for illustration <header>, <footer>, <article>, aliases <aside>.