ASP.NET MVC 的HTML5 語意標籤預設配置

ASP.NET 開發人員在未來必須注意的兩件事,一個是 ASP.NET MVC ,一個就是 HTML5 ,而 HTML5 現在則是 ASP.NET MVC 的預設配置了,儘管因為評估還有現實狀況,業界對新技術的導入與技術本身的進化速度有一些落差,同時還需考量一門新技術是否真的會長久發展,但不可否認的 ASP.NET MVC 與 HTML5 幾乎是未來的 Web 應用程式開發主流了,所以為了技術生涯的發展,儘早佈局這兩種技術,可以避免在不久的將來遇上需要用的時候手忙腳亂。

HTML5 為 HTML 導入了相當多新的元素,其中一種便是與版面配置有關的語意標籤,包含 <section>、<article>、<aside> 與 <nav>  等等,另外還有 <header> 與 <footer> 兩個用來表示區塊頭部以及區塊尾部配置的專用標籤。

MVC 雖然是很舊的東西了,但是 ASP.NET MVC 卻相當的新,在設計上更是推翻了原有的 ASP.NET Web Page ,回歸到更純正的網頁設計,同時直接將 HTML5 套用至預設樣板中。

當你建立一個新的 ASP.NET MVC 專案,你會看到,其中有一個核取方塊「Use HTML5 semantic markup」:


這個方塊預設是勾選的,也就是說,它會在新建立的 MVC 網頁樣板中,直接以 HTML5 的語意標籤為網頁的內容區塊架構進行配置。現在建立兩個專案,一個保留「Use HTML5 semantic markup」,另外一個則將其勾選取消,建立好新專案之後,將 Views/Shared/_Layout.cshtml 這個預設樣板檔案開啟,看看預設的樣板內容:


你可以看到其中利用  <header> 與 <footer> 定義網頁的開始與結束資訊區塊,包含連結清單的區塊則利用 <nav> 定義,還有一個主內容區塊則是 <section> 標籤。

現在來看取消「Use HTML5 semantic markup」勾選設定的情形,同樣的,開啟  Views/Shared/_Layout.cshtml  兩個檔案比較一下:


這一次是傳統 HTML4 的作法,沒有任何語意標籤使用於其中,以 <div> 進行切割,並且設定 id 屬性值以提供區塊識別。

執行這兩種專案時,所看到的結果網頁都是相同的,如下圖:


如果分別檢視原始檔,例如啟用「Use HTML5 semantic markup」,則會看到其中配置的 HTML5 語意標籤:


另外請特別注意原始檔中的第一行,你會發現無論有沒有套用語意標籤,ASP.NET MVC 均是直接以 HTML5 的宣告語法建立網頁。

 瞭解語意標籤是進入HTML5 的第一步,也是運用 ASP.NET MVC 馬上就會遇到的議題,我們在新出版的《HTML5 完美風暴》作了語意標籤的完整討論,如果你沒有買書,也可以到我之前 BLOG 中的 HTML5 系列文章裏面瞭解一些初步的討論,這些內容在未來會進一步整合進我們這裏專屬的網站中。

沒有留言: