HTML5 video example code included in the guide. Code has been added to clipboard! Reading time 8 min. Contents 1. Structural Elements 5. Inline Elements 5. Working with Text 5. Form Elements 5. Graphics and Sounds 6. Example Copy. Try it Live. Previous Topic Next Topic. Use CSS instead. Previous Page Next Page. All Rights Reserved. Share This:. Obsolete Defines an acronym. Obsolete Embeds a Java applet mini Java applications on the page. Obsolete Specifies the base font for a page. 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. Your message has been sent to W3Schools. W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning.
Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use , cookie and privacy policy.
Copyright by Refsnes Data.
0コメント