テキスト エディタで <h1> から <h6> の見出しが提供され、テキストのセクションを意味のある視覚的な方法で書式設定するさまざまな方法が提供されるのと同様に、HTML では、散文の意味を理解するための意味要素と非意味要素の非常に類似したセットが提供されます。
このセクションでは、テキストのマークアップの主な方法、つまりテキストの基本について説明します。次に属性について説明し、リスト、表、フォームなど、テキストをマークアップするその他の方法について説明します。
見出し、再考
セクション見出し要素は <h1>、<h2>、<h3>、<h4>、<h5>、<h6> の 6 つあり、<h1> が最も重要で、<h6> が最も重要ではありません。長年にわたり、見出しはブラウザがドキュメントの概要を示すために使用されるとデベロッパーに伝えられてきました。これは元々目標でしたが、ブラウザがドキュメントのアウトライン機能の実装をせず、提案されたアウトライン アルゴリズムは HTML 仕様から正式に削除されました。ただし、スクリーン リーダーのユーザーは、ページのコンテンツを把握するための探索戦略として見出しを多用しており、h キーを使って見出し間を移動しています。見出しレベルを論理的に実装する（ドキュメントの概要を作成するのと同じように）と、コンテンツのアクセシビリティが向上するため、強く推奨されます。
デフォルトでは、ブラウザは <h1> を最大、<h2> をわずかに小さくスタイル設定し、以降の各見出しレベルはデフォルトで小さくなります。従来、ユーザー エージェント スタイルシートでは、<article>、<aside>、<nav>、<section> などのセクショニング要素内にネストされた <h1> 要素のフォントサイズも減らしていました。
一部のユーザー エージェント スタイルシートには、ネストされた <h1> 要素をより低い見出しレベルのようにスタイル設定するための、次のようなセレクタ（または類似のセレクタ）が含まれていました。
/* Legacy UA stylesheet behavior (now removed from browsers and the HTML spec) */
h2, :is(article, aside, nav, section) h1 {}
h3, :is(article, aside, nav, section) :is(article, aside, nav, section) h1 {}
ただし、ユーザー補助オブジェクト モデル（AOM）とスクリーン リーダーは、ネストに基づいて見出しレベルを変更することはありませんでした。ネストされた <h1> は常に「見出し、レベル 1」として報告されていました。これにより、ネストされた見出しは視覚的には小さく表示されるものの、支援技術にとってはトップレベルの見出しのままになるという不一致が生じました。
HTML 仕様でドキュメント アウトライン アルゴリズムが削除されたため、ブラウザではこれらの以前のユーザー エージェント スタイルシート ルールが削除されました。その結果、ネストされた <h1> 要素は自動的に縮小されず、標準の <h1> フォントサイズを保持します。
視覚的なスタイル設定や構造的な階層化のために、セクショニング要素内に <h1> 要素をネストすることに依存しないでください。ドキュメントの構造に基づいて、常に連続した見出し要素（<h1> から <h6>）を使用してコンテンツをマークアップします。これにより、コンテンツが検索エンジン、スクリーン リーダー、将来の保守担当者にとって明確でアクセスしやすいものになります。
見出し以外の構造化テキストは、一連の段落で構成されています。HTML では、段落は <p> タグでマークアップされます。終了タグは省略可能ですが、常に使用することをおすすめします。
#about セクションには、見出しといくつかの段落があります。
このセクションにはユーザー補助機能用の名前がないため、ランドマークではありません。これをランドマーク ロールである region に変換するには、aria-labelledby を使用してユーザー補助機能用の名前を指定します。
<section id="about" aria-labelledby="about_heading">
<h2 id="about_heading">What you'll learn</h2>
ランドマークは、適切な場合にのみ作成してください。ランドマークが多すぎると、スクリーン リーダーのユーザーはすぐに混乱してしまいます。
引用と引用
記事やブログ投稿をマークアップする際に、引用や抜き出し引用を、引用元を表示するかどうかを問わず含めることができます。これら 3 つのコンポーネントには、<blockquote>、<q>、<cite>（表示される引用の場合）、または検索用の追加情報を提供する cite 属性の要素があります。
#feedback セクションには、見出しと 3 つのレビューが含まれています。これらのレビューはブロック引用で、一部には引用が含まれています。その後に、引用の引用元を含む段落が続きます。スペースを節約するために 3 つ目のレビューを省略すると、マークアップは次のようになります。
引用の作成者や引用元に関する情報は引用の一部ではないため、<blockquote> には含まれず、引用の後に続きます。これらは一般的な意味での引用ですが、実際には特定のリソースを引用しているわけではないため、<p> 段落要素にカプセル化されています。
引用は 3 行にわたって表示され、著者名、以前の役職、キャリアの目標が含まれています。<br> 改行は、テキストのブロック内で改行を作成します。住所、詩、署名ブロックで使用できます。改行を段落を区切るためのキャリッジ リターンとして使用しないでください。代わりに、前の段落を閉じて新しい段落を開きます。段落に段落を使用すると、アクセシビリティが向上するだけでなく、スタイル設定も可能になります。<br> 要素は改行にすぎず、影響を受ける CSS プロパティはごくわずかです。
各ブロック引用の後の段落で引用情報を記載しましたが、前述の引用は外部ソースからのものではないため、このようにコード化されています。そうした場合は、出典を明記できます（明記すべきです）。
レビューがレビューサイト、書籍、その他の著作物から取得されたものである場合は、<cite> 要素をソースのタイトルに使用できます。<cite> の内容は、書籍のタイトル、ウェブサイトやテレビ番組の名前、コンピュータ プログラムの名前などです。<cite> のカプセル化は、ソースが言及されている場合でも、引用または参照されている場合でも使用できます。<cite> の内容は、作成者ではなく作品です。
Blendan Smooth の引用がオフラインの雑誌から引用されたものである場合は、次のようにブロック引用を記述します。
引用要素 <cite> には暗黙的なロールがないため、コンテンツからユーザー補助機能用の名前を取得する必要があります。aria-label は含めないでください。
コンテンツを公開できない場合に、引用元を明示するために、引用した情報のソース ドキュメントまたはメッセージの URL を値として受け取る cite 属性があります。この属性は <q> と <blockquote> の両方で有効です。URL ですが、機械可読であり、読者には表示されません。
</p> 終了タグは省略可能ですが（常に推奨）、</blockquote> 終了タグは常に必要です。
ほとんどのブラウザでは、<blockquote> インライン方向の両方にパディングが追加され、<cite> コンテンツが斜体で表示されます。これは CSS で制御できます。<blockquote> は引用符を追加しませんが、CSS で生成されたコンテンツで追加できます。<q> 要素は、デフォルトで言語に適した引用符を使用して引用符を追加します。
#teachers セクションでは、HAL が「申し訳ございませんが、それはできません」と言っています。そのコードは、英語とフランス語で次のようになります。
インライン引用要素 <q> は、言語に適した引用符を追加します。ユーザー エージェントのデフォルト スタイルには、開始引用符と終了引用符の生成コンテンツが含まれます。
q::before {content: open-quote;}
q::after {content: close-quote;}
lang 属性は、ページの基本言語が <html lang="en-US"> 開始タグで英語として定義されているものの、このテキストの段落は別の言語であることをブラウザに知らせるために含まれています。これにより、Siri、Alexa、VoiceOver などの音声コントロールでフランス語の発音を使用できるようになります。また、ブラウザにレンダリングする引用符の種類を通知します。
<blockquote> と同様に、<q> 要素は cite 属性をサポートしています。
HTML エンティティ
エスケープ シーケンスまたは「エンティティ」に気づいたかもしれません。< は HTML で使用されるため、< または覚えにくいエンコード < を使用してエスケープする必要があります。HTML には、<、>、&、" の 4 つの予約済みエンティティがあります。文字参照はそれぞれ <、>、&、" です。
よく使用する他のエンティティとしては、著作権（©）の ©、商標（™）の ™、改行なしスペースの などがあります。改行なしスペースは、2 つの文字または単語の間にスペースを挿入し、そこで改行されないようにする場合に便利です。2,000 を超える名前付き文字参照があります。ただし、必要に応じて、絵文字を含むすべての文字に &# で始まるエンコードされた同等の文字があります。
ToastyMcToastface のワークショップ レビュー（上記のコードサンプルには含まれていません）を見てみると、いくつかの特殊なテキスト文字があります。
<blockquote>Learning with Hal and Eve exceeded all of my wildest fantasies. All they did was stick a USB in. They promised that it was a brand new USB, so we know there were no viruses on it. The Russians had nothing to do with it. This has no̶̼͖ţ̘h̝̰̩͈̗i̙̪n͏̩̙͍̱̫̜̟g̢̣ͅ ̗̰͓̲̞̀t͙̀o̟̖͖̹̕ ͓̼͎̝͖̭dó̪̠͕̜ ͍̱͎͚̯̟́w̮̲̹͕͈̟͞ìth̢ ̰̳̯̮͇</blockquote>
このブロック引用の最後の文は、次のように記述することもできます。
This has no̶̼͖ţ̘h̝̰̩͈̗i̙̪n͏̩̙
͍̱̫̜̟g̢̣ͅ ̗̰͓̲̞̀t͙̀o̟
̖͖̹̕ ͓̼͎̝͖̭dó̪̠͕̜ ͍̱
͎͚̯̟́w̮̲̹͕͈̟͞ìth̢ ̰̳
̯̮͇
このコードの混乱には、エスケープされていない文字と名前付き文字参照がいくつかあります。文字セットは UTF-8 なので、この例のように、ブロック引用符の最後の数文字をエスケープする必要はありません。文字セットでサポートされていない文字のみをエスケープする必要があります。必要に応じて、さまざまな文字のエスケープを有効にするツールが多数あります。または、<head> に <meta charset="UTF-8"> を含めるようにすることもできます。
文字セットを UTF-8 として指定した場合でも、その文字を画面に出力する場合は < をエスケープする必要があります。一般的に、>、"、& の名前付き文字参照を含める必要はありませんが、HTML エンティティに関するチュートリアルを作成する場合は、< のコーディング方法を教える際に < を記述する必要があります。😀
ちなみに、この顔文字の絵文字は 😀 ですが、このドキュメントは UTF-8 として宣言されているため、エスケープされません。
理解度をチェックしましょう
HTML のテキストに関する知識をテストします。
HTML で著作権記号を表示するにはどうすればよいですか？
c©©right。引用であることを示すために使用される要素はどれですか？
<blockquote><quote><cite><cite> 要素は、引用符自体ではなく、引用符の出典を示すために使用されます。