HTML テキストの基礎

HTML の役割の 1 つはテキストに構造と意味 (セマンティクスともいう) を与え、ブラウザーが正しく表示できるようにすることです。この記事では HTML を使ってテキストのページを構造化する方法、見出しとパラグラフをつけたり、言葉を強調したり、リストを作ったり、などを説明します。

前提条件: HTML 入門に載っている、基本的な HTML に精通していること。
目的: 基本的なテキストページをマークアップして構造や意味を設定する方法を学ぶ — パラグラフ、見出し、リスト、強調、クォーテーションを含む。

基本: 見出しとパラグラフ

たいていの構造化されたテキストは見出しとパラグラフで構成されていて、それは物語でも、新聞でも、大学の教科書でも、雑誌などでも、何を読んでいるのかにかかわらずそうです。

An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs.

構造化されたコンテンツは読み手にとって読みやすく楽しい体験になります。

HTML では、各パラグラフは <p> 要素で囲う必要があり、次のようです:

<p>I am a paragraph, oh yes I am.</p>

それぞれの見出しは見出しの要素に囲まれます:

<h1>I am the title of the story.</h1>

6 つの見出し要素があります — <h1>, <h2>, <h3>, <h4>, <h5><h6> です。各要素は文書内で別々のコンテンツレベルを表現します; <h1> は主な見出しで、<h2> はサブの見出しで、<h3> はサブのサブの見出しを表して、といったように。

構造的な階層を実装する

例として, 物語を考えましょう。 <h1> は物語の題名を表し、<h2> は各章の題名を表し、<h3> は各章の節を表す、といったようでしょう。

<h1>The Crushing Bore</h1>

<p>By Chris Mills</p>

<h2>Chapter 1: The dark night</h2>

<p>It was a dark night. Somewhere, an owl hooted. The rain lashed down on the ...</p>

<h2>Chapter 2: The eternal silence</h2>

<p>Our protagonist could not so much as a whisper out of the shadowy figure ...</p>

<h3>The specter speaks</h3>

<p>Several more hours had passed, when all of a sudden the specter sat bolt upright and exclaimed, "Please have mercy on my soul!"</p>

階層が意味を成す限り、関係する要素が何を意味するかは正にあなた次第です。このような構造を作成する際には、いくつかのベストプラクティスを覚えておく必要があります:

  • ページごとに 1 つだけ <h1> を使うのが好まれる — これは最上位の見出しで、他のすべてはそれ以下の階層に置かれる。
  • 見出しが階層内で正しい順序にしておく。<h3> のサブ見出しの後に <h2> のサブサブ見出しをつけたりしない — これは意味をなさないし変な結果となる。
  • 6 つの見出しレベルで、必要性を感じないかぎり、ページごとに 3以内におさえる。たくさんの階層の文章は (つまり深い見出しの階層) 大きすぎて不格好であり、移動が困難になります。そのような場合、できるだけコンテンツを複数ページに分割するのが望ましいです。

なぜ構造が必要なのか?

この質問に答えるには、text-start.html を見てください — この記事の動作例の開始点です (すてきなハマスのレシピです)。あとの練習で必要になるため、ローカルマシンにこのファイルのコピーを保存します。この文書の本文は現在、複数の部分のコンテンツが入っています — まったくマークアップされていませんが、改行で区切られています (次の行に移るのに Enter/Return を押します)。

しかし、この文書をブラウザーで開くと、テキストが 1 つの大きな塊に見えるでしょう!

A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it.

これはコンテンツの構造を与える要素がないためですので、ブラウザーはどれが見出しでどれが本文かがわかりません。さらには:

  • ウェブページを見ているユーザーは、関連コンテンツを探すのにざっと見たり、時には読み始めるために見出し岳を見ている傾向にあります (we usually spend a very short time on a web page)。しばらく有用なものが見つからない場合、イライラして別の場所に去っていきます。
  • ページをインデックスするサーチエンジンは、見出しのコンテンツを、ページの検索ランクに影響する重要なキーワードとみなします。見出しがないと、SEO (検索エンジン最適化)の点で良くないでしょう。
  • 極めて視覚が不自由な人はウェブページを読みません。つまりその代わりにウェブページを聞きます。これは スクリーンリーダーというソフトウェアで実現されます。このソフトウェアはテキストコンテンツにすばやくアクセスする方法を提供します。さまざまな技術が使用される中で、文書の概要を見出しを読むことで提供し、ユーザーが必要な情報をすばやく見つけられるようにしています。見出しが見つからない場合、文書全体が読み上げられるのを聞くことになってしまいます。
  • CSS でコンテンツをスタイリングしたり、JavaScript で面白いことをさせるには、関連コンテンツを包んでいる要素が必要となり、それを効率的に CSS/JavaScript はターゲットとします。

