Semantic HTML and Accessibility: A P.O.V Summary
Hyper Text Markup Language (HTML) is used in creating web pages. It is usually used in conjunction with CSS and JavaScript. In the past three weeks of my introduction to programming, I have understood that when writing code you want to be clear in expressing your intention as a developer both to the web browser and the human brain. The goal should be clear cut communication. You want to think of every scenario possible first as if you were a potential user before you begin to write. In other words, the elements we make use of need to be user friendly, semantic and enable accessibility.
In English language semantics is an adjective relating to meaning in a language or logic. However, https://developer.mozilla.org defines semantics in programming as the meaning of a piece of code. It refers to the purpose of an element rather than what it looks like.
<div class=”descriptionbox”>
<p class=”funfact”>His name is Poodle bear. He is the most courageous puppy ever.</p>
<ul class=”info”>
<li><span>AGE</span>: 1 year</li>
<li><span>COLOUR</span>: Fluffy Brown</li>
<li><span>DATE OF BIRTH</span>: 01/02/2019</li>
</ul>
</div>
In HTML, there are different elements that can be used to describe the same function, but semantic HTML encourages the use of elements that would convey your intended meaning best. Semantic HTML is the use of HTML markups to reinforce the meaning of information in webpages or applications rather than to define presentation or looks (https://en.wikipedia.org/wiki/semantic_HTML). For example using the <div> element as opposed to using <section> element to indicate a standalone section for the description box in the sample code above. The <div> element does not explain its content, it only functions as a container for the content.
In the process of using semantics the webpage or application must also be accessible. Using heading tags <h1> to <h6> for proper description of sections, alt attribute for instances where the images <img> are unreadable by the browser, lang attribute to indicate the language the browser should be displayed in and proper description of links <link> to inform the users of their destination (this will encourage trust) are ways to ensure the webpage is accessible and user friendly.
While writing this article, I reviewed the past three projects we were assigned and I realized areas I could have used semantic HTML but did not. I am currently thinking to myself I could have done this instead of that. Nevertheless, I am glad to say I am informed now as you should be, especially as a beginner, you want to build proper culture from your first “hello world”.
Below is a list of semantic HTML elements for use;
<article>,<nav> ,<figcaption>,
<section>, <header>,<summary>,
<main>,<time> ,<mark>,
<aside>, <footer>,<details> ,<figure>
THE IMPORTANCE OF APPLYING SEMANTIC HTML
Semantic HTML facilitates appropriate communication between the developer and the web browser.
It clearly defines its content.
It facilitates accessibility of code and content by developers, screen readers and search engines (seo).
Semantic HTML is easier to navigate and understand.
RESOURCES
https://en.wikipedia.org/wiki/semantic_HTML
https://www.w3schools.com/html/html5_semantic_element.asp
