ホームページ > 記事 > ウェブフロントエンド > html5 でよくある間違った使用法

html5 でよくある間違った使用法

王林転載: 2021-01-13 10:47:532063ブラウズ

html5 でよくある間違った使用法

HTML5 でよくある 6 つの間違った使用法:

1. div

の代わりにセクションを使用しないでください (学習ビデオの共有: html ビデオチュートリアル )

タグを使用するときによくある間違いの 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 の追加も必要になる場合があることに注意してください)

<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>

どの要素を使用するかまだよくわかりません。その場合は、HTML5 セクション化コンテンツ要素のフローチャートを参照することをお勧めします。
2. 必要な場合にのみ header と hgroup を使用します。
記述する必要のないタグを記述することは、もちろん意味がありません。残念ながら、ヘッダーと hgroup が目的もなく悪用されているのをよく見かけます。詳細については、header 要素と hgroup 要素に関する 2 つの記事を参照してください。内容を次のように簡単に要約します:

header 要素は、ヘッダーとして使用されることが多い、導入またはナビゲーションの補助テキストのセットを表します。ヘッダーがサブヘッダー、サブタイトル、各種ロゴなど複数の階層構造になっている場合は、hgroup を使用して h1 ～ h6 要素をセクションのヘッダーとして結合します。
ヘッダーの悪用

ヘッダーはドキュメント内で複数回使用できるため、このコーディングスタイルが人気がある可能性があります:
このコードをコピーしないでください。ここではヘッダーは必要ありません ->

    <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 番目の質問は、別の不要な例です:
このコードをコピーしないでください! ここにはヘッダーは必要ありません –>

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

ヘッダーが唯一の子要素である場合、hgroup です。では、ヘッダーで他に何をする必要があるでしょうか?ヘッダーに他の要素 (複数の hgroup など) がない場合は、ヘッダーを直接削除してください。 (Web フロントエンド学習交流グループ: 328058344 チャット禁止、興味がない限り入場禁止!)

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

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

HTML5 の 30 新しい要素 (最初の出版時点で) により、セマンティックタグと構造化タグを構築する際の選択もいくぶん不注意になりました。とはいえ、ハイパーセマンティック要素を乱用すべきではありません。残念ながら、ナビはそのような悪用の一例です。 nav 要素の仕様は次のように説明されます:
nav 要素は、他のページまたはこのページの他の部分にリンクするページ内のブロック、つまりナビゲーション接続を含むブロックを表します。
注: ページ上のすべてのリンクを nav 要素に配置する必要はありません。この要素は、メインのナビゲーションブロックとして使用することを目的としています。具体的な例を挙げると、サービス利用規約、ホームページ、著作権声明ページなど、フッターには多くのリンクが含まれることがよくあります。このような状況には footer 要素自体で十分対応できますが、nav 要素もここで使用できますが、通常は不要であると考えられます。
キーワードは「メイン」ナビゲーションです。もちろん、「プライマリー」が何を意味するのかをお互いに話し合って、一日中過ごすこともできました。そして、私は個人的に次のように定義しています:

メインナビゲーション
サイト検索
2 つのレベルナビゲーション (少し議論の余地あり)
ページ内ナビゲーション (非常に長い記事など)
絶対的な正誤はないので、非公式の投票と私自身の説明によれば、次の状況では、あなたがそれを置くかどうかにかかわらず、私はとにかくそれを置きません。
#ページング制御
ソーシャルリンク (ただし、一部のソーシャルリンクは「概要」や「お気に入り」などの主要なナビゲーションでもあります)
ブログ投稿のタグ
ブログ記事の分類
过长的footer
如果你不确定是否要将一系列的链接放在nav中，问你自己：“它是主要的导航吗？”为了帮助你回答这个问题，考虑以下首要原则：
如果使用section和hx也同样合适，那么不要用nav — Hixie on IRC
为了方便访问，你会在某个“快捷跳转”中给这个nav标签加一个链接吗？
如果这些问题的答案是“不”，那就跟

四、figure元素的常见错误

figure以及figcaption的正确使用，确实是难以驾驭。让我们来看看一些常见的错误，
不是所有的图片都是figure
上文中，我曾告诉各位不要写不必要的代码。这个错误也是同样的道理。我看到很多网站把所有的图片都写作figure。看在图片的份上请不要给它加额外的标签了。你只是让你自己蛋疼，而并不能使你的页面内容更清晰。
规范中将figure描述为“一些流动的内容，有时候会有包含于自身的标题说明。一般在文档流中会作为独立的单元引用。”这正是figure的美妙之处——它可以从主内容页移动到sidebar中，而不影响文档流。
这些问题也包含在之前提到的HTML5 element flowchart中。
如果纯粹只是为了呈现的图，也不在文档其他地方引用，那就绝对不是

。其他视情况而定，但一开始可以问自己：“这个图片是否必须和上下文有关？”如果不是，那可能也不是（也许是个）。继续：“我可以把它移动到附录中吗？”如果两个问题都符合，则它可能是。
Logo并不是figure
进一步的说，logo也不适用于figure。下面是我常见的一些代码片段：

<!-- 请不要复制这段代码!这是错的 --><header>
    <h1>
        <figure> ![My company](/img/mylogo.png) </figure>
        My company name </h1></header>

<!-- 请不要复制这段代码!这也是错的 --><header>
    <figure> ![My company](/img/mylogo.png) </figure></header>

另一个常见的关于figure的误解是它只被图片使用。figure可以是视频，音频，图表，一段引用文字，表格，一段代码，一段散文，以及任何它们或者其他的组合。不要把figure局限于图片。web标准的职责是精确的用标签描述内容。

五、不要使用不必要的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的语义化一章中作出了解释。

六、form属性的错误使用

HTML5引入了一些form的新属性，以下是一些使用上的注意事项：
布尔属性
一些多媒体元素和其他元素也具有布尔属性。这里所说的规则也同样适用。
有一些新的form属性是布尔型的，意味着它们只要出现在标签中，就保证了相应的行为已经设置。这些属性包括：

autofocus
autocomplete
required

坦白的说，我很少看到这样的。以required为例，常见的是下面这种：

<!-- 请不要复制这段代码! 这是错的! --><input type="email" name="email" required="true" /><!--

 另一个错误的例子 --><input type="email" name="email" required="1" />

严格来说，这并没有大碍。浏览器的HTML解析器只要看到required属性出现在标签中，那么它的功能就会被应用。但是如果你反过来写equired=”false”呢？

<!-- 请不要复制这段代码! 这是错的! --><input type="email" name="email" required="false" />

解析器仍然会将required属性视为有效并执行相应的行为，尽管你试着告诉它不要去执行了。这显然不是你想要的。
有三种有效的方式去使用布尔属性。（后两种只在xthml中有效）

required
required=””
required=”required”

上述例子的正确写法应该是:

<input type="email" name="email" required />

html5 でよくある間違った使用法

関連記事