テキスト要素

docs.scrimba.com

訪問者がページで読むものの大部分は、タイトル、段落、太字の警告、引用された行、コードスニペットなど、プレーンな書かれたコンテンツです。HTMLにはこれらの仕事のための特定の要素があり、適切なものを選ぶことはテキストの見た目を変えるだけでなく、ブラウザ、検索エンジン、補助技術にテキストの各部分が実際に何であるかを伝えます。

見出しと階層

HTMLは<h1>から<h6>までの6つのサイズの**見出し**を提供します。見出しはページ全体、またはそのセクションのタイトルです。<h1>はメインのタイトル、つまり上部の大きなものです。<h2>は大きなセクションのラベル、<h3>はその中のサブセクション、というように<h6>まで続きます。

印刷された本を思い浮かべてください。表紙のタイトルは<h1>です。各章のタイトルは<h2>です。章内の見出しは<h3>です。何が何の下に属するのかを示すためにレベルを使用します。

最初から押さえておくべきことの1つは、テキストを望むサイズにするために見出しを選ばないこと。<h1>は大きく見える傾向がありますが、その仕事は「これはメインのタイトル」と言うことで、「このテキストを大きくする」ではありません。どこかで大きなテキストが必要な場合、それは後でCSSで処理する仕事です。

6つの見出し要素、<h1>から<h6>は、ドキュメントの**階層**を記述します。つまり、どの部分がセクションで、どの部分がサブセクションであるかです。番号はサイズではなく、ランクです。<h1>はアウトラインの最上位、<h2>はその下、<h3>はその下です。

最初から組み込むべきルールは、レベルを順序どおりにネストしてスキップしないことです。<h2>で始まるセクションは<h3>サブセクションを含むべきであり、<h4>に直接ジャンプしてはいけません。より小さいデフォルトサイズに到達するためにレベルをスキップするのは古典的な間違いであり、これは間違ったツールです。見出しを特定の方法で見せたい場合は、CSSでスタイルを設定し、その番号を構造内のランクのために予約してください。

見出し要素は、ドキュメントの**アウトライン**、つまり、セクションの順序付けられたランク付けされた構造を定義します。これは、トピックの下にトピックをネストする目次と同じです。これから3つの本番ルールが続き、3つすべては外観ではなく、アクセシビリティと検索に関するものです。

1つ目は、ページごとに1つの<h1>を使用することです。これはそのページのコンテンツの真のタイトルです。これはアウトラインの最上位であり、正確に1つを持つことで、すべてのツールにページの内容に関する単一の明確なアンカーを与えます。

2つ目は、下に向かってレベルをスキップしないことです。スクリーンリーダー（ページを見ることができない人のためにページを音声で読み上げるソフトウェア）を使用すると、ユーザーはすべての見出しのリストを表示して、その間をジャンプできます。これはサイトを読む人がセクションをスキミングする方法と同じです。<h2>から<h4>へのジャンプは、そのリストに欠落しているレベルとして読まれ、ナビゲーションが意味をなさなくなります。

3つ目は、ランクはサイズではなく、意味論的であるということです。検索エンジンは見出しの構造を読んでページがどのように編成されているかを理解するため、実際に3番目のレベルセクションではなく、デフォルトサイズが正しく見えたために選択された<h3>は、クローラーとスクリーンリーダーの両方を静かに誤情報として与えます。CSSでサイズを設定します。番号に意味を持たせてください。

<h1>初心者向けサワードウ</h1>

<h2>スターターを準備する</h2>
<p>スターターは小麦粉と水の生きた培養物です。</p>

<h3>1日目から3日目</h3>
<p>小麦粉と水を等しい重さで混ぜてから待ちます。</p>

<h2>初めてのパンを焼く</h2>
<p>スターターがアクティブになれば、焼く準備が整います。</p>

1つの<h1>がページ全体に名前を付けます。2つの<h2>見出しが主要なセクションをマークし、<h3>は最初のセクションの中にうまく収まります。見出しの数字だけを読むと、本文の単語を読まなくても記事の形がわかります。

