Semantic HTML - CZECHGROUP.cz

Use Semantic Elements

Rule: Semantic HTML elements SHOULD be used instead of generic <div> and <span> where appropriate.
Reason: Semantic elements improve accessibility, SEO, and code readability by clearly describing their purpose.

Recommended Semantic Elements:

<header> - Page or section header
<nav> - Navigation links
<main> - Main content (only one per page)
<article> - Self-contained content
<section> - Thematic grouping of content
<aside> - Sidebar or tangential content
<footer> - Page or section footer
<figure> and <figcaption> - Images with captions
<time> - Dates and times

Example (Correct):

<header>
	<nav>
		<ul>
			<li><a href="/">Home</a></li>
		</ul>
	</nav>
</header>

<main>
	<article>
		<h1>Article Title</h1>
		<p>Content...</p>
	</article>
</main>

<footer>
	<p>&copy; 2025 Company</p>
</footer>

Example (Incorrect):

<div class="header">
	<div class="nav">...</div>
</div>
<div class="main">
	<div class="article">...</div>
</div>
<div class="footer">...</div>

Summary:

Semantic elements SHOULD be used instead of generic divs where appropriate.
Use <header>, <nav>, <main>, <article>, <section>, <aside>, <footer> for page structure.