html5 セクションと記事、左または右? _html/css_WEB-ITnose

HTML5 の出現により、フロントエンド スタッフは利便性を叫ぶ一方で、ラベルの使用のセマンティクスを前例のないほど重要視するようになり、人々は div+css の変更を待ちきれなくなりました。目によってもたらされました。ヘッダー、ナビゲーション、フッター、サイド、セクション、記事など、多くの新しい構造タグが追加されました。

しかし、最初のいくつかは比較的理解しやすい問題があります。直訳するとどういう意味になるでしょうか。セクション:「セクション」、記事:「記事」。これは明らかに区別がつきません。なぜなら、「部分」という言葉の意味が曖昧すぎるからです。権威あるガイドではこのように説明されています。

article: 外部から独立して参照できる、ドキュメント、ページ、またはアプリケーション内の独立した完全なコンテンツを表します。セクション: Web サイトまたはアプリケーションのページ上のコンテンツを分割するために使用されます。

「独立、完全」、「ブロック」という 2 つの単語に注意すると、その使用法をよりよく区別できます。 実際のアプリケーションでは、確かに上記のように相互に含めることができますが、これは置き換えることができるという意味ではなく、完全に 2 つの概念です。例を挙げた方が直感的です。

Apple

リンゴは良い果物です。

<セクション>

コメント

<記事>

<ヘッダー>

投稿者: Zhang San

リンゴはおいしいです

発行者: Li Si

リンゴは健康に良い

<

これは簡単な例です。まず、次のコメントはこの記事に関するものです。はいわゆる「独立した完全な」もので、ここでのコメント領域を担当するセクションであり、コメント領域を分離し、上記のタイトルや本文とは区別されます。それでは、上で述べられていることは非常に合理的であるのに、なぜこの記事が下のコメント欄に使用されているのかと尋ねる人がいるかもしれません。これは非常に小さな部分ですが、ここで考えられる誤解を排除する必要があります。タグは、タグが占める内容とその部分のサイズに応じて分割されません。意味論的な意味は、タグが何を表し、何を表現したいのかということです。どういうことですか? Li Si のコメントは Zhang San とは何の関係もなく、相互に影響を与えないため、記事はコメント エリアで使用されます。

別の例を見てみましょう

<

h1>Apple

赤富士

>

国光

< ;p>別名 Xiao Guoguang、Wanshou<

この例では、セクションは使用されません。記事の本文を他のものと区別するために、記事を段落に分割しましょう。また、タイトルと本文の段落が含まれていることにも気づくでしょう。注意すべき点がいくつかあります。

ここまで言っても、両者に大きな違いはないと思われるかもしれませんが、実際には、タグ記事はセクションを区切るものでもあります。この部分が「独立性」であるということ。

セクションを使用する際のいくつかのタブー:

1. スタイルを設定するためのページコンテナとして使用しないでください。

2. 記事、サイド、ナビゲーションなどの他の要素の方が適切な場合は、セクションを使用しないでください。

3. タイトルのないコンテンツ ブロックにはセクションを使用しないでください。 (上記のコードで説明しました~)

それでは、この 2 つの兄弟の使い方についてはここで終了します。お役に立てば幸いです。コミュニケーションへようこそ。