Juno見出しと階層 6つの見出し、<h1>から<h6>、<h1>は最上部の1つのメインのタイトルです。残りはセクションとサブセクションにラベルを付けます。早く私を驚かせた落とし穴：見出しを単に大きく見えるという理由だけでつかみません、それはCSSが行う仕事です。数字は何であるかについてであり、サイズについてではありません。

Juno見出しと階層 見出しはコンテンツをランク付けします。見出しはコンテンツをサイズ付けしません。順序通りにネストしてレベルをスキップして、より小さいデフォルトに着地しません。これは人々がつまずくものです。見出しが特定の方法で見える必要があるのですか？CSSでスタイルし、構造を説明するために番号を残してください。

Juno見出しと階層 ページごとに1つの<h1>、下に向かってレベルをスキップなし、ランクをサイズで選びません。スクリーンリーダーユーザーは目次のように見出しの間をジャンプし、検索エンジンは同じアウトラインを読むため、外観のために選択された見出しは両方を誤解させます。数字を意味論的に保ち、外観をCSSにプッシュします。

段落と改行

通常のテキストのブロックは**段落**、つまり<p>要素に入ります。各段落を独自の<p>...</p>でラップすると、ブラウザはその上と下に少しスペースを与え、段落は本のように離れて座ります。

<p>パンには4つのもの：小麦粉、水、塩、時間が必要です。</p>
<p>それらが正しければ、残りは忍耐です。</p>

HTMLファイルでEnterキーを押してもページには何も起こらないことに注意してください。ブラウザはタイプした改行と余分なスペースを無視します。タグだけを気にします。そのため、段落を分離するために<p>が必要です。単に別の行にそれらをタイプするのではなく。

段落内で行を本当に壊す必要がある場合、例えばアドレスの行や短い詩のように、その目的のための<br>要素があります。これは単一の改行を強制し、それ以上は何もしません。

<p>要素は流動的なテキストの段落を保持し、ボディコンテンツのデフォルトホームです。ブラウザはソース内のスペース、タブ、改行の任意の実行を単一スペースに折りたたむため、ページ上のテキストのレイアウトはタグから来ており、ファイルの形式の方法からではありません。

<br>要素はテキストのブロック内で改行を強制します。これはvoid要素、閉じタグなし、改行がコンテンツ自体の一部である場合にのみ正しい：郵便番号、詩の行、署名ブロック。

<p>
  太郎鈴木<br>
  東京都渋谷区14号<br>
  東京都渋谷区
</p>

<br>が間違っているのはスペーシングツールとしてです。<br><br>をスタックして2つの段落を離すと見た目は良いですが、それは間違った直感です。これらは2つの段落であるため、2つの<p>要素であり、それらの間のギャップはプレゼンテーションであり、CSSに属しています。<br>に到達してスペースを作成することは、構造とスタイルをミックスします。これは早期に壊す価値がある正確な習慣です。

<p>はブロックレベル要素です。つまり、新しい行で開始し、利用可能な全幅を占有し、その周囲の段落と垂直にスタックします。これはプロースの実行のための正しいコンテナであり、ブラウザはその内容にホワイトスペース折りたたみを適用します。ソース内のスペース、タブ、改行の任意のシーケンスがレンダリングされた出力で1つのスペースになります。そのため、ソースの書式設定は、あなたにとって読みやすいもの です。

<br>はレイアウトギャップではなく、コンテンツに意味のある改行を表します。この区別には、具体的なアクセシビリティコストがあります。スクリーンリーダーは<p>境界を段落の終わりとして扱い、それに応じて一時停止します。これにより、ユーザーは1つの考えが終わり、次の考えが始まる場所がわかります。<br>要素のスタックはそのような境界を生成しません。ソフトウェアは直接読み込むため、視聴者が間隔で見る構造はリスナーには見えません。スペーサーとして使用される空の段落には同じ問題があります。一部のスクリーンリーダーはそれらを空白として発表し、他のものはそれらをスキップし、どちらの方法でも意図したギャップは通信されません。

