避けるべき5つの一般的なHTMLの間違い

1.セマンティックヘッダーとフッター
Divにはセマンティック構造がありません。 divを使用してヘッダーまたはフッター構造を作成する代わりに、「header」および「footer」要素を使用します。

これをしないでください

<div id="header">
...
</div>
<div id="footer">
...
</div>

これを行う

<header>
...
</header>
<footer>
...
</footer>

2.Figure要素を使用します
画像にキャプションを追加する必要がある場合は、「figure」要素を「figcaption」要素と組み合わせて使用​​します。

これをしないでください

<img src="image url" alt="image description" />
<p> Lorem Ipsum Description </p>

これを行う

<figure>
<img src="image url" alt="image description" />
<figcaption>
         <p> Lorem Ipsum Description </p>
</figcaption>
</figure>

3.太字または斜体のタグを使用しないでください
「b」タグと「i」タグは表示タグであり、意味的な意味はありません。代わりに、CSSのfont-weight / font-styleを変更するか、「strong」または「em」要素を使用してください。

これをしないでください

<b>Bold</b>
<i>Italics</i>

これを行う

<strong>Bold</strong>
<em>Italics</em>

4.説明リンクの使用
リンクのテキストは明確で、ユーザーのリダイレクト先を伝える必要があります。ユーザーと検索エンジンの両方が、コンテンツと他のページとの関係をより簡単に理解できます。

これをしないでください

<a href="url">
Check our pricing...
</a>

これを行う

Check our <a href="url"> pricing </a>

5.インラインスタイルの使用
インラインスタイルを書くことは、構造（HTML）をプレゼンテーション（CSS）から分離するという原則に違反します。代わりに、スタイルシートにスタイルを記述してください。

これをしないでください

<h1 style="font-size: 24">
 Header
</h1>

これを行う

h1 {
font-size: 24
}