Lesson · HTML & CSS Basics
Semantic headings and page sections
Semantic elements communicate the role of content to browsers and assistive technology.
What you will learn
- Choose a heading level by document structure
- Use main, section, and article appropriately
- Avoid using headings only for visual size
Headings describe hierarchy
The h1 through h6 elements form a heading hierarchy. Choose a level based on how a section relates to its parent, not on the font size you want. A page usually benefits from one clear main heading; nested sections can use lower levels. CSS can change visual size without changing semantic importance.
Use landmarks with intent
Elements such as header, nav, main, and footer describe common regions of a page. A section groups related content and generally has a heading. An article is appropriate for content that can stand as an item on its own, such as a lesson or a news entry. These elements are not interchangeable decoration.
Make navigation understandable
A nav element groups important navigation links. If a page has more than one navigation region, an accessible label can distinguish their purposes. A link's visible text should make its destination understandable, even when read outside the surrounding paragraph.
Check the outline with real content
Read the headings in order without looking at the visual design. Their sequence should explain the page's structure. If the outline jumps unexpectedly, revisit the content hierarchy rather than inserting an empty heading to change spacing. Semantic structure benefits keyboard, screen-reader, and search users.
Check landmarks and link names
Use a screen reader's landmark navigation or the browser accessibility tree to see whether major regions have understandable names. A link should still make sense when read in a list of links. These checks do not replace asking people with different access needs to test a real product, but they can reveal missing structure early.
<header><p>CodeSikho</p></header>
<nav aria-label="Course">
<a href="#lesson">Lesson</a>
</nav>
<main id="lesson">
<article>
<h1>Semantic HTML</h1>
<section aria-labelledby="purpose">
<h2 id="purpose">Why structure matters</h2>
<p>Meaning helps people navigate.</p>
</section>
</article>
</main>Practice exercise
Mark up a short lesson page with a site header, course navigation, main content, one article, and a footer.
Show a hint
Use each landmark once where its meaning fits; give the page content one clear h1.
Show one possible solution
Place the site identity in header, links in nav, the lesson article inside main, and site-wide closing information in footer.
Quick check
CSS controls appearance; heading levels describe relationships between sections.