What Is Semantic HTML
Semantic HTML introduces meaning to the code written in a webpage. In semantic HTML the elements used here can reveal to web developers and browsers what they actually do and what content should go in it. It also helps developers to know where the elements are placed based on the name of the element.
Semantic HTML Element
As we have learned that Semantic HTML display or use tags that convey information about their content, some of the main semantic HTML elements include;
<Header> Element
<Nav> Element
<Main> Element
<Footer> Element
<Figure> Element and <Figcaption> Element
<section> Element and <Article> Element
<Aside> Element
<Details> Element
In order to understand further the Semantic HTML elements we will focus at each at a time in order to know where to use them appropriately.
<Header>Element
This element describes the content at the top of the webpage. However the header element cannot be placed within a footer Element, address Element or another header Element. The header Element typically contains;
- One or more headers
- Logo or icon
- Authorship information
It can contain the introductory information for a the whole document or a given section
<header>
<h1>Dog pandemic<h1>
<p>According to current statistics a lot of people own dogs in their homes</p>
</header>
<Navigation> Element
This element contains the the navigational links of the webpage. It is normally placed in the Header Element or the Footer Element.
<nav>
<a href="/html/">HTML</a>
<a href="/css/">CSS</a>
<nav>
*<Main> Element *
This element encapsulates the main content of a page, it is placed between the header/navigation and the footer area
This element groups the main information you want your website to contain.
The <main> Element is placed in <body> Element.
In non Semantic HTML this element is not used, and thus the <body> Element is as is when WebCrawler's crawl your page it takes them a lot of time to identify the important information in your webpage and thus makes your webpage have a lower SEO
Unlike in Semantic Elements where WebCrawler's can directly know once on the page where the main information is. Example,
<main>
<section>
<h2>Dogs are human beings bestfriend</h2>
<article>
<p>One of the top breeds preferred by humans are German shepherds<h2>
<h1>protection<h1>
<p>German shepherds are big easy to train this comes in handy when they see intruders they are able to alert their owners.<p>
</article>
</section>
<main>
*<Footer> Element *
This Element contains the page's footer content at the bottom of the Body Element. when used the information that is keyed in will be found at the bottom part of the webpage example of how is used;
<!Semantic HTML>
<footer>
<p>This is where you write the information you want displayed on your footer
</footer>
<!Non Semantic HTML>
<div id="footer">
<p>This is where you write the information you want displayed on your footer</p>
Notice in the above example in non semantic HTML we introduce the element <div> as a general purpose tag to create the footer while in semantic HTML we just introduce the element <footer>.
<Figure> Element and <Figcaption> Element
The <Figure> Element is used to enclose media such as images, diagrams and code snippets.
while the <Figurecaption> Element is used to describe the media content encapsulated within the Figure Element.
These two elements are normally used together.
<figure>
<img src="cute.jpg">
<figcaption>The image will show a cute puppy.
</figcaption>
</figure>
<Section> Element and <Article > Element
The <Section> Element is used to classify a group of elements in a document such as chapters, headings or any other area of the document with the same theme
while the <Article> Element contains content or information that make sense on their own such as articles, blogs and comments
<section>
<h2>Dogs are human beings bestfriend</h2>
<article>
<p>One of the top breeds preferred by humans are German shepherds<h2>
</article>
</section>
<Aside> Element
This Element is used to give additional information which is not required but it helps improve the understanding of the main content as it enhances another element.
Usually this extra information is displayed in a sidebar o a location that its not covering the main content
A good example of this Element is having an article that talks about dogs being human beings bestfriends and next to the article an ad would appear advertising dog grooming products
<article>
<!Main content>
</article>
<aside>
<!Additional information>
</aside>
<Details> Element
This Element contains the Summary tag and any other additional details which are only visible when the element is in an open state.
It creates an interactive widget that the user can open and close. By default, the widget is closed. Normally this tag is used together with the <summary> tag.
<details>
<summary>Dogs are human beings' companions<summary>
<p>Dogs are very important to humans since they give us affection and protection. They also help us with some our day to day activities such as hunting and taking care of cattle.
All this activities that are done by our dogs are determined by the type and breed of dog one chooses.<p>
</details>
This element tells the WebCrawler's that this part is just a summary of the information inside the <main>
> Element making it easier for them to interpret it.
Advantages Of Using Semantic HTML
Accessibility; Semantic HTML make it possible for webpages to be accessible for mobile devices and people with disabilities.
This is because screen readers and browsers are better able to interpret the content of the site.
Readability; Semantic HTML makes the source code of the website easier to read for other web developers.
Semantic HTML improves the website's Search Engine Optimization(SEO).SEO is the process of increasing the number of people that visit a webpage.
Search engines are better able to identify the content of a website and weigh the most important content appropriately with a better SEO.
Limitations Of Using Semantic HTML
- Increased complexity
- Limited browser support
- A learning curve for new developers
- It requires ongoing maintenance
- learning semantic html made easy
Top comments (0)