Type Here to Get Search Results !

The Guide for Semantic HTML On King Peedia

Semantic HTML Guide On King Peedia

Imagine your webpage is like a book, and semantic HTML is like using chapters and headings to organize the content. Just like how chapters help you find the main ideas in a book easily, semantic HTML helps search engines and people understand what your webpage is about. This clarity can boost your SEO because search engines can better grasp the important parts of your content. Plus, it makes your webpage more accessible for everyone, including those using screen readers or other assistive technologies.

To clarify, Semantic HTML isn't a direct ranking factor. Rather, it simplifies the process for search engines to pinpoint the main content of a webpage, which is incredibly beneficial.

In Shorts:

  • Clear Content Organization: Think of your webpage like a book. Semantic HTML helps organize it neatly, making it easy for search engines and people to understand.
  • Highlight Important Parts: Search engines pay extra attention to the main content. Semantic HTML helps highlight this content, making your page more valuable to them.
  • Use <main> Element: This HTML tag tells search engines where your main content starts and ends, helping them focus on what matters most.
  • Structured Webpages: Elements like <header>, <nav>, and <footer> give your webpage a clear structure, making it easier for search engines to navigate.
  • Better Accessibility: Semantic HTML not only improves SEO but also makes your website more accessible to everyone, ensuring a smooth experience for all users.

The Guide for Semantic HTML Infographic

Prioritizing Main Content for Search Engine Optimization

We are tell that the scoop: search engines, like Google, pay special attention to the main content of a webpage. According to Google's Search Quality Rater Guidelines, they categorize content into three types:

  • Main content
  • Supplementary content
  • Advertising content

1. Main Content:

This is the juicy stuff search engines love to index and rank—the meat and potatoes of your webpage.

2. Supplementary Content:

Supplementary content is handy, like site navigation or related links, but it doesn't tickle search engines' fancy for indexing.

3. Advertising Content:

Search engines aren't really interested in crawling advertising content when they visit a webpage.

Semantic HTML for Webpage Excellence

When it comes down to it, the main goal of a webpage is achieved through its main content. Supplementary and advertising content, though helpful in their own ways, don't quite hit the mark.

Main Content Takes Center Stage

According to the Search Quality Raters Guidelines, main content is the star player. It's what gets a higher Page Quality score from the raters because it directly contributes to achieving the webpage's purpose.

Aim for Success

Even though this might not directly affect your ranking, crafting main content that nails the webpage's purpose is still Important. The Raters Guide emphasizes the importance of evaluating how well a page achieves its purpose.

Unlocking Success

The secret sauce lies in Semantic HTML, which guides search engine crawlers straight to that essential main content, helping your webpage shine brighter.

Mastering Page Structure with Semantic HTML

1. Page Structure 101 – Semantic HTML:

The golden rule of SEO is to make webpages a breeze for search engines to decipher.

Semantic HTML lays down the blueprint for a webpage's structure, neatly dividing it into three essential parts: main content, supplementary content, and advertising content.

2. Breaking It Down:

When we mention Semantic HTML, we're not delving into the meaning of individual words. Instead, we're talking about the overall meaning of a webpage, dissected into its core components.

Just like the human body comprises a head, torso, arms, and legs, a webpage is a composition of various parts.

3. The Anatomy of a Webpage:

Take a glance at a typical webpage layout:

  • Header (the top section with the logo)
  • Navigation
  • Main Content
  • Footer

4.Spot the Gem:

See that section labeled "Main Content"? That's the crown jewel! It's what search engines are most eager to index when combing through a webpage. It's the prized possession mentioned in the Search Quality Raters Guidelines.

5. Cutting Through the Clutter:

When search engines index a webpage, they're not concerned about the bells and whistles like navigation bars, footers, or flashy ads. They're fixated on indexing the main content.

6. Guiding the Way:

Enter Semantic HTML! It acts as a GPS, pinpointing the exact location of the main content for search engine indexers to scoop up and rank.

Role of the <main> HTML Element

1. Meet the <main> Element:

When it comes to signaling to a search engine which content to index, the <main> HTML element is your trusty sidekick.

2. How It Works:

The <main> element kicks off the main content section with its opening tag (<main>), marking where the excitement begins.

And when the main show is over, it gracefully exits with its closing tag (</main>), indicating where the curtain falls.

