What Is Semantic HTML? And How to Use It Correctly

What Is Semantic HTML?

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

These HTML tags are besides called semantic elements. And supply a meaningful statement of the content's relation 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 vs. Non-Semantic HTML

Semantic HTML tags picture the meaning of content, portion 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 examination of non-semantic and semantic HTML codification blocks:

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

Whereas the semantic HTML codification provides wide descriptions that adjacent non-coders tin understand.

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

Semantic HTML tags are important due to the fact that 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 idiosyncratic acquisition and accessibility: Screen readers and different tools tin navigate semantic layouts much efficaciously and accurately picture your contented to users
• Better SEO performance: Semantic tags successful HTML assistance web crawlers similar Googlebot accurately place the applicable parts of your contented from your pages' HTML. This tin pb to amended indexing and perchance higher rankings for applicable keywords.
• Increased accidental of appearing for affluent results: Semantic elements tin heighten schema markup—a codification you adhd to your pages to assistance Google show affluent results. Rich results incorporate further accusation similar ratings, prices, oregon lawsuit dates.
• Future-proof code: Semantic HTML follows web standards that marque your codification much compatible with aboriginal technologies
• Clear communication: Developers, designers, and SEOs moving collaboratively tin easy recognize 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 operation and layout of a page:

• <header>: Indicates the introductory oregon navigational contented of a webpage oregon a section. It often includes elements similar 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,” oregon “Services”) oregon to radical links into circumstantial sections wrong a leafage (like “Features,” “Pricing,” oregon “Table of Contents”).
• <main>: Represents the superior contented oregon main sections of a webpage. Use this tag lone erstwhile per page.
• <section>: Groups related contented that shares a communal taxable oregon purpose. For example, you tin disagreement a landing leafage into sections similar “Features,” “Benefits,” oregon “Use Cases.”
• <article>: Defines standalone contented that you tin reuse oregon administer separately, similar blog posts, merchandise reviews, and quality articles.
• <aside>: Represents tangential oregon supplemental contented that supports oregon provides further discourse to the main content. Some examples see sidebars, callouts, oregon a artifact of related links. 
• <footer>: Indicates the footer of a leafage oregon conception that typically includes navigation links, interaction information, and copyright information

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

This is what the resulting leafage tin look similar (annotated semantic tags amusement the areas they impact).

Semantic HTML Tags for Text

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

• <h1> to <h6> (headings): Indicate the hierarchy of accusation connected a webpage. For example, <h1> marks the top-level heading, portion <h2> done <h6> correspond subheadings.
• <p> (paragraph): Represents a artifact of text—typically a paragraph. Avoid utilizing <p> for azygous words oregon phrases.
• <a> (anchor): Marks hyperlinks that pb to different pages oregon 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 necessitate bid (e.g., a database of features).
• <q> / <blockquote>: Represents substance with quotations. Use the <q> tag for shorter, inline quotes and <blockquote> for long, multi-line quotations. 
• <em> (emphasis): Marks substance to bespeak importance, typically displayed successful italics. Use sparingly to item important information—not for styling.
• <strong> (strong emphasis): Indicates substance of beardown importance, typically displayed successful bold. Use it to item captious information.

Check retired this illustration HTML codification artifact with substance marked up utilizing the supra semantic tags:

And here’s what the resulting leafage tin look similar (annotated semantic tags amusement the areas they impact). 

Other Semantic HTML Tags

These tags service specialized purposes beyond wide operation oregon text:

• <figure> and <figcaption>: Provide discourse to grouped media contented (e.g., images, diagrams, oregon charts). Pair the <figure> tag with the <figcaption> constituent to see a caption oregon description.
• <mark>: Highlights substance applicable to the existent context, often utilized to stress hunt results oregon cardinal points wrong text. By default, browsers render <mark> with a yellowish background.
• <pre>: Indicates preformatted substance and is perfect for displaying codification snippets oregon immoderate different substance wherever formatting is crucial. For example, retaining whitespace, enactment 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 marque substance large. Use them for the main heading and subheadings of your content. 

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

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

Nest Tags Correctly 

Make definite to nest the semantic tags successful the close bid to support a logical structure. 

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

Also, usage the <main>element lone erstwhile per page. And marque definite not to nest it wrong different semantic tags similar <header>, <footer>, <article>, oregon <aside>.

Find and Fix HTML Tag Issues 

Well-implemented semantic HTML tin amended your website’s SEO show and its idiosyncratic experience.

However, utilizing them incorrectly tin confuse hunt engines and pb to problems with ranking your content.

You tin debar immoderate of these issues by conducting regular SEO audits for your site.

Semrush’s Site Audit instrumentality helps you enactment connected apical of your tract issues—including HTML issues. 

Open the tool, participate your domain, and click “Start Audit.”

Follow the configuration instructions and click “Start Site Audit.”

Next, caput to the “Issues” tab.

And benignant “tag” into the hunt box. 

You’ll spot a database of HTML tag issues if your tract has any.

Most of them are related to HTML tags that aren’t semantic elements. But you tin besides whether determination are immoderate issues with your <h1> tags. 

Click connected “Why and however to hole it” to larn much astir the issues. And travel the recommendations to hole them.