Creating Web Accessibility: Semantic Tags
Tags: webdev, css, beginners, javascript
Published: 2023-02-19 11:10:58

The term "semantic" refers to the meaning or purpose of content, and in the context of HTML, it refers to the use of HTML tags to clearly identify the different parts of a webpage. Using semantic HTML helps to provide a clear and understandable structure to a webpage, making it easier for screen readers and other assistive technologies to interpret and navigate. 

In this post we'll only be focusing on the most commonly used HTML tags and best practices

Semantic HTML is further divided into two parts viz;

- Semantic tags for page structure

- Semantic tags for text


## Semantic tags for page structure
Before HTML5 pages had a rather static structure where almost everything was wrapped in a div, in a div, inside a div... _you get the idea_

![semantic html, comparison of html and html5](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rqlci4xnmzyxxxjwn0yo.jpeg) _Image source: https://towardsdatascience.com/how-to-build-a-recommender-system-quickly-without-setting-up-any-infrastructure-674e30194e8c_

The introduction of html5 brought about page structuring through assigned tags, this not only structures the page better but also provides hierarchy of content for both machine and user readability. Here are some of the commonly used tags, what they represent and where to use them

- `<header>`: Defines a header for a section or page. It contains things like; logo, contact info, navigation menu, call to action buttons, social links and breadcrumbs.

- `<nav>`: Defines a navigation section on a web page.


- `<main>`: Defines the main content area of a web page.


- `<article>`: Defines an article or section of content on a web page.

- `<section>`: Defines a section of a web page.

- `<aside>`: Defines content that is related to the main content, but not central to it. like a table of content or author infomation by the side.

- `<figure>`: Defines a self-contained content, such as an image or a video, with an optional caption.

- `<figcaption>`: Defines a caption for a <figure> element.

These are just few of the numerous semantic tags that were introduced with html5, checkout [list of of html tags](https://www.w3schools.com/TAGS/default.asp) to learn more.

## Semantic tags for text

- `<h1>`-`<h6>`: Defines six levels of headings, with `<h1>` being the most important and `<h6>` being the least important.

- `<p>`: Defines a paragraph of text.

- `<ul>` and `<ol>`: Define unordered and ordered lists, respectively.

- `<li>`: Defines a list item within a list.

- `<blockquote>`: Defines a section of quoted text.

The importance of semantic tags to accessibility can not be overemphasized, Technology as we know it is constantly evolving and so are assistive technologies. Writing semantic HTML helps these technologies to properly read your page layout and content to users with certain disabilities. You can read more on [how assistive technology reads your website](https://www.accessibility.com/blog/assistive-technology-and-your-website). 


Thank you for reading and I hope you go value for your time. Follow me @frontend_jedi to stay updated on this series. Follow me on twitter @excel_bill let's connect and learn together.{% embed https://twitter.com/excel_bill/status/1624857760620748800?s=20 %}