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

推薦する

LeetCode の SQL 実装 (181. 従業員は管理職よりも収入が高い)

[LeetCode] 181.従業員の収入が管理職よりも多い従業員テーブルには、マネージャーを含む...

Centos7 Zabbix3.4 メールアラーム設定(メール内容がxx.bin添付ファイルになる問題の解決)

目次1. 監視Linuxホストを追加する2. メールボックスを設定する1. 監視Linuxホストを追...

React Nativeでシンプルなゲームエンジンを作る

目次導入始めるReact Nativeゲームエンジンの簡単な紹介React Nativeでスネークゲ...

JavaScript 関数呼び出し、適用、バインド メソッドのケース スタディ

要約する1. 類似点どちらも、ターゲット関数が実行されると内部の this ポインターを変更できます...

MySQL は低速クエリを可能にします (EXPLAIN SQL ステートメントの使用の概要)

今日、データベース操作はますますアプリケーション全体のパフォーマンスのボトルネックになりつつあり、こ...

nginx/apache 静的リソースのクロスドメインアクセスの問題を解決する詳細な説明

1. Apache 静的リソースのクロスドメイン アクセスApache設定ファイルhttpd.con...

Vue Nativeを使用したモバイルアプリケーションの構築プロセスの完全な記録

目次序文Vue Nativeの機能宣言的レンダリング双方向バインディングVue.js エコシステムの...

select @@session.tx_read_only が DB に大量に出現するのはなぜですか?

問題を見つける上位の SQL ステートメントを取得すると、DB が大量のselect @@sessi...

Windows で MySQL 5.7.17 圧縮バージョンをインストールするときに遭遇する落とし穴

まず、Windows 64 ビット用の最新の MySQL 5.7.17 コミュニティ圧縮バージョンを...

Dockerでコンテナを作成するときのディレクトリ権限

昨日プロジェクトを書いていた時に、MySQL の派生版である Percona を使う必要があったので...

RabbitMQ の Docker インストールと設定手順

目次単一マシンの展開オンラインプルミラーを見るRabbitMQを作成して実行するMQコンテナを正常に...

4 つの主要な SQL ランキング関数 ROW_NUMBER、RANK、DENSE_RANK、NTILE の使用方法の紹介

1. ROW_NUMBER()定義: ROW_NUMBER() 関数は、select によってクエリ...

Linux で指定されたフォルダの各サブフォルダ内のファイル数を表示する

カウントスクリプト #!/bin/sh 引数の数=$# [ $numOfArgs -ne 1 ]の場...

初心者がHTMLタグを学ぶ(2)

初心者は、いくつかの HTML タグを理解することで HTML を学習できます。この入門書は、初心者...

CSS におけるスタックコンテキストの具体的な使用法

序文一部の CSS 相互作用の影響により、要素に設定されたz-index実際のサイズに応じて重ね合わ...