Have you ever wondered what all those odd tags in HTML are for? Okay, maybe you haven’t, but I have. And I’m here to tell you all about it. In the world of coding, semantic HTML is a term you will hear quite often. But what does it mean? Semantic HTML means using the correct tags to identify and describe the content of your website. Semantic HTML makes your code more organized and meaningful for humans and machines.
In this article, we will be covering the main semantic elements that can be used when building a website. Let’s take a closer look at what semantic HTML is and how you can use it in your projects.
Semantic HTML is a way of making your code and HTML Document more accessible and easier to understand for both humans and machines. It’s not always necessary, but when used correctly, it can make working with HTML a lot simpler. So let’s take a look at what semantic HTML is and how it can be used effectively.
Semantic HTML is also important for creating rich, engaging content that can be parsed by assistive technologies like screen readers.
What is semantic HTML?
Not all tags are created equally in HTML. Some are semantic tags, and some are non-semantic. Elements such as <div> and <span> tell the browser nothing about the content, making them non-semantic.
Semantic elements such as <header>, <nav>, and <footer> provide browsers with a clear definition of the content within the tag that defines its content.
Semantic HTML is a term used to describe specific HTML tags to describe the content of a web page.
When coding with semantic HTML, you provide context for your content, making it easier for both humans and machines to understand and index your website.
The main benefit of using semantic HTML is that it makes your code more organized and readable. This makes it easier for you to maintain your website over time, and it also makes it easier for search engines to index your content.
In addition, using semantic HTML can also improve the accessibility of your website. By using the correct tags, you can help people with disabilities better understand the content of your pages.
Disadvantages of Semantic HTML
I am going to touch on some disadvantages of semantic HTML quickly. If you are interested, I have written an entire article dedicated to the benefits of using semantic HTML that you can read here as the advantages well outweigh the disadvantages, in my opinion. Still, I am going to cover them here nonetheless.
The main disadvantage of semantic HTML is that it can be more complex and time-consuming to write than traditional HTML because you need to be familiar with the specific tags used in semantic HTML and use them correctly. If you don’t, your code might not be interpreted correctly by the browser, leading to all sorts of problems.
Another disadvantage of semantic HTML is that it can be more browser-dependent than standard HTML. For example, some browsers might not support all of the tags used in semantic HTML, or they might interpret them differently from other browsers. This can cause problems if you’re trying to create a cross-browser-compatible website.
Overall, there are pros and cons to using semantic HTML. If you’re comfortable with the tags and know that your target browsers support them, then semantic HTML can be a great way to make your code more organized and meaningful.
Semantic HTML tags
Header:
The semantic header tag is an HTML tag that is used to identify the main heading of a document or section. The tag should be used when the text in the header is more important than the paragraph below. The semantic header tag should not be used for smaller headings, such as subheadings
The <header> tag is normally used for a banner image or a series of navigational links (see <nav> below). The typical contents of a <header> element are elements like an <h1> tag or a logo.
Examples:
<header>
<h1>This is my website?</h1>
</header>
<header>
<nav>
<a href="/html/">HTML</a>
<a href="/css/">CSS</a>
<a href="/js/">JavaScript</a>
<a href="/jquery/">jQuery</a>
</nav>
</header>
Nav:
The semantic <nav> tag defines a section of a document as a navigation section. It can be used to mark up menus, site maps, or any other type of navigation. It would be best to use the semantic <nav> tag when you want to specifically identify a section of your document as being for navigation. It can be helpful for screen readers and other accessibility tools and search engine optimization.
The <nav> element contains navigation links, commonly referred to as the “menu” of your website.
Example:
<nav>
<a href="/home/">Home</a>
<a href="/about/">About</a>
<a href="/contact/">Contact Us</a>
</nav>
Section:
The semantic <section> tag is used to define the meaning of a section of text. It would be best to use it when you want to indicate that the text within the section has a specific meaning.
The semantic <section> tag is important because it allows screen readers and other assistive technologies to interpret the text within the section in a specific way. This can be helpful for people who are visually impaired or who have difficulty understanding text.
The semantic <section> tag is also helpful for web developers. Using the semantic section tag, developers can create more accessible websites and easier to read code.
The <section> element does what its name indicates; it defines a section on a page.
For example, a web page can be split into sections for introduction, content, and contact information.
Example:
<section>
<h1>What is semantic HTML?</h1>
<p>What is semantic HTML and why should you care? Using HTML components to indicate what they are instead of how they look in the browser by default is a key principle in web design. </p>
</section>
Article:
Most beginners struggle to understand the difference between an article and a section, most I suspect because of this image.
Articles and Sections look identical in the above. Still, they are semantically different because articles normally contain independent material that should make sense on its own – like a blog post. A blog post is an independent piece of content.
Other examples when articles may be appropriate is for forum posts and user comments.
Example:
<article>
<h2>User Name 1/h2>
<p>This is users 1 comment</p>
</article>
<article>
<h2>User Name 2/h2>
<p>This is users 2 comment</p>
</article>
Aside:
You may be wondering what the semantic <aside> tag is used for in HTML. As the name suggests, it’s used to mark up content that is aside from the main body of text. This might be content related to the main text but doesn’t necessarily belong in the main body – like a side note, for example.
Or, it might be content that is completely separate from the main text – like a disclaimer or copyright notice. In either case, the <aside> tag is a handy way to mark up this content and help make it stand out.
The <header> tag is normally used for a banner image or a series of navigational links (see <nav> below). The typical The <aside> element also does what it sounds like – it creates a sidebar of content. (See picture above for an example).
Example:
<aside>
<h4>Sidebar Menu</h4>
<p>his is where you can place content on the side of the page</p>
</aside>
Footer:
The footer is the part of a web page that typically contains information like the website’s name, copyright information, and links to related pages. In HTML, the <footer> tag is used to mark up this content.
Some web designers use the <footer> tag to create a fixed footer that stays at the bottom of the page no matter how long the content is. This can be useful for things like contact information or social media links.
Others use the <footer> tag to create a scrolling footer that appears on every website page. This can be a great way to include important information like site navigation or Terms of Service.
No matter how you use the <footer> tag, it’s a great way to add some extra information to your web pages.
Example:
<footer>
<p>Copywright 2021/p>
</footer>
Conclusion
Semantic HTML is a great way to future-proof your website and ensure it stays relevant for years to come. It also helps improve accessibility for people using assistive technologies and search engine optimization. If you’re not currently using semantic HTML on your website, we encourage you to start doing so today. It’s an easy way to make your website better in every way. Have you started using semantic HTML on your site? What benefits have you seen so far? Join our Discord with the link below and let us know
I hope this article helped or inspired you on your coding journey. Click Here to meet other new coders like you by joining our Discord community.
