前幾天提到怎麼在網頁中加入連結、清單、表格跟圖片。

掌握這些常見內容的使用方法後，我們差不多可以往CSS邁進了。

不過在此之前，我想再補充怎麼加入引文、程式碼這兩種內容。

因為寫文章的時候免不了會需要引用資料，或參考前人的見解。
如果是技術類的文章，則常常會需要放上程式碼。

接著，會再介紹很常會看到的span跟div這兩個元素，還有他們的使用時機。

引文

如果需要在網頁中引用別人的內容，可以使用<q>或<blockquote>元素來表示引文。

<q>跟<blockquote>的差別

<q>是行內引用元素，用於表示不需要分段的短引文，像是一句話或幾句話；
<blockquote>是區塊引用元素，用於表示需要獨立為一段的長引文。可能是一整段或好幾段話，也可能是一個清單或表格。

預設樣式

在網頁中，由<q>表示的引文，會顯示為以引號“ ”包起來的文字；由<blockquote>表示的引文，則會顯示為一個有縮排的段落。

前幾天有提過意義的重要性。所以如果只是想讓內容縮排或是用引號包起來，沒有表示這些內容是引文的意思，應該要使用其他方式來設定樣式。

引用來源

通常在引用的時候，我們都會說明資料的來源。

這些引用來源不會跟引文一起，放在<q>或<blockquote>元素裡面。可能會另外用<p>元素表示，放在引文旁邊。

也可能會用<figcaption>來表示，然後跟引文一起放在<figure>元素裡，將兩者關聯在一起。[1]

在引用來源中，通常會用<cite>元素來表示作品名稱，像是某本書、某首歌、某部電影，但不能用來表示人物。由<cite>元素表示的作品名稱預設會顯示為斜體。

除了<cite>元素，以<q>或<blockquote>表示引文時，也可以設定cite屬性，幫引文加上引用來源的URL。不過這個URL不會直接在畫面上顯示。

範例

以下由MDN提供的例子，使用<figcaption>描述引文的出處，並使用<cite>來表示書名：

<figure>
  <blockquote>
    <p>
      It was a bright cold day in April, and the clocks were striking thirteen.
    </p>
  </blockquote>
  <figcaption>
    First sentence in
    <cite
      ><a href="http://www.george-orwell.org/1984/0.html"
        >Nineteen Eighty-Four</a
      ></cite
    >
    by George Orwell (Part 1, Chapter 1).
  </figcaption>
</figure>

另一個由MDN提供的例子，則使用<p>說明引文的出處，並使用<cite>表示網頁標題。同時，也為<q>或<blockquote>設定cite屬性，加上引用來源的網址。

<p>
 According to the
 <a href="/en-US/docs/Web/HTML/Reference/Elements/blockquote">
   <cite>MDN blockquote page</cite></a>:
</p>

<blockquote
 cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/blockquote">
 <p>
   The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or
   <em>HTML Block Quotation Element</em>) indicates that the enclosed text is
   an extended quotation.
 </p>
</blockquote>

<p>
 The quote element — <code>&lt;q&gt;</code> — is
 <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/q">
   intended for short quotations that don't require paragraph breaks.
 </q>
 — <a href="/en-US/docs/Web/HTML/Reference/Elements/q"><cite>MDN q page</cite></a>.
</p>

程式碼

<code>元素

如果需要在網頁中提供程式碼給讀者參考，需要使用到<code>元素。

<code>元素裡可以放入單行或多行的程式碼。內容預設會以等寬字體來顯示，但可以另外透過CSS設定樣式。

由於<code>元素不會保留多餘空格跟換行，如果是多行的程式碼，就需要另外用<pre>元素包起來。[2]

<pre>元素的內容，在網頁中會以原本的書寫方式呈現。除了程式碼，也可用於表示詩歌、ASCII圖像。由於會被解析為HTML，如果<pre>裡的<、>、"、''、&不是用於表示HTML語法，就需要用之前提過的Character Entities來處理。[3]

<code>實際的使用方式，可以參考以下由MDN提供的例子：

<pre><code>const para = document.querySelector('p');

para.onclick = function() {
  alert('Owww, stop poking me!');
}</code></pre>

<kbd>跟<samp>元素

在技術文章中，也可能會提到使用者輸入什麼，得出什麼結果。這時候，可以使用<kbd>跟<samp>元素。

<kbd>表示使用者的輸入。可能是鍵盤的按鍵，也可能是語音或文字的輸入；
<samp>表示電腦程式輸出的內容，像是計算的結果、錯誤訊息等。

<kbd>與<samp>可以搭配組成不同的巢狀結構，表示不同的意義：[4]

• 如果是<kbd>包在<kbd>裡面，可以表示按鍵的輸入組合；
• 如果是<kbd>包在<samp>裡面，表示電腦回顧使用者輸入了什麼；
• 如果是<samp>包在<kbd>裡面，則可以表示使用者透過點擊選單的輸入。

