HTML5代码需严格遵循五项规范:一、首行声明<!DOCTYPE html>;二、head中添加<meta charset="UTF-8">;三、合理使用header、nav、main等语义标签;四、正确嵌套并闭合标签;五、为img、video、canvas提供alt属性或回退内容。

如果您正在编写HTML5代码,但页面在不同浏览器中显示异常或语义结构混乱,则可能是由于未遵循HTML5的语义化与语法规范。以下是正确编写HTML5代码的规范步骤:
一、声明正确的文档类型
HTML5使用简化的DOCTYPE声明,确保浏览器以标准模式渲染页面,避免触发怪异模式(Quirks Mode),从而保证布局和脚本行为的一致性。
1、在HTML文件最顶部单独一行书写:<!DOCTYPE html>
2、该声明不区分大小写,但推荐全部小写
立即学习“前端免费学习笔记(深入)”;
3、DOCTYPE前不得有任何字符(包括空格、注释或BOM)
二、设置正确的字符编码
指定UTF-8编码可确保中文、符号及各类Unicode字符被正确解析与显示,防止乱码问题。
1、在<head>内紧随<title>之前或之后添加:<meta charset="UTF-8">
2、charset属性值必须为"UTF-8",不可写作"utf8"或"utf-8"
3、该标签不得出现在<body>中,且不应重复出现
三、使用语义化结构元素
HTML5引入<header>、<nav>、<main>、<article>、<section>、<aside>、<footer>等语义标签,替代无意义的<div>嵌套,提升可访问性与SEO效果。
1、用<header>包裹页面或区块的标题性内容,而非仅用于顶部导航栏
2、将主导航链接放入<nav>,每个页面最多使用3个<nav>元素
3、主内容区域必须包裹在<main>中,且一个页面仅允许一个<main>
4、独立成文的内容(如博客文章、新闻稿)应使用<article>,相关但非独立的内容用<section>
四、正确嵌套与关闭标签
HTML5虽放宽部分闭合要求(如<p>、<li>),但显式闭合能增强可维护性,并避免解析歧义;自闭合标签(如<img>、<input>)不得使用斜杠结尾。
1、所有双标签必须有对应结束标签,例如<div>必须配对</div>
2、<img src="logo.png" alt="公司标志">是合法写法,而<img />或<img></img>属于错误用法
3、<audio>与<video>若含子元素(如<source>),必须显式闭合
4、嵌套层级需符合逻辑:<section>内可含<article>,但<main>不得嵌套于<article>或<aside>中
五、为媒体元素提供替代文本与回退内容
无障碍访问与搜索引擎理解依赖于恰当的替代信息;当资源不可用时,回退内容可保障基础功能可见。
1、所有<img>必须包含alt属性,空值写为alt=""(非省略),描述性图像需准确传达内容
2、<video>标签内部必须包含<source>元素或直接嵌入<iframe>,并在末尾添加纯文本说明:<p>您的浏览器不支持视频播放,请下载视频文件。</p>
3、<canvas>需在开始标签与结束标签之间提供静态替代内容,例如图表说明或数据表格