このため、コンテンツに構造的なマークアップが必要となります。

アクティブラーニング: コンテンツに構造を与える

ライブな実例に飛び込んでみましょう。下記の実例で、入力フィールドの生テキストに要素を与え、出力フィールドに見出しと2つの段落が見えるようにしてみましょう。

間違えた場合、リセットボタンでいつでもリセットできます。行き詰まったら、「Show solution(答えを見る)」ボタンで回答を見ます。

なぜセマンティクスが必要なのか?

私たちはあらゆる場面でセマンティクスに頼っています。 —私たちは日常にある物の機能が何かを判断するために過去の経験を頼りにします。つまり、私たちは物を見れば、 それがどのような機能をもつかを知っています。  例えば、赤信号は「止まれ」を、「青信号」は「進め」を意味すると期待します。もしも、間違ったセマンティクスを適用すれば、ものごとは一瞬にして扱いにくくなることがあります。(赤を「進め」の意味で使っている国はあるのでしょうか?そんな国がないといいのですが。 )

同様に、正確な要素を使い、コンテンツに正しい意味や機能、見た目をを与えられているかどうかを確かめる必要があります。この文脈では、<h1> 要素は要素によって囲んだテキストを「ページのトップレベル見出し」の役割 (または意味) にします。

<h1>This is a top level heading</h1>

既定では、ブラウザーはヘッダに見えるようにこれを大きなフォントサイズにします (もっとも、CSSを使えばあなたのやりたいようにできますが)。より重要なことは、その意味する値が (上記で述べましたが) サーチエンジンと画面を読む人によって、異なる方法で使われるということです。

一方、任意の要素をトップレベル見出しのように見せることもできます。以下の例を見てください。

<span style="font-size: 32px; margin: 21px 0;">Is this a top level heading?</span>

これは <span> 要素です。これにはセマンティクスはありません。意味を与えずにCSSを適用させたいとき (あるいはJavaScriptで何かをしたいとき)、コンテンツを囲むために使います (このあと、このコースではこの要素についてより多くのことについて発見することになります)。CSS の中にはトップレベル見出しのような見栄えにするために使えるものもあります。しかし、意味的な値はないため、上記で述べたような付加的な恩恵を得ることはできないでしょう。その役割に応じた適切な HTML 要素を使うことは良い考え方です。

リスト

さて、リストに目を向けてみましょう。リストは生活のあらゆる場所にあります。買い物のリストから、自分の家にたどり着くために意識することなく毎日従っている経路のリスト、このチュートリアルであなたが見ている説明のリストまであります。Web 上にもリストはどこにでもあり、気にかけるものに応じて、3種類が用意されています。

順序なし

順序なしリストは、買い物リストに使うときのように、項目の並びに関係がないものについてマークアップするときに使います。

milk
eggs
bread
hummus

すべての順序なしリストは <ul> で開始し、すべてのリストの項目を囲みます。

<ul>
milk
eggs
bread
hummus
</ul>

最後にリストの項目をそれぞれ <li> (list item)で囲みます。

<ul>
  <li>milk</li>
  <li>eggs</li>
  <li>bread</li>
  <li>hummus</li>
</ul>

アクティブラーニング: 順序なしリストをマークアップする

自身の HTML 順序なしリストを作るために下のライブサンプルを編集してみましょう。

順序つき

順序付きリストは、以下のような一連の指示のように、項目に順序があるリストのことです。

Drive to the end of the road
Turn right
Go straight across the first two roundabouts
Turn left at the third roundabout
The school is on your right, 300 meters up the road