跟<code>類似，<kbd>跟<samp>元素預設會以等寬字體來顯示。
也常常會搭配<pre>元素使用。

以下由MDN提供的例子，便用<kbd>來表示使用者輸入的指令：

<p>
  Use the command <kbd>help my-command</kbd> to view documentation for the
  command "my-command".
</p>

另一個由W3schools提供的例子，則使用<samp>來表示電腦輸出的錯誤訊息：

<p>Message from my computer:</p>
<p><samp>File not found.<br>Press F1 to continue</samp></p>

<span>跟<div>元素

<span>跟<div>元素都是通用的容器元素，本身沒有什麼意義。兩者的差別在於，前者是行內層級的元素，後者是區塊層級的元素。

行內元素與區塊元素

HTMl的元素，過去會以行內元素（inline-level element），與區塊元素（block-level element）作為分類方式。

這兩種元素的呈現方式差異很大。不過關於他們的顯示特性，現在是由CSS來定義。[5]所以我們這邊簡單帶過，之後進入CSS後會再仔細討論～

簡單來說，行內元素有以下特點：

• 寬度與高度，由內容撐開。
• 相鄰的行內元素之間，會一個接一個水平排列。不會換行再開始。
• 內容具有流動性。如果上層元素寬度不夠顯示，則內容會換行繼續顯示。
• 行內元素裡面不能放區塊元素

相比之下，區塊元素則是：

• 寬度會與上層元素同寬，佔滿整個空間。高度則由內容撐開。
• 與相鄰元素之間會垂直排列。所以會換行再開始。
• 區塊元素裡可以包含區塊元素或行內元素。
  但實際上還是要看每個元素的規定，像是<p>裡面就不能放<div>。

使用時機

由於<span>跟<div>沒有意義，在添加網頁的內容時通常會優先使用其他有明確意義的語意元素。這樣子後續使用瀏覽器或無障礙功能時，才能進一步辨識元素的意義，對內容做合適的處理。

像是之前提過，<strong>用來表示非常重要，<em>元素則有強調的意義。使用無障礙功能朗讀網頁內容時，就會針對這兩個元素的內容改變朗讀的語調。

只有在找不到其他更適合的元素來表達意義，或是本來就沒有想要添加什麼意義的時候，才會使用<span>跟<div>元素。

所以如果只是想要將一些內容包起來，以便添加CSS樣式、執行Javascript程式或設定屬性，沒有想要表達什麼意義的話，就可以使用<span>跟<div>元素，再設定class、id或其他的屬性。

範例

以下由MDN提供的例子，便將一段文字中的食品原料以<span>屬性包起來，並將class屬性設定為相同的值ingredient。後續透過這個相同的class屬性值，就可以另外針對這些食品原料設定共同的樣式，跟其他文字做出區隔。

<p>
  Add the <span class="ingredient">basil</span>,
  <span class="ingredient">pine nuts</span> and
  <span class="ingredient">garlic</span> to a blender and blend into a paste.
</p>
<p>
  Gradually add the <span class="ingredient">olive oil</span> while running the
  blender slowly.
</p>

另一個由規範提供的例子中，<article>元素的屬性值設為en-US，表示文章的主要語言是美式英語。但有些段落使用到英式英語，於是另外用<div>元素包起來，將lang屬性值設定為en-GB。如果後續使用無障礙功能瀏覽這個網頁，就能辨別語言的差別，使用不同的發音朗讀。

<article lang="en-US">
 <h1>My use of language and my cats</h1>
 <p>My cat's behavior hasn't changed much since her absence, except
 that she plays her new physique to the neighbors regularly, in an
 attempt to get pets.</p>
 <div lang="en-GB">
  <p>My other cat, coloured black and white, is a sweetie. He followed
  us to the pool today, walking down the pavement with us. Yesterday
  he apparently visited our neighbours. I wonder if he recognises that
  their flat is a mirror image of ours.</p>
  <p>Hm, I just noticed that in the last paragraph I used British
  English. But I'm supposed to write in American English. So I
  shouldn't say "pavement" or "flat" or "colour"...</p>
 </div>
 <p>I should say "sidewalk" and "apartment" and "color"!</p>
</article>

小結

這幾天下來，我們介紹了網頁的基本組成、常見版面、內容結構與通用容器。

也說明怎麼編排文字，加入連結、清單、表格、圖片、引文與程式碼。

但這些內容還需透過CSS設定樣式，才能以我們想要的樣子呈現。

所以現在就讓我們暫別HTML，往CSS前進吧～

參考資料

[1]: HTML Standard, the blockquote element
[2]: MDN, <code>: The Inline Code element
[3]: MDN, <pre>: The Preformatted Text element
[4]: MDN, <kbd>: The Keyboard Input element
[5]: MDN, Block-level content