What is semantic html? And how to use it correctly

Brands do not describe the content or sections of the page.

While the semantic HTML code provides clear descriptions that even non-coders can understand.

E.g. Tells the semantic HTML code you that “my website” is a page heading.

Semantic HTML tags are important because they improve the availability and understanding of your pages for both humans and search engines.

Here are the greatest benefits of using Semantic HTML:

• Better user experience and availability: Screen readers and other tools can navigate semantic layouts more effectively and accurately describe your content to users
• Better SEO performance: Semantic tags in HTML Help web crawlers like Googlebot identify exactly the relevant parts of your content from your pages HTML. This can lead to better indexing and potentially higher rankings for relevant keywords.
• Increased chance of acting for rich results: Semantic items can improve schedule marking – a code you add to your pages to help Google show rich results. Rich results contain additional information such as ratings, prices or event dates.
• Future -proof code: Semantic HTML follows web standards that make your code more compatible with future technologies
• Clear communication: Developers, designers and SEOs working in collaboration can easily understand the purpose of each section. Making maintenance and updating your site easier.

Additional reading: Improve SEO: 11 steps to improve your locations

Ordinary semantic html elements

There are many semantic HTML elements, but let’s look at the most commonly used semantic tags by category:

Semantic html tags for structure

These HTML -Semantic elements define the structure and layout on a page:

• 
  
  : Indicates the initial or navigation content of a web page or paragraph. It often includes elements such as headings, navigation menus, search beams and logos.
• 
  
• : Represents the primary content or main section of a webpage. Use this roof only once a day. Page.
• 
  
  : Groups related content that shares a common theme or purpose. For example, you can divide a destination page into sections such as “Features”, “Benefits” or “Use cases.”
• 
  
  : Defines independent content that you can reuse or distribute separately, such as blog posts, product reviews and news articles.
• 
  
• 
  

Here is an example of HTML code block marked with the above semantic tags:

This is how the resulting side can look like (annotated semantic tags show the areas they affect).

Semantic HTML -Tags to Text

These HTML -Semantic tags convey the meaning and format of the text they are used for:

Check this example HTML code block with text marked using the above semantic tags:

And here’s what the resulting side can look like (annotated semantic tags show the areas they affect).

Other semantic html tags

These tags serve specialized purposes in addition to general structure or text:

• 
  

  and

• : Highlights text that is relevant to the current context often used to emphasize search results or key points within text. By default, browsers reproduce with a yellow background.

• : Indicates preformated text and is ideal for displaying coding pieces or any other text where formatting is crucial. E.g. To preserve whitespace, line breaks, etc. 

Semantic html best practice

Follow these best practices to effectively implement semantic HTML elements:

Use the right items for the correct purpose

Always select semantic items that match the purpose of the content.

Use for example

For initial content,

to standalone pieces and

Do not use semantic html tags for styling

Do not use semantic HTML tags only for their visual effects.

For example, do not use

Similarly, don’t apply or Items just to add bold or italics to text that doesn’t need weight.

In short, choose only semantics to convey meaning and context. For styling and appearance, use CSS.

Nest -tags correctly

Be sure to witch the semantic tags in the correct order to maintain a logical structure.

Place, for example, headings inside

or

tags and make sure to place a

Also use

Item only once per Page. And make sure not to wail it within other semantic tags like

At

Find and FIX HTML -tag problems

Well implemented semantic HTML can improve your site’s SEO performance and its user experience.

However, using them incorrectly can confuse search engines and lead to problems with ranking your content.

You can avoid some of these problems by completing regular SEO revisions to your site.

SEMRUSH’s Website Audit Tool helps you keep you on top of your site problems – including HTML problems.

Open the tool, enter your domain and click “Start Revision. “

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

Then go to ”Question“Loss.

And write “Roof“Into the search box.

You will see a list of HTML tag problems if your site has any.

Most of them are related to HTML tags that are not semantic elements. But you can also whether there are problems with your

Click “Why and how to solve it“To learn more about the problems. And follow the recommendations to solve them.