Writing Semantic HTML

#html #webdev #beginners

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.

Why should you care about semantic HTML?

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.
SEO: Its easier for search engines to index content and prioritize relevant content. Ex: Google snippet lists using to display li elements
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 button , form can be navigated with Tab, Tab+Shift, etc.

How to make your document semantic?

1. Page Layout /Document Structure

For high-level structuring of the document we use the correct tags of header, footer, nav, main, aside, section, (form) and article

header represents introductory content, typically a group of introductory or navigational aids. It may contain some heading elements but also a logo, a search form, etc.
nav used for in-site navigation links (as opposed to naormal <a> tags
main represents the dominant content of the page
aside is a portion whose content is only indirectly related to the document's main content (it is not required to understand the current content)
article a self-contained portion which is intended to be independently distributable or reusable (ex: a blog post, news article)
section is a part of a standalone content (ex: a part of a blog post post which may or may not have/need a heading)
address indicates that the enclosed HTML provides contact information for a person or people, or for an organization
footer represents a footer for its nearest sectioning content or the site

(This is just an example - it doesn't have to be exactly this way)

2. Inline Text Semantics

Coming to the content, using proper and structured headers(h1, h2,... h6) and 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).
ul, ol, 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 span)

strong indicates that its contents have strong importance (this is semantic as compared to b).
em stresses text emphasis (use this as opposed to the not semantic i)
cite describe a reference to a cited work, and includes the title of that work.
q indicates that the enclosed text is a short inline quotation.
blockquote indicates that the enclosed text is an extended quotation (usually rendered visually by indentation)
dfn used to indicate the term being defined within the context of a definition phrase or sentence.
abbr represents an abbreviation or acronym (the optional 'title' attribute can provide an expansion or description for the abbreviation)
sub subscript element.
sup superscript element.
time used to represent time or time duration
kbd represents a span of inline text denoting textual user input from a keyboard, voice input, or any other text entry device
code indicates that the text is a short fragment of computer code.
samp represents sample (or quoted) output from a computer program
var represents the name of a variable in a mathematical expression or a programming context
del represents a range of text that has been deleted from a document.
ins represents a range of text that has been added to a document

A lot of information can be packed with co-relational tags - such as dd and dt, figure and figcaption, label and input

This is only a basic introduction. You can find all the HTML tags on this MDN page.

Top comments (5)

Tyler • Sep 18 '20

Really good post!
As you mentioned, semantic HTML is both great in terms of a11y and keeping your HTML tidy. You can easily determine what element does what when we use semantic HTML.
Plus it helps AT users navigate the page quicker!