実際のプロジェクトと接触する中で生き残るルール：改行がデータの一部（住所、詩、フォームラベルの行）である場合にのみ<br>、およびブロック間の垂直間隔は常にCSSのmarginを使用します。構造は意味を運びます。スタイルは外観を運び、それらを分離しておくことが、ページを保守可能でアクセシビリティの両方にします。

Juno段落と改行 テキストの各ブロックは独自の<p>...</p>に入り、それが段落の間にスペースを入れるものです。ブラウザはタイプしたEnterキーとスペースを無視するため、タグが機能します。アドレスなど、行が本当に段落の中で壊れる必要がある場合にのみ<br>を使用してください。

Juno段落と改行<p>段落の場合、ブラウザはソースホワイトスペースを折りたたむため、ファイルのフォーマットはページで何も変わりません。<br>は、住所のようなコンテンツに属する改行の場合、物事を離すためのものではありません。ギャップを作成するための2つの<br>は、スペーシングがCSSから漏れていることを示しています。

Juno段落と改行<p>はスクリーンリーダーが一時停止する実際の段落の境界を与えるブロックです。<br>のスタックはそれを与えず、構造は聴いている人には消えます。そのため、<br>は改行がデータの一部である場合に限られ、すべての垂直間隔はCSSのmargin。スペーサーとしての空の段落には同じアクセシビリティホールがあります。それらも飛ばしてください。

強調：<strong>と<b>、<em>と<i>

2つの要素がテキストを太字にし、2つがそれをイタリック体にします。<strong>と<b>は両方とも太字でレンダリングされます。<em>と<i>はイタリック体の両方でレンダリングされます。そのため、4つのタグ、2つのルック。

<p><strong>警告：</strong>オーブンは非常に熱いです。</p>
<p>生地を<em>十分に</em>こねる必要があります。</p>

これまでのところ、警告のような、ビットのテキストが重要な場合は**<strong>**に到達します。また、あなたが音声で読んでいるなら、あなたの声がするのと同じ方法で単語を強調したい場合は<em>に到達します。ほとんどの場合、これが最も望む2つであり、ブラウザはそれらを太字とイタリック体にします。

4つの要素は2つのペアに分かれており、分割は意味と外観の間にあります。<strong>と<em>はセマンティック：テキストについて何か言います。<b>と<i>は実際の：それが見える方法だけを変更します。

コンテンツが**重要性、深刻さ、または緊急性を持つ場合は、<strong>を使用してください。警告、重要な指示など。<em>をストレス強調**のために使用してください。あなたが文を声に出して読んだなら、あなたが身を乗り出すと思う単語。これはその意味を変える可能性があります。どちらも太字とイタリック体をレンダリングしていますが、あなたはそれらが何を意味するかのためにそれらを選んでいます。

<b>と<i>は、太字またはイタリック体が必要な場合、その背後に重要性やストレスがない場合です。あなたが目を引いているキーワードの<b>、船の名前または外国の句の<i>。それらはテキストをスタイリッシュに分離してマークします。それはより重要です。

<p><strong>しない</strong>でください。システムが加圧されている間、バルブを開きます。</p>
<p>彼女はそれが<em>彼女の</em>考えであり、彼の考えではないとささやきました。</p>
<p>キーボードショートカットは<b>Ctrl</b>プラス<b>S</b>です。</p>
<p>フェリーで<i>Lady Marion</i>を渡りました。</p>

1つのことを覚えている場合：<strong>と<em>はそれを意味し、<b>と<i>はそれを示すだけです。テキストが本当に重要な場合は、セマンティックペアに到達してください。

4つすべてがブラウザがデフォルトで行う同じ2つの方法をレンダリングするため、太字またはイタリック体、画面上は交換可能です。違いは、ピクセルを見ていないものが何を通信するか、そしてそれが選択が実際に住んでいる場所です。

<strong>は重要性をマークします。テキストはシリアスで、緊急、または見逃してはなりません。<em>はストレス強調をマークします。文の意味を変える重さを持つ単語（「call me tomorrow」と「call me tomorrow」を比較してください）。スクリーンリーダーはこれに作用することができます。多くは強調されたテキストのトーンまたはペースをシフトします。<strong>は通常のプロースとは異なる場合があるため、エンコードした重要性が実際に聞き手に伝わります。度のためにそれらをネストします。<strong>内の<strong>はより大きな重要性として読み、<em>内の<em>は重いストレスのように読みます。

