What Are They and How To Use Them!
What Are They and How To Use Them!
If you know a little about HTML, you will know that HTML tags are (mostly) used to format content – these tags tell the browser how to display the content on the page. They give no indication as to what type of content they contain or what role that content plays in the page.
Semantic HTML5 addresses this shortcoming by defining specific tags to indicate clearly what role is played by the content those tags contain. That explicit information helps robots/crawlers like Google and Bing to better understand which content is important, which is a subsidiary, which is for navigation, and so on.
By adding semantic HTML tags to your pages, you provide additional information that helps Google and Bing understand the roles and relative importance of the different parts of your page.
This guide assumes a ground-level understanding of adding HTML to a page. If all this starts getting a bit overwhelming, stepping back and looking at an HTML introduction guide would be helpful.
Examples:
div and span tagsdiv and span tags. Non-semantic / generic.
These are examples of non-semantic HTML elements. They serve only as holders to convey to the browser how the content should be displayed. They give no information about the role the content they contain plays on the page.
Semantic tagsExamples of semantic tags.
These are semantic elements. To screen readers and search engine bots, each element defines the role of the content contained within their tags.
Why do I need to use semantic HTML5 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.
Google’s and Bing’s bots (spiders) are, if not blind, seriously sight-impaired. 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.
Efeem - Create The Green
If you know a little about HTML, you will know that HTML tags are (mostly) used to format content – these tags tell the browser how to display the content on the page. They give no indication as to what type of content they contain or what role that content plays in the page.
Semantic HTML5 addresses this shortcoming by defining specific tags to indicate clearly what role is played by the content those tags contain. That explicit information helps robots/crawlers like Google and Bing to better understand which content is important, which is a subsidiary, which is for navigation, and so on.
By adding semantic HTML tags to your pages, you provide additional information that helps Google and Bing understand the roles and relative importance of the different parts of your page.
This guide assumes a ground-level understanding of adding HTML to a page. If all this starts getting a bit overwhelming, stepping back and looking at an HTML introduction guide would be helpful.
Examples:
div and span tagsdiv and span tags. Non-semantic / generic.
These are examples of non-semantic HTML elements. They serve only as holders to convey to the browser how the content should be displayed. They give no information about the role the content they contain plays on the page.
Semantic tagsExamples of semantic tags.
These are semantic elements. To screen readers and search engine bots, each element defines the role of the content contained within their tags.
Why do I need to use semantic HTML5 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.
Google’s and Bing’s bots (spiders) are, if not blind, seriously sight-impaired. 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.
Comments
Post a Comment