12

セマンティック マークアップについての誇大宣伝は理解できます。それは、検索エンジン、ひいては検索結果を読む人間にとって、要素またはページの意味を強化/さらに指定するものです。<h1>, <h2>, <p>これらのタグは階層構造や特定の目的を示し、ページに意味を追加するため、すべてマイクロフォーマットなどの功績によるものです。

しかし、なぜ今のようなタグがあるの<aside>, <header>, <footer>ですか? 彼らの利点は何<div id="aside/header/footer">ですか？

これらのタグには、タグ (src、action など) のような特定のサブプロパティや属性はありません<audio>, <form>, <img>。ヘッダー ID の代わりにヘッダー タグを検索することで、検索エンジンのパフォーマンスが大幅に向上することはほとんど想像できません。さらに、初心者がこれらのタグの使用を間違えると、DOM ノード レベルにまでエラーが及ぶため、さらに悪いことになりませんか?

では、なぜ従来の div より明らかな利点がない新しい HTML の「セマンティック」タグがあるのでしょうか? または、これが間違っている場合、どのようなメリットがありますか?

編集:私が探していた答えは、このスレッドの 4 番目のコメントで Anthony が指摘したリンクにあります: http://www.w3.org/TR/html5/sections.html。

のようなタグが存在する正当な理由<aside>, <header>, <footer>は次のとおりです。

コンテンツのセクション化は、見出しとフッターの範囲を定義するコンテンツです。-W3C

4

3 に答える 3

4

利点は、マークアップによって文書の内容と構造がより正確に記述されることです。付き<div>のは、それがid何であれ、ヘッダーを意味するものではありませんid- それは完全に任意です。a<header>はヘッダーですが、そのid.

于 2013-11-03T00:30:09.823 に答える
2

@ティブリッツ

セマンティック要素とは、意味を持つ要素を意味します。これらの要素は、ブラウザと開発者の両方にとっての意味を明確に説明しています。

<div><span>非セマンティック要素の例です。<form>、<table>、 などの要素はコンテンツを明確<img>に定義するため、セマンティック要素と呼ばれます。

<header>- header は、ドキュメントまたはセクションのヘッダーを指定するセマンティック要素です。ヘッダーは、導入コンテンツのコンテナーとして使用する必要があります。1 つのドキュメントに複数のヘッダー要素を含めることができます。

<section>- セクションは、通常は見出しを持つ、テーマ別のコンテンツのグループです。

<article>- 記事は、独立した自己完結型のコンテンツを指定しています。

等々...

次の例では、HTML5 マークアップでスキーマ要素を使用する方法を定義しています。

 <!-- BODY CONTAINER START -->
    <header>
        <h1>Little Green Guys With Guns</h1>
        <nav>
            <ul>
                <li><a href="/games">Games</a>
                <li><a href="/forum">Forum</a>
                <li><a href="/download">Download</a>
            </ul>
        </nav>
        <h2>Important News</h2> <!-- this starts a second subsection --
        <!-- this is part of the subsection entitled "Important News" -->
        <p>To play today's games you will need to update your client.</p>
        <h2>Games</h2> <!-- this starts a third subsection -->
    </header>
    <p>You have three active games:</p>
    <!-- this is still part of the subsection entitled "Games" -->
 <!-- BODY CONTAINER END -->
于 2013-11-03T06:28:07.443 に答える
0

答えは検索エンジンに隠されています。

検索エンジンは HTML 要素をクロールすることしかできず、Web サイトの CSS の色、フォント サイズについてはあまり知りません。そのため、太字またはタイトル、ヘッダー、フッター (ミッションまたはcontact) など....これにより、あなたのウェブサイトの手がかりが彼らのアルゴリズムに与えられます。

于 2013-11-03T00:30:26.593 に答える