<b>と<i>は実際のペアであり、「それらを避ける」というアドバイスより頻繁に正しい選択です。彼らの本当の定義は狭いです。<b>は実用的な理由でテキストに注目を引き、何も加えられた重要性ではありません。概要のキーワード、レビューの製品名。<i>は代替声や気分でテキストをマークします。技術用語を初めて使う場合、Homo sapiensのような分類学的な名前、別の言語の句、キャラクターの内部思考。より具体的な要素（作品のタイトルの<cite>、定義の<dfn>、コードの<code>）がある場合は、代わりにそれを使用してください。<b>と<i>は、テキストが分離されているが、より強い意味が適用されない場合のフォールバックです。

避けるべき故障モードは、<b>を使用する場所で<strong>を使用する場所、または<i>が<em>を意味する場所です。彼らは同じように見えるため、画面上には誰が間違っているかは何も告げません。しかし、あなたは補助技術が頼る重要性またはストレスを投げていました。テキストがどのように見えるべきかではなく、テキストが何を意味するかを尋ねます。重要な場合は、<strong>または<em>；単に分離されている場合は、<b>または<i>。

Juno強調：strong and b、em and i<strong>と<b>は両方とも大胆さに行き、<em>と<i>は両方ともイタリック体に行きます。始まりから、何か重要な場合は<strong>に到達します。警告のように、あなたはあなたの声がするのと同じ方法で単語を強調したい場合は<em>。これら2つはあなたが書くほぼすべてをカバーします。

Juno強調：strong and b、em and i<strong>は重要を意味し、<em>はストレスを意味し、両方が意味を持ちます。<b>と<i>は同じ太字とイタリック体であり、その背後には意味がなく、単にテキストを分離したい場合です。どちらの方法でも同じ見た目なので、テキストがどのように見えるべきかではなく、テキストが何を意味するかによってペアを選んでください。

Juno強調：strong and b、em and i 画面上では4つはすべて太字またはイタリック体です。違いは、スクリーンリーダーが聞くものです。<strong>と<em>は重要性とストレスをエンコードし、異なる方法で発表される可能性があるため、<b>または<i>をつかむとき、あなたはそれを静かに意味を落とします。<b>と<i>は、テキストが単に分離されている場合、キーワードまたは用語の場合、より具体的な要素が適合しない場合に正しいです。

その他のインラインテキスト（引用、<code>、<abbr>、その他）

太字とイタリック体を超えて、HTMLには一般的なテキストのビットの小さな要素があります。短い引用は<q>に座り、ブラウザは引用符を追加します。コマンドの名前などのコードの一部は**<code>**に入ります。ブラウザはこれを等幅フォントで表示するため、通常の文章から目立ちます。

<p>私の祖母は常に<q>監視された鍋は沸騰しない</q>と言っていました。</p>
<p><code>Ctrl S</code>ショートカットでファイルを保存します。</p>

これらのいくつか以上がありますが、短い引用の場合は<q>、コードの場合は<code>がほとんどの場合に出会う2つです。各テキストは小さなテキストをラップし、それが何であるかをブラウザに伝えます。

これらはインライン要素です。段落内のテキストの実行をラップし、<p>などのブロックとは異なり、独自の行に壊しません。それぞれが、テキストの断片が何であるかに名前を付けるため、プレーンな<span>をスタイル付けするのではなく、特定の要素に到達してください。

知る価値のあるもの：

<p>レポートは<cite>プラグマティックプログラマー</cite>を2回引用しています。</p>
<p><code>npm install</code>を実行してから、<kbd>Enter</kbd>を押してください。</p>
<p>部屋は床面積の<strong>24m<sup>2</sup></strong>です。</p>
<p>古い合計は<del>£40</del> <ins>£32</ins>でした。</p>
<p><abbr title="HyperText Markup Language">HTML</abbr>が成熟するにつれて、タグが落ち着きます。</p>

