Whether you're just starting out with html basics or you're very conversant with the markup language, having an understanding of both Semantic and Non-semantic HTML tags will definitely make you stand out and make you write quality codes.
OBJECTIVES 🎯
At the end of this article, I will be answering the following questions:
- What actually is HTML?
- What are the Semantic and Non-semantic HTML tags?
- When should I use the Semantic and the Non-semantic HTML tags?
- Why is the HTML Semantic tags the best?
1. What actually is HTML?
HTML means Hyper Text Mark-up Language. It is called markup because it dictates how texts should be displayed. From the definition of markup, we can deduce that HTML is primarily used to display content (texts) on web pages.
It also serves the purpose of structuring a webpage or website. That is without it a website will not be well organized thereby making a good website layout difficult to achieve.
HTML is composed of elements or tags that are enclosed inside angle brackets <, >, and /.
Most tags are paired to indicate the start and end of a text being marked up or displayed
<html tag> Some Text </ html tag> while some other tags are self-enclosed <html tag />
Checkout the link below to know more about the HTML tags.
2. What are the Semantic and Non-semantic HTML tags?
Firstly the Non-Semantic html tags defines how texts or contents written on a web page should look but they don't provide any additional meaning to the text or the documents being displayed. They are used purposely for presentational purposes.
For example:
i. A div tag is a non-semantic tag that is used to contain other HTML elements or any type of information but it does not provide any additional meaning to the content in it.
ii. A br tag is only used for line breaks with no additional meaning to the content.
iii. A span tag is just used for holding or styling inline elements but it does not add any additional meaning to the text.
iv. The b tag doesn't convey extra importance; rather, the tagged text is typically rendered in bold.
v. The i tag doesn't convey extra importance or emphasis; rather, it defines the text that is typically rendered in italics.
The Semantics HTML are those elements that are written to describe the purpose of the element and the type of content that is inside them. they give specific, clear, and add meanings to texts, a part of the webpage, and even the entire website rather than how they appear by default in the browser. it focuses on writing HTML elements that are meaningful to both the browser, the developer, and the reader.
For example:
i. A p tag indicates that a given text enclosed in it is a paragraph and browsers understand and display them as paragraphs.
ii. A h1 tag indicates that a given element is a top-level element and not for making a text bold or bigger and as such treated as a header by the browser.
iii. An aside tag is understood by the browser that the content is not part of the main flow of the webpage. Use to identify content that is related to the main content on the page but not part of the primary flow of the document.
iv. main tag indicates that the content is the main section of a page.
v. A blockquote tag is understood by the browser that the content is a quote and thus treated as such rather than just indenting text.
vi. section tag states clearly what its content is meant to be displayed within the tag and how it would be displayed. The section element is used to mark off sections of a document, such as chapters or major sections of a long-form post.
vii. the browser understands the nav tag to represent a navigation section. etc. An element to contain blocks of site navigation links.
3. When should I use the Semantic and the Non-semantic HTML tags?
If you want to introduce meanings to texts or content on your webpage and make your website to be understood by the browser, use the semantic HTML tags, but if you want your text or part of a webpage to be just for presentation purposes then you can use the Non-semantic HTML tags.
4. Why is the HTML Semantic tags the best?
Every developers are expected to write a readable code and that should be the goal of any developer writing HTML, you should make use of as many semantic elements as possible in the website because they provides additional information about the website or webpage you are serving to the public.
Reasons the Semantic tags are the best.
A. For Search Engine Optimization.
B. For Accessibility.
C. For Maintainability.
A. For Search Engine Optimization (SEO)
Applying the right semantic tags to your website makes it easier for the search engines such as google, bing and others to access and render the right pages or content of your website based on the importance and structure of the content which has been clearly defined by the semantic tags used on request.
For example, keywords enclosed in an h1 tag are given more significance than those enclosed in a p tag, this implies that search engines will render the content in the h1 tag first to the user who searched it on the internet.
Semantic HTML helps search engines rank your webpage using the most relevant and meaningful content on the page as said earlier.
The semantic tags enhances your website visibility to search engines, so that when you publish a website, Google uses an algorithm that analyzes the code and ranks it, so if a search engine cannot properly read your site, it wouldn't gain preference and the search engine is likely to term it less quality or less relevant hence why you need semantics to stay on top of the trend so that your website can be reached by more users who search for the particular content on the internet.
B. Accessibility
Semantics gives meaning to the content of a webpage and makes it clear and better understood by the browser which in turn can make your content accessible to users that can neither see nor read. There is an ample number of users who depend on screen readers software to navigate the internet. So making sure screen readers can read each element is essential which meaning we have to code for all users.
By accessibility, you provide the guidance needed to make sure your content is correctly transcribed by your readers. Information should be universally accessible and so should your website content which can only be achieved by applying the right HTML semantics.
C. Maintainability
Semantics helps to write clear codes which are maintainable. it is much easier to read at a glance than non-semantics. it allows viewers to quickly look at the code in front of them and know what's happening. it is easier to distinguish which part of the document is being used where. It also means that a different developer could come in and work with the code without confusion since the code is organized in a logical way
If we use semantic markup, we will facilitate the task to the positioning algorithm the easier it is to read and understand code, the easier it makes your job thus leading to more consistent code.
You have done well by carefully reading through this article. I want to believe I have eased you into the basics of HTML and what you should actually look out for while you build your website. Thanks for reading!
Written By: Okoroji Victor Ebube
Edited By: Ayodele Samuel Adebayo