マークアップの構造は順序なしリストと同じです。違うのは、<ul> の代わりに <ol> 要素でリストの項目をそれぞれ囲わなければならないということです。

<ol>
  <li>Drive to the end of the road</li>
  <li>Turn right</li>
  <li>Go straight across the first two roundabouts</li>
  <li>Turn left at the third roundabout</li>
  <li>The school is on your right, 300 meters up the road</li>
</ol>

アクティブラーニング: 順序つきリストをマークアップする

自身の HTML 順序つきリストを作るために下のライブサンプルを編集してみましょう。

手をうごかしてみよう: Marking up our recipe page

この記事のこの時点で、レシピページの例をマークアップするために必要な情報はすべて揃っています。text-start.html 開始ファイルのローカルコピーを保存してそこで作業を行うか、または下記の編集可能な例で実行するかを選択できます。編集した例に記入すると、次にページを開いたときに失われるため、ローカルで実行するのがおそらくよりよいでしょう。どちらにも長所と短所があります。

立ち往生した場合は、いつでも [ソリューションを表示] ボタンを押すか、github レポジトリの text-complete.html の例をご覧ください。

入れ子のリスト

あるリストを別のリストの中に入れ子にしてもまったく問題ありません。いくつかのサブ箇条書きを最上位の箇条書きの下に配置することをお勧めします。 レシピの例から2番目のリストを見てみましょう。

<ol>
  <li>Remove the skin from the garlic, and chop coarsely.</li>
  <li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>
  <li>Add all the ingredients into a food processor.</li>
  <li>Process all the ingredients into a paste.</li>
  <li>If you want a coarse "chunky" hummus, process it for a short time.</li>
  <li>If you want a smooth hummus, process it for a longer time.</li>
</ol>

最後の2つの箇条書きはそれらの前の箇条書きと非常に密接に関係しているので (それらはその箇条書きの下に収まるサブ命令や選択のように読みます)、それらを自身の順序なしリストの中に入れ子にして現在のリストの中に入れることは意味があります。4番目の箇条書き。 これは次のようになります。

<ol>
  <li>Remove the skin from the garlic, and chop coarsely.</li>
  <li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>
  <li>Add all the ingredients into a food processor.</li>
  <li>Process all the ingredients into a paste.
    <ul>
      <li>If you want a coarse "chunky" hummus, process it for a short time.</li>
      <li>If you want a smooth hummus, process it for a longer time.</li>
    </ul>
  </li>
</ol>

前のアクティブラーニングの例に戻り、2番目のリストを次のように更新してみてください。

強調と重要性

人間の言語では、文の意味を変えるために特定の単語を強調することが多く、特定の単語を何らかの意味で重要または異なるものとしてマークしたい場面がよくあります。HTML は、そのような効果でテキストコンテンツをマークアップすることを可能にするためにさまざまなセマンティック要素を提供します。そしてこのセクションでは、最も一般的なもののいくつかを見ていきます。

強調

話されている言葉を強調したいときは、ある言葉を強調して、自分の言っていることの意味を微妙に変えます。同様に、書かれた言語では、イタリック体でそれらを置くことによって単語を強調する傾向があります。たとえば、次の2つの文は意味が異なります。

I am glad you weren't late.

I am glad you weren't late.

最初の文は、その人が遅刻していないことを本当に安心しているように思われます。対照的に、2番目のものは皮肉的または受動的 - 攻撃的に聞こえ、その人が少し遅れて到着したという不快感を表しています。

HTML では、このようなインスタンスをマークアップするために <em> (強調) 要素を使用します。文書を読みやすくするだけでなく、これらはスクリーンリーダーによって認識され、異なるトーンの音声で話されます。ブラウザではデフォルトでイタリック体になっていますが、純粋にイタリック体にするだけの場合にはこのタグを使用しないでください。そのためには、<span> 要素と CSS、あるいは <i> 要素 (下記参照) を使用します。

<p>I am <em>glad</em> you weren't <em>late</em>.</p>

重要性が高い

重要な言葉を強調するために、話し言葉でそれらを強調し、そして書面でそれらを bold にする傾向があります。例えば:

