path: root/files/ja/learn/html/introduction_to_html/html_text_fundamentals/index.html

---
title: HTML テキストの基礎
slug: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals
tags:
  - Beginner
  - CodingScripting
  - Guide
  - HTML
  - Introduction to HTML
  - Learn
  - Text
  - headings
  - paragraphs
  - semantics
translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals
---
<div> {{LearnSidebar}}</div>

<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}</div>

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

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">前提条件:</th>
   <td><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started">HTML 入門</a>に載っている、基本的な HTML に精通していること。</td>
  </tr>
  <tr>
   <th scope="row">目的:</th>
   <td>基本的なテキストページをマークアップして構造や意味を設定する方法を学ぶ — パラグラフ、見出し、リスト、強調、クォーテーションを含む。</td>
  </tr>
 </tbody>
</table>

<h2 id="The_basics_Headings_and_Paragraphs" name="The_basics_Headings_and_Paragraphs">基本: 見出しとパラグラフ</h2>

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

<p><img alt="An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs." src="https://mdn.mozillademos.org/files/12371/newspaper_small.jpg" style="display: block; margin: 0px auto;" title="An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs."></p>

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

<p>HTML では、各パラグラフは {{htmlelement("p")}} 要素で囲む必要があり、次のようです:</p>

<pre class="brush: html">&lt;p&gt;I am a paragraph, oh yes I am.&lt;/p&gt;</pre>

<p>それぞれの見出しは見出しの要素に囲まれます:</p>

<pre class="brush: html">&lt;h1&gt;I am the title of the story.&lt;/h1&gt;</pre>

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

<h3 id="Implementing_structural_hierarchy" name="Implementing_structural_hierarchy">構造的な階層を実装する</h3>

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

<pre class="brush: html">&lt;h1&gt;The Crushing Bore&lt;/h1&gt;

&lt;p&gt;By Chris Mills&lt;/p&gt;

&lt;h2&gt;Chapter 1: The dark night&lt;/h2&gt;

&lt;p&gt;It was a dark night. Somewhere, an owl hooted. The rain lashed down on the ...&lt;/p&gt;

&lt;h2&gt;Chapter 2: The eternal silence&lt;/h2&gt;

&lt;p&gt;Our protagonist could not so much as a whisper out of the shadowy figure ...&lt;/p&gt;

&lt;h3&gt;The specter speaks&lt;/h3&gt;

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

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

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

<h3 id="Why_do_we_need_structure" name="Why_do_we_need_structure">なぜ構造が必要なのか？</h3>

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

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

<p><img alt="A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it." src="https://mdn.mozillademos.org/files/14827/Screen%20Shot%202017-03-29%20at%2009.20.35.png" style="display: block; height: 377px; margin: 0px auto; width: 600px;" title="A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it."></p>

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

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

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

<h3 id="Active_learning_Giving_our_content_structure" name="Active_learning_Giving_our_content_structure">アクティブラーニング: コンテンツに構造を与える</h3>

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

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

<div class="hidden">
<h6 id="Playable_code" name="Playable_code">Playable code</h6>

<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>h2</span><span class="punctuation token">&gt;</span></span>Live output<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>h2</span><span class="punctuation token">&gt;</span></span>

<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>output<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">min-height</span><span class="punctuation token">:</span> <span class="number token">50</span>px<span class="punctuation token">;</span></span><span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>

<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>h2</span><span class="punctuation token">&gt;</span></span>Editable code<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>h2</span><span class="punctuation token">&gt;</span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>a11y-label<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Press Esc to move focus away from the code area (Tab inserts a tab character).<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>

<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>textarea</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>code<span class="punctuation token">"</span></span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>input<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">min-height</span><span class="punctuation token">:</span> <span class="number token">100</span>px<span class="punctuation token">;</span> <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">95%</span></span><span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>My short story I am a policewoman and my name is Trish.

My legs are made of cardboard and I am married to a fish.<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>textarea</span><span class="punctuation token">&gt;</span></span>

<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>playable-buttons<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>reset<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Reset<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>solution<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Show solution<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span></code></pre>

<pre class="brush: css line-numbers  language-css"><code class="language-css"><span class="selector token">html </span><span class="punctuation token">{</span>
  <span class="property token">font-family</span><span class="punctuation token">:</span> sans-serif<span class="punctuation token">;</span>
<span class="punctuation token">}</span>

