What is semantic HTML, and why is it important? Can you give examples of semantic elements and explain when you would use them?

Question

Accepted Answer

Semantic HTML means using HTML elements that clearly describe their meaning and purpose, rather than just their visual appearance. Instead of using generic div and span elements everywhere, we use elements that convey what the content actually represents.

There are several important semantic elements. The header element represents introductory content, typically containing navigation or a logo. The nav element contains navigation links, usually the main menu of a website. The main element wraps the primary content of the page, and there should only be one per page. The article element represents a self-contained piece of content that could stand alone, like a blog post or news article. The section element groups related content together, typically with its own heading. The aside element contains content that is tangentially related to the main content, like a sidebar. The footer element contains footer information, such as copyright notices or contact links.

Semantic HTML is important for several reasons. First, it improves accessibility. Screen readers and assistive technologies use semantic elements to help users navigate the page. A user can jump directly to the navigation or main content area. Second, it helps with search engine optimization, or SEO. Search engines can better understand the structure and importance of your content when you use semantic elements. Third, it makes code more readable and maintainable. When another developer reads your code, they can quickly understand the purpose of each section.

Here is a practical example. Instead of writing a div with a class of header containing another div with a class of nav, you would simply use the header element containing a nav element. Both might look the same visually, but the semantic version communicates meaning to browsers, screen readers, and search engines.

The key principle is to choose elements based on their meaning, not their default styling. You can always change how an element looks with CSS, but you should use the element that best describes the content's purpose.