这一节把已经学过的文字、链接、表格和表单放进一张完整的社团活动页。先按内容用途划分区域，再选择元素。区域名称不会自动产生两栏布局或漂亮卡片；现在我们关注结构，后面的 CSS 部分会负责外观。
页面的入口、主体和结尾
header 通常放名称、介绍或入口信息；nav 包住主要导航链接，不是每一小组链接都必须使用 nav。main 包住这张页面独有的主要内容，普通文档使用一个可见 main。footer 放结尾信息，例如联系地点、版权或相关说明。header 和 footer 也可以属于某篇 article，因此并不是整份文档只能出现一次。
<header>
<h1>周末读书社</h1>
<nav><a href="#schedule">安排</a> <a href="#join">报名</a></nav>
</header>
<main>
<section id="schedule">
<h2>活动安排</h2>
<p>上午十点开始。</p>
</section>
<section id="join">
<h2>报名</h2>
<p>欢迎新朋友。</p>
</section>
</main>
<footer><p>地点：阅读中心</p></footer>section、article 和 aside 的区别
section 表示围绕一个主题组织的一部分，通常需要一个说明该主题的标题，例如“活动安排”。如果只是为了包一层方便加样式，没有独立主题，div 往往更合适。
article 表示相对独立、单独拿出来仍有意义的内容，例如一篇读书心得或一则完整活动公告。article 可以包含多个 section；section 也可能包含多篇 article。没有一种必须照搬的嵌套模板，依据内容关系选择。
aside 表示与周围内容相关、但相对独立的补充信息，例如延伸阅读或交通提醒。它不表示“自动放到右边”：没有 CSS 时通常仍沿文档顺序排列。如果内容是参加活动必须知道的核心步骤，不要仅因为想放侧栏就把它当作可有可无的补充。
用已经学过的规则完成页面
先写完整文档，再放 header、main、footer。把主要区域的 h2 和唯一 id 配好，再连上 nav 中的链接。将活动数据放进 table，把报名控件放进 form，并检查 label、name 和按钮 type。不要嵌套 form；一个表单可以包含多个 fieldset，但不能把另一个 form 放进去。
Lab 的完整活动页包含一则独立 article、一张安排表、一个简短报名表以及 aside 提醒。按从上到下的顺序阅读源码，再试导航、输入和重置。第二个示例是一篇阅读笔记，帮助你看到相同元素可以组合成不同页面。
完成练习后检查：标题层级是否合理，链接目标是否存在，id 是否重复，输入框是否有说明，表格是否有标题，页面在窄屏下是否仍能阅读。你已经可以写出内容完整、可实际操作的 HTML 页面。它现在外观朴素是正常的，接下来才逐步学习 CSS。
页面实验：组织完整页面
先切换对照示例，再按照观察提示修改一处 HTML，比较源码与真实页面。示例中的英文短句可以替换成自己的文字。
沿导航跳到报名；aside 默认仍在内容下方。试填表单并重置，预览不发送数据。
预览保留浏览器默认的标题、段落和表单外观。示例切换会替换编辑内容；重置实验可恢复初始状态。可点击页内链接、输入文字和选择选项；此练习预览不提交数据、不运行脚本。要在本机尝试，将完整代码保存为 index.html 后用浏览器打开。
知识测验
动手编写：组织完整页面
新建 index.html，按照下面的要求编写完整页面；保存并用浏览器打开，边操作边检查结果。参考答案是一种实现，文字内容可以不同。
- 完成社团活动页：header 中包含 h1 和两条 nav 页内链接，main 中包含安排及报名两个带 h2 的 section。
- 安排区使用含 caption 和表头的两列表格；报名区包含有 label/name 的必填姓名、邮箱及 submit 按钮。
- 添加独立活动公告 article、补充说明 aside 和页面 footer；检查唯一 id、链接目标和窄屏阅读。