html5のsectionタグとdivタグの違いについて(例あり)

寻∝梦
リリース: 2018-08-29 16:57:54
オリジナル
11382 人が閲覧しました

この記事の主な目的は、HTML5 のセクション タグと div タグの違いを紹介することです。セクションと div の使用法は似ているように見えますが、実際には、場所によってはそれほど違いはありません。相互に変換できますが、一部の場所では変換できないセクションまたは div のみを使用します。 それでは、一緒に記事を読みましょう

まず、HTML 標準で何が書かれているかを見てみましょう。セクションタグ:

各セクションは異なるテーマに対応しています。他人が設定した分割基準ではなく、コンテンツ自体のテーマに注意してください。

セクションの例には、本の章の章、マルチタブ ダイアログ ボックスの各タブ ページ、論文の番号付きセクションなどがあります。 Web サイトのトップページは、紹介、最新コンテンツ、連絡先情報などのセクションに分かれている場合があります。

注: Web ページの作成者は、コンテンツがシンジケートに使用される場合、セクション要素ではなく記事を使用する必要があります。たとえば、ブログのホームページ上のすべてのブログです。別の例は、フォーラム投稿の 1 階、2 階、3 階...n 階です。通常、このコンテンツの各部分は形式は似ていますが、ソースからは独立しています。

注: セクションはユニバーサルコンテナ要素ではありません。スタイル設定またはスクリプト作成のみに使用する場合は、div 要素を使用します。簡単な経験則として、セクション要素は、要素のコンテンツがドキュメントのアウトラインにリストされる場合にのみ使用してください。

次に、html5 のセクションタグと div タグの違いについて説明します:

1. セクションはコンテナとして特別に使用されるタグではなく、div です

セクションではありますが、記事ではなく記事を使用することをお勧めします

記事ではない段落、明確な ID を持つ特別なモジュール コンテナー (ブロックのラッピング専用のコンテナーではありません) として理解できます。

つまり、要素コンテナとしてセクションではなく div が一般的に使用される場合、セクションは役に立たないということですか?若すぎ単純すぎ。

この場合は div よりもセクションを使用する方が良いです

セクションはその名の通り、次のような章です:

<section>
<h1>PHP中文网</h1>
<p>欢迎来到PHP中文网,这里的网址是www.php.cn</p>
</section>
ログイン後にコピー

なぜそれが使われるかというと、セクション、記事があります。 、そしてdlはとても快適で、人々にとっても理解しやすく、どこにでもあるdivよりもはるかに優れています。

2. タグを使用するときによくある間違いの 1 つは、HTML5 の

を恣意的に
とみなすことです。具体的には、タグを (スタイル用の) 置換として直接使用することです。

はスタイルコンテナではありません。セクション要素は、ドキュメントの概要を作成するのに役立つコンテンツの意味部分を表します。ヘッダーが含まれている必要があります。ページ コンテナとして機能する要素 (HTML や XHTML スタイルなど) を探している場合は、Kroc Camen が提案しているように、スタイルを body 要素に直接記述することを検討してください。それでも追加のスタイル コンテナが必要な場合は、div を使用してください。

div はユニバーサルであり、すべてのブラウザでサポートされています。

は 1 つの意味として理解できます。前者が H5 で書かれているというだけです

HTML5 のセクションタグと div タグの概要:

DIV: このタグは常に、私たちが最もよく目にし、最もよく使用するタグです。これにはセマンティクスはなく、レイアウトおよびスタイルタグとして使用されます。

セクション: div に似ていますが、さらにセマンティクスが異なります。セクションは話題のコンテンツとして使用され、通常はタイトルが含まれます。セクションの一般的な適用シナリオは、記事の章、タブ ダイアログ ボックスのタブ、または論文の番号付き部分です。

【編集者のおすすめ】

HTMLでpreタグ内のテキストを折り返すにはどうすればいいですか? html preタグの使用例

HTMLのulタグの意味は? HTMLのulタグの役割を詳しく解説

以上がhtml5のsectionタグとdivタグの違いについて(例あり)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート