February 1st, 2020 | 4 mins read
According to the dictionary,
Semantic means relating to meaning in language or logic.
In other words, this refers to something portraying a meaning.
This refers to the design of a website which has logical meaning. More to the presentation view of a website is the meaning. You user may be seeing exactly what you designed but does the browser understand the logic of your webpage?
- For accessibility purposes. One major reason is so that screen readers can interpret your page appropriately. This is especially necessary for users who depend on them. 2.For improved Search Engine Optimization. Research has shown that properly structured webpages are easily indexed by web crawlers.
These are the tags used to achieve Semantic structures of documents.
Examples of non-semantic tags are
span. Both of them have no meaning in a webpage but are just used as parents for elements.
Before the introduction of HTML5, semantic tags included
a (Anchor tag),
HTML5 introduced more semantic tags, some of which includes:
This tag reduces the usage of
divs (which have no meaning). It defines a section in a document which would usually expect a heading. Example;
<section> <h2>Heading</h2> <p>Paragraph</p> </section>
This tag defines elements which make up the main content in a document. Example;
<main> <h1>Title of Document</h1> <p> Paragraph <!-- Other contents --> </p> </main>
This tag is used for navigation links. Not just any navigation link, but the major links used in a webpage. Example:
<nav> <a href="/home">Home</a> <a href="/about">About</a> <a href="/contact">Contact</a> </nav>
This tag distinguishes the main content from the side contents. It works just like a sidebar. Example:
<main> <h1>Main header</h1> <p>Paragraph</p> </main> <aside> <h3>Relative Resources</h3> <p>Some paragraphs</p> </aside>
Find more semantic tags in this W3Schools Documentation.
The similarities between these tags is that they have meaning. Hence, the browser easily understands what the page is about and screen readers can appropriately interpret every section of the page.
More to the use of semantic tags for improving logic are the way the tags are placed in the document. The following are few guidelines to achieve semantic HTML.
headerelement should contain things like introductory statement to the document, the major navigations, and so on. Basically, the beginning of a document.
footerelement should contain things like copyright, social media links, and so on. Basically, the end of a document. 3 Use only one top-level heading (
h1) in a page. This heading should be the title of that page.
- For subsequent headings, use them sequentially as they relative to your respective parent titles. Don't jump from
h2is a sub-title, any other sub-titles under it should be
h3and so on until you
<h1>Semantic HTML</h1> <h2>Types of Semantic HTML</h2> <h3>Benefits of Semantic HTML</h3>
<h1>Semantic HTML</h1> <h2>Types of Semantic HTML</h2> <h2>Benefits of Semantic HTML</h2>
Logically, "benefits" cannot be a sub-title under "types".
There's so much more to learn about semantic HTML. Check out this article for more information - SEMANTIC HTML
spans aren't entirely useless. I use
div in places where I want to have a parent over the content to aid easy styling. You have to be conscious of the fact that this tag does not provide a logically meaning.
While trying to design beautiful webpages, you should also care to know if the browser understands what you're doing.
You'd need to ensure that all your users have equal feels of your website. Some depend on screen readers. Don't leave them confused on what your website has to offer.
How about your website been on google's first page of search results? Think about it 🙂