In May 2001, an article published by Tim Berners-Lee (the inventor of the World Wide Web), James Hendler, and Ora Lassilain in Scientific America, publicized a new vision for the future of the web — The Semantic Web. An extract from the article reads:
‘The Semantic Web will bring structure to the meaningful content of Web pages, creating an environment where software agents, roaming from page to page can readily carry out sophisticated tasks for users.’
The Semantic Web was envisioned to be achieved through semantics encoded into the source of the web pages. Markups written for the design of web pages should be meaningfully constructed and structurally arranged to ensure readability by not just users of the web alone but also user agents and robots. MDN states that,
A great deal of web content can be made accessible just by making sure the correct HyperText Markup Language elements are used for the correct purpose at all times.
Knowing how to make web pages using HTML, CSS, and JavaScript isn’t enough to make great pages. A properly designed webpage should be easily accessible and usable by all facets of users. The readability and proper rendering of markups by user agents allow for easy accessibility to the contents of the web by the users (users with or without physical disabilities and slow connections). The right HTML tags should be used for the right purposes. This is known as** Semantic HTML or HTML Semantics**. S_emanticism_ facilitates an understanding of using tags rightfully and how and why tags are utilized the way they are in making pages for the web. Search engines use the clarity derived from HTML semantic tags to ensure that the right pages are delivered for the right queries.
HTML SEMANTICS
The HyperText Markup Language (HTML) is the language of the web. It is fundamentally made up of tags that annotate and structure the contents of a web page. Web pages communicate not only to the user but web browsers as well through tags. As an example, a web browser knows that if a developer uses the <p> tag on a group of words, the developer wants the targeted words to be displayed as a paragraph. This simple example purely describes HTML semantics — using the right HTML tags for the right reasons and contexts. A bad annotation can be seen when a developer decides to use a <div>tag to replace the <header> tag to display content meant for the heading of a page. Such a page will be rendered correctly if properly formatted, however, a problem arises when a visually impaired user tries to access that web page using a screen reader. Screen readers utilize semantic tags from the DOM for their function. In such a case as stated above, a screen reader would not classify the contents of the <div>tag within the header context but rather as just another division of the page. A user in such a case wouldn’t know when the screen reader is reading out a header text.
Over the years, several tags with semantic connotations have been added to preexisting HTML tags to effect more meaning to webpages for better accessibility by diverse users. Prior to the introduction of some of these tags, many contents to be displayed on webpages were usually wrapped in **<div>** tags what is commonly being referred to as**_ “div soup”_.HTML 5** brought about a lot of new elements. Elements such as aside, article, nav, section, main, header, and footer specifically addressed the issue of excessive usage of **_div_**tags while adding meaning to markup. What semantic meaning do these tags offer?
<article>— Houses independent and self-contained content.<aside>—Markup content aside from page contents.<footer>—Contains elements for the footer section of a page.<header>—Contains elements for the header section of a page.<main>—Signifies the main content of a page.<nav>—Holds the navigation links of the page.<section>— D_efines a section of a page._
An example of a div soup (left) and what the new HTML 5 tags offer
Representation of data in tabular form employs the usage of basic elements such astable, th, td, and tr. This usage is proper but incomplete. When creating tables for web pages, tags such as thead, tbody, and tfoot are equally important. More semantic meaning is added to a displayed table as the segmentation caused by using those additional tags clearly defines the header, body, and footer sections of the represented table. In essence, a web browser would know when it encounters a table head, its body, and the footer section.
So many tags in existence today have semantic meaning except a few. The div and span tags are non-semantic. Aspan tag should be used only for styling purposes and the usage of a div tag should only be as a last resort with regards to setting divisions for a webpage i.e it should be used for flow content with no additional semantics. The <b> and <i> tags were originally non-semantic, however, their importance has been redefined by the w3C documentation for HTML 5 for more semantic purposes.
#semantics #semanticweb #html #web-accessibility #html5
