2

いくつかのHTML5構造要素を使用するようにWebサイトを更新しています。

私はたくさんの記事を読みましたが、それでも100％明確ではありません。

私が持っている質問は、ヘッダーやフッターの要素ではなく、コンテンツに関するものです。典型的な例を次に示します。

<div id="main-content" class="grid-8">
    <section>
        <h1 class="grey-heading">How It Works</h1>
        // some section content here  
    </section>
</div>
<div id="sidebar" class="grid-4">
    <aside>
        // some related stuff here
     </aside>
</div>

ご覧のとおり、メインコンテンツ/サイドバーの設定はシンプルです。問題は、構造的なdivを保持するのは正しいのか（それがすべてであるため）、それともコンテンツに構造的なものを追加しても大丈夫ですか？言い換えると、divを削除し、クラス/ IDをセクションとサイドに追加しますか？

ありがとう。

4

4 に答える 4

5

スタイルが許せば、それらを置き換えることができます。これらは、支援技術やWebクローラーに特に役立つ追加のセマンティックな意味をブラウザーに提供します。マークアップは完全に問題<div>ありませんが、スタイリングに必要がない場合は、自由に削除してください。また<nav>、ナビゲーション用の場合は、サイドバーで使用することをお勧めします。

sを保持するかどうかはあなた次第であることを強調したいと思います<div>。HTML5セマンティックタグを提供する場合<div>、スタイリングや整理に必要な場合は、レイアウトに20個の内部sを設定しても意味がなくなります。HTML5セマンティックタグは<div>、追加のセマンティック意味を持っているという事実を除けば、sとまったく同じです。

HTML5レイアウトの例を次に示します。

<header></header>
<nav></nav>
<section>
   <header></header>
   <article></article>
   <article></article>
   <footer></footer>
</section>
<aside></aside>
<footer></footer>

また、HTML5タグを使用している場合は、古いブラウザのポリフィルとして、modernizrなどのライブラリを使用してください。

参照

于 2013-03-27T13:19:55.250 に答える
2

Kolinkが言ったように、ラッパーは新しいタグに置き換える必要があります。

たとえば、をタグclass="main-wrapper"に置き換えることができます。同様に、完全にカスタマイズできる<main>のに、なぜサイドバーをラップするのですか？<aside>

<main>
    <section>
        <p>content</p>
    </section>
<main>

<aside>
    <p>content</p>
</aside>

これらはすべて、特定のCSSレイアウト規則を設定できるため、マークアップを「読みやすく」、理解しやすくなります。<div>明らかに、クラスが必要な場合がありますが、これにより、任意のタグの代わりに新しいタグと既存のタグを使用することで、ワークロードが向上する場合があります。

于 2013-03-27T13:17:34.193 に答える
2

http://html5doctor.com/element-index

ここでは、役立つリソースを読むことができます

div要素には特別な意味はありません。それはその子供たちを表しています。これをclass、lang、およびtitle属性とともに使用して、連続する要素のグループに共通するセマンティクスをマークアップできます。

と

セクションは、一般的なドキュメントまたはアプリケーションセクションを表します。このコンテキストでは、セクションはコンテンツのテーマ別グループであり、通常はヘッダー、場合によってはフッターが含まれます。例としては、本の章、タブ付きダイアログボックスのさまざまなタブ付きページ、または論文の番号付きセクションがあります。Webサイトのホームページは、紹介、ニュースアイテム、連絡先情報のセクションに分割できます。

于 2013-03-27T13:20:32.640 に答える
1

クラス/IDが割り当てられたHTML5要素は、ブラウザー間で完全にはサポートされていません。たとえばaside、クラスがあり、そのクラスにcssを追加しようとすると、レンダリングされません。ただし、 HTML5 Shivを使用している場合は、この問題が修正されるはずです。そうすれば、コードがよりクリーンになり、すばらしいものになります。

于 2013-03-27T13:21:05.720 に答える