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相同，所以不再列出，这个程序的最大特点是程序的语意非常清楚。