Writing Semantic HTML
Tags: html, webdev, beginners
Published: 2020-09-13 19:50:55

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?

1. **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.
2. **SEO:**
Its easier for search engines to index content and prioritize relevant content. Ex: Google snippet lists using to display `li` elements
3. **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

![Example layout](https://dev-to-uploads.s3.amazonaws.com/i/mpjv5mkzc9bc2zsns3ex.png)

(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](https://developer.mozilla.org/en-US/docs/Web/HTML/Element).