今回は、H5 のさまざまな間違った使い方についてまとめました。実際の事例を見てみましょう。
1. p の代わりにセクションを使用しないでください
タグを使用するときによくある間違いの 1 つは、HTML5 の とみなすことです。これは (スタイルの) 置き換えとして直接使用されます。 XHTML や HTML4 では、次のようなコードがよく見られます: そして HTML5 では、次のようになります: これらのコードをコピーしないでください。これは間違っています！ この使用法は間違っています: ** はスタイル コンテナではありません。 **section 要素は、ドキュメントの概要を作成するために使用されるコンテンツの意味部分を表します。ヘッダーが含まれている必要があります。ページ コンテナとして機能する要素 (HTML や XHTML スタイルなど) を探している場合は、Kroc Camen が提案しているように、スタイルを body 要素に直接記述することを検討してください。それでも追加のスタイル コンテナが必要な場合は、p. に進んでください。 上記の考えに基づいて、HTML5 といくつかの ARIA ロール機能の正しい使用例を以下に示します (独自の設計に従って、p を追加する必要がある場合もあります) 2. ヘッダーは次の場合にのみ使用します。 hgroup で書かなくても良いタグを書いても当然意味がありません。残念ながら、ヘッダーと hgroup が目的もなく悪用されているのをよく見かけます。詳細については、header 要素と hgroup 要素に関する 2 つの記事を参照してください。内容を次のように簡単に要約します。 header 要素は、ヘッダー ヘッダーにサブヘッダー、サブタイトル、各種ロゴなどの複数の層の構造がある場合、hgroup を使用して h1 ～ h6 要素をセクションのヘッダーとして結合します header Abuse Since headersドキュメント内で複数回使用できるため、このコード スタイルが人気がある可能性があります: ヘッダー要素にヘッダー要素が 1 つだけ含まれている場合は、ヘッダー要素を破棄します。 category 要素はヘッダーがドキュメントの概要に表示されることをすでに保証しており、ヘッダーには複数の要素を含めることはできません (上記で定義したとおり) ので、なぜ余分なコードを記述する必要があります。単純に次のように書きます: の誤った使用法 ヘッダーの話題では、hgroup の誤った使用法をよく見かけます。場合によっては、hgroup と header を同時に使用すべきではありません: サブヘッダーが 1 つしかない場合、 hgroup は単独で正常に機能します。 。 。これはナンセンスではないでしょうか 最初の質問は通常次のようなものです: この場合は、hgroup を削除して見出しをスムーズに実行するだけです。 2 番目の質問は、別の不要な例です: このコードをコピーしないでください! ここにはヘッダーは必要ありません –> ヘッダーの唯一の子要素が hgroup である場合、ヘッダーは依然として必要です。 馬？ヘッダーに他の要素 (複数の hgroup など) がない場合は、ヘッダーを直接削除してください。 3. すべてのリストのようなリンクをナビゲーションに配置しないでください HTML5 に 30 の新しい要素が導入されたことにより (最初の出版時点で)、私たちはセマンティックと構造化された要素を構築しています。ラベルの選択も少し不注意になってしまいました。とはいえ、ハイパーセマンティック要素を乱用すべきではありません。残念ながら、ナビはそのような悪用の一例です。 nav 要素の仕様は次のように説明されます。 注: ページ上のすべてのリンクを nav 要素に配置する必要はありません。この要素は、メインのナビゲーション ブロックとして使用することを目的としています。具体的な例を挙げると、サービス利用規約、ホームページ、著作権声明ページなど、フッターには多くのリンクが含まれることがよくあります。このような状況にはフッター要素自体で十分に対応できますが、ここでは nav 要素も使用できますが、通常は不要であると考えられます。 关键的词语是“主要的”导航。当然我们可以互相喷上一整天什么叫做“主要的”。而我个人是这样定义的： 主要的导航 站内搜索 二级导航（略有争议） 页面内导航（比如很长的文章） 既然并没有绝对的对错，所以根据一个非正式投票以及我自己的解释，以下的情况，不管你放不放，我反正不放在中： 分页控制 社交链接（虽然有些社交链接也是主要导航，比如“关于”“收藏”） 博客文章的标签 博客文章的分类 三级导航 过长的footer 如果你不确定是否要将一系列的链接放在nav中，问你自己：“它是主要的导航吗？”为了帮助你回答这个问题，考虑以下首要原则： 如果使用section和hx也同样合适，那么不要用nav — Hixie on IRC 为了方便访问，你会在某个“快捷跳转”中给这个nav标签加一个链接吗？ 如果这些问题的答案是“不”，那就跟鞠个躬，然后独自离开吧。 四、figure元素的常见错误 figure以及figcaption的正确使用，确实是难以驾驭。让我们来看看一些常见的错误， 不是所有的图片都是figure 上文中，我曾告诉各位不要写不必要的代码。这个错误也是同样的道理。我看到很多网站把所有的图片都写作figure。看在图片的份上请不要给它加额外的标签了。你只是让你自己蛋疼，而并不能使你的页面内容更清晰。 如果纯粹只是为了呈现的图，也不在文档其他地方引用，那就绝对不是 。其他视情况而定，但一开始可以问自己：“这个图片是否必须和上下文有关？”如果不是，那可能也不是（也许是个）。继续：“我可以把它移动到附录中吗？”如果两个问题都符合，则它可能是。 进一步的说，logo也不适用于figure。下面是我常见的一些代码片段： 没什么好说的了。这就是很普通的错误。我们可以为logo是否应该是H1标签而互相喷到牛都放完回家了，但这里不是我们讨论的焦点。真正的问题在于figure元素的滥用。figure只应该被引用在文档中，或者被section元素围绕。我想你的logo并不太可能以这样的方式引用吧。很简单，请勿使用figure。你只需要这样做: Figure也不仅仅只是图片 另一个常见的关于figure的误解是它只被图片使用。figure可以是视频，音频，图表，一段引用文字，表格，一段代码，一段散文，以及任何它们或者其他的组合。不要把figure局限于图片。web标准的职责是精确的用标签描述内容。 五、不要使用不必要的type属性 这是个常见的问题，但并不是一个错误，我认为我们应该通过最佳实践来避免这种风格。 在HTML5中，script和style元素不再需要type属性。然而这些很可能会被你的CMS自动加上，所以要移除也不是那么的轻松。但如果你是手工编码或者你完全可以控制你的模板的话，那真的没有什么理由再去包含type属性。所有的浏览器都认为脚本是javascript而样式是css样式，你没必要再多此一举了。 其实只需要这样写： 甚至指定字符集的代码都可以省略掉。Mark Pilgrim在pe into HTML5的语义化一章中作出了解释。 六、form属性的错误使用 HTML5引入了一些form的新属性，以下是一些使用上的注意事项： 布尔属性 一些多媒体元素和其他元素也具有布尔属性。这里所说的规则也同样适用。 autofocus autocomplete required 坦白的说，我很少看到这样的。以required为例，常见的是下面这种： 严格来说，这并没有大碍。浏览器的HTML解析器只要看到required属性出现在标签中，那么它的功能就会被应用。但是如果你反过来写equired=”false”呢？ 解析器仍然会将required属性视为有效并执行相应的行为，尽管你试着告诉它不要去执行了。这显然不是你想要的。 有三种有效的方式去使用布尔属性。（后两种只在xthml中有效） required required=”” required=”required” 上述例子的正确写法应该是:
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！ 推荐阅读： 以上がH5 のさまざまな間違った使い方のまとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。<!-- HTML 4-style code --><p id="wrapper">
<p id="header">
<h1>My super duper page</h1>
Header content </p>
<p id="main">
Page content </p>
<p id="secondary">
Secondary content </p>
<p id="footer">
Footer content </p></p>
ログイン後にコピー<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>
ログイン後にコピー<body><header>
<h1>My super duper page</h1>
<!-- Header content --></header><p role="main">
<!-- Page content --></p><aside role="complementary">
<!-- Secondary content --></aside><footer>
<!-- Footer content --></footer></body>
ログイン後にコピー
このコードをコピーしないでください。ここにはヘッダーは必要ありません -> <header>
<h1>My best blog post</h1>
</header>
<!-- Article content --></article>
ログイン後にコピー<article>
<h1>My best blog post</h1>
<!-- Article content --></article>
ログイン後にコピー
请不要复制这段代码!此处不需要hgroup –>
<hgroup>
<h1>My best blog post</h1>
</hgroup>
<p>by Rich Clark</p></header>
ログイン後にコピー<header>
<h1>My best blog post</h1>
<p>by Rich Clark</p></header>
ログイン後にコピー <hgroup>
<h1>My company</h1>
<h2>Established 1893</h2>
</hgroup></header>
ログイン後にコピー<hgroup>
<h1>My company</h1>
<h2>Established 1893</h2></hgroup>
ログイン後にコピー
nav 要素は、他のページまたはこのページの他の部分にリンクするページ内のブロックを表します。
规范中将figure描述为“一些流动的内容，有时候会有包含于自身的标题说明。一般在文档流中会作为独立的单元引用。”这正是figure的美妙之处——它可以从主内容页移动到sidebar中，而不影响文档流。
这些问题也包含在之前提到的HTML5 element flowchart中。
Logo并不是figure<!-- 请不要复制这段代码!这是错的 --><header>
<h1>
<figure>  </figure>
My company name </h1></header>
<!-- 请不要复制这段代码!这也是错的 --><header>
<figure>  </figure></header>
ログイン後にコピー<header>
<h1>My company name</h1>
<!-- More stuff in here --></header>
ログイン後にコピー
<!-- 请不要复制这段代码!它太冗余了! --><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>
ログイン後にコピー
有一些新的form属性是布尔型的，意味着它们只要出现在标签中，就保证了相应的行为已经设置。这些属性包括：
<!-- 请不要复制这段代码! 这是错的! --><input type="email" name="email" required="true" /><!--
另一个错误的例子 --><input type="email" name="email" required="1" />
ログイン後にコピー<!-- 请不要复制这段代码! 这是错的! --><input type="email" name="email" required="false" />
ログイン後にコピー
<input type="email" name="email" required />
ログイン後にコピー
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
