What is a Semantic HTML element?
A Semantic HTML element is an element that clearly describes its own meaning through its name. For example, <header> is a semantic html element, and <div> is not. When you use <header>, it communicates to the browser that that portion of your website is the header. If you were to use <div> instead, although your content might look the same to many users, you haven’t communicated to the browser any information about the fact that it is your website’s header.
Examples
There are many semantic HTML elements. Some of the most common semantic elements include:
<header>: a header element is used for the web page header. A header may include a logo, title for the page, and site navigation.
<nav>: A nav element includes links to other pages of the website, or links to anchors on the same page. It is often placed inside of a header or footer element.
<footer>: a footer element may contain nav links, links to contact information, and information about the ownership of the website.
<main> Main is an element that is used to hold the main content of the page, and should be used for information that is unique to that page.
<article>: The article element is used for content that is a self-contained and independent part of a website. Information in this section should be able to stand alone and make sense without any additional context. It is used for things like blog posts, newspaper articles, or forum posts.
Benefits of Semantic Elements
Semantic HTML elements don’t take any longer to write than non-semantic elements, and using semantic elements provide many benefits. Semantic elements provide information about how your document is organized and what each element contains. When you use a semantic element, you are communicating more specific information about the document to the browser. This is important for accessibility as well as SEO. When you use a semantic element, you improve your website’s accessibility for users across the world, especially for users who use screen readers. Without semantic elements, screen readers have less information to utilize to adapt content so that users can access information accurately. Search engines give more importance to key words inside semantic elements, so your website will be easier to find than it would be if you used non-semantic elements. If you use semantic elements, you also have the option to use them as hooks for CSS styling without needed to assign additional class names or IDs.
Common Mistakes
Many people utilize non-semantic elements or misuse elements in order to achieve styling effects, rather than using css to achieve the same effect. Here are some common mistakes and solutions:
Common Mistake 1: using a block quote when you want content indented
Many developers will us the block quote element when they want content indented, as it is a quick way to achieve that styling. If information inside of a block quote is not an actual piece of quoted information, you should not use it. Rather, you should use a different, more accurate element, and use CSS to style the margins to achieve the same impact.
Common Mistake 2: using a p tag to add extra space
Another common misuse of elements is the use of a
tag to add extra space between elements. Again, this is done because it is a quick and easy way to achieve a desired visual styling. However, this communicates misinformation about the content of that section to your browser. Again, the solution here is to utilize css to add margins and padding as needed for the same visual impact.
Common Mistake 3: misuse of header tags
h1-h6 tags are often chosen based on a desire font size. However, this again miscommunicates information to the browser for screen readers and search engines. Rather than choosing a heading tag based on font size, tags should be chosen based on content. An h1 tag is particularly important for SEO, and should be the main title of the page, communicating the main idea of what the page is about. An accurate h1 tag will make your website much more accessible by search. In general, header tags should convey a hierarchy of importance. If you list out out your header tags, you should have a sort of “outline” of your website. If you want the styling or size of these elements to change, you should utilize css to target font-size and font-weight properties rather than changing the tag.
Conclusion
Semantic HTML tags are important and beneficial for accessibility and SEO. They provide more information about the organization of your website and its content to search engines and screen readers. It is easy to utilize semantic HTML if you keep it in mind from the start of your project.
Top comments (0)