XHTML におけるタイトルタグと段落タグの使用に関する詳細な説明

XHTML におけるタイトルタグと段落タグの使用に関する詳細な説明

XHTML 見出しの概要
Word 文書を作成するときは、「第 1 章」、「1.2.1」などのタイトルをよく使用します。 XHTML 構文には見出しの概念もあります。 XHTML では、<h1> から <h6> までの 6 つのレベルの見出しが定義されています。

XML/HTML コードコンテンツをクリップボードにコピー
  1. < h1 >第 1 レベルの見出し</ h1 >   
  2. < h2 >第 2 レベルの見出し</ h2 >   
  3. < h3 >第 3 レベルの見出し</ h3 >   
  4. < h4 >第 4 レベルの見出し</ h4 >   
  5. < h5 >第 5 レベルの見出し</ h5 >   
  6. < h6 >第 6 レベルの見出し</ h6 >   

タイトルの使用
XHTML ドキュメントでは、タイトルが非常に重要です。検索エンジンはタイトルを使用して、Web ページの構造とコンテンツをインデックスします。タイトルを使用してドキュメントの階層を識別するのが上手になるはずです。
見出しでは、第 1 レベルの見出しが最も高く、その後、順番に低くなります。一般的に、XHTML ドキュメントでは、見出しはドキュメント内の次の場所 (<body> タグ内) に適用されます。
ウェブサイトのレベルに応じて:
<h1>はウェブサイトのタイトルを定義します
<h2>ウェブサイトのナビゲーションや列を定義する
<h3>ウェブサイトのコンテンツに応じて記事のタイトルを定義します。
<h1>はウェブサイトのタイトルを定義します
<h2>記事のタイトルを定義する
<h3>列タイトルを定義します。h3より大きいタイトルh4〜h6については、著作権表示や免責事項など、比較的重要な箇所に適切な場所で使用できます。
また、レベルは下向きにする必要があることに注意してください。h1 の下には h2 レベルがあり、その次は h3 です...


タイトルの使用に関する提案
h1 はページ全体の中核コンテンツを表すため、一般的に h1 は 1 回しか出現できず (絶対に出現できないわけではありませんが、複数回出現することは絶対にできません)、記事の最も強調される部分で使用されます。したがって、特定のコンテンツ ページの場合は、このサイトのように、記事の重要性を強調するために記事のタイトルに h1 がよく使用されます。

XML/HTML コードコンテンツをクリップボードにコピー
  1. <h1> XHTMLタイトル  

現時点でウェブサイトのタイトル(ウェブサイトのロゴ)に h1 を使用するかどうかは、実際の状況によって異なります。
タイトル 使用方法 演習 学習ドキュメント 1.html ファイルをエディターで開き、上記の <h1> から <h6> までのタグを <body> タグにコピーします。

XML/HTML コードコンテンツをクリップボードにコピー
  1. <本文>   
  2. < h1 >第 1 レベルの見出し</ h1 >   
  3. < h2 >第 2 レベルの見出し</ h2 >   
  4. < h3 >第 3 レベルの見出し</ h3 >   
  5. < h4 >第 4 レベルの見出し</ h4 >   
  6. < h5 >第 5 レベルの見出し</ h5 >   
  7. < h6 >第 6 レベルの見出し</ h6 >   
  8. < p >こんにちは〜こんにちは! </p>   
  9. </本文>   

1.html ファイルを保存してブラウザで開きます (既に開いている場合は、ブラウザの更新ボタンをクリックしてドキュメントを再読み込みします。以下も同様で、これ以上の手順はありません)。次のようにタイトル タグの効果を確認できます。
201636113918682.gif (396×290)

例からわかるように、ブラウザはタイトルに対して自動的に改行を形成します (各タイトルは独自の行を占有します)。

段落 p タグ
XHTML では、段落は <p></p> タグによって定義されます。
XHTML 段落
段落タグの例:

XML/HTML コードコンテンツをクリップボードにコピー
  1. < p >これは段落です。 </p>   

実際の制作作業では、<p></p> 段落タグを多用します。
テキストに段落タグを追加すると、ブラウザは自動的にテキストに段落区切りを追加します。しかし、空行を形成するために空の <p></p> に頼るべきではなく、 <br /> 改行タグを使用する必要があります。


