Writing Semantic HTML is about using the right HTML elements to convey or reinforce information about the kind of information contained within them. That is, the HTML tags play an important part in structuring of content, and are not just a way to group information into chunks for styling (like how it used to be done through
div for all types of content).
It also means NOT to use a tag for the incorrect reason. Ex: don't use an
strong tag just for styling (font-weight) -use it to emphasize text.
Semantic HTML aims to describe the meaning of the content present within HTML tags, making it clearer for both programmers and machines that process this information.
- Accessibility: Semantic HTML gives context to screen readers, braille readers, TTS, etc. to provide readout, keyboard navigation & other accessibility features. The main content can be easily separated and prioritized over subsidiary, sections can be easily navigated, etc.
Its easier for search engines to index content and prioritize relevant content. Ex: Google snippet lists using to display
Good Dev Practice:
Semantic code is cleaner & easier to understand. It is also an effective way of separating content and styling. Moreover, many semantic tags come with useful functionalities & enhancements. Ex: a
formcan be navigated with Tab, Tab+Shift, etc.
For high-level structuring of the document we use the correct tags of
headerrepresents introductory content, typically a group of introductory or navigational aids. It may contain some heading elements but also a logo, a search form, etc.
navused for in-site navigation links (as opposed to naormal
mainrepresents the dominant content of the page
asideis a portion whose content is only indirectly related to the document's main content (it is not required to understand the current content)
articlea self-contained portion which is intended to be independently distributable or reusable (ex: a blog post, news article)
sectionis a part of a standalone content (ex: a part of a blog post post which may or may not have/need a heading)
addressindicates that the enclosed HTML provides contact information for a person or people, or for an organization
footerrepresents a footer for its nearest sectioning content or the site
(This is just an example - it doesn't have to be exactly this way)
Coming to the content, using proper and structured headers(
p tags helps in structuring the data. Some screenreaders take break after paragraph break. Users may be able to skip by sections (identified by headers).
dl along with
li are to be used for lists.
Here are some tags you can use to provide more information on parts of text (rather than using
strongindicates that its contents have strong importance (this is semantic as compared to
emstresses text emphasis (use this as opposed to the not semantic
citedescribe a reference to a cited work, and includes the title of that work.
qindicates that the enclosed text is a short inline quotation.
blockquoteindicates that the enclosed text is an extended quotation (usually rendered visually by indentation)
dfnused to indicate the term being defined within the context of a definition phrase or sentence.
abbrrepresents an abbreviation or acronym (the optional 'title' attribute can provide an expansion or description for the abbreviation)
timeused to represent time or time duration
kbdrepresents a span of inline text denoting textual user input from a keyboard, voice input, or any other text entry device
codeindicates that the text is a short fragment of computer code.
samprepresents sample (or quoted) output from a computer program
varrepresents the name of a variable in a mathematical expression or a programming context
delrepresents a range of text that has been deleted from a document.
insrepresents a range of text that has been added to a document
A lot of information can be packed with co-relational tags - such as
This is only a basic introduction. You can find all the HTML tags on this MDN page.