Which html5 element should i use

These are semantic elements. To screen readers and search engine bots, each element defines the role of the content contained within their tags. For sighted users, when a page is well designed visually, it is easy to identify the various parts of a web page at a glance. Headers, menus, and hopefully the main content are all immediately visually apparent.

Now imagine you are blind. For them, the visual clues are phenomenally difficult to see and understand — they need your help.

If you can successfully communicate to Google and Bing which part of the page is the header, which is the footer, and which is for navigation, they will thank you. Most importantly, by telling them which is the most important content, you give them an explicit instruction to prioritize that content.

For users who are blind or visually impaired and rely on screen readers to verbally describe what is on a page, proper use of HTML5 semantic elements will allow screen readers to more accurately communicate your content by making the visual audible.

It is vital to embrace this newer version of HTML so you can make your content accessible to all possible site visitors. Semantic HTML5 is one of those seemingly small details that hits right at the core of indexing that is often underestimated. Accurately implemented semantic HTML5 gives a big helping hand to the indexing algorithms used by Googlebot and Bingbot. It gives them a better understanding and confidence in their understanding of your content, which helps them to index your content better, which in turn helps your SEO efforts.

When Googlebot and Bingbot store the crawled pages in their index, they add a rich layer of annotation. It is that annotative layer that the ranking algorithms use to find and extract content from individual webpages. Richer and more accurate annotation makes for better findability and increases the chances of any given piece of content being considered for ranking by the algorithms. So, the correct use of semantic HTML5 gives your content an advantage in the selective process that is right at the foundation of ranking.

It increases the chances that the ranking algorithms will select your content as a candidate for ranking in the first place. But sub navigation menus elsewhere on the page could also get one. There should be only one per page.

For example, a blog post. It might include contact information and some site navigation. This clear delimitation and explicit attribution of roles to each part of the content makes the page much clearer and easier to index correctly for Google and Bing. Here we have simply defined what role each part of the page plays. When you start applying HTML5, this is a safe place to start - header, nav, main, footer. Super simple example with the most important elements: header, footer, nav, and main.

An inaccurate implementation sends conflicting and confusing signals, which will make things worse, not better.

A simple and correct implementation is already a big step forward in your communication with Google and Bing. Here we have made a hierarchy within our main content. There is an all-encompassing article that identifies the central content within the main tag. This gives an overview of the topic of that part of the page.

According to the W3C: "A semantic Web allows data to be shared and reused across applications, enterprises, and communities.

We just launched W3Schools videos. Get certified by completing a course today! If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:. Links Link Colors Link Bookmarks. WWF was founded in Chrome is the world's most popular web browser today! Firefox has been the second most popular web browser since January, All Rights Reserved. Powered by W3. NET Reference. CSS Examples. NET Examples.