Semantic HTML and Accessibility
HTML is a computer language devised to allow website creation. These websites can then be viewed by anyone else connected to the Internet. Semantic HTML (Hypertext Markup Language) is writing and structuring your markup and webpage in a way that gives it meaning to users, those with disabilities, machines (screen readers), SEO’s and the likes. This can be done with the proper use of HTML semantic tags or elements. There are a lot of these HTML semantic elements and we can’t possibly talk about them all. Some of them are single self-closing elements while others require a closing tag. We’ll highlight a few of those important ones below:
The <head> tag contains other head elements such as <title>, <meta>, <link>, <style>, etc.
<head>
<meta charset=”UTF-8">
<meta name=”viewport” content=”width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel=”stylesheet” href=””>
</head>
The <body> tag contains all the other elements and contents of the html document such as images, videos, paragraphs, etc.
The <header> element holds the icon of the web page, the navigation and some introductory content. This element is not the same as the <head> element.
The <nav> tag contains the navigation. Navigation that could lead to other parts of the website like the About page, Contacts page, Gallery, etc. or to parts of a webpage (for single page sites).
<header>
<nav>
ABOUT
GALLERY
CONTACTS
</nav>
</header>
Up next is the <main> tag/element. It shows the main, non-repetitive content of the web page. It houses HTML elements like <section>, <article>, <aside>, <p>, <ul>, <ol>, etc. Contents like the header and the footer can rarely be placed inside this element.
The <section> element specifies different sections of a HTML document or webpage. The section usually has a heading in form of a <h1> tag.
The <h1>, <h2>, <h3>, <h4>, <h5> and <h6> tags are all heading tags. The <h1> holds the most important or major heading while <h6> holds the least important heading. It is good practice to use one <h1> element per page.
The <p> is a paragraph element,it holds sentences and the likes. Every <p> element always starts on a new line.
The <article> element holds contents that are individualistic and free-standing. They can be placed within a section for convenience.
The <aside> element is usually used as a sidebar. It defines some content aside from the content it is placed in. The aside content should not be directly related to the surrounding content.
The <footer> element is usually found at the base of the web page since it holds the last contents. Social media Icons, contact email and address can be placed in the footer.
<footer>
©2020 peterokerulu
<a href=”www.facebook.com"> Facebook </a>
<a href=”www.twitter.com"> Twitter </a>
</footer>
Below is an image that shows the arrangement of the HTML semantic tags talked about in this short article.
There are a whole lot of other semantic tags like the <form> tag, the <table> tag, the <details> tag, the <figure> tag, the <summary> tag, the <li> list tag, both the ordered list <ol> and the unordered list <ul>.