HTML5 SEO Semantic Layout Section

 

There are many new semantic elements in the HTML5 standard, which can be used by web pages to create more semantically structured content, helping search engines and developers to interpret the web page structure more clearly, so it is also possible to make good use of HTML5 semantic tags Enhance the SEO (search engine optimization) of web pages.

The main semantic structure tags of HTML5 are <section> , <article> , <nav> , <header> , <footer> , <main> , <aside> . The method of use is to replace these semantic tags in appropriate semantic blocks. The old idiomatic and meaningless <div> .

• <section>: A section with its own obvious meaning
• <article>: The content itself is an independent and complete block
• <nav>: Navigation link block
• <header>: header block
• <footer>: Footer block
• <main>: Main content block of the page
• <aside>: Blocks not related to the main content

New Semantic Tags in HTML5

The release of HTML5 has seen the introduction of several new semantic tags that provide even richer information to search engines. Here is an overview of several HTML5 elements and what they mean for WordPress on-page SEO:

• <main>: The <main> tag encloses the dominant content of the blog including all article content and other related sections that extend the central theme of the page, such as the <article> tag and supporting <section> tags. 
• <article>: The <article> tag makes it easy to mark new blog posts or article entries in an online publication. Search engines can put more weight on any content wrapped with this tag. It also helps to clean up the HTML code by reducing the use of <div> tags.
• <section>: Blog posts are typically broken into different sections to make it easier for users to find what they are looking for. The <section> tag can be used to specify these subsections of your content, each with their own separate HTML heading. 
• <header>: The <header> tag is similar to the <h1> tag in that it can be used to specify the header of a page. But it can also be used to indicate the header section of a page and can even contain navigation links and other relevant text.
• <footer>: While not as useful as the <header> tag, the <footer> tag still offers SEO benefits as it can be used to specify content in the footer section of a website such as company information and other useful links. Each page can even have its own footer section.
• <nav>: Navigation is undoubtedly one of the most important aspects of a site. The <nav> tag can be used to specify links on a page such in the main site navigation or for pagination.
• <video>: The <video> tag is easily one of the most useful tags as it allows for cross-browser compatibility to display videos without having to use Flash. HTML5 also makes it possible to include additional information about the video such as captions and subtitles.
• <aside>: An <aside> tag can be like a section tag, but one that focuses on secondary content such as  sidebar, or a post-article call to action might be a good place to use <aside> tags.

The page structure constructed with HTML5 semantic structure tags will look like this:

Please click on the respective link for the detailed introduction of each semantic tag.