What is Semantic HTML & Why Is It Important for Accessibility?
source link: https://www.codecademy.com/resources/blog/semantic-html/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
HTML, the markup language used to structure web content, can come in two forms: semantic or non-semantic.
Both forms are used interchangeably in web pages today, and while HTML began as a non-semantic (only) language, as the web evolved, writing HTML semantically has become the practical standard. This is because semantic HTML is great for accessibility, SEO, and overall readability, as you’ll see below.
Why is semantic HTML important?
We primarily use code snippets, called elements, when marking up with HTML. An HTML element typically consists of a start and end tag, although sometimes only one tag is used (like for the <img> element). The .html file for this page contains paragraph elements, and paragraph tags surround the text of this very paragraph. It looks like this: <p>text</p>, where <p> is the start tag and </p> is the end tag.
Some HTML elements are used to group certain parts of HTML code together, like the commonly used <div> element. But <div> is non-semantic, so to specify certain <div> elements, web developers have to add an id attribute to identify and style that element. Still, the id attribute doesn’t always fix the semantic problem for web pages.
Enter: semantic HTML. Examples of semantic elements are <nav>, <header>, <footer>, and <article>.
<nav>contains and styles the main navigation bar, including mostly internal webpage links.<header>is found at the top of the webpage and typically contains the search bar, site logo, name, etc.<footer>is found at the bottom of the webpage and usually contains contact info, career links, and the website’s privacy policy.<article>is an element that contains full content, such as this blog post or other write-ups. This tag is written within the <body> of HTML files.
Semantic HTML describes the content it explains, making it easy to parse for SEO bots and just about anything else that needs to understand the pages’ content.
What are the benefits of semantic HTML?
There are three main benefits to using semantic HTML as opposed to non-semantic HTML, all of which are related to improving the consistency of websites across the internet. Non-semantic HTML tags are more ambiguous and require more resources to interpret. When developers write semantically, they use standardized names for elements that browsers can identify, which helps make HTML more interoperable across the internet.
Accessibility
Using semantic HTML improves accessibility in two ways. The first is that it’s better for mobile applications, because it requires less memory than non-semantic HTML. (All those id attributes can really increase file size.) The difference isn’t that significant for smaller apps, but certainly can play a role for larger websites. Also, semantic HTML improves responsiveness because the browser can interpret the code better.
Another reason why semantic HTML is so important for accessibility is because it greatly benefits screen reader users. We want to ensure a smooth and seamless experience for everyone, including those with physical and cognitive disabilities. Semantic HTML helps achieve this by clearly defining different sections of a web page and maintaining consistency throughout the web.
Coding for accessibility is a big part of inclusivity, and in many countries, semantic HTML is even required by law.
Search Engine Optimization (SEO) affects how high a website ranks on search engines like Google, and semantic HTML helps improve SEO by making the content of websites more identifiable to search engines. Again, browsers can interpret the code better because it understands how to identify semantic HTML elements.
Non-semantic HTML can impact SEO performance because the browser will not read the id attributes. Beyond site traffic, SEO is important for a number of other business-related reasons that we only brush the surface of in this blog post.
Readability
Developers often work on teams, so it’s important their code is readable — and semantic HTML helps structure and organize your code to keep everyone on the same page. Whether you’re writing source code for the first time or are making quick updates, sticking to semantic HTML tags makes it easier for everyone to understand and navigate the codebase.
Semantic HTML can also make coding in CSS easier because you can style via the semantic element tags instead of by an id attribute.
Learn Semantic HTML with Codecademy
If you’re starting from scratch, you can learn the basics of HTML (including semantic HTML) in our free course Learn HTML. And if you’re already familiar with the basics, you can jump right into Learn HTML: Semantic HTML. And once you master HTML, move onto CSS and JavaScript.
Subscribe for news, tips, and more
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK