HTML 结构与语义化基础

⏱️ 18分钟

HTML Structure and Semantics: Your Page's Foundation

Module Goal

Build stable page structure skills first. Don't rush into flashy styles.

Core Principles

Write semantic structure before styles
Structure serves information, not just to fill tags
One area, one responsibility -- avoid "everything is a div"

Recommended Structure Skeleton

<header>...</header>
<main>
	<section>...</section>
	<article>...</article>
</main>
<footer>...</footer>

Common Mistakes

Mistake: Using <div> for everything
Fix: Use semantic elements whenever possible -- improves readability and maintainability
Mistake: Random heading levels
Fix: h1-h6 should reflect content hierarchy. This affects SEO and accessibility

Lab Exercise Tips for This Module

When completing HTML Labs, focus on three things:

Do tag semantics match the content
Is the structure hierarchy clear
Are form and media tags used properly

Transfer Task

Take a page you use frequently and break it into a "semantic structure sketch." Write only the HTML skeleton with no styles, then compare against Labs to optimize.