HTML and CSS project tutorial covering web development fundamentals. Learn to build interactive and responsive web pages.
div tags, semantic elements like header, nav, main, article, and footer describe what each section actually represents. This improves SEO, accessibility, and code readability.Search engines use semantic HTML to understand your page structure and content hierarchy. A nav element clearly marks navigation, while article indicates self-contained content. Screen readers and assistive technologies rely on semantic landmarks to help users navigate pages efficiently.
Semantic HTML also makes your code more maintainable. When another developer reads <article class="blog-post"> vs <div class="blog-post">, the meaning is immediately clear even before reading any CSS. The browser's default styles also provide sensible formatting for semantic elements.
<header> contains introductory content, typically site logos, navigation, and headings. Each page should have one main header. <nav> wraps navigation links — use it for primary navigation blocks. You can have multiple nav elements per page (main nav, footer nav).
<main> contains the primary content unique to this page. There should be only one main element per page. <footer> contains closing information: copyright, contact links, privacy policy, and secondary navigation. <aside> holds content indirectly related to the main content: sidebars, callout boxes, related links.
<article> represents a self-contained composition: blog posts, news articles, forum posts, or any independent content item. Articles should make sense on their own. <section> groups related content within a page or article. Each section should have a heading.
<figure> and <figcaption> wrap images, diagrams, or code blocks with an accompanying caption. <details> and <summary> create expandable content widgets (accordion) natively without JavaScript. These elements add interactive disclosure widgets to your pages.
<strong> indicates strong importance (rendered bold by default). <em> marks emphasized text (rendered italic). <mark> highlights text for reference purposes. <cite> references a creative work's title. <time> marks dates and times in machine-readable format: <time datetime="2026-06-09">June 9, 2026</time>.
<address> provides contact information for the nearest article or body ancestor. <blockquote> marks extended quotations from external sources. <code> displays inline code snippets, while <pre> preserves whitespace for code blocks. These elements add meaning that goes beyond visual presentation.
Headings h1-h6 create the document outline. Each page should have exactly one h1. Don't skip heading levels — go from h1 to h2 to h3, not h1 directly to h4. Screen reader users navigate by headings, so a proper hierarchy is critical for accessibility.
Use headings to create a logical outline of your content, not just for visual styling. If something looks like a heading, make it a heading element. CSS can style headings however you want — the HTML element carries the meaning, the CSS controls the appearance.
<body>
<header>
<nav><!-- site navigation --></nav>
</header>
<main>
<article>
<header><h1>Article Title</h1></header>
<section><h2>Introduction</h2><p>...</p></section>
<section><h2>Main Content</h2><p>...</p></section>
<footer><p>Posted on <time>...</time></p></footer>
</article>
<aside><!-- related links --></aside>
</main>
<footer><!-- site footer --></footer>
</body>
This structure clearly communicates the page layout to search engines, screen readers, and developers. Each section's purpose is self-evident from its HTML element alone.
Use the W3C HTML Validator to check your semantic structure. Chrome DevTools shows the accessibility tree — each semantic element appears as a landmark. Screen readers like VoiceOver (Mac) or NVDA (Windows) let you navigate by landmarks, headings, and regions.
Test your page with CSS disabled to see if the content remains readable in the correct order. Without CSS, semantic elements provide structure through browser defaults while div-based layouts collapse into an unreadable wall of text.