ホームページ > 記事 > ウェブフロントエンド > HTML5 のよくある 3 つの間違った使用法に必ず注意してください

HTML5 のよくある 3 つの間違った使用法に必ず注意してください

php中世界最好的语言オリジナル: 2018-01-29 09:41:431860ブラウズ

今回は、HTML5 のよくある間違った使い方を 3 つ紹介します。注意すべき注意点は何ですか?実際の事例を見てみましょう。

タグを使用するときによくある間違いの 1 つは、HTML5 の 2f8332c8dcfd5c7dec030a070bf652c3 を恣意的に dc6dce4a544fdca2df29d5ac0ea9906b とみなすことです。具体的には、タグを (スタイル用の) 置換として直接使用することです。 XHTML や HTML4 では、次のようなコードがよく見られます:

<!-- HTML 4-style code --><div id="wrapper">
    <div id="header">
        <h1>My super duper page</h1>
        Header content  </div>
    <div id="main">
        Page content    </div>
    <div id="secondary">
        Secondary content   </div>
    <div id="footer">
        Footer content  </div></div>

そして HTML5 では、次のようになります:

これらのコードをコピーしないでください。これは間違っています！

<section id="wrapper">
    <header>
        <h1>My super duper page</h1>
        <!-- Header content -->
    </header>
    <section id="main">
        <!-- Page content -->
    </section>
    <section id="secondary">
        <!-- Secondary content -->
    </section>
    <footer>
        <!-- Footer content -->
    </footer></section>

この使用法は間違っています: **

はスタイルコンテナではありません。 **section 要素は、ドキュメントの概要を作成するために使用されるコンテンツの意味部分を表します。ヘッダーが含まれている必要があります。ページコンテナとして機能する要素 (HTML や XHTML スタイルなど) を探している場合は、Kroc Camen が提案しているように、スタイルを body 要素に直接記述することを検討してください。それでも追加のスタイルコンテナが必要な場合は、div を使用してください。

上記の考えに基づいて、HTML5 と一部の ARIA ロール機能の正しい使用例を以下に示します (独自の設計に従って div を追加する必要がある場合もあることに注意してください)

<section id="wrapper">
    <header>
        <h1>My super duper page</h1>
        <!-- Header content -->
    </header>
    <section id="main">
        <!-- Page content -->
    </section>
    <section id="secondary">
        <!-- Secondary content -->
    </section>
    <footer>
        <!-- Footer content -->
    </footer></section>

この使用法は正しくありません: **

上記の考えに基づいて、HTML5 といくつかの ARIA ロール機能の正しい使用例を以下に示します (独自の設計に従って、div の追加も必要な場合があることに注意してください)

<body><header>
    <h1>My super duper page</h1>
    <!-- Header content --></header><div role="main">
    <!-- Page content --></div><aside role="complementary">
    <!-- Secondary content --></aside><footer>
    <!-- Footer content --></footer></body>

2. 次の場合にのみ使用します。必要もちろん、headerやhgroup

に書かなくても良いタグを書いても意味がありません。残念ながら、ヘッダーと hgroup が目的もなく悪用されているのをよく見かけます。詳細については、header 要素と hgroup 要素に関する 2 つの記事を参照してください。内容を次のように簡単に要約します。

header 要素は、一連の導入テキストまたは

ナビゲーション補助テキストを表し、ヘッダーの場合によく使用されます。ヘッダーには、サブヘッダー、サブタイトル、さまざまなロゴなどの複数の層の構造があります。hgroup を使用して、セクションのヘッダーとして h1 ～ h6 要素を結合します

ヘッダーの乱用

ヘッダーは複数回使用できるため、

请不要复制这段代码！此处并不需要header –>
<header>
    <h1>My best blog post</h1>
</header>
<!-- Article content --></article>

ヘッダー要素にヘッダー要素が 1 つしか含まれていない場合は、ヘッダー要素を破棄します。 category 要素はヘッダーがドキュメントの概要に表示されることをすでに保証しており、ヘッダーには複数の要素を含めることはできません (上記で定義したとおり) ので、なぜ余分なコードを記述する必要があります。単純に次のように書きます:

<article>
    <h1>My best blog post</h1>
    <!-- Article content --></article>

の誤った使用法ヘッダーの話題では、hgroup の誤った使用法をよく見かけます。場合によっては、hgroup と header を同時に使用すべきではありません:

サブヘッダーが 1 つだけの場合

hgroup だけが正常に動作する場合。。。これはナンセンスではないでしょうか? 最初の質問は通常次のようなものです:

请不要复制这段代码!此处不需要hgroup –>
    <hgroup>
        <h1>My best blog post</h1>
    </hgroup>
    <p>by Rich Clark</p></header>

この例では、hgroup を削除して見出しをスムーズに実行させます。

<header>
    <h1>My best blog post</h1>
    <p>by Rich Clark</p></header>

2 番目の質問は、別の不要な例です。

请不要复制这段代码!此处不需要header –>
<hgroup>
    <h1>My company</h1>
    <h2>Established 1893</h2>
</hgroup></header>

ヘッダーの唯一のサブ要素が hgroup である場合、ヘッダーは他に何をしますか?ヘッダーに他の要素 (複数の hgroup など) がない場合は、ヘッダーを直接削除してください。

<hgroup>
    <h1>My company</h1>
    <h2>Established 1893</h2></hgroup>

3. すべてのリスト形式のリンクをナビゲーションに配置しないでください

HTML5 に 30 の新しい要素が導入されたことにより (最初の出版時点で)、

セマンティック

と構造化タグを構築する際の選択も変わりました。少し不注意になった。とはいえ、ハイパーセマンティック要素を乱用すべきではありません。残念ながら、ナビはそのような悪用の一例です。 nav 要素の仕様は次のように説明されます。

nav 要素は、他のページまたはこのページの他の部分にリンクするページ内のブロックを表します。

注: ページ上のすべてのリンクを nav 要素に配置する必要はありません。この要素は、メインのナビゲーションブロックとして使用することを目的としています。具体的な例を挙げると、サービス利用規約、ホームページ、著作権声明ページなど、フッターには多くのリンクが含まれることがよくあります。このような状況にはフッター要素自体で十分に対応できますが、ここでは nav 要素も使用できますが、通常は不要であると考えられます。

キーワードは「メイン」ナビゲーションです。もちろん、「プライマリー」の意味をお互いに話し合って一日中過ごすこともできました。そして、私は個人的に次のように定義しています:

メインナビゲーション

サイト検索

サブナビゲーション(少し議論の余地あり)

ページ内ナビゲーション(非常に長い記事など)

絶対的な正しいとか間違っているというものはないので、非公式のアンケートと私自身の説明では、次のような状況では、あなたがそれを放すかどうかに関係なく、私はそれを真ん中には入れません:

ページネーションコントロール

ソーシャルリンク(ただし、一部のソーシャルリンクは「概要」や「お気に入り」などのメインナビゲーションでもあります)

ブログ投稿のタグ

ブログ投稿のカテゴリ

3レベルのナビゲーション

フッターが長すぎます

ナビゲーションに一連のリンクを配置するかどうかわからない場合は、「これがメインのナビゲーションですか?」と自問してください。この質問に答えるために、次の第一原則を考慮してください:

セクションを使用する場合そして hx も適切です。その場合は nav を使用しないでください — IRC の Hixie

簡単にアクセスできるように、「クイックジャンプ」でこの nav タグへのリンクを追加しませんか?

これらの質問に対する答えが「いいえ」の場合は、頭を下げて一人で立ち去ってください。

これらの事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイト

その他の関連記事に注目してください。