親愛なるKhabrovites、私はあなたに記事一般的なHTML5エラーの回避の無料翻訳を提示します。 ここでは、セマンティクスの観点からHTML5マークアップの一般的な間違いと、それらを回避する方法を見ていきます。
HTML5サイトギャラリーのサイトを見て、ユーザーの質問に答えると、HTML5マークアップのあるサイトがたくさんありました。 この記事では、私がよく遭遇するいくつかの間違いと悪いマークアップ手法を紹介し、それらを回避する方法を説明します。
<section>タグをスタイリングのラッパーとして使用しないでください。
私が気づいた最も一般的な問題の1つは、<div>をHTML5構造要素、特に<section>で平凡に置き換えることです。 つまり XHTMLまたはHTML4で次のように見える場合：
<!-- HTML 4 --> <div id="wrapper"> <div id="header"> <h1>My super duper page</h1> <!-- --> </div> <div id="main"> <!-- --> </div> <div id="secondary"> <!-- --> </div> <div id="footer"> <!-- --> </div> </div>
<!-- ! ! --> <section id="wrapper"> <header> <h1>My super duper page</h1> <!-- --> </header> <section id="main"> <!-- --> </section> <section id="secondary"> <!-- --> </section> <footer> <!-- --> </footer> </section>
これは単に間違っています。<section>はラッパーではありません。 この要素は、「 ドキュメントアウトライン 」の作成に使用されるコンテンツのセマンティックブロックを意味し、タイトルを含める必要があります。 ラッピングのための要素が必要な場合は、<body>を回避してみてください（Kroc Camenが提供するものがあります）。 これで追加のラッパーが必要な問題が解決しない場合は、古き良き<div>を使用してください。 HTML5の登場により、 <div>は死んでいません 。この場合、これらは完全に一致します。
上記のすべてを考慮すると、次のようなHTML5を使用して上記の例をマークアップするとよいでしょう。
<body> <header> <h1>My super duper page</h1> <!-- --> </header> <div role="main"> <!-- --> </div> <aside role="complementary"> <!-- --> </aside> <footer> <!-- --> </footer> </body>
使用する要素がわからない場合は、 フローチャートを使用して要素を選択することをお勧めします（ 翻訳者のメモ：エントリの一番下を参照 ）。
必要な場合にのみ<header>および<hgroup>を使用します
これが必要でない場合、コードを書くことは意味がありませんか？ 悲しいかな、私はよく<header>と<hgroup>を必要としない場所で観察します。 <header >要素と<hgroup>要素について詳しく読むことができますが、重要な点について簡単に説明します。
- <header>要素は、導入またはナビゲーション支援のグループを表し、通常はセクション見出しが含まれます
- <hgroup>要素は、一連の要素<h1>-<h6>をグループ化し、複数のレベル（副見出し、代替見出しなど）で構成される場合のセクション見出しを表します
過剰な<header>要素
ドキュメントで<header>要素を複数回使用できることを十分に認識していると思います。 したがって、これはよく見られます：
<!-- ! header ! --> <article> <header> <h1>My best blog post</h1> </header> <!-- --> </article>
<header>に含まれるヘッダー要素が1つだけの場合、その要素は不要です。 この場合、<article>要素はすでにタイトルが「ドキュメントアウトライン」に含まれることを保証しています。また、<header>にはいくつかの要素（定義どおり）が含まれていないため、安全に削除できます。 これだけで十分です：
<article> <h1>My best blog post</h1> <!-- --> </article>
<hgroup>の誤用
そして再びヘッダーについて：<hgroup>要素の誤った使用をよく目にします。 次の場合は、<hgroup>を<header>と一緒に使用しないでください。
- タイトルは1つだけです
- <hgroup>はそれ自体で優れています（つまり、<header>なし）。
最初のケース：
<!-- ! hgroup --> <header> <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 --> <header> <hgroup> <h1>My company</h1> <h2>Established 1893</h2> </hgroup> </header>
唯一の子が<header> 'で、これが<hgroup>の場合、なぜ<header>が必要ですか？ <header>に追加の要素がない場合（つまり、<hgroup>の姉妹）、単に<header>を削除します。
<hgroup> <h1>My company</h1> <h2>Established 1893</h2> </hgroup>
<hgroup>要素の詳細については、 こちらをご覧ください 。
<nav>のすべてのリンクをフレーム化しないでください
HTML5では、構造化された意味のあるマークアップを作成できる30の新しい要素が導入されました。 しかし、新しいセマンティック要素を乱用しないでください。 残念ながら、これはまさに<nav>で起こることです。 仕様では、次のように<nav>を説明しています。
nav要素は、他のページまたは現在のページの一部にリンクするページのセクション（ナビゲーションリンクのあるセクション）を表します。WHATWG HTML仕様
注：すべてのリンクグループをnav要素に配置する必要はありません。 基本的なナビゲーションに使用する必要があります。 多くの場合、フッターにサイトのさまざまなページ（ホーム、ヘルプ、利用規約など ）へのリンクの小さなリストを配置します。 この場合、1つのフッターで十分です。 navの使用を妨げるものはありませんが、これは必要ありません。
キーフレーズは「基本的なナビゲーション」です。 あなたはメインのものが何を意味するかについて長い間議論することができますが、私にとっては：
- 一次ナビゲーション
- サイト検索
- 二次ナビゲーション（物議を醸す）
- ページ内ナビゲーション（長い記事内など）
この場合、正しいものとそうでないものを判断することは困難ですが、<nav>で結論付ける価値はないと思います。
- ページ切り替え
- ソーシャルリンク（ただし、ソーシャルリンクがメインナビゲーションである場合は例外が可能です。たとえば、 about.meやflavours.meのようなサイト）
- タグを投稿
- 投稿カテゴリ
- 三次ナビゲーション
- ボリュームフッター
<nav>のリンクのリストをフレーム化するかどうかわからない場合は、「これはメインナビゲーションですか？」という質問を自問してください。 以下を考慮してください。
- 「見出し<h x >の<section>も同様だと思われる場合は、<nav>を使用しないでください」-IRCのHixie
- 便宜上「Go to」を追加する必要がありますか？
これらの質問に対する答えが「いいえ」の場合、これは明らかに<nav>の場所ではありません。
<figure>要素を使用する際の一般的なエラー
ああ、<図>。 この要素とその<figcaption>の適切な使用に対処するのは簡単ではありません。 このアイテムに関するいくつかの一般的なエラーを見てみましょう。
すべての画像<図>ではありません
以前、必要以上のコードを書かないようにアドバイスしました。 同様の状況があります。 <figure>で各写真がフレームされているサイトに出会いました。 より多くのマークアップを使用するためだけに、より多くのマークアップを使用する必要はありません。 あなたは自分自身のためにより多くの作品を作成するだけですが、コンテンツの説明を改善しないでください。
仕様では、<figure>を「スタンドアロンコンテンツ。おそらく見出しがあり、通常は個別のフロー要素があります」と説明しています。 ここに、<figure>のすべての美しさがあります-要素は、メインコンテンツからサイドバーなどに簡単に移動できます。
上記の要素選択フローチャートは、<figure>の処理に役立ちます。
画像がプレゼンテーションの読み込みのみを行い、ドキュメント内のどこでも参照されていない場合、これは間違いなく<figure>ではありません。 そうでない場合は、「このイメージは現在のコンテキストで理解するために必要ですか？」という質問を自問してください。 そうでない場合、これは明らかに<figure>（おそらく<aside>）ではありません。 その場合は、「これをアプリケーションに移動できますか？」と自問してください。 両方の質問に対する答えが「はい」の場合、おそらく<figure>で十分です。
あなたのロゴは<図>ではありません
ロゴについても同じことが言えます。 多くの場合、このアプリケーションが表示されます。
<!-- ! ! --> <header> <h1> <figure> <img src="/img/mylogo.png" alt="My company" class="hide" /> </figure> My company name </h1> </header>
<!-- ! ! --> <header> <figure> <img src="/img/mylogo.png" alt="My company" /> </figure> </header>
追加するものはありません。 これは単に真実ではありません。 ロゴを<h1>に含めるべきかどうかについて長い間議論することができますが、今はそのことについて話していません。 本当の間違いは、<figure>要素の悪用です。 <figure>は、ドキュメントでリンクする場合にのみ使用してください。 ロゴをどこでも参照することはまずありません。 これで十分：
<header> <h1>My company name</h1> <!-- - --> </header>
<figure>は単なる画像ではありません
<figure>要素を誤解するもう1つの一般的なケースは、写真にのみ使用できるという仮定です。 しかし、これはそうではありません。 <figure>には、ビデオ、オーディオ、グラフィック（SVGなど）、引用、表、コードブロック、詩、またはこれらの任意の組み合わせを含めることができます。 写真だけで<figure>を使用することに制限しないでください。 Web標準の支持者としての目標は、マークアップのコンテンツを記述することです。
少し前に、<figure>要素について詳しく説明しました。 もっとよく理解したいときや思い出をリフレッシュしたいときは、読むことをお勧めします。
不要なタイプ属性を使用しないでください
これはおそらく、HTML5ギャラリーで遭遇する最も一般的な問題です。 これは間違いではありませんが、これを避ける方が良いと思います。
HTML5では、<script>および<style>要素のtype属性を指定する必要はありません。 CMSによって自動的に追加される場合、それらを取り除くことは困難ですが、自分で記述するか、テンプレートを管理できる場合、それらをコードに含めることは意味がありません。 なぜなら デフォルトでは、すべてのブラウザはすべてのスクリプトが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>
とりわけ、エンコードの指定に費やされるコードの量を減らすこともできます。 Dive into HTML5のMark Pilgrimのセマンティクスの章では、これらすべてのプラクティスについて説明しています。
フォーム属性の誤った使用
HTML5には多くの新しいフォーム属性が導入されていることを既に知っている必要があります。 近いうちにそれらを検討しますが、今では価値のない方法を簡単に説明します。
論理属性
マルチメディア要素やその他の要素にも論理的な属性があります。 私が説明する規則はそれらに適用されます。
新しいフォーム属性のいくつかは論理的です。 マークアップに存在することで、要素の動作が決まります。 これを含む：
- オートフォーカス
- オートコンプリート
- 必要な
私はめったにそれらを見ませんが、必要な場合、これを見ました：
<!-- ! ! --> <input type="email" name="email" required="true" />
<!-- --> <input type="email" name="email" required="1" />
最終的に、それは悪いものを脅かしません。 クライアントHTMLパーサーは、マークアップの必須属性を満たし、対応するルールを適用します。 しかし、異なる方法でrequired = "false"と記述した場合はどうでしょうか。
<!-- ! ! --> <input type="email" name="email" required="false" />
パーサーは、ユーザーが指示しないにもかかわらず、必要な属性を表示し、適切な動作を適用します。 明らかに、これはあなたが望んでいたものではありません。
論理値は3つの方法で適用できます（2番目と3番目はXHTMLの特徴です）
- 必要な
- 必須= ""
- required = "required ="
上記の例に適用されるように、これを（HTMLで）書くことができます。
<input type="email" name="email" required />