第4章：情報を整理し、信頼性を示す - リストと引用
優れたブログ記事は、ただ文章が続くだけでなく、情報がすっきりと整理され、主張には信頼できる裏付けがあります。
今回は、そんな記事作りに欠かせない「リスト（箇条書き）」と「引用」のためのHTMLタグをマスターしましょう。これらを使うことで、読者にとって格段に分かりやすく、信頼できるコンテンツを作成できます。演習ドリルも準備していますのでご利用ください。
箇条書きリスト (<ul>): 順序が関係ない項目
ul は "Unordered List"（順序のないリスト）の略。項目の順番が入れ替わっても問題ないリスト、例えば「買い物リスト」のようなものを作る時に使います。🛒
リスト全体を <ul> で囲み、一つ一つの項目を <li> (List Item) で囲むのがルールです。ブラウザは自動的に各項目の先頭に「・」（黒丸）を付けてくれます。
ブログでの使い所
- 商品やサービスの「特徴」の列挙
- 記事の「要点」のまとめ
- おすすめの「持ち物」リスト
<p>旅行に持っていくと便利なもの:</p>
<ul>
<li>モバイルバッテリー</li>
<li>圧縮袋</li>
<li>常備薬</li>
</ul>番号付きリスト (<ol>): 手順やランキング
ol は "Ordered List"（順序のあるリスト）の略。順番が入れ替わると意味が変わってしまう「料理のレシピ」や「ランキング」のようなリストで使います。🍳
使い方は <ul> と同じで、全体を <ol> で、各項目を <li> で囲みます。ブラウザは自動で「1, 2, 3…」と番号を振ってくれるので、途中で項目を追加・削除しても番号が自動で更新されるのが最大のメリットです。
ブログでの使い所
- 料理の「レシピ」や作業の「手順」
- おすすめ商品「トップ５ランキング」
- イベントの「開催スケジュール」
<p>美味しい紅茶の淹れ方:</p>
<ol>
<li>まず、お湯を沸かします。</li>
<li>次に、ティーバッグをカップに入れます。</li>
<li>最後にお湯を注ぎ、3分間蒸らします。</li>
</ol>引用 (<blockquote>, <q>): 記事に信頼の光を灯す
他者の言葉を借りて自分の主張を補強するのは、記事の信頼性を高めるための強力なテクニックです。HTMLでは、引用であることを明確に示すための専用タグがあります。💬
<blockquote>: 長い文章を「ドーン」と引用
書籍の一節や、専門家の意見など、段落まるごとのような長い文章を引用する場合に使います。ブラウザでは、引用部分が少し字下げ（インデント）されて表示され、本文と明確に区別されます。
例
<blockquote>
<p>ここに引用したい長めの文章を書きます。引用文が複数段落にわたる場合は、このようにpタグで区切ると構造が明確になります。</p>
<p>これが二つ目の段落です。</p>
</blockquote>
<q>: 文中の短い言葉を「サッ」と引用
「彼は『HTMLは簡単だ』と言った」のように、会話文や短いフレーズを文章の途中で引用する場合に使います。<q> で囲むと、ブラウザが自動で引用符（「 」）を付けてくれるので便利です。
例
<p>有名な「<q>事実は小説よりも奇なり</q>」ということわざがあります。</p>
引用元の明記: 信頼性をさらに高めるひと手間
引用は、必ず出典元を明らかにすることがマナーであり、信頼性の源泉です。HTMLには、この引用元を人間と機械の両方に正しく伝える仕組みがあります。
cite 属性: 機械に「出典URL」を教える
<blockquote> や <q> の開始タグの中に cite="URL" を追加することで、検索エンジンなどの機械に「この引用は、このURLのページから持ってきましたよ」と伝えることができます。画面には表示されませんが、SEOの観点からも有益です。
例
<figure>
<blockquote cite="（引用元のURL）">
<p>吾輩は猫である。名前はまだ無い。</p>
</blockquote>
<figcaption>— 夏目漱石『<cite>吾輩は猫である</cite>』より</figcaption>
</figure>
<cite> タグ: 人間に「作品名」を見せる
読者に対して、引用元がどの「作品」から来たのかを示すために使います。作品とは、本のタイトル、Webサイト名、記事名などのことです。注意点として、作者名などの人名には使いません。
<p>夏目漱石は彼の作品で<q cite="（引用元のURL）">智に働けば角が立つ</q>と述べています。</p>
これらのタグを組み合わせることで、非常に信頼性の高い引用が完成します。
<p>ウェブの標準化団体であるW3Cは、次のように述べています。</p>
<blockquote cite="https://www.w3.org/TR/html52/textlevel-semantics.html#the-cite-element">
<p>The cite element represents a reference to a creative work. It must include the title of the work or the name of the author...</p>
</blockquote>
<p>この引用は、<cite>HTML 5.2 specification</cite>という仕様書から抜粋したものです。</p>