<span class="selector token">h2 </span><span class="punctuation token">{</span>
  <span class="property token">font-size</span><span class="punctuation token">:</span> <span class="number token">16</span>px<span class="punctuation token">;</span>
<span class="punctuation token">}</span>

<span class="selector token"><span class="class token">.a11y-label</span> </span><span class="punctuation token">{</span>
  <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">0</span><span class="punctuation token">;</span>
  <span class="property token">text-align</span><span class="punctuation token">:</span> right<span class="punctuation token">;</span>
  <span class="property token">font-size</span><span class="punctuation token">:</span> <span class="number token">0.7</span>rem<span class="punctuation token">;</span>
  <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">98%</span><span class="punctuation token">;</span>
<span class="punctuation token">}</span>

<span class="selector token">body </span><span class="punctuation token">{</span>
  <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">10</span>px<span class="punctuation token">;</span>
  <span class="property token">background</span><span class="punctuation token">:</span> <span class="hexcode token">#f5f9fa</span><span class="punctuation token">;</span>
<span class="punctuation token">}</span></code></pre>

<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> textarea <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'code'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
<span class="keyword token">var</span> reset <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'reset'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
<span class="keyword token">var</span> solution <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'solution'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
<span class="keyword token">var</span> output <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.output'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
<span class="keyword token">var</span> code <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span>
<span class="keyword token">var</span> userEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span>

<span class="keyword token">function</span> <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
  output<span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span>
<span class="punctuation token">}</span>

reset<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
  textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> code<span class="punctuation token">;</span>
  userEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span>
  solutionEntry <span class="operator token">=</span> htmlSolution<span class="punctuation token">;</span>
  solution<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">'Show solution'</span><span class="punctuation token">;</span>
  <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>

solution<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
  <span class="keyword token">if</span><span class="punctuation token">(</span>solution<span class="punctuation token">.</span>value <span class="operator token">===</span> <span class="string token">'Show solution'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
    textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> solutionEntry<span class="punctuation token">;</span>
    solution<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">'Hide solution'</span><span class="punctuation token">;</span>
  <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span>
    textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> userEntry<span class="punctuation token">;</span>
    solution<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">'Show solution'</span><span class="punctuation token">;</span>
  <span class="punctuation token">}</span>
  <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>

<span class="keyword token">var</span> htmlSolution <span class="operator token">=</span> <span class="string token">'&lt;h1&gt;My short story&lt;/h1&gt;\n&lt;p&gt;I am a policewoman and my name is Trish.&lt;/p&gt;\n&lt;p&gt;My legs are made of cardboard and I am married to a fish.&lt;/p&gt;'</span><span class="punctuation token">;</span>
<span class="keyword token">var</span> solutionEntry <span class="operator token">=</span> htmlSolution<span class="punctuation token">;</span>

textarea<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'input'</span><span class="punctuation token">,</span> updateCode<span class="punctuation token">)</span><span class="punctuation token">;</span>
window<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'load'</span><span class="punctuation token">,</span> updateCode<span class="punctuation token">)</span><span class="punctuation token">;</span>

<span class="comment token">// stop tab key tabbing out of textarea and</span>
<span class="comment token">// make it write a tab at the caret position instead</span>