This liquid is highly toxic.

I am counting on you. Do not be late!

HTML では、このようなインスタンスをマークアップするために <strong> (強い重要性) 要素を使用します。 この文書をより便利にするだけでなく、これらもスクリーンリーダーによって認識され、異なるトーンの音声で話されています。ブラウザではデフォルトで太字のテキストとしてスタイル設定されていますが、太字のスタイルにするだけの場合にはこのタグを使用しないでください。そのためには、<span> 要素といくつかの CSS、あるいは <b> 要素 (下記参照) を使用します。

<p>This liquid is <strong>highly toxic</strong>.</p>

<p>I am counting on you. <strong>Do not</strong> be late!</p>

必要に応じて、互いに強く重点を置くことができます。

<p>This liquid is <strong>highly toxic</strong> —
if you drink it, <strong>you may <em>die</em></strong>.</p>

アクティブラーニング: 重要にしましょう!

このアクティブラーニングセクションでは、編集可能な例を示しました。その中で、それらを必要としていると思う言葉に強調と強い重要性を付け加えてみてください。

イタリック、太字、下線...

これまで説明してきた要素には明確な意味があります。<b><i> および <u> の状況はやや複雑です。CSS がまだ十分にサポートされていないかまったくサポートされていなかった時代に、大胆な、斜体の、または下線付きのテキストを書くことができるようにそれらはできました。このような要素は表示にのみ影響を与え、意味には影響を与えない表示要素として知られていますが、もはや使用されるべきではありません。これまで見てきたように、セマンティクスはアクセシビリティ、SEO などにとって非常に重要だからです。

HTML5では <b><i><u> が新しい、やや混乱しやすいセマンティックロールで再定義されました。

最適な経験則は次のとおりです。これ以上太字、斜体、または下線が付いている意味を表すには <b><i> または <u> を使用するのが適切です。ただし、アクセシビリティの考え方を守ることは常に重要です。 イタリック体の概念は、スクリーンリーダーを使っている人、またはラテン系のアルファベット以外の書記体系を使っている人にとってはあまり役に立ちません。

  • <i> は、伝統的にイタリック体で伝えられた意味を伝えるために使われます:外来語、分類名、技術用語、考え...
  • <b> は、伝統的に太字で伝えられている意味を伝えるために使用されます。キーワード、製品名、リードセンテンス...
  • <u> は、下線で伝統的に伝えられている意味を伝えるために使用されます。適切な名前、スペルミス...

下線についての親切な警告:人々は下線をハイパーリンクと強く関連付けています。したがって、Web 上では、リンクのみに下線を引くのが最善です。意味的に適切な場合は <u> 要素を使用しますが、CSS を使用してデフォルトの下線を Web 上でより適切なものに変更することを検討してください。以下の例はその方法を示しています。

<!-- scientific names -->
<p>
  The Ruby-throated Hummingbird (<i>Archilochus colubris</i>)
  is the most common hummingbird in Eastern North America.
</p>

<!-- foreign words -->
<p>
  The menu was a sea of exotic words like <i lang="uk-latn">vatrushka</i>,
  <i lang="id">nasi goreng</i> and <i lang="fr">soupe à l'oignon</i>.
</p>

<!-- a known misspelling -->
<p>
  Someday I'll learn how to <u style="text-decoration-line: underline; text-decoration-style: wavy;">spel</u> better.
</p>

<!-- Highlight keywords in a set of instructions -->
<ol>
  <li>
    <b>Slice</b> two pieces of bread off the loaf.
  </li>
  <li>
    <b>Insert</b> a tomato slice and a leaf of
    lettuce between the slices of bread.
  </li>
</ol>

要約

今のところそれだ! この記事では、HTMLでテキストをマークアップする方法についての優れたアイデアを説明し、この分野で最も重要な要素のいくつかを紹介しました。この分野には、さらに多くのセマンティック要素を網羅する必要があります。この後の「その他のセマンティック要素」の記事で、さらに詳しく説明します。 次回の記事では、Web上で最も重要な要素と思われるハイパーリンクの作成方法について詳しく説明します。

このモジュール内