Semantic elements are HTML5 tags convey the meaning and purpose of the content they enclose, just dictating how content should be presented visually. They provide an identical way to describe the different parts of a web page to both the browser and the developer. This is a shift from earlier versions of HTML, where elements focused on making text bold without indicating the content’s meaning.
How to use semantic elements in html5
There are some benefits to engaging semantic HTML5 elements:
- Improved Accessibility: Semantic markup meaningly improves the accessibility of web content for users. Screen readers and other assistive technologies depend on the semantic elements to understand and convey the structure and purpose of the content to users. For example, a <nav> element identifies a section planned for navigation, allowing screen reader users to easily locate it. While WAI-ARIA attributes can further define roles, states, and properties for accessibility, semantic HTML elements often inherently express their purpose.
- Improved Search Engine Optimization (SEO): Search engines use the semantic structure of HTML to understand the content of a web page better. By using elements like <article> for self-contained content, <header> for introductory content, and <footer> for footer information, you provide clearer signals to search engines about the importance and context of different parts of your page, which can positively an effect search rankings.
- Cleaner and More Maintainable Code: Semantic markup results in more readable and understandable HTML code. As an alternative of depend on generic <div> elements with class names to define sections, semantic elements clearly indicate their function (e.g., <aside> for related content). This makes it easier for developers to understand the structure of the document, leading to more efficient styling with CSS and simpler maintenance. Overusing non-semantic elements like <div> can lead to markup expand.
- Improved Modularity and Reusability: Semantic elements help to create more modular and reusable content. For example, an <article> element is designed to represent a self-contained piece of content that could be syndicated or read independently.
- Better Interoperability: Using semantic elements provides a reliable way to describe document structures, which can improve interoperability across different browsers, devices, and platforms.
List of Semantic HTML5 Elements
- <header>: Represents introductory content, typically containing a site title or logo.
- <nav>: Defines a section containing navigation links.
- <article>: Represents a self-contained composition in a document, like a blog post or news article.
- <section>: Represents a thematic grouping of content within a document.
- <aside>: Represents content indirectly related to the main content, like a sidebar.
- <footer>: Represents the footer for a section or the entire document, often containing copyright information or contact details.
- <figure> and <figcaption>: Used to associate a caption with embedded content like images or videos.
- <main>: Represents the dominant content of the <body> of a document.
- <mark>: Represents text highlighted for reference purposes.
- <time>: Represents a specific period in time.
- <cite>: Represents the title of a work (e.g., a book or film).
HTML depend on elements like <b> (bold) and <i> (italics). In HTML5, these elements have been redefined to be used when other semantic elements are not suitable. For instance, <b> now represents a span of text offset from its surrounding content without conveying extra importance, like keywords. Similarly, <em> indicates emphasis, while <strong> signifies strong importance. The focus in HTML5 is on using elements that describe the meaning of the content, with CSS being the primary tool for controlling its presentation.
HTML5 Topics