HTML5 と CSS3 の基本チュートリアル: 階層ヘッダーの作成_html/css_WEB-ITnose

この記事は、『HTML5 と CSS3 の基本チュートリアル』(第 8 版) の第 3 章、セクション 3 からの抜粋です。

この章のすべての記事:

セクション 1: 「Web ページの作成を開始するための基本的な HTML 構造」

セクション 2: ページ タイトルの作成

著者: Turing Education 出典: 『HTML5 および CSS3 の基本チュートリアル』 (第 8 版)

3.3 階層タイトルの作成

HTML には 6 つのレベルがあり、タイトル ページ情報の階層関係を作成するために使用されます。 h1、h2、h3、h4、h5、または h6 要素を使用して、すべてのレベルの見出しをマークします。h1 は最上位レベルの見出し、h2 は h1 の小見出し、h3 は h2 の小見出しなどです。簡潔にするために、本書では h1 ～ h6 を使用してこれらの要素を表し、それらを 1 つずつリストすることはしません。

h1 ～ h6 の見出しを理解するには、定期レポート、販売レポート、ニュース レポート、製品マニュアルなどの非 HTML ドキュメントの見出しと比較できます。これらの記事を書くときは、コンテンツの各主要セクションにタイトルと、必要な数のサブタイトル (およびサブサブタイトルなど) を付けます。これらの見出しは合わせて文書の概要を表します。 Web ページの階層タイトルもこのようになっています (図 3.3.1 および図 3.3.2 を参照)。

図 3.3.1

アウトラインと同じように、見出しを使用して文書を構造化します。ここで、h2 タグが付けられたサグラダ ファミリアとグエル公園は、h1 タグが付けられたトップレベルの見出し「バルセロナの建築家」の小見出しです。グエル公園が h3 の場合、サグラダ ファミリアの小見出しになります (これは h1 の小見出しでもあります)。ページの残りの部分のコーディングを続ける場合は、関連するコンテンツ (段落、画像、ビデオなど) が対応するタイトルの後に続く必要があります

1 階層タイトルの重要性

ページにとって、階層タイトルは最も重要な HTML 要素であると言えます。通常、タイトルはページのトピックを伝えるため、検索エンジンにとって、タイトルが検索語と一致する場合、これらのタイトル、特に最高ランクの h1 に高い重みが与えられます (これは、ページ内のタイトルがより多くなるという意味ではありません) h1s のほうが良いですが、検索エンジンはまだ十分賢いです)。

図 3.3.2

この例では、製品ガイドには 3 つの主要なセクションがあり、それぞれに異なるレベルの小見出しがあります。タイトル間のスペースやインデントは、階層関係を明確にするためのものであり、最終的な表示効果には影響しません。実際には、私は通常そのようなスペースやインデントを追加しません。追加したい場合は追加できます

適切に評価された見出しも人々にとって重要です。目の見えるユーザーは、ページのコンテンツを識別するために階層的な見出しが必要です。スクリーン リーダーのユーザーも同じことを手と耳を使って行います。通常、タイトル間を移動するにはキーボードのキーを使用するため、ページ全体を最初から最後まで聞くことなく、ページの内容をすぐに理解し、最も興味のあるものを確認できます。興味のあるタイトルを見つけたら、そのタイトルのコンテンツを読むことを選択できます。 h1～h6 が使いやすさとアクセシビリティに大きな役割を果たしていることがわかります。

要約すると、適切なタイトル階層はあなたと訪問者の両方にとって重要です。

2. タイトルを使用して Web ページを整理する手順

(1) HTML の本文部分に、

を入力します。n は 1 から 6 までの数字です。作成する見出しのレベルによって異なります。 h1 は最も重要な見出しですが、h6 は最も重要度の低い見出しです。

(2) タイトルの内容を入力します。

(3) を入力します。 は手順 (1) と同じ番号です。

デフォルトでは、図 3.3.3 に示すように、ブラウザはタイトルのフォント サイズを h1 から h6 まで徐々に小さくします。 (ブラウザによっては、特定の要素にネストされた h1 と h2 がデフォルトで同じに見えます。) ただし、表示するテキストのサイズではなく、コンテンツの階層に基づいてタイトル レベルを選択することを忘れないでください。で。フォント、サイズ、色などを含めて、タイトルの外観を希望どおりにスタイル設定できます。 CSS を使用してこれらのスタイルを実装する詳細な手順については、第 10 章を参照してください。

図 3.3.3

デフォルトでは、すべてのタイトルが太字で表示され、h1 のフォント サイズは h2 のフォント サイズよりも大きく、h2 は h3 よりも大きくなります。大きいなど。各タイトル間のギャップも、ブラウザのデフォルト CSS によって作成されます。これらは、HTML ドキュメント内の

空白行を表すものではありません。階層タイトルを作成するときは、ジャンプなどの特定のレベルをスキップしないようにしてください。 h3 から h5 に直接。ただし、下位レベルから上位レベルの見出しへのジャンプは許可されます。たとえば、図 3.3.2 では、

録画のスケジュール

に続く

高度な機能

には、録画のスケジュール (h2 も) の基本機能が含まれているため問題ありません。ここで、高度な機能のコンテンツが始まります。

独立したタイトルにできないサブタイトル、スローガン、サブタイトルをマークするために h1 ～ h6 を使用しないでください。たとえば、メイン タイトルの後にサブタイトルが続くニュース記事があるとします。この場合、サブタイトルには段落 (図 3.3.4 を参照) またはその他のタイトル以外の要素を使用する必要があります。

以前、HTML5 には、連続する見出しをグループ化するための hgroup と呼ばれる要素が含まれていましたが、W3C はこの要素を HTML5 仕様から削除しました。

図 3.3.4

これは記事のサブタイトルをマークする方法です。クラスを追加すると、対応する CSS を適用できます。クラスには subhead などの名前を付けることができます

また、図 3.3.1 の h2 には lang 属性が使用されており、ここのテキストがページのデフォルト言語 (< であるため英語) であることを示していることに注意してください。 html>) スペイン語以外の別の言語 (スペイン語、es で表されます)。

この本を書いた時点で、字幕、サブタイトル、スローガン、署名などをマークするために HTML に subhead 要素を導入することを誰かが提案していました。現時点では、この提案が採用されるかどうかを知る方法はありません。

声明:

「HTML5 および CSS3 の基本チュートリアル」(第 8 版) の内容は、HTML5DW Web サイトで Turing Education によって特別に提供されています。スピリチュアルエデュケーションの正式な許可を得て、画像を転載、抜粋、引用することは許可されていません。

元のリンク

この記事はインターネットからのものです。あなたの権利が侵害されている場合は、時間内に QQ: 123464386 にご連絡ください。できるだけ早く対応いたします。