建议一：清晰的描述页面中的内容
lang 属性
<html lang="zh-Hant-TW"> <!--...--></html>网页的 <html> 元素应当明确的描述 lang 属性，好辨别这个网站主要的地区语系，像是台湾繁体中文就是 zh-Hant-TW。
<head> 元素
可以用于放置一些描述该页面内容的资料，这些资料不会直接显示在网页上，但可以提供给浏览器或爬虫使用。像是撰写<meta> 元素，可以更进一步让机器人与浏览器了解你的网站，使它们更熟悉网页内容能够更好的引导用户进入网站。
一些社交平台像是 Twitter 与 Facebook 也会推出自家设立的标准，可以完成这些资料的描述，在这些平台上分享网站就会有比较齐全的介绍，像是：
<!-- 编码方式 --><meta charset="UTF-8" /><!-- 页面缩放设置 --><meta name="viewport" content="width=device-width, initial-scale=1" /><!-- 页面标题 --><title>助教统整 n 个方法帮助你写出更好的 HTML - 网页东东</title><!-- 页面简短描述 --><meta name="description" content="页面的简短描述" /><!-- 页面小图示 --><link rel="icon" type="image/png" href="http://example.com/image.png" /><!-- 页面描述 --><meta name="description" content="这一个网页的描述" /><!-- Open Graph 标题 --><meta property="og:title" content="这一个网页的标题" /><!-- Twitter Card --><meta name="twitter:card" content="summary" /><!--...-->建议二：检查程序代码的有无语法错误
可以到 W3C 的语法检测网站 检测网站页面是否有语法错误。常见的问题像是：
- 标签没有正确的闭合
- 属性没有正确的使用
- 不正确的使用标签
建议三：使用语义化的标签来描述网页内容
在之前可能只会用到 <div> 或者是 <span> 来装载网页内容，比较少重视语义化的描述网页，如今 HTML5 加入了许多语义化的标签，这些标签可以更有效率的架构并描述网页内容，推荐到： Fooish 程式技术 了解不同的 HTML5 标签与其使用时机。在底下提供一些同学常误用的标签，并解释其正确的使用时机：
一个页面只会有一个 <h1> 标签
在一个网页中，<h1> 标签最好只出现一次，用于标注当前页面最重要的信息标题，不要在一个页面中出现一个以上的 <h1> 标签，这是不和规的语法。反向的，也建议不要完全不使用 <h1> 标签，良好的 <h1> 标签可以很好地锚定整个页面的重点。
避免跳过标题标签
举例来说，在 <h1> 标签接着使用 <h3>、依此类推，这么做虽然是和规的语法，但却可能对使用屏幕阅读器的用户造成混淆，以下是两者比较的范例代码：
<!-- ❌ 跳过标题标签 --><h1>网页东东，用最简单亲切的方式描述如何设计与架构网页</h1><h2>我们的优势</h2><h4>图片辅助</h4><p>一些说明</p><h4>初学者友善</h4><p>一些说明</p><h4>免费资源</h4><p>一些说明</p>
<!-- ✅ 无跳过标题标签 --><h1>网页东东，用最简单亲切的方式描述如何设计与架构网页</h1><h2>我们的优势</h2><h3>图片辅助</h3><p>一些说明</p><h3>初学者友善</h3><p>一些说明</p><h3>免费资源</h3><p>一些说明</p>要依序的使用不同等级的标题架构网页，不要跳跃的使用不同等级的标题。
<ul> 内必须是 <li> 标签
<li> 只能存在于 <ul>、<ol>或<menu>标签之内，否则是不合规的语法。
<!-- ❌ 不合规 --><ul> <div></div> <p></p></ul>
<!-- ✅ 合规 --><ul> <li></li> <li></li> <li></li></ul>
<!-- ✅ 合规 --><ul> <li><div></div></li> <li><div></div></li> <li><div></div></li></ul><section> 建议要搭配标题
只要有明显含意的区块就可以使用 <section> 并且建议搭配标题标签，只有极度少数的情况才不需要（举例来说第二层的导航列）否则建议都搭配标题。
<section> <h2>标题</h2> <p>内容</p></section>建议四：图片与影片的使用
大型档案通常是网页性能的杀手，必须额外谨慎看待，因为这些资源是优化上可以付出极小的代价获得巨大效益的地方。为了这个主题额外写了一篇专门说明网页图片的文章：所有最佳化网页图片的技巧都写在这了！可以参考看看。
善用行内 SVG
如果你的 SVG 图片是简单的图形且不会重复出现，那么建议将它内嵌在 HTML 中，这样就避免了多发送一个非必要的 HTTP 请求，并且能够更容易的控制 SVG 的样式，举例来说以下案例为行内 svg 的 fill 属性添加 currentColor 它现在可以自由地适应外部文字颜色来变换其填色了：
<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 96 960 960" width="48"> <path d="M450 856V606H200v-60h250V296h60v250h250v60H510v250h-60Z" /></svg>使用合适的格式
如果没有特别要支持旧浏览器的需求，强烈建议将点阵图片转换为 webp 格式，这是一种支持良好的新型图片格式，可以非常有效的减少图片的大小，并且支持透明度。视频的话则是强烈建议使用 webm 格式。
使用合适的大小
视情况调整图片尺寸，不要加载一个非常大的图片或视频但实际上显示出来很小，需要多少大小就加载多大即可，基本上单张图片 300k 以上就不太能接受了，再上去可以考虑使用懒加载之类的方式提升使用体验。
撰写详细的 alt 属性
强烈建议添加 alt 属性，并明确的描述其图片内容。为什么图片的 alt 属性这么重要？ 是因为当图片无法正常显示，或是爬虫在爬取网页时，alt 属性的内容可以帮助爬虫了解图片的内容，这对于 SEO 来说是非常重要的，这里强烈建议阅读：Google 图片搜索引擎优化 (SEO) 的最佳做法。
撰写 width 与 height 属性
强烈建议添加 width 与 height 属性，避免布局偏移。
有同学提问说：如果把图片的 CSS 设计为 RWD 适应，这样可以改善布局偏移吗？ 答案是不行的，可以试想一个情境：「网页才刚开起，连 CSS 都还没有载入的时候」浏览器在绘制每个元素，但只有图片不知道实际加载进来会是多大？因此还是会造成布局偏移的问题。应该在创建图片的时候就清晰的描述该图片宽与高是多少，不管 CSS 如何。