textarea<span class="punctuation token">.</span>onkeydown <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span><span class="punctuation token">{</span>
  <span class="keyword token">if</span> <span class="punctuation token">(</span>e<span class="punctuation token">.</span>keyCode <span class="operator token">===</span> <span class="number token">9</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
    e<span class="punctuation token">.</span><span class="function token">preventDefault</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
    <span class="function token">insertAtCaret</span><span class="punctuation token">(</span><span class="string token">'\t'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
  <span class="punctuation token">}</span>

  <span class="keyword token">if</span> <span class="punctuation token">(</span>e<span class="punctuation token">.</span>keyCode <span class="operator token">===</span> <span class="number token">27</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
    textarea<span class="punctuation token">.</span><span class="function token">blur</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
  <span class="punctuation token">}</span>
<span class="punctuation token">}</span><span class="punctuation token">;</span>

<span class="keyword token">function</span> <span class="function token">insertAtCaret</span><span class="punctuation token">(</span>text<span class="punctuation token">)</span> <span class="punctuation token">{</span>
  <span class="keyword token">var</span> scrollPos <span class="operator token">=</span> textarea<span class="punctuation token">.</span>scrollTop<span class="punctuation token">;</span>
  <span class="keyword token">var</span> caretPos <span class="operator token">=</span> textarea<span class="punctuation token">.</span>selectionStart<span class="punctuation token">;</span>

  <span class="keyword token">var</span> front <span class="operator token">=</span> <span class="punctuation token">(</span>textarea<span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">substring</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> caretPos<span class="punctuation token">)</span><span class="punctuation token">;</span>
  <span class="keyword token">var</span> back <span class="operator token">=</span> <span class="punctuation token">(</span>textarea<span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">substring</span><span class="punctuation token">(</span>textarea<span class="punctuation token">.</span>selectionEnd<span class="punctuation token">,</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">.</span>length<span class="punctuation token">)</span><span class="punctuation token">;</span>
  textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> front <span class="operator token">+</span> text <span class="operator token">+</span> back<span class="punctuation token">;</span>
  caretPos <span class="operator token">=</span> caretPos <span class="operator token">+</span> text<span class="punctuation token">.</span>length<span class="punctuation token">;</span>
  textarea<span class="punctuation token">.</span>selectionStart <span class="operator token">=</span> caretPos<span class="punctuation token">;</span>
  textarea<span class="punctuation token">.</span>selectionEnd <span class="operator token">=</span> caretPos<span class="punctuation token">;</span>
  textarea<span class="punctuation token">.</span><span class="function token">focus</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
  textarea<span class="punctuation token">.</span>scrollTop <span class="operator token">=</span> scrollPos<span class="punctuation token">;</span>
<span class="punctuation token">}</span>

<span class="comment token">// Update the saved userCode every time the user updates the text area code</span>

textarea<span class="punctuation token">.</span>onkeyup <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">{</span>
  <span class="comment token">// We only want to save the state when the user code is being shown,</span>
  <span class="comment token">// not the solution, so that solution is not saved over the user code</span>
  <span class="keyword token">if</span><span class="punctuation token">(</span>solution<span class="punctuation token">.</span>value <span class="operator token">===</span> <span class="string token">'Show solution'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
    userEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span>
  <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span>
    solutionEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span>
  <span class="punctuation token">}</span>

  <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre>
</div>

<p>{{ EmbedLiveSample('Playable_code', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p>

<h3 id="Why_do_we_need_semantics" name="Why_do_we_need_semantics">なぜセマンティクスが必要なのか？</h3>

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

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

<pre class="brush: html">&lt;h1&gt;This is a top level heading&lt;/h1&gt;</pre>

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

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

<pre class="brush: html">&lt;span style="font-size: 32px; margin: 21px 0;"&gt;Is this a top level heading?&lt;/span&gt;</pre>

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

<h2 id="Lists" name="Lists">リスト</h2>

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

<h3 id="Unordered" name="Unordered">順序なし</h3>

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

<pre>milk
eggs
bread
hummus</pre>

<p>すべての順序なしリストは {{htmlelement("ul")}} で開始し、すべてのリストの項目を囲みます。</p>

<pre class="brush: html">&lt;ul&gt;
milk
eggs
bread
hummus
&lt;/ul&gt;</pre>

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

<pre class="brush: html">&lt;ul&gt;
  &lt;li&gt;milk&lt;/li&gt;
  &lt;li&gt;eggs&lt;/li&gt;
  &lt;li&gt;bread&lt;/li&gt;
  &lt;li&gt;hummus&lt;/li&gt;
&lt;/ul&gt;</pre>

<h4 id="Active_learning_Marking_up_an_unordered_list" name="Active_learning_Marking_up_an_unordered_list">アクティブラーニング: 順序なしリストをマークアップする</h4>

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

<div class="hidden">
<h6 id="Playable_code_2" name="Playable_code_2">Playable code</h6>

<pre class="brush: html">&lt;h2&gt;Input&lt;/h2&gt;
&lt;textarea id="code" class="input"&gt;milk
eggs
bread
hummus&lt;/textarea&gt;
&lt;h2&gt;Output&lt;/h2&gt;
&lt;div class="output"&gt;&lt;/div&gt;
&lt;div class="controls"&gt;
  &lt;input id="reset" type="button" value="Reset" /&gt;
  &lt;input id="solution" type="button" value="Show solution" /&gt;
&lt;/div&gt;
</pre>

<pre class="brush: css">body {
  font-family: 'Open Sans Light', Helvetica, Arial, sans-serif;
}

.input, .output {
  width: 90%;
  height: 6em;
  padding: 10px;
  border: 1px solid #0095dd;
  overflow: auto;
}

button {
  padding: 10px 10px 10px 0;
}
</pre>

<pre class="brush: js">var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var code = textarea.value;
var output = document.querySelector(".output");
var solution = document.getElementById("solution");

function drawOutput() {
  output.innerHTML = textarea.value;
}

reset.addEventListener("click", function() {
  textarea.value = code;
  drawOutput();
});

solution.addEventListener("click", function() {
textarea.value = '&lt;ul&gt;\n&lt;li&gt;milk&lt;/li&gt;\n&lt;li&gt;eggs&lt;/li&gt;\n&lt;li&gt;bread&lt;/li&gt;\n&lt;li&gt;hummus&lt;/li&gt;\n&lt;/ul&gt;';
  drawOutput();
});

textarea.addEventListener("input", drawOutput);
window.addEventListener("load", drawOutput);
</pre>
</div>

<p>{{ EmbedLiveSample('Playable_code_2', 700, 400) }}</p>

<h3 id="Ordered" name="Ordered">順序つき</h3>

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

<pre>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</pre>

<p>マークアップの構造は順序なしリストと同じです。違うのは、<code>&lt;ul&gt;</code> の代わりに {{htmlelement("ol")}} 要素でリストの項目をそれぞれ囲まなければならないということです。</p>

<pre class="brush: html">&lt;ol&gt;
  &lt;li&gt;Drive to the end of the road&lt;/li&gt;
  &lt;li&gt;Turn right&lt;/li&gt;
  &lt;li&gt;Go straight across the first two roundabouts&lt;/li&gt;
  &lt;li&gt;Turn left at the third roundabout&lt;/li&gt;
  &lt;li&gt;The school is on your right, 300 meters up the road&lt;/li&gt;
&lt;/ol&gt;</pre>

<h4 id="Active_learning_Marking_up_an_ordered_list" name="Active_learning_Marking_up_an_ordered_list">アクティブラーニング: 順序つきリストをマークアップする</h4>

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

<div class="hidden">
<h6 id="Playable_code_3" name="Playable_code_3">Playable code</h6>

<pre class="brush: html">&lt;h2&gt;Input&lt;/h2&gt;
&lt;textarea id="code" class="input"&gt;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&lt;/textarea&gt;
&lt;h2&gt;Output&lt;/h2&gt;
&lt;div class="output"&gt;&lt;/div&gt;
&lt;div class="controls"&gt;
  &lt;input id="reset" type="button" value="Reset" /&gt;
  &lt;input id="solution" type="button" value="Show solution" /&gt;
&lt;/div&gt;
</pre>

<pre class="brush: css">body {
  font-family: 'Open Sans Light', Helvetica, Arial, sans-serif;
}

.input, .output {
  width: 90%;
  height: 8em;
  padding: 10px;
  border: 1px solid #0095dd;
  overflow: auto;
}

button {
  padding: 10px 10px 10px 0;
}
</pre>

<pre class="brush: js">var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var code = textarea.value;
var output = document.querySelector(".output");
var solution = document.getElementById("solution");

function drawOutput() {
  output.innerHTML = textarea.value;
}

reset.addEventListener("click", function() {
  textarea.value = code;
  drawOutput();
});

solution.addEventListener("click", function() {
textarea.value = '&lt;ol&gt;\n&lt;li&gt;Drive to the end of the road&lt;/li&gt;\n&lt;li&gt;Turn right&lt;/li&gt;\n&lt;li&gt;Go straight across the first two roundabouts&lt;/li&gt;\n&lt;li&gt;Turn left at the third roundabout&lt;/li&gt;\n&lt;li&gt;The school is on your right, 300 meters up the road&lt;/li&gt;\n&lt;/ol&gt;';
  drawOutput();
});

textarea.addEventListener("input", drawOutput);
window.addEventListener("load", drawOutput);
</pre>
</div>

<p>{{ EmbedLiveSample('Playable_code_3', 700, 500) }}</p>

<h3 id="Active_learning_Marking_up_our_recipe_page" name="Active_learning_Marking_up_our_recipe_page">手をうごかしてみよう: Marking up our recipe page</h3>

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

<div class="hidden">
<h6 id="Playable_code_4" name="Playable_code_4">Playable code</h6>

<pre class="brush: html">&lt;h2&gt;Input&lt;/h2&gt;
&lt;textarea id="code" class="input"&gt;Quick hummus recipe

    This recipe makes quick, tasty hummus, with no messing. It has been adapted from a number of different recipes that I have read over the years.

    Hummus is a delicious thick paste used heavily in Greek and Middle Eastern dishes. It is very tasty with salad, grilled meats and pitta breads.

    Ingredients

    1 can (400g) of chick peas (garbanzo beans)
    175g of tahini
    6 sundried tomatoes
    Half a red pepper
    A pinch of cayenne pepper
    1 clove of garlic
    A dash of olive oil

    Instructions

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

    For a different flavour, you could try blending in a small measure of lemon and coriander, chili pepper, lime and chipotle, harissa and mint, or spinach and feta cheese. Experiment and see what works for you.

    Storage

    Refrigerate the finished hummus in a sealed container. You should be able to use it for about a week after you've made it. If it starts to become fizzy, you should definitely discard it.

    Hummus is suitable for freezing; you should thaw it and use it within a couple of months.&lt;/textarea&gt;
&lt;h2&gt;Output&lt;/h2&gt;
&lt;div class="output"&gt;&lt;/div&gt;
&lt;div class="controls"&gt;
  &lt;input id="reset" type="button" value="Reset" /&gt;
  &lt;input id="solution" type="button" value="Show solution" /&gt;
&lt;/div&gt;
</pre>

<pre class="brush: css">body {
  font-family: 'Open Sans Light', Helvetica, Arial, sans-serif;
}

.input, .output {
  width: 90%;
  height: 8em;
  padding: 10px;
  border: 1px solid #0095dd;
  overflow: auto;
}

button {
  padding: 10px 10px 10px 0;
}
</pre>

<pre class="brush: js">var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var code = textarea.value;
var output = document.querySelector(".output");
var solution = document.getElementById("solution");

function drawOutput() {
  output.innerHTML = textarea.value;
}

reset.addEventListener("click", function() {
  textarea.value = code;
  drawOutput();
});

solution.addEventListener("click", function() {
  textarea.value = '&lt;h1&gt;Quick hummous recipe&lt;/h1&gt;\n\n&lt;p&gt;This recipe makes quick, tasty hummus, with no messing. It has been adapted from a number of different recipes that I have read over the years.&lt;/p&gt;\n\n&lt;p&gt;Hummus is a delicious thick paste used heavily in Greek and Middle Eastern dishes. It is very tasty with salad, grilled meats and pitta breads.&lt;/p&gt;\n\n&lt;h2&gt;Ingredients&lt;/h2&gt;\n\n&lt;ul&gt;\n&lt;li&gt;1 can (400g) of chick peas (garbanzo beans)&lt;/li&gt;\n&lt;li&gt;175g of tahini&lt;/li&gt;\n&lt;li&gt;6 sundried tomatoes&lt;/li&gt;\n&lt;li&gt;Half a red pepper&lt;/li&gt;\n&lt;li&gt;A pinch of cayenne pepper&lt;/li&gt;\n&lt;li&gt;1 clove of garlic&lt;/li&gt;\n&lt;li&gt;A dash of olive oil&lt;/li&gt;\n&lt;/ul&gt;\n\n&lt;h2&gt;Instructions&lt;/h2&gt;\n\n&lt;ol&gt;\n&lt;li&gt;Remove the skin from the garlic, and chop coarsely.&lt;/li&gt;\n&lt;li&gt;Remove all the seeds and stalk from the pepper, and chop coarsely.&lt;/li&gt;\n&lt;li&gt;Add all the ingredients into a food processor.&lt;/li&gt;\n&lt;li&gt;Process all the ingredients into a paste.&lt;/li&gt;\n&lt;li&gt;If you want a coarse "chunky" hummus, process it for a short time.&lt;/li&gt;\n&lt;li&gt;If you want a smooth hummus, process it for a longer time.&lt;/li&gt;\n&lt;/ol&gt;\n\n&lt;p&gt;For a different flavour, you could try blending in a small measure of lemon and coriander, chili pepper, lime and chipotle, harissa and mint, or spinach and feta cheese. Experiment and see what works for you.&lt;/p&gt;\n\n&lt;h2&gt;Storage&lt;/h2&gt;\n\n&lt;p&gt;Refrigerate the finished hummus in a sealed container. You should be able to use it for about a week after you\'ve made it. If it starts to become fizzy, you should definitely discard it.&lt;/p&gt;\n\n&lt;p&gt;Hummus is suitable for freezing; you should thaw it and use it within a couple of months.&lt;/p&gt;';
  drawOutput();
});

textarea.addEventListener("input", drawOutput);

window.addEventListener("load", drawOutput);
</pre>
</div>

<p>{{ EmbedLiveSample('Playable_code_4', 700, 500) }}</p>

<p>立ち往生した場合は、いつでも [ソリューションを表示] ボタンを押すか、github レポジトリの <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-complete.html">text-complete.html</a> の例をご覧ください。</p>

<h3 id="Nesting_lists" name="Nesting_lists">入れ子のリスト</h3>

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

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

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

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

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

<h2 id="Emphasis_and_importance" name="Emphasis_and_importance">強調と重要性</h2>

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

<h3 id="Emphasis" name="Emphasis">強調</h3>

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

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

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

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

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

<pre class="brush: html">&lt;p&gt;I am &lt;em&gt;glad&lt;/em&gt; you weren't &lt;em&gt;late&lt;/em&gt;.&lt;/p&gt;</pre>

<h3 id="Strong_importance" name="Strong_importance">重要性が高い</h3>

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

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

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

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

<pre class="brush: html">&lt;p&gt;This liquid is &lt;strong&gt;highly toxic&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;I am counting on you. &lt;strong&gt;Do not&lt;/strong&gt; be late!&lt;/p&gt;</pre>

<p>必要に応じて、 strong と emphasis を相互に入れ子にすることができます。</p>

<pre class="brush: html">&lt;p&gt;This liquid is &lt;strong&gt;highly toxic&lt;/strong&gt; —
if you drink it, &lt;strong&gt;you may &lt;em&gt;die&lt;/em&gt;&lt;/strong&gt;.&lt;/p&gt;</pre>

<h3 id="アクティブラーニング_重要にしましょう！">アクティブラーニング: 重要にしましょう！</h3>

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

<div class="hidden">
<h6 id="Playable_code_5" name="Playable_code_5">Playable code</h6>

<pre class="brush: html">&lt;h2&gt;Input&lt;/h2&gt;
&lt;textarea id="code" class="input"&gt;&lt;h1&gt;Important notice&lt;/h1&gt;

&lt;p&gt;On Sunday January 9th 2010, a gang of goths were
spotted stealing several garden gnomes from a shopping
center in downtown Milwaukee. They were all wearing green
jumpsuits and silly hats, and seemed to be having a whale
of a time. If anyone has any information about this
incident, please contact the police now.&lt;/p&gt;&lt;/textarea&gt;
&lt;h2&gt;Output&lt;/h2&gt;
&lt;div class="output"&gt;&lt;/div&gt;
&lt;div class="controls"&gt;
  &lt;input id="reset" type="button" value="Reset" /&gt;
  &lt;input id="solution" type="button" value="Show suggestion" /&gt;
&lt;/div&gt;
</pre>

<pre class="brush: css">body {
  font-family: 'Open Sans Light', Helvetica, Arial, sans-serif;
}

.input, .output {
  width: 90%;
  height: 8em;
  padding: 10px;
  border: 1px solid #0095dd;
  overflow: auto;
}

button {
  padding: 10px 10px 10px 0;
}
</pre>

<pre class="brush: js">var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var code = textarea.value;
var output = document.querySelector(".output");
var solution = document.getElementById("solution");

function drawOutput() {
  output.innerHTML = textarea.value;
}

reset.addEventListener("click", function() {
  textarea.value = code;
  drawOutput();
});

solution.addEventListener("click", function() {
  textarea.value = '&lt;h1&gt;Important notice&lt;/h1&gt;\n&lt;p&gt;On &lt;strong&gt;Sunday January 9th 2010&lt;/strong&gt;, a gang of &lt;em&gt;goths&lt;/em&gt; were spotted stealing &lt;strong&gt;&lt;em&gt;several&lt;/em&gt; garden gnomes&lt;/strong&gt; from a shopping center in downtown &lt;strong&gt;Milwaukee&lt;/strong&gt;. They were all wearing &lt;em&gt;green jumpsuits&lt;/em&gt; and &lt;em&gt;silly hats&lt;/em&gt;, and seemed to be having a whale of a time. If anyone has &lt;strong&gt;any&lt;/strong&gt; information about this incident, please contact the police &lt;strong&gt;now&lt;/strong&gt;.&lt;/p&gt;';
  drawOutput();
});

textarea.addEventListener("input", drawOutput);
window.addEventListener("load", drawOutput);
</pre>
</div>

<p>{{ EmbedLiveSample('Playable_code_5', 700, 500) }}</p>

<h3 id="イタリック、太字、下線...">イタリック、太字、下線...</h3>

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

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

<p>最適な経験則は次のとおりです。<span class="tlid-translation translation" lang="ja"><span title="">これ以上適切な要素がない場合に、太字、斜体、または下線で伝統的に伝えられてきたような意味を伝えるために</span></span> <code>&lt;b&gt;</code><span class="tlid-translation translation" lang="ja"><span title="">、</span></span><code>&lt;i&gt;</code><span class="tlid-translation translation" lang="ja"><span title=""> または</span></span> <code>&lt;u&gt;</code> <span class="tlid-translation translation" lang="ja"><span title="">を使用するのが適切です。</span></span>ただし、アクセシビリティの考え方を守ることは常に重要です。 イタリック体の概念は、スクリーンリーダーを使っている人、またはラテン系のアルファベット以外の書記体系を使っている人にとってはあまり役に立ちません。</p>

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

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

<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="comment token">&lt;!-- scientific names --&gt;</span>
<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>
  The Ruby-throated Hummingbird (<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>i</span><span class="punctuation token">&gt;</span></span>Archilochus colubris<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>i</span><span class="punctuation token">&gt;</span></span>)
  is the most common hummingbird in Eastern North America.
<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>

<span class="comment token">&lt;!-- foreign words --&gt;</span>
<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>
  The menu was a sea of exotic words like <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>i</span> <span class="attr-name token">lang</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>uk-latn<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>vatrushka<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>i</span><span class="punctuation token">&gt;</span></span>,
  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>i</span> <span class="attr-name token">lang</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>id<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>nasi goreng<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>i</span><span class="punctuation token">&gt;</span></span> and <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>i</span> <span class="attr-name token">lang</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>fr<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>soupe à l'oignon<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>i</span><span class="punctuation token">&gt;</span></span>.
<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>

<span class="comment token">&lt;!-- a known misspelling --&gt;</span>
<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>
  Someday I'll learn how to <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>u</span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">text-decoration-line</span><span class="punctuation token">:</span> underline<span class="punctuation token">;</span> <span class="property token">text-decoration-style</span><span class="punctuation token">:</span> wavy<span class="punctuation token">;</span></span><span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>spel<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>u</span><span class="punctuation token">&gt;</span></span> better.
<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>

<span class="comment token">&lt;!-- Highlight keywords in a set of instructions --&gt;</span>
<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>ol</span><span class="punctuation token">&gt;</span></span>
  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>li</span><span class="punctuation token">&gt;</span></span>
    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>b</span><span class="punctuation token">&gt;</span></span>Slice<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>b</span><span class="punctuation token">&gt;</span></span> two pieces of bread off the loaf.
  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>li</span><span class="punctuation token">&gt;</span></span>
  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>li</span><span class="punctuation token">&gt;</span></span>
    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>b</span><span class="punctuation token">&gt;</span></span>Insert<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>b</span><span class="punctuation token">&gt;</span></span> a tomato slice and a leaf of
    lettuce between the slices of bread.
  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>li</span><span class="punctuation token">&gt;</span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>ol</span><span class="punctuation token">&gt;</span></span></code></pre>

<h2 id="Summary" name="Summary">要約</h2>

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

<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}</p>

<h2 id="In_this_module" name="In_this_module">このモジュール内</h2>

<ul>
 <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started">HTML 入門</a></li>
 <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">Head とは？HTML のメタデータ</a></li>
 <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML テキストの基礎</a></li>
 <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">ハイパーリンクを作成する</a></li>
 <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">上級のテキスト整形</a></li>
 <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">ドキュメントとウェブサイトの構造</a></li>
 <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">HTML をデバッグする</a></li>
 <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">手紙をマークアップする</a></li>
 <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">コンテンツページを構造化する</a></li>
</ul>