.png)
8 . Semantic HTML
8. 1 : Understanding the importance of semantic markup.
Semantic HTML refers to the use of HTML elements that convey meaning and structure to the content of a web page. It involves using elements that accurately describe the purpose and role of the content they enclose, making it more understandable to both humans and machines, such as search engines and screen readers. Semantic markup is essential for accessibility, search engine optimization (SEO), and maintaining a clear structure within a web page.
8.2 : Using semantic elements like <header>,
<nav>, <article>, <section>, etc.
Here are some commonly used semantic elements and their purposes:
1. <header>:
Represents the introductory content or a container for a group of introductory content at the beginning of a page or section. It typically includes site branding, main navigation, and introductory text.
2. <nav>:
Defines a section of a page that contains navigation links allowing users to navigate within the website or different sections of the page.
3. <article>:
Represents a self-contained, independent piece of content, such as a blog post, news article, or a forum post. It should make sense on its own and be able to be distributed or syndicated independently.
4. <section>:
Represents a thematic grouping of content within a page. It helps in organizing content into meaningful sections and provides a semantic structure.
5. <aside>:
Represents content that is tangentially related to the main content of the page. It is typically used for sidebars, pull quotes, advertisements, or other content that can be considered separate from the main content.
6. <footer>:
Represents the footer of a section or the whole page. It usually contains information about the author, copyright information, contact details, or related links.
7. <main>:
Represents the main content area of a document. It should be unique to the document and not contain any content that is repeated across a set of documents, such as site navigation.
Using semantic elements improves the accessibility of a website because screen readers and assistive technologies can interpret the structure and purpose of the content more accurately. Search engines also benefit from semantic markup, as they can understand the hierarchy and relationships between different parts of the page, improving the website's visibility in search results.
Additionally, semantic HTML promotes better code organization and maintainability. It helps developers and designers understand the purpose and structure of different sections, making it easier to maintain, update, and collaborate on projects.
By utilizing semantic elements appropriately, you create a more accessible, well-structured, and meaningful web page, improving the overall user experience and facilitating the interpretation of your content by both humans and machines.
