3-4 保持原始文件樣式<pre>元素

這個元素內的內容在瀏覽器中呈現的效果將與其在編輯程序時所看到的相同，常用在顯示詩詞或是程序語言的源代碼，在網頁內保留空格和換行。

程序實例ch3_5.html：將編輯器內呈現的李白詩原始樣貌呈現在瀏覽器內。

執行結果

3-5 水平線<hr>元素

這個元素也沒有結束標記，主要用在主題發生變化時，輸出為一條水平線。

程序實例ch3_6.html：輸出水平線。

執行結果

3-6 段落<p>元素

程序ch3_6.html不是一個好的HTML5程序，因為HTML5希望每一個文字段落皆是有內涵的，皆使用段落元素來標記，而不希望文檔版式中有未經元素注明的數據。

一般短段落可用<p>元素標記出來。

程序實例ch3_7.html：將<p>元素應用在ch3_6.html中，將詩的內容標記為段落。

執行結果

3-7 文件某個區域<section>元素

通常使用此元素在文件中標記某一個區域，在此區域內會有一個或多個標題。在實用上，通常會將段落數據或是小標題數據放在此元素內。

程序實例ch3_8.html：使用<section>元素標注文件某一區段的應用。

執行結果

<section>元素算是HTML的區塊級元素，在這種層級元素內的標題會被自動降一級輸出，所以雖然程序第11行和第19行是h1級標題，但輸出時是以h2標題顯示大小。

一般簡單的網頁版面配置可參考下圖。我們可以將程序實例ch3_8.html內的兩個<section>元素當作文本區，第8行和第9行的數據則當作網頁的頁首區。從網頁語意上講，上述程序最大的缺點是，我們沒有將它的標題標示出來。HTML5提供了功能來標示網頁的標題區，標題區也可稱為頁首區，這將在下一小節說明。

3-8 頁首<header>元素

Header區又稱文件頁首區，指的是網頁或文件上方的區域，可參考3-7節簡單網頁版面配置圖，通常會將網頁大標題、簡單批注說明等數據放在此區。

程序實例ch3_9.html：重新設計實例ch3_8.html，主要是增加頁首標記。

執行結果

ch3_9.html的執行結果與ch3_8.html相同，所以不再列出，這個程序的最大特點是程序的語意非常清楚。