テキスト エディタで <h1> から <h6> の見出しを作成し、テキストの各セクションをわかりやすく視覚的に書式設定する方法が多数用意されているのと同様に、HTML には、文章の意味を表現するためのセマンティックな要素と非セマンティックな要素のセットが用意されています。
このセクションでは、テキストをマークアップする主な方法と、テキストの基本について説明します。次に、属性について説明した後、リスト、表、フォームなど、テキストをマークアップする他の方法について確認します。
見出し、復習
セクション見出し要素は 6 つ（<h1>、<h2>、<h3>、<h4>、<h5>、<h6>）があり、<h1> が最も重要で、<h6> が最も重要ではありません。長らく、ブラウザでは見出しはドキュメントの概要を示すために使用されていると言われていました。これは元々の目標でしたが、ブラウザには概要を説明する機能が実装されていません。ただし、スクリーン リーダーのユーザーは、見出しを探索戦略として使用してページのコンテンツを確認し、h キーで見出し間を移動します。したがって、ドキュメントの概要どおりに見出しレベルを実装することで、コンテンツがアクセスしやすくなり、引き続き非常に推奨されます。
デフォルトでは、ブラウザは <h1> が最も大きく、<h2> がやや小さくなります。その後の各見出しレベルはデフォルトで小さくなります。興味深いことに、ブラウザはデフォルトで、ネストしている <article>、<aside>、<nav>、または <section> 要素の数に基づいて <h1> フォントサイズを小さくします。
一部のユーザー エージェント スタイルシートには次のようなセレクタまたは同様のものが含まれており、ネストされた <h1> 要素を重要性の低いレベルのもののようにスタイル設定することができます。
h2, :is(article, aside, nav, section) h1 {}
h3, :is(article, aside, nav, section) :is(article, aside, nav, section) h1 {}
一方、ユーザー補助オブジェクト モデル（AOM）では、要素のレベルは正しくレポートされます（この場合は「heading, level 1」）。他の見出しレベルでは、この処理は行われません。ただし、見出しレベルのブラウザ スタイルは使用しないでください。ブラウザはアウトライン表示に対応していませんが、サポートしているふりをし、あたかもそうであるかのようにコンテンツの見出しをマークアップしてください。そうすれば、検索エンジンやスクリーン リーダー、将来的にメンテナンス担当者（多くの場合はあなた自身かもしれません）にとってコンテンツが理解しやすくなります。
見出し以外のほとんどの構造化テキストは、一連の段落で構成されています。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 は含めないでください。
コンテンツを表示できないときにクレジットを付与するために、cite 属性があります。この属性は、引用された情報のソース ドキュメントまたはメッセージの URL を値として受け取ります。この属性は <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、Voice Over などの音声操作でフランス語の発音を使用できるようになります。また、レンダリングする引用符のタイプをブラウザに伝えます。
<blockquote> と同様に、<q> 要素は cite 属性をサポートしています。
HTML エンティティ
お気づきのように、エスケープ シーケンス、つまり「エンティティ」が表示されます。< は HTML で使用されるため、< か、覚えにくいエンコード < を使用してエスケープする必要があります。HTML には、<、>、&、" の 4 つの予約済みエンティティがあります。文字参照は、それぞれ <、>、&、" です。
よく使用するのは、著作権（©）の ©、商標（TM）の ™、非改行のスペースを示す です。
改行しないスペースは、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> 要素は、引用そのものではなく、引用の参照元を示すために使用します。