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

推薦する

Linuxでawkを使用する方法の詳細な説明

awk を学ぶ前に、sed、grep、tr、cut などのコマンドを学んでおく必要があります。これら...

Windows Server 2008 R2 に MySQL 5.7.10 をインストールする手順

MSIインストールパッケージを使用してインストールするご使用のオペレーティング システムに応じて、対...

MySQL 8.0.20 圧縮版のインストールチュートリアル(画像とテキスト付き)

1. MySQL ダウンロード アドレス。 http://ftp.ntu.edu.tw/MySQL...

ElementUI el-select の過剰なデータに対する解決策についての簡単な説明

目次1. シナリオの説明2. 解決策オプションが多すぎる el-select コンポーネントの解決策...

HTMLでアンカーの位置を設定するためのいくつかの一般的な方法

HTML でアンカーの位置を設定する方法はいくつかあるので、ここで紹介します。 1. ID ポジショ...

スケーラブルな列の完全な例を実現するための Ant 設計 Vue テーブル

ant-design-vue テーブルのスケーラブルな列の問題に対する完璧なソリューション。固定列と...

Linux の chown コマンドと chmod コマンドの違いの詳細な説明

Linux システムでは、chmod コマンドと chown コマンドの両方を使用して権限を設定でき...

純粋な CSS3 で実装された三目並べゲーム

操作効果: html <div class="三目並べ"> <...

ウェブデザインと制作におけるハイパーリンクの効果の向上

ハイパーリンクを使用すると、ページからページへ、またはサイトからサイトへ瞬時に移動できます。このよう...

CentOS サーバーのセキュリティ構成戦略

最近、ブルートフォース攻撃によるサーバのクラッキングが頻発しています。侵入行為を大まかに分析し、よく...

nginxフロー制御とアクセス制御の実装

nginx トラフィック制御レート制限は非常に便利ですが、Nginx では誤解され、誤って設定される...

mysql bin-log ログファイルを sql ファイルに変換する方法

mysqlbinlogのバージョンを表示mysqlbinlog -V [--version] bin...

cocoscreatorプレハブの詳しい説明

目次プレハブプレハブの作り方プレハブの役割1. 同じタイプのノードをバッチで作成する2. 特定の時間...

ウェブサイトがhttpsを有効にした後のSSLのセキュリティ構成と検出

最近のウェブサイトでは SSL を有効にするのが標準となっています。ただし、SSL を設定した後も、...

Nginx設定ファイルの詳細な説明

Nginx の主な設定ファイルは nginx.conf で、グローバル ブロック、イベント ブロック...