编写HTML5代码需遵循五步规范：一、声明<!DOCTYPE html>并构建含lang属性、head与body的结构；二、用header、nav、main等语义化元素替代div；三、正确嵌套文本元素，空元素不闭合斜杠且img必有alt；四、link引入CSS，script合理使用async/defer；五、通过W3C验证并确保无障碍基础支持。
如果您希望编写符合标准的HTML5代码，但不确定从何入手或容易忽略关键规范，则可能是由于未遵循HTML5的文档结构和语义化要求。以下是正确敲写HTML5代码的具体步骤与规范：
一、声明正确的DOCTYPE并设置基本文档结构
HTML5必须以简明的DOCTYPE声明开头，以确保浏览器以标准模式渲染页面；同时需包含必需的根元素、语言属性及基本容器，构成合法的HTML5文档骨架。
1、在文件首行输入<!DOCTYPE html>，注意全部小写、无空格、无版本号。
2、紧接着添加<html lang="zh-CN">标签，其中lang属性值应匹配页面主要语言，中文推荐使用zh-CN。
立即学习“前端免费学习笔记（深入）”；
3、在<html>内依次嵌套<head>和<body>两个顶级容器，二者不可缺失、不可颠倒顺序。
4、在<head>中至少包含<meta charset="UTF-8">，确保字符编码为UTF-8，避免乱码。
二、使用语义化HTML5元素替代通用div
HTML5引入了多个具有明确含义的结构化元素，用以替代大量无意义的<div>，提升可访问性与SEO效果，同时增强代码可读性。
1、用<header>包裹页面或区块的头部内容，如网站标题、导航栏。
2、用<nav>仅包裹主导航链接集合，不可用于分页、侧边相关链接等非主导航场景。
3、用<main>包裹页面核心内容，且每个文档中只能出现一次，不得嵌套于<article>或<aside>内。
4、用<article>表示独立、可分发的内容单元（如博客文章、新闻条目），可自行嵌套<header>、<footer>等。
5、用<section>划分主题性内容区块，每个<section>应有明确的<h2>–<h6>作为标题，不可仅为样式分组而使用。
三、正确处理文本级元素与空元素
HTML5对内联元素的嵌套规则和空元素的闭合方式有明确限制，违反将导致解析异常或验证失败。
1、标题元素<h1>至<h6>必须成对出现，禁止自闭合写法如<h2 />。
2、段落<p>内不可直接嵌套<div>、<h1>–<h6>、<ul>等块级元素，只允许内联元素（如<span>、<em>、<a>）。
3、空元素（如<img>、<input>、<br>、<hr>）在HTML5中无需闭合斜杠，正确写法为<img src="logo.png" alt="公司标志">，而非<img src="logo.png" alt="公司标志" />。
4、所有图像标签必须包含alt属性，其值为空字符串（alt=""）仅适用于纯装饰性图片，功能性图片需描述图像内容。
四、规范链接、脚本与样式引用方式
外部资源引用需符合HTML5语法要求，并兼顾加载性能与执行时机，避免阻塞渲染或执行错误。
1、CSS样式表统一通过<link rel="stylesheet" href="style.css">引入，rel属性值必须为"stylesheet"，不可省略或误写为"style"。
2、JavaScript脚本默认同步阻塞解析，如需异步加载，应在<script>标签中添加async属性；若需保证执行顺序且不阻塞HTML解析，添加defer属性。
3、内联脚本（即<script>…</script>中直接书写JS）必须置于<body>底部或使用defer，禁止在<head>中直接写运行时依赖DOM的JS代码。
4、所有外部资源URL路径应使用相对路径或完整协议URL，避免使用协议相对URL（如//cdn.example.com/script.js），以防HTTPS页面混入HTTP资源被拦截。
五、验证结构完整性与无障碍基础支持
完成编码后需确认文档是否满足HTML5语法合法性，并为残障用户预留基本可访问能力，这是规范落地的关键验证环节。
1、将代码粘贴至W3C Markup Validation Service（validator.w3.org）进行校验，修复所有Error级别报错，Warning可酌情处理但不应忽视语义警告。
2、检查所有交互控件（如按钮、链接、表单输入）是否具备可聚焦性，tabindex值仅在必要时显式设置，避免滥用tabindex="0"或负值破坏自然焦点流。
3、为<button>、<a>等交互元素提供清晰的视觉反馈，确保:active与:focus状态样式可见且不冲突。
4、表单控件必须关联<label>元素，通过for+id或嵌套方式实现，禁止仅靠占位符（placeholder）替代标签说明。