<cite>は作品のタイトルに名前を付けます。<code>はコードをマークし、<kbd>はキーボード入力をマークし、<samp>はプログラム出力をマークします。<sup>と<sub>は上付き文字と下付き文字で、指数や化学式などの物事です。度のサインは独自のキャラクター、°、上付き文字ではなく。<del>と<ins>は削除されたテキストと挿入されたテキストをマークし、編集または価格変更を示すのに役立ちます。<abbr>は略語をマークし、そのtitle属性は完全な拡張を保持しています。

<q>は短いインライン引用の場合、自動的に引用符を追加します。より長い、スタンドアロンの引用の場合は、代わりに<blockquote>を使用します。これはブロック要素です。

これらはインライン要素であり、テキストのブロックではなく、テキストの行内で流れるもの。それらは、テキストの断片がマークアップでその意味を運ぶことができるため存在し、その意味は補助技術、検索エンジン、および独自のスタイルとスクリプトで利用可能にすることです。実用的なガイダンスは、最も具体的な要素を使用し、ニュートラルな<span>にのみフォールバックすることです。

実際に使用する予定のセット：

<p><cite>データ集約型アプリケーションの設計</cite>、第3章を参照してください。</p>
<p><kbd>git status</kbd>を入力して<samp>何もコミットする</samp>を表示してください。</p>
<p>サンプルは全体を通して<abbr title="Cascading Style Sheets">CSS</abbr>変数を使用しました。</p>
<p>修正された図：<del>1,200</del> <ins>1,450</ins>エントリ。</p>

<cite>は、人の名前ではなく、引用された作品（本、映画、論文）のタイトルをマークします。これは人々が絶えず間違えるポイントです。<code>はコンピュータコードの断片であり、<kbd>はユーザーキーボード入力です。つまり、相互作用の両方が等幅をレンダリングしますが、反対方向です。<samp>はプログラムからのサンプル出力です。<abbr>は略語をマークし、完全な拡張を保持するtitle属性を取ります。スクリーンリーダーはその拡張を発表または提供でき、ホバーでツールチップとして表示されるため、読者はコンテンツが何を表しているかについて推測することはありません。<del>と<ins>は編集を表し、テキストが削除され、テキストが追加されましたが、これはそのように発表されます。これは、価格の修正や修正線などの変更がポイントである場所で重要です。

引用の場合、<q>はインラインで、CSSを通じてロケール対応の引用符を挿入します（そのため、マークを自分でタイプしません）。一方、<blockquote>は延長引用のためのブロックレベル要素であり、両方とも、ソースのURLを保持するオプションのcite属性を取ります。これらすべての中のスルーラインは、要素は意味であり、外観は別のレイヤーです。CSSで設定します。テキストが何であるかのためにタグを選択することは、それが見えるべき方法ではなく、ページが見ることができないツールで読める状態に保つことです。

Junoその他のインラインテキスト（引用、コード、abbr、その他）<q>は短い引用をラップし、引用符を追加し、<code>はコードを等幅フォントで表示するため、それは通常の文から目立ちます。これらの小さなタグはもう少しありますが、それらの2つは最も来ます。それぞれは単にテキストの少しをラップして、それが何であるかを言っています。

Junoその他のインラインテキスト（引用、コード、abbr、その他） これらのインラインタグはそれぞれ、フラグメントが何であるかに名前を付けます。コードの場合は<code>、押されたキーの場合は<kbd>、作品のタイトルの場合は<cite>、完全な形の場合は<abbr>と<title>。プレーンな<span>をスタイル付けするのではなく、特定のものに到達してください。また、短い引用の場合は<q>、スタンドアロンの場合は<blockquote>。

Junoその他のインラインテキスト（引用、コード、abbr、その他） 最も具体的なインライン要素を使用し、何も適合しない場合にのみ<span>にフォールバックします。人々が誤用する項目を見てください。<cite>は人の名前ではなく、作品のタイトル、<code>と<kbd>は同じに見えますが、相互作用の反対側を意味しています。<abbr>の<title>は補助技術によって読み出され、<q>は独自の引用符を提供するため、タイプしないでください。