改行<br />
XHTML ドキュメントでは、タイトル タグまたは段落タグは改行マーカーのみを提供します。空白行または複数の改行が必要な場合は、改行タグ <br /> が必要です。 XHTML では、Word の編集と同じように Enter キーを押して改行することは無効です。ブラウザは、この方法で生成された改行スペースを無視します。
例:

XML/HTML コードコンテンツをクリップボードにコピー
  1. <p>これコンテンツです</p>   
  2. < br   /> < br   />   
  3. < p >その他のコンテンツはこちら</ p >   

改行タグはブラウザにこの場所で改行が必要であることを伝えるだけで実質的な内容はないので、このタグはペアで出現することはなく、1 つの <br /> で行が 1 回だけ改行されます。複数の改行が必要な場合は、複数の <br /> タグを入力してください。
<p></p> 内に <br /> タグを挿入すると、改行効果も生成されます。


<br />それとも<br>?
<br> を使用することで改行効果を実現できますが、これはブラウザが HTML4.0 仕様と互換性があるためです。
XHTML 仕様では、ペアになっていないタグの場合は、コンテンツの末尾にスペースを追加し、/> でタグを閉じるだけです (<br /> や、後で説明する <img /><input /> などのタグ)。
したがって、 <br/> や <br> ではなく <br /> になります。

<<:  クリックして展開し、全文を読む機能を実現する純粋なCSS

>>:  CentOS6.5 に glibc-2.14 をインストールした後、ロケールで「そのようなファイルまたはディレクトリはありません」というメッセージが表示される場合の解決策

推薦する

Serv-U FTPとADの完璧な統合ソリューションの詳細な説明

会社が現在使用しているソリューションを確認するためにバックエンドにログインしました。使用される FT...

MySQL InnoDB インデックス拡張の詳細な説明

インデックス拡張: InnoDB は、プライマリ キー列をそのインデックスに追加することで、各セカン...

Nginx は動的と静的の分離を実装します 例の説明

ウェブサイトの解析を高速化するために、動的ページと静的ページを異なるサーバーで解析して、解析速度を向...

HTMLでカスタムタグを使用する方法

カスタム タグは XML ファイルと HTML ファイルで自由に使用できますが、いくつか注意すべき点...

ova ファイルを VMware にインポートする際の落とし穴の概要

問題の原因ご存知のとおり、すべてのネットワーク動作は対応するネットワークトラフィックを生成し、すべて...

JS でページのスクリーンショット機能を実装する方法

「ページのスクリーンショット」は、ページポスターの生成、ポップアップ画像の共有など、フロントエンドで...

JS WebSocket 切断理由とハートビートの仕組みの詳しい説明

1. 切断理由WebSocket が切断される理由は多数あります。WebSocket が切断されたと...

サーバー間のファイル バックアップ ソリューション、サーバー ファイルを別のサーバーに自動的にバックアップする方法は?

多くの組織ではファイル サーバーをバックアップする必要があり、あるサーバーから別のファイル サーバー...

MySQL スケジュールタスク例チュートリアル

序文MySQL 5.1.6 以降、非常にユニークな機能であるイベント スケジューラが追加されました。...

CSS3はさまざまな境界効果を実現します

半透明の境界線結果: 実装コード: <div> 半透明の境界線が見えますか? </...

CSSはスクロールを許可しながらスクロールバーを非表示にするためにオーバーフローを設定します

CSS は、スクロールを許可しながらスクロール バーを非表示にするために Overflow を設定し...

簡単な計算機を実装する小さなプログラム

この記事の例では、簡単な計算機を実装するための小さなプログラムの具体的なコードを参考までに共有してい...

6ull が Linux ドライバ モジュールをロードできない問題の解決方法

目次0x01 ドライバーモジュールのロードに失敗しました0x02 ソリューション要約する0x01 ド...

Vue3 リストインターフェースデータ表示の詳細

目次1. リストインターフェースの表示例2. データを表示する2.1. コンポーネントがリストに表示...

ネイティブWeChatアプレット開発におけるreduxの使用の詳細な説明

前提複雑なシナリオでは、複数の異なるページ間で大量のデータを使用したり変更したりする必要があります。...