应依据HTML5语义化标签特性合理设置class与id：一、语义标签嵌套描述性class；二、唯一区块用id便于锚点与JS操作；三、结合BEM命名法提升CSS可维护性；四、避免class/id与标签语义重复；五、用data-*属性承载非样式元数据。
如果您在编写HTML5页面时希望为元素设置class或id属性以实现语义化结构并便于CSS精准选择，则需依据HTML5的语义化标签特性，合理分配class名称与id标识。以下是具体设置方法：
一、使用语义化标签嵌套class属性
HTML5新增了如<header>、<nav>、<main>、<article>、<section>、<aside>、<footer>等语义化标签，它们本身已具备结构含义；添加class属性可进一步描述其功能或状态，增强CSS可维护性。
1、在<header>标签中添加class="site-header"，用于区分全局页眉与文章内页眉。
2、为<nav>标签设置class="primary-nav"，明确其为主导航区域。
立即学习“前端免费学习笔记（深入）”；
3、对<article>标签赋予class="post-item"，表示该区块为独立内容条目。
4、在<section>标签中写入class="features-section"，指明此节为功能介绍模块。
二、为唯一性容器设置id属性
id属性适用于页面中仅出现一次的结构性区块，CSS可通过#号直接选中，优先级高于class，且有利于锚点跳转与JavaScript操作。
1、将网站主logo所在<div>包裹于<header>内，并为其添加id="logo-container"。
2、为页面主要内容区域的<main>标签设置id="content-main"。
3、在<footer>中嵌套联系信息区块，为其<address>外层<div>添加id="contact-info"。
4、若存在固定悬浮侧边栏，对其<aside>标签设置id="sticky-sidebar"。
三、结合语义标签与BEM命名法设置class
BEM（Block Element Modifier）是一种CSS类名命名规范，能清晰表达组件层级关系与状态变化，与HTML5语义标签天然契合，避免样式污染与命名冲突。
1、定义一个导航块，使用<nav class="nav">作为Block根节点。
2、在该<nav>内，为每个链接项添加class="nav__item"，双下划线表示Element。
3、为当前激活的链接添加修饰类class="nav__item--active"，双短横表示Modifier。
4、若需扩展响应式行为，在<nav>上追加class="nav--mobile"，表示移动设备专用变体。
四、避免class/id命名与HTML5语义重复
HTML5标签自身已含语义，不应在class或id中冗余表达相同含义，否则降低可读性与可维护性。例如<footer>内无需再设class="footer"，应聚焦于其子模块的差异化描述。
1、删除<footer class="footer">中的class="footer"，保留原生语义即可。
2、将<section class="section">改为更具业务意义的class="pricing-plans"或class="testimonials-list"。
3、对<article>不使用class="article"，而采用class="news-article"或class="tutorial-guide"等上下文相关名称。
4、若<aside>用于广告位，设为class="ad-banner"；若用于作者简介，则用class="author-bio"。
五、使用data-*属性补充非样式语义信息
当需要为元素附加机器可读但不影响样式的元数据时，应优先选用HTML5标准的data-*自定义属性，而非滥用class或id承载逻辑信息。
1、在<article>标签中添加data-post-id="12345"，供JavaScript获取文章唯一标识。
2、为<button>设置data-action="toggle-menu"，明确其交互意图。
3、在<time>标签中加入data-timestamp="1717029600"，提供毫秒级时间戳备用。
4、对<img>元素添加data-srcset-desktop="large.jpg"，辅助响应式图片加载逻辑。