3. One and Only:

Remember, a webpage can have only one <main> section. It's like the VIP section reserved for your star content.

4. Simple Steps:

To highlight where your main content starts, just slot in the <main> element. Then, wrap things up neatly with the closing HTML </main> tag to show where the main content wraps up.

5. Smooth Sailing for Search Engines:

By using the <main> element, you're basically rolling out the red carpet for search engines, making it a breeze for them to zoom in on your main content and index it.

Maximizing Website Structure: Harnessing <header>, <nav>, and <footer> Elements


The <header> element is like the top hat of your webpage—it's where your logo and maybe a search bar reside. It typically sits above the navigation area and can also wrap around headings (like H1, H2, etc.), although that's not mandatory.


Now, the <nav> element is your go-to for encapsulating your navigation area. So, if your navigation resides within a <div>, you can snugly nest the <nav> element right after it.



   <nav> main navigation links and stuff</nav>


Technically, you don't really need the <div> element if you're using <nav>. They both serve as containers, functioning identically in modern browsers. However, <nav> adds a semantic layer of meaning, while <div> is just a generic container.

It's worth noting that while a <nav> element can sit within a <div>, the reverse isn't advisable. Keeping only navigational elements (like links) within a <nav> element ensures clarity, especially for screen readers.


Last but not least, we have the <footer> element. Like <nav>, it's another container akin to a <div>, but with the added bonus of semantic significance.

Web Content: Semantic HTML and Supplementary Elements

Enter <aside> Element:

Picture this: your webpage boasts some stellar main content, but it's accompanied by sidebars, ads, and call-out boxes filled with extra tidbits tangentially related to the main dish.

Introducing the <aside> HTML element.

How It Works:

Similar to other semantic elements, <aside> comes with both an opening and a closing tag, neatly encapsulating its content.

Here's a glimpse:


   <p>Stuff that's off-topic to the main content but within the main content area.</p>



   <div>Affiliate advertising</div>



   Sidebar with content that is not a part of the main content


This element serves as the perfect vessel for those supplementary goodies that enhance but don't steal the show from your main content.

The Role of <article> in Semantic HTML

1. The Power of <article>:

In the realm of Semantic HTML, clarity is king. The <article> element is your ticket to delineating the meat of your content—the actual articles—from the rest.

2. Where It Fits:

You can nest the <article> element within the <main> element, but not the other way around. However, its most straightforward and practical use is on a content category page, where you showcase various page titles and excerpts.

3. How to Use It:

Wrap each individual title/excerpt with an opening <article> tag and its corresponding closing </article> tag. The beauty of it? You can have multiple <article> elements on a single page, each encapsulating its own piece of content.

Here's a peek:


   <h2>Title of the Article</h2>

   <p>Excerpt of the article...</p>



   <h2>Another Article Title</h2>

   <p>Excerpt of another article...</p>


With <article>, you're not just organizing your content—you're also making it crystal clear what constitutes the real deal in your webpage's landscape.

Exploring Semantic HTML Elements

Absolutely, let's dive into the world of Semantic HTML elements:

1. A Plethora of Options:

Semantic HTML offers a treasure trove of around 100 elements, each serving a specific purpose. But fear not, you don't need to use them all!

2. Get Started:

If you're eager to explore further, I recommend checking out the Mozilla developer pages on Semantic HTML. It's a goldmine of knowledge.

3. The Essentials:

At the bare minimum, consider incorporating the <main> and <aside> elements. They form the backbone of content organization.

4. Level Up:

For an even more robust structure, throw in <header>, <nav>, and <footer>. These elements provide a bird's-eye view of your webpage, enhancing its overall layout.

5. Unlock Accessibility:

Don't forget about elements like <button>, <form>, and <section>. They play a important role in improving accessibility, ensuring everyone can navigate your content seamlessly.


King Peedia's tips on Semantic HTML are like a roadmap for better website organization and SEO. By using elements like <main>, <aside>, <header>, <nav>, <footer>, and <article>, you can make your content clearer for both search engines and users. 

Remember, Semantic HTML isn't just about coding—it's about improving accessibility and user experience. So, start with the basics, explore further if you're curious, and happy coding!

Happy Coding!


Post a Comment

* Please Don't Spam Here. All the Comments are Reviewed by Admin.