html coding - Part 9 - HTML Semantic Elements.

HTML Semantic Elements

Semantic elements provide meaning to the structure of a web page, making it easier for search engines and screen readers to understand the content.

Header Elements

• <header>: Defines the header section of a page or section
• <nav>: Defines a navigation menu
• <h1>-<h6>: Define headings of different levels

Footer Elements

• <footer>: Defines the footer section of a page or section

Content Elements

• <article>: Defines an independent piece of content
• <section>: Defines a section of related content
• <aside>: Defines a piece of content that is separate from the main content

Other Semantic Elements

• <figure>: Defines a figure with a caption
• <figcaption>: Defines a caption for a figure
• <main>: Defines the main content section of a page

Example Semantic Elements

HTML

<header>
	<nav>
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">About</a></li>
		</ul>
	</nav>
</header>
<main>
	<article>
		<h1>Article Title</h1>
		<p>This is an article.</p>
	</article>
	<aside>
		<h2>Related Content</h2>
		<p>This is related content.</p>
	</aside>
</main>
<footer>
	<p>&copy; 2024 Example.com</p>
</footer>

Semantic Elements Best Practices

• Use header elements to define the header section.
• Use footer elements to define the footer section.
• Use content elements to define the main content structure.
• Use other semantic elements to provide additional meaning to the content.
•