61

、、、、などheadersのHTML5 セマンティック タグを単に優先する代わりに使用するのはなぜですか?sectionnavarticledivcss

Web ページを作成してそれらのタグを使用しましたが、 との違いはありませんdiv。彼らの主な目的は何ですか？

使用中のタグの適切な名前のみですか、それともそれ以上ですか?

説明してください。私は多くのサイトを調べましたが、これらの基本を見つけることができませんでした.

4

3 に答える 3

84

オックスフォード辞書は次のように述べています。

セマンティクス: 意味に関係する言語学と論理の分野。

その名前が示すように、これらのタグは Web ページの意味を改善するためのものです。優れたセマンティクスは、ドキュメントの自動処理において重要な役割を果たします。この自動処理は、あなたが思っているよりも頻繁に発生します。検索エンジンからの各 Web サイトのランキングは、そこにあるすべての Web サイトの自動処理から得られます。

(適切に設計された) Web ページにアクセスすると、人間の読者として、すべてのページ要素をすぐに (視覚的に) 区別し、さらに重要なことにコンテンツを理解することができます。左上には会社のロゴが表示され、その横にはサイト ナビゲーションがあり、検索バーと会社に関するテキスト、購入できる製品へのリンク、および法的免責事項が下部にあります。

しかし、マシンは頭が悪く、これを行うことはできません。あなたと同じページを見ると、Web クローラーが見るのは、画像、アンカー タグのリスト、テキスト ノード、入力フィールド、およびリンク付きの画像だけです。下部には、別のテキスト ノードがあります。では、ドキュメントのどの部分をナビゲーションにするつもりだったのか、メインの記事にするつもりだったのか、それともあまり重要でない脚注にするつもりだったのか、彼らはどのように知る必要があるでしょうか? 彼らは、特定の要素のヒントとなるいくつかの一般的な基準を使用してドキュメント構造を分析することで推測できます。たとえば、ul内部リンクのリストは何らかのページ ナビゲーションである可能性が高く、ドキュメントの末尾のテキストは必要なものですが、日常の閲覧者にとってはそれほど重要ではありません (法的免責事項)。

プレーンな の代わりに要素が使用されると想像してください。divマシンnavは、この要素の目的が何であるかをすぐに認識します。

// machine: okay, this structure looks like it might be a navigation element?
<div><ul><li><a href="internal_link">...</div>

// machine: ah, a navigation element!
<nav><ul><li><a>...</nav>

タグ内のテキストmain– これは明らかにページの最も重要な情報です! 左側のテキスト ノード、画像、およびアンカー ノードは、sectionタグ内でグループ化されているため、すべて一緒に属しており、下部にはfooter要素内のテキストがあります (それらはまだその意味を知りません)。そのテキストが、ある種の細字であると推測できるようになりました)。

例:
ユーザー (実際のマークアップを表示せずにページを読む) として、要素が<i>or<em>タグで囲まれているかどうかは気にしません。ほとんどのブラウザーでは、これらのタグは両方とも同じように (イタリック体のテキストとして) レンダリングされ、周囲のテキストとの間で際立っている限り、その目的を果たします。

ただし、セマンティクスに関しては大きな違いがあります。
<i>イタリック体を意味します。これは単にブラウザがレンダリングする方法 (イタリック体) に関するプレゼンテーション上のヒントであり、必ずしもより深いセマンティック情報が含まれているわけではありません。
<em>は強調することを意味し、重要な情報を示します。これで、ブラウザはイタリック体の指示に拘束されなくなりましたが、イタリック体、太字、下線、または別の色でレンダリングできます...この重要な情報を強調する特定の状況。

最終的な考え:
セマンティック タグは終わりではありません。メタデータ、オントロジー、リソース記述言語など、さらに一歩進んで異なる Web ページ間でデータを接続するのに役立ち、新しい知識の作成にも役立つものがあります。

たとえば、ウィキペディアは意味論的にデータを提示するのに非常に悪い仕事をしています。

https://en.wikipedia.org/wiki/Barack_Obama
https://en.wikipedia.org/wiki/Donald_Trump
https://en.wikipedia.org/wiki/Joe_Biden

3 人とも、ある時点で米国大統領を務めた人物です。

3 つの記事すべてに、これらの情報を表示するサイドバーが含まれており、(両方のページを開いて前後に切り替えることで) 比較できますが、意味的には説明されていません。代わりに、ウィキペディアが人を説明するためにオントロジーを使用した場合: http://dbpedia.org/ontology/Person

<!-- President is a subclass of Politician which is a subclass of Person -->
<President> 
    <birthname>Barrack Hussein Obama II</birthname>
    <birthdate>1961-08-04</birthdate>
    <headOf>country::USA</headOf>
    <tenure>2009-01-20 – 2017-01-20</tenure>
</President>

あなた (および機械) は、これら 3 つを (動的に生成されたページで!) 直接比較できるだけでなく、新しい知識を作成することもできます。現在の世界の指導者は誰ですか、女性の世界指導者は何人いますか、最年少の指導者は誰ですか、何種類の指導者がいますか (大統領/皇帝/女王/独裁者)、最も長く務めた人は何人ですか身長175cm以上で瞳が茶色など

結論として、優れたセマンティクスは非常に優れています (ただし、技術レベルでは達成と維持が困難です)。

于 2013-06-24T09:44:10.523 に答える
13

HTML5Doctorに HTML5 セマンティクスに関する小さな記事があります。

セマンティクスは、何らかの形で HTML の一部になっています。ページのどこで何が起こっているのかを理解するのに役立ちます。

以前<div>はほとんどすべてに使用されていましたが、「セマンティック」クラス名または ID 名を付けることでセマンティクスを実装していました。

これらのタグは、適切な構造化とレイアウトの理解に役立ちます。

もしあなたがそうするなら、

<div class="nav"></div>

とは対照的に、

<nav></nav>

また

<div class="sidebar"></div>

とは対照的に、

<aside></aside>

何も問題はありませんが、後者は、クローラー、リーダーなどと同様に、読みやすさを向上させるのに役立ちます.

于 2013-06-24T09:54:49.673 に答える