タグを使用するときによくある間違いの 1 つは、HTML5 の <section> と <div> を同一視することです。具体的には、タグを (スタイルの目的で) 置換として直接使用することです。 XHTML または HTML4 では、次のようなコードがよく見られます。
<!-- HTML 4 スタイルのコード --><div id=wrapper> <div id=header> <h1>私の超一流ページ</h1> ヘッダーの内容 </div> <div id=main> ページの内容 < /div> <div id=secondary> 二次コンテンツ </div> <div id=footer> フッター コンテンツ </div></div>
HTML5 では次のようになります。
このコードをコピーしないでください。これは間違っています!
<section id=wrapper> <header> <h1>私の超一流ページ</h1> <!-- ヘッダーコンテンツ --> </header> <section id=main> <!-- ページコンテンツ --> </ Section> <section id=secondary> <!-- 二次コンテンツ --> </section> <footer> <!-- フッター コンテンツ --> </footer></section>
この使用法は正しくありません:**
スタイルコンテナではありません。 **section 要素は、ドキュメントの概要を作成するために使用されるコンテンツの意味部分を表します。ヘッダーが含まれている必要があります。ページ コンテナとして機能する要素 (HTML や XHTML スタイルなど) を探している場合は、Kroc Camen が提案しているように、スタイルを body 要素に直接記述することを検討してください。それでも追加のスタイル コンテナが必要な場合は、div を使用してください。
上記の考え方に基づいて、HTML5 といくつかの ARIA ロール機能の正しい使用例を以下に示します (独自の設計によっては、div の追加も必要になる場合があることに注意してください)。
<body><header> <h1>私の超一流ページ</h1> <!-- ヘッダーコンテンツ --></header><div role=main> <!-- ページコンテンツ --></div>< Side role=complementary> <!-- 二次コンテンツ --></aside><footer> <!-- フッター コンテンツ --></footer></body>2. 必要な場合にのみヘッダーと hgroup を使用する
もちろん、書く必要のないラベルを書いても意味がありません。残念ながら、ヘッダーと hgroup が目的もなく悪用されているのをよく見かけます。詳細については、header 要素と hgroup 要素に関する 2 つの記事を参照してください。内容を簡単に要約すると、次のようになります。
ヘッダーはドキュメント内で複数回使用できるため、このコーディング スタイルが一般的になる可能性があります。
このコードをコピーしないでください。ここにはヘッダーは必要ありません –>
<header> <h1>私の最高のブログ投稿</h1> </header> <!-- 記事の内容 --></article>
ヘッダー要素に含まれるヘッダー要素が 1 つだけの場合は、ヘッダー要素を破棄します。 category 要素はヘッダーがドキュメントの概要に表示されることをすでに保証しており、ヘッダーには複数の要素を含めることはできません (上記で定義したとおり) ので、なぜ余分なコードを記述する必要があります。単純に次のように書きます。
<article> <h1>私のベストブログ投稿</h1> <!-- 記事の内容 --></article>
の誤った使用法
ヘッダーに関して言えば、hgroup が誤って使用されているのもよく見かけます。 hgroup と header を一緒に使用すべきではない場合があります。
最初の質問は通常次のようになります。
このコードをコピーしないでください。ここには hgroup は必要ありません –> <hgroup> <h1>私の最高のブログ投稿</h1> </hgroup> <p>by Rich Clark</p></header>
この例では、hgroup を削除して、見出しをそのまま実行します。
<header> <h1>私の最高のブログ投稿</h1> <p>リッチ クラーク著</p></header>
2 番目の質問は、別の不要な例です。
このコードをコピーしないでください。ここにはヘッダーは必要ありません。
<hgroup> <h1>私の会社</h1> <h2>1893 年設立</h2> </hgroup></header>
ヘッダーの唯一のサブ要素が hgroup である場合、ヘッダーは他に何をするのでしょうか?ヘッダーに他の要素 (複数の hgroup など) がない場合は、ヘッダーを直接削除してください。
<hgroup> <h1>私の会社</h1> <h2>1893 年設立</h2></hgroup>3. リストのようなリンクをすべてナビゲーションに配置しないでください
HTML5 に 30 の新しい要素が導入されたことにより (最初の出版時点で)、セマンティックタグと構造化タグを構築する際の選択がやや不注意になりました。とはいえ、ハイパーセマンティック要素を乱用すべきではありません。残念ながら、ナビはそのような悪用の一例です。 nav 要素の仕様は次のように説明されます。
nav 要素は、他のページにリンクするページ内のブロック、またはナビゲーション接続を含むこのページの他の部分を表します。
注: ページ上のすべてのリンクを nav 要素に配置する必要はありません。この要素は、メインのナビゲーション ブロックとして使用することを目的としています。具体的な例を挙げると、利用規約、ホームページ、著作権声明ページなど、フッターには多くのリンクが含まれることがよくあります。このような状況にはフッター要素自体で十分に対応できますが、ここでは nav 要素も使用できますが、通常は不要であると考えられます。
キーワードは主要なナビゲーションです。もちろん、何が重要かについて一日中お互いに言い合うこともできます。私が個人的に定義する方法は次のとおりです。
簡単にアクセスできるように、ショートカット ジャンプにこの nav タグへのリンクを追加しますか?
これらの質問に対する答えが「ノー」の場合は、ただお辞儀をして、自分で立ち去ってください。
4. 図要素におけるよくある間違い図と図キャプションの正しい使い方を習得するのは確かに困難です。よくある間違いをいくつか見てみましょう。
すべての写真が数字であるわけではありません
上で、不必要なコードを書かないようにと言いました。このエラーも同様です。多くの Web サイトで、すべての写真に図のラベルが付けられているのを見てきました。写真を美しく見せるため、余計なタグは付けないでください。あなたは自分自身を傷つけるだけで、ページをより明確にすることはできません。
仕様では、図はフロー コンテンツとして説明され、場合によっては独自のタイトル説明が付けられます。通常、これらはドキュメント フロー内で独立した単位として参照されます。これが Figure の利点です。ドキュメント フローに影響を与えることなく、メイン コンテンツ ページからサイドバーに移動できます。
これらの問題は、前述の HTML5 要素のフローチャートでもカバーされています。
図が純粋にプレゼンテーションのみを目的としており、文書内の他の場所で参照されていない場合は、明らかにそうではありません。
。残りは状況によって異なりますが、まず自分自身に問いかけることから始めてください。「この画像はコンテキストに関連している必要があるか?」そうでない場合は、おそらくどちらでもないでしょう（おそらくそうです）。次へ: これを付録に移動してもいいですか?両方の質問が当てはまる場合は、おそらく当てはまります。
ロゴはフィギュアではありません
また、フィギュアにもロゴは適用されません。私が使用する一般的なコード スニペットをいくつか示します。
<!-- このコードはコピーしないでください。これは間違っています--><header> <h1> <figure>  </figure> 私の会社名 </h1 > </header><!-- このコードをコピーしないでください。これも間違っています--><header> <figure>  </figure></header>
これ以上言うことはありません。これは非常によくある間違いです。ロゴを H1 タグにするかどうかについて、牛が帰るまで議論することはできますが、ここでの重要点はそこではありません。本当の問題は、Figure 要素の過剰使用です。図は文書内でのみ参照するか、セクション要素で囲んでください。あなたのロゴがこのような形で参照される可能性は低いと思います。簡単です、図は使用しません。これを行うだけです:
<header> <h1>私の会社名</h1> <!-- 詳細はここに --></header>
フィギュアは単なる絵ではありません
フィギュアに関するもう 1 つのよくある誤解は、フィギュアは写真でのみ使用されるというものです。図は、ビデオ、オーディオ、チャート、引用、表、コード、散文、またはこれらまたはその他の任意の組み合わせにすることができます。図を写真に限定しないでください。タグを使用してコンテンツを正確に記述するのは Web 標準の仕事です。
5. 不要な type 属性を使用しないこれはよくある問題ですが、間違いではありません。ベスト プラクティスに従ってこのスタイルを回避する必要があると思います。
HTML5 では、script 要素と style 要素に type 属性が必要なくなりました。ただし、これらは CMS によって自動的に追加される可能性が高いため、削除するのは簡単ではありません。ただし、手動でコーディングしている場合、またはテンプレートを完全に制御できる場合は、type 属性を含める理由はまったくありません。すべてのブラウザはスクリプトが JavaScript であり、スタイルが CSS スタイルであると認識するため、これを行う必要はもうありません。
<!-- このコードは冗長すぎるのでコピーしないでください。 --><link type=text/css rel=stylesheet href=css/styles.css /><script type=text/javascript src=js/ scripts /></script>
実際、必要なのは次のように書くことだけです。
<link rel=stylesheet href=css/styles.css /><script src=js/scripts /></script>
文字セットを指定するコードも省略できます。 Mark Pilgrim が、『Dive into HTML5』のセマンティクスの章で説明しています。
6. form 属性の誤った使用HTML5 では、フォームの新しい属性がいくつか導入されています。使用上の注意点をいくつか示します。
ブール値のプロパティ
一部のマルチメディア要素およびその他の要素にもブール値のプロパティがあります。ここでも同じルールが適用されます。
新しいフォーム属性の一部はブール値です。つまり、それらがラベルに表示されている限り、対応する動作が設定されることが保証されます。これらのプロパティには次のものが含まれます。
率直に言って、これはほとんど見ません。必須を例として挙げると、一般的なものは次のとおりです。
<!-- このコードはコピーしないでください! これは間違っています! --><input type=email name=email required=true /><!-- 別の間違いの例 --><input type=email name =メールアドレスが必要です=1 />
厳密に言えば、これは大したことではありません。ブラウザの HTML パーサーがタグ内に出現する必須属性を認識する限り、その機能が適用されます。しかし、required=false を逆に書いたらどうなるでしょうか?
<!-- このコードはコピーしないでください。これは間違っています。 --><input type=email name=email required=false />
たとえ実行しないように指示しようとしても、パーサーは必須属性を有効なものとして扱い、対応する動作を実行します。これは明らかにあなたが望んでいることではありません。
ブール値プロパティを使用するには 3 つの有効な方法があります。 (後の 2 つは xthml でのみ有効です)
上記の例の正しい書き方は次のとおりです。
<入力タイプ=電子メール名=電子メールが必要です />要約する
上記は、HTML5 のよくある 6 つの間違った使用法を回避する方法について編集者が紹介したものです。ご質問があれば、メッセージを残してください。編集者がすぐに返信します。また、VeVb武道サイトを応援してくださった皆様、誠にありがとうございました！