Writing meaning HTML on the web and Why you need it?
Div tags and span tags are the two most overused tags in the web development world. Although they can be used to do any kind of job, they might not be a good choice for search engines.
Search engines heavily depend on HTML semantic tags to extract the essence of a webpage. To know more about SEO and how search engines work check here.
Semantic HTML means HTML with meaning behind its elements. In other words, what is each bit of content on the page structurally speaking? Is it an article, or is it something that's not really the main focus of the page?Is it vocally emphasized? Is it an address, or is it an abbreviation?
Accessible websites feature semantic, meaningful HTML at their core. Indeed, you get a great start on an accessible website just by leveraging all that HTML has to offer, rather than limiting yourself to a pile of divs and spans.
Here are some HTML tags with semantic meaning:
| tag | description |
|---|---|
| article | represents a section of content that forms an independent part of a document or site; like, a newspaper article, or a blog entry. |
| header | represents introductory content, typically contains heading, logo, sometimes navigation links. |
| footer | typically present at the bottom of the webpage and it contains information like a disclaimer, links to privacy policies, social media, contact information, and a copyright statement, all that stuff usually winds up in the footer. |
| strong | denotes important and key words, and makes the text bold. |
| em | used to emphasis on a word, it also makes the text italic. |
Some other tags which are extremely useful and meaningful but not in this list are:
- small
- figure
- figcaption
- noscript
- aside
- time
- address
- section
- blockquote
- nav
- cite
- abbr
- wbr
- samp
- details
- summary
- hr