目錄
a標籤不可以嵌套交互式元素
塊級元素可以包含內聯元素和某些塊級元素，內聯元素不能包含塊級元素，只能包含內聯元素
p標籤不能包含塊級元素
不可包含塊級元素的標籤
li標籤可以包含div以及ul，ul的子元素應該只有li
元素並排（塊級和塊級並列，內聯和內聯並列)
字符實體引發的錯誤
錯誤的使用 role 屬性
行內元素強制轉成塊級元素，塊級元素強制轉成行內元素
使用 disabled=false
頁面中同一個ID出現兩次及以上
內嵌的 <script> 標籤含有 src 屬性
標籤錯誤嵌套
語法錯誤
* a標籤不可以嵌套交互式元素[a， audio（如果設置了controls屬性）， button， details， embed， iframe， img（如果設置了usemap屬性）， input（如果type屬性不爲hidden狀態）， keygen， label， menu（如果type屬性爲toolbar狀態），object（如果設置了usemap屬性）， select， textarea， video（如果設置了controls屬性）]
下面這些寫法瀏覽器是不能夠正常解析的
<a href=""> <a href="">click</a> </a> <a href=""> <button>click</button> </a> <a href=""> <input type="text"> </a> <a href=""> <textarea name="" id="" cols="10" rows="5"></textarea> </a> <a href=""> <a href="">click</a> </a> <a href=""> <button>click</button> </a> <a href=""> <input type="text"> </a> <a href=""> <textarea name="" id="" cols="30" rows="10"></textarea> </a>
有的雖然解析正常，但卻達不到預想的目的
語義錯誤
頁面可能正常解析，但不符合語義。這是因爲瀏覽器自帶容錯機制，對於不規範的寫法也能夠正確的解析，各瀏覽器的容錯機制不同，所以儘量按規範來寫。
* 塊級元素可以包含內聯元素和某些塊級元素，內聯元素不能包含塊級元素，只能包含內聯元素
/*規範的寫法*/ <div> <h2>jikexueyuan</h2> <p>IT education</p> </div> /*不規範的寫法*/ <span> <div>wrong</div> </span>
* p標籤不能包含塊級元素
/*不規範的寫法*/ <p> <h1></h1> </p> <p> <div></div> </p>
* 如下的標籤不可包含塊級元素
h1、h2、h3、h4、h5、h6、p
* li標籤可以包含div以及ul(這個是不是很牛，可以包含父級元素)
/*規範的寫法*/ <li> <ul> <li> </li> <li> </li> <li> <li> </ul> <div> </div> </li> /*不規範的寫法*/ <ul> <a href="">迷路的a標籤</a> <li></li> <li></li> <li></li> </ul>
* 元素並排（塊級和塊級並列，內聯和內聯並列)
/*規範的寫法*/ <div> <h2></h2> <p></p> </div> <div> <img src="" alt=""> <a href=""></a> <span></span> </div> /*不規範的寫法*/ <div> <span>我是內聯元素</span> <p>我是塊級元素</p> </div>
字符實體引發的錯誤
有些字符是 html 預留的，不能夠直接書寫，但是可以通過字符實體來顯示。 如：
空格 -
大於符號 - >
& - &
......
但如果稍不注意，在如下的情況下就會引發錯誤：
<a href="?art©">Art and Copy</a>
這裏的 © 會被轉換爲 符號，從而得不到預期的效果
正確的做法是所有的保留字符全部用實體字符替代。
<a href="?art&copy">Art and Copy</a>
錯誤的使用 role 屬性
role 屬性使用來增強標籤的語義的，但如果使用不當，反而得到負面的效果，所以使用的時候一定要注意。
<input type=radio role=progressbar>
這裏的是一個 input標籤，但是卻通過 role 指定了進度條的語義，但是 input是不能夠作爲進度條的，所以這裏反而模糊了語義。
行內元素強制轉成塊級元素，塊級元素強制轉成行內元素
如下做法是不推薦的：
給 <div> 標籤設置 inline-block 屬性
給 <span>標籤設置 block 屬性
使用 disabled=false
disabled 屬性是用來禁用標籤的，一般用於 input 、button等，表示不可點擊。
正常的用法是：
<input type="text" name="lname" /> <input type="text" name="lname" disabled="disabled" />
錯誤的寫法：
<input type="text" name="name" disabled="false" />
這裏雖然 disabled="false" 語義也代表不禁用，但實際上是被禁用的。
頁面中同一個 ID 出現兩次及更多
ID重複會引起元素選擇錯誤，從而引發 Javascript 隱藏問題，因此需要注意。
注：每一個ID會在瀏覽器中生成一個同名的全局變量
內嵌的 <script> 標籤含有 src 屬性
當 <script> 標籤包含 src 屬性時，其包含的 Javascript 腳本是不會執行的。
本文轉載自分針網