HTML5.2 的到來 (2) – 新的有效與無效實踐篇
在上一篇我們大致介紹 <dialog> 標籤的使用與操作方式（HTML5.2 的到來 – 迎接新的功能 <dialog> 篇）。除了新的標籤外，HTML 5.2 也將一些之前認定為無效的 HTML 寫法改為有效！
1.單頁面可使用多個 <main> 標籤
<main> 標籤代表網頁的主要內容。雖然不同網頁的重複內容可以放在 <header> 、<section> 或者其它標籤中，但 <main> 標籤的用意是為了頁面上的特定內容而保留。因此在 HTML 5.2 之前，<main> 標籤在 DOM 中必須唯一才能使頁面有效。
而現在,隨著單頁面應用 (SinglePage Web Application，SPA) 的普及，使得這一特性已經不符合當下的實景，所以在 HTML5.2 中，頁面中同時出現多個 <main> 標籤是被允許的，只要在同一時間内，只有一個 <main> 標籤是對外顯示，其餘必須使用 hidden 屬性進行隱藏。
<main>...</main> <main hidden>...</main> <main hidden>...</main>
其中唯一要注意的一點是不能使用 CSS 語法隱藏 <main> 標籤，例如 display: none; visibility: hidden; opacity: 0; 都是無效的！只能透過 hidden 屬性才行。
2.可在 <body> 中放入 <style> 樣式
一般來說，CSS 樣式是放置在HTML 文件的 <head> 中。隨著元件化開發的流行，開發者發現編寫 style 放置與其相關的 html 中更加有益，因此在 HTML 5.2 之前早已有開發者將 <style> 放入 <body> 內，但是直到 HTML 5.2 才被 W3C 定義為有效寫法。不過在此還是要強調 由於效能問題，樣式還是應當優先考慮放在 <head> 中 。
<body>
<header>
<p>Will be green</p>
</header>
<style>
p { color: green; }
</style>
<main>
<p>Will be green</p>
</main>
<p>Will be green</p>
</body>
另外需要特別注意的是 <style> 內的樣式並不是局部性的，如同上述的例子，所有 <p> 標籤內的文字將呈現綠色，即使有些 <p> 標籤 置於 <main> 、 <header> 標籤中。因此在文件的 body 中使用樣式可能導致重複定義樣式，觸發重佈局、導致重繪，需要小心使用。
3.<legend> 標籤內可以使用標題標籤
在表單中， <legend> 標籤表示 <fieldset> 表單區域中的標題。在 HTML 5.2 前，<legend> 標籤的內容必須為純文字。而現在，它可以包含標題標籤 <h1> 、 <h2> … 。
<fieldset> <legend><h2>Credit card information</h2></legend> <!-- form fields --> </fieldset> <fieldset> <legend><h2>Delivery information</h2></legend> <!-- form fields --> </fieldset>
4.移除 <menu> 標籤
目前並沒有清楚指出移除 <menu> 標籤的原因，不過有可能是與 <nav> 標籤作用相似，因此未來各個瀏覽器將停止支援 <menu> 標籤，建議將現有網頁的 <menu> 標籤全面移除，並使用 <nav> 標籤。
5.不再支援嚴格文件型別（Strict Doctypes）
廢棄嚴格文件型別！
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
我要留言