HTML5引入了一系列语义化结构标签，如header、nav、main、article、section、aside和footer，它们用来替代过去清一色的div布局。这些标签本身都支持HTML的全局属性，也就是说无论什么元素都能使用的那一组基础特性。掌握结构标签配合全局属性的用法，是写出规范前端页面的基础。
一、HTML5常见结构标签概述
header通常放置页面或区块的标题、logo与导航入口；nav专指导航链接集合；main包裹页面核心内容且一个文档只应出现一次；article表示独立可分发的内容，比如一篇博客；section是对主题分组的内容块；aside承载侧边栏或附注；footer放版权或联系信息。它们让浏览器和爬虫理解页面骨架。
这些结构标签虽语义不同，但都属于HTML元素，因此天生支持全局属性。很多老项目用大量div加class模拟结构，不仅啰嗦还不利于无障碍访问。使用原生结构标签后，再辅以全局属性进行控制，代码会直观很多。
二、常用全局属性及作用
1. id 与 class
id是元素的唯一标识符，整个文档中不应重复，常用来被CSS选中、被JavaScript的getElementById获取，或作为锚点跳转目标。class则可重复，用于对多个元素归类，方便统一加样式或批量操作。结构标签加上恰当的class，能在保持语义的同时灵活扩展。
例如给article设置id便于分享链接定位，用class标记文章类型。下面代码展示了一个带id和class的section结构：
<section id="intro" class="blog-section highlight"> <h2>简介</h2> <p>这是带有全局属性的结构标签示例。</p> </section>
2. hidden
hidden是一个布尔属性，写上就表示元素暂不显示且不参与渲染，类似display:none的效果，但语义更明确。对于结构标签，比如暂时隐藏的aside侧边栏，直接用hidden比写CSS类更简洁。
需要注意，如果CSS里对该元素显式设置了display其他值，可能会覆盖hidden的隐藏行为。以下示例让footer默认隐藏，后续可用脚本去掉该属性：
<footer hidden> <p>版权信息暂时隐藏</p> </footer>
3. title
title提供元素的额外说明，鼠标悬停时浏览器会弹出提示框。给结构标签加title能提升用户体验，比如告诉用户某个nav区域的用途。它不影响布局，只作为补充信息。
使用时应避免写过长内容，下面给aside加了一个简短title：
<aside title="相关文章推荐"> <ul><li>上一篇</li><li>下一篇</li></ul> </aside>
4. lang
lang声明元素内文本的自然语言，有助于屏幕阅读器切换发音、搜索引擎判断语种。通常html根元素设整体语言，结构标签内若嵌了其他语言片段，可用lang单独标注。
比如article里有一段英文引用，可这样写：
<article lang="zh-CN"> <p>中文正文内容。</p> <blockquote lang="en">This is an English quote.</blockquote> </article>
5. contenteditable 与 draggable
contenteditable是布尔属性，设为true时元素内部文本可直接在页面编辑，适合做简易笔记区。draggable控制元素是否允许拖拽，配合拖放API可实现模块重排。结构标签如section也能拥有这些能力。
示例让一个article可编辑、可拖拽：
<article contenteditable="true" draggable="true"> <p>这段文字可以直接修改，也能拖走。</p> </article>
三、全局属性与结构标签协作建议
在真实项目中，建议先用结构标签搭好语义骨架，再挑必要的全局属性增强行为。不要为了用而用，比如每个section都加无意义id反而扰乱文档。合理使用class做样式钩子，用hidden控制显隐，用lang照顾多语言，能让页面既标准又好维护。
另外，全局属性是所有HTML元素通用的，所以不仅限于结构标签。但结构标签因语义清晰，配合全局属性后，相比传统div方案更容易被开发团队理解和协作，也降低了后期重构成本。
| 全局属性 | 适用结构标签示例 | 主要作用 |
|---|---|---|
| id | section、article | 唯一标识，便于定位与脚本操作 |
| class | header、footer | 分类复用样式与逻辑 |
| hidden | aside、nav | 无渲染隐藏元素 |
| title | 任何结构标签 | 悬停提示补充信息 |
| lang | article、blockquote | 声明文本语言 |
四、小结
HTML5结构标签解决了页面语义化问题，而全局属性提供了统一的能力接口。从id、class到hidden、lang、contenteditable等，它们让header、nav、main等标签不止于静态展示。写页面时先想清楚结构，再自然加上所需全局属性，就能兼顾规范与灵活。