3.1　結構化文本

設計符合語義的結構會增強信息可讀性和擴展性，同時也降低了結構的維護成本，為跨平臺信息交流和閱讀打下基礎。

3.1.1　定義標題文本

視頻講解

<h1>、<h2>、<h3>、<h4>、<h5>、<h6>標簽可定義標題，按級別高低從大到小分別為h1、h2、h3、h4、h5、h6，它們包含的信息依據重要性逐漸遞減。其中h1表示最重要的信息，而h6表示最次要的信息。

【示例1】在網頁中，標題信息比正文信息重要，因為不僅瀏覽者要看標題，搜索引擎也同樣要先檢索標題。下面的做法是不妥的，用戶應使用CSS樣式來設計顯示效果。

    <div id="header1">一級標題</div>
    <div id="header2">二級標題</div>
    <div id="header3">三級標題</div>

【示例2】很多用戶在選用標題元素時不規范，不講究網頁結構的層次輕重，如圖3.1所示。

圖3.1　標題與正文的信息重要性比較

在一個節段中，h1元素被重復使用了3次，顯然是不合適的。

【示例3】下面示例中層次清晰、語義合理的結構對于閱讀者和機器來說都是很友好的。除了h1元素外，h2、h3和h4等標題元素在一篇文檔中可以重復使用多次。但是如果把h2作為網頁副標題之后，應該只能夠使用一次，因為網頁的副標題只有一個。

h1、h2和h3元素比較常用，h4、h5和h6元素不是很常用，除非在結構層級比較深的文檔中才會考慮選用，因為一般文檔的標題層次在三級左右。

對于標題元素的位置，應該出現在正文內容的頂部，一般置于第一行的位置。

3.1.2　定義段落文本

視頻講解

<p>標簽定義段落文本，在段落文本前后會創建一定距離的空白，瀏覽器會自動添加這些空間，用戶可以根據需要使用CSS重置這些樣式。

【示例】下面代碼使用語義化的元素構建文章的結構。其中使用div元素定義文章包含框，使用h1定義文章標題，使用h2定義文章的作者，使用p定義段落文本，使用cite定義轉載地址。所顯示的結構效果如圖3.2所示。

圖3.2　文檔結構圖效果

3.1.3　定義引用文本

視頻講解

<q>標簽定義短的引用，瀏覽器經常在引用的內容周圍添加引號；<blockquote>標簽定義塊引用，其包含的所有文本都會從常規文本中分離出來，左、右兩側會縮進顯示，有時會顯示為斜體。

從語義角度分析，<q>標簽與<blockquote>標簽是一樣的。不同之處在于它們的顯示和應用。<q>標簽用于簡短的行內引用。如果需要從周圍內容分離出來比較長的部分，應使用<blockquote>標簽。

【示例】下面這個結構綜合展示了cite、q和blockquote元素以及cite引文屬性的用法，演示效果如圖3.3所示。

圖3.3　引用信息的語義結構效果