HTML5_html5チュートリアルスキルにおけるdiv、article、sectionの違いと使い方の紹介

最近 html5 を勉強していますが、いくつかのタグ、特に div とセクションの 3 つのタグが変更されているため、少し不快に感じています。いくつかの情報を確認し、html5 と css3 を使用して Web ページをレイアウトしようとしました。少しアイデアを持ってください。以下は参考のためにレイアウトした簡単な Web ページです。まずそれを見て、HTML5 の構造をある程度理解してください。

div

HTML 仕様: 「div 要素には特別な意味はまったくありません。」

このタグは、ラベルのほとんど。それ自体にはセマンティクスはなく、レイアウト、スタイル設定、またはスクリプトのフックとして使用されます。

section
HTML 仕様: 「セクション要素は、ドキュメントまたはアプリケーションの一般的なセクションを表します。この文脈では、セクションとは、通常はコンテンツのテーマごとのグループです。

div のセマンティクスとは対照的に、簡単に言うと、セクションはセマンティクスを備えた div ですが、実際にはそれほど単純であるとは考えません。セクションは、通常はタイトルが付いた話題のコンテンツを表します。これを見ると、ブログ投稿や個別のコメントでセクションを使用するだけでよいのではないかと思うかもしれません。続きを読む:

「要素のコンテンツをシンジケートすることが合理的である場合、作成者はセクション要素の代わりに記事要素を使用することが推奨されます。」 関連する場合、セクションを置き換えるために記事を使用する必要があります。

それでは、セクションはいつ使用する必要があるのでしょうか?

「セクションの例としては、章、タブ付きダイアログ ボックス内のさまざまなタブ付きページ、または論文の番号付きセクションなどがあります。Web サイトのホームページは、序論用にセクションに分割されます。

一般的なアプリケーション シナリオには、記事の章、タグ ダイアログ ボックスのタブ、または論文の番号付きセクションが含まれます。 Web サイトのトップページは、紹介文、ニュース、連絡先情報などのセクションに分けることができます。実際、私はここで伝えられる情報に非常に興味を持っています。なぜなら、以下で紹介するセクションと記事の方がモジュール型アプリケーションに適していると思うからです。このトピックについては、将来特別な記事で説明する予定なので、ここでは省略します。今のところ。

W3C も次のように警告していることに注意してください。

「セクション要素は、スタイルの目的やスクリプト作成の便宜のために必要な場合、作成者に使用することを推奨します。」代わりに div 要素を使用します。一般的なルールとして、セクション要素は、要素の内容がドキュメントのアウトラインに明示的にリストされる場合にのみ適切です。"

セクションは、単なる通常のコンテナー タグではありません。タグがスタイル設定のみを目的とした場合、またはスクリプト作成を容易にするための場合は、div を使用する必要があります。一般に、要素のコンテンツがドキュメントのアウトラインに明示的に表示される場合、セクションは適切です。


article
HTML 仕様: 「article 要素は、ドキュメント、ページ、アプリケーション、またはサイト内の自己完結型の構成を表し、原則として独立して配布または再利用可能です」
article は特別なセクション タグであり、セクションよりも明確なセマンティクスを持ち、関連するコンテンツの独立した完全なブロックを表します。一般に、記事にはタイトル セクション (通常はヘッダー内に含まれます) があり、場合によってはフッターが含まれます。セクションもテーマ別のコンテンツですが、記事自体は構造と内容の点で独立しており、完全です。

HTML 仕様には、記事に適用可能なシナリオがいくつかリストされています。 「これは、フォーラムの投稿、雑誌や新聞の記事、ブログエントリ、ユーザーが投稿したコメント、インタラクティブなウィジェットやガジェット、またはその他の独立したコンテンツ項目である可能性があります。

記事が埋め込まれている場合。」記事 原則として、内側の記事の内容は外側の記事の内容と関連しています。たとえば、ブログ投稿では、ユーザーが投稿したコメントを含む記事は、それを含むブログ投稿記事内に非表示にする必要があります。

問題は、何が「完全な独立したコンテンツ」とみなされるのかということです。見分ける最も簡単な方法の 1 つは、RSS フィード内のコンテンツが完全であるかどうかを確認することです。コンテンツが完全であり、コンテキストがなくても独立しているかどうかを確認します。

例:

html ページ:

コードをコピーコードは次のとおりです以下:

• 首题


• 
  
• 服务


• 情報


• 联系

<記事id="ページコンテンツ">

HTML5 CSS3 ウェブページ

痛み自体は重要で、コーチングエリートのVivamusは追求され、ターゲットにされました。マエセナスはその発酵を嫌います。このクラスは、私たちの結婚やヒメネアンのプロジェクトを通じて、岸辺に目を向ける沈黙のパートナーに適しています。 Fusce sagittis porta mauris、法執行機関の矢に恐怖を与えることが重要です。しかし、医療スタッフには痛みの軽減が必要です。仏塔の時代まで。しかし、それは悪い考えだと言われています。ボートは怖い、妊娠は大事、大酒だ。私たちは生きていて、今、話しています。顧客は非常に重要であり、顧客は顧客に続きます。誰かの中にほんの少しだけ。結果に対してはウルトリシーのメンバーが責任を負います。ジャスミンソースの私のエロス。住宅の後には不動産車両が続きます。寒かったというか固まっていました。

リスト項目のデモ

• 
  
• 
  
• 
  
• 
  
• 
  

1. 
   
2. 
   
3. 
   
4. 
   
5. 
   

<このような方法で、著者はちょうど事務局は相変わらず充実しています。 Aenean vulputate interdum ague、sed dapibus mi ultricies convallis。これからチャットして、そうでなかったら飾ってください。常にレイヤーに投資すること。明日はEUニブ・ロレムしかし、医療従事者の命を案じ、憎むことが大切です。彼は裕福な人ではないので、とても簡単にお金を稼ぐことができます。マエセナスはサッカーが楽しいものであって、標的にされることを望んでいない。完全に柔らかいので、心地よいです。誰もが財産を管理することが期待されています。子どもたちの悲しみの子どもたちの人生。顧客は非常に重要であり、顧客は顧客に続きます。しかし、作戦の過程はウラムコーパーの谷となる。人生が大きくなるまでは、プールはおろか裏庭さえありません。罹患性の場合は、発熱自体や寝床の経過ではなく、潰瘍を治療することが重要です。サラダにさえ入らなくなるまで。それが醜くないなら、今誰が人生のキャリアを築くでしょうか。

&コピー; Copyright Dave Woods 2009

CSS ページ:

コードをコピーします

@charset "utf-8";
/* CSS ドキュメント */
#container{
width: 840px;
マージン: 20px 自動;
背景:#fff;
パディング:30px;
オーバーフロー:非表示;
}
/*-------------- ヘッダー ----------------*/
#main-navigation {
border-bottom:5px ソリッド #666;
}
#main-navigation ul{
overflow:hidden;
幅:100%;
リストスタイル:なし;
フォントサイズ:1.6em;
}
#main-navigation li{
float:left;
}
#main-navigation li a{
background:#999;
マージン: 0 5px 0 0;
パディング:5px 30px;
表示:ブロック;
色:#fff;
テキスト装飾:なし;
}
#main-navigation li.current a{
background:#666;
}
#main-navigation li a:hover{
background:#777;
}
/*-------------------------- 記事 -------------- ----------*/
記事{
width:100%;
オーバーフロー:非表示;
}
セクション{
float:left;
幅:500ピクセル;
}
/*-------------------------- 記事 -------------- ----------*/
aside{
float:right;
幅:310px;
}
/*-------------------------- 記事 -------------- ----------*/
フッター{
幅:840px;
マージン:20px 自動;
フォントサイズ:1.4em;
text-align:center;
}

総括:
div セクションの記事、説明は何もなく、徐々に増加しています。div 説明はありません、単にサンプル形式化または書き換えられたフック（フック）は、主なコンテンツのセクションに適しており、このセクションのコンテンツは上下テキストを分離でき、完全な独立した存在のコンテンツとして記事に適しています。その場合、セクションを使用することもできますが、実際には、記事を使用する方が適切であるため、セクションを使用する必要はありません。この場合、セクション 了も使用する必要はありません。

は、div、section、article、およびその他のセクションの区別に比べて、このセクションの内容が分離されていることがわかります。全体は、完全な独立したコンテンツとして機能することもできるわけではなく、セクションに含まれるコンテンツも独立したブロックとして機能することができるが、それは全体を構成する一部としてのみ機能するものであるため、ここでの注意点は次のとおりです。 ，記事才は完全な全体体です。 >

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。