HTML 语义化基础
✏️ Editable
Loading...
Live Preview
⌘+Enter Run⌘+R Reset
About This Exercise
在这个练习中，你将学习如何使用 HTML5 语义化标签来构建网页结构。
为什么语义化很重要？
- 可访问性：屏幕阅读器能更好地理解页面结构
- SEO：搜索引擎能更准确地理解内容
- 可维护性：代码结构更清晰，更易于维护
Beginner⏱ 15-20 min
Learning Objectives
- 理解 HTML5 语义化标签的作用
- 学会使用 header、nav、main、footer 等标签
- 掌握 article、section、aside 的区别
- 了解语义化对可访问性和 SEO 的影响
Scenario
你正在为一个技术博客构建页面结构。
这个页面需要包含：
- 网站头部（logo 和导航）
- 主要内容区（文章列表）
- 侧边栏（分类和标签）
- 页脚（版权信息）
Why Do This
- HTML determines semantics and accessibility — it is the foundation for CSS/JS maintainability.
- Clear structure matters more than visual effects; styling and interaction will both benefit later.
- Semantic tags improve SEO, readability, and team collaboration efficiency.
Hands-on Practice
- Restructure the page using semantic tags.
- Check that heading levels are sequential (h1 -> h2 -> h3).
- Add accessibility attributes to key elements.
Common Mistakes
- Using div for everything without semantic layering.
- Heading levels are chaotic, making the page structure unreadable.
- Forms and media elements missing required attributes.
Deliverable
A semantic page skeleton template (structural sections + heading hierarchy + a11y checklist).
My Progress
Completed Steps0 / 4
Total Attempts0
Best Score0%
Completion Criteria (Checkable)
Confirm before completing this Lab
Reflection Questions (Recommended)
What was the most important semantic structure change you made?
What accessibility details did you add?
How reusable is this HTML structure?
Tags
HTML5语义化可访问性SEO