HTMLの意味理解

1. HTML セマンティクスとは何ですか?

<基本的には、タイトル (H1 ～ H6)、リスト (li)、強調 (em) など、いくつかの主要なタグを中心に展開します。>

コンテンツの構造（コンテンツセマンティクス）に従って、適切なタグ（コードセマンティクス）を選択すると、開発者はより洗練されたコードを読み書きしやすくなり、同時にブラウザのクローラーやマシンがコードを適切に解析できるようになります。

2. なぜセマンティクスなのか?

• CSS を使用せずにページに適切なコンテンツ構造とコード構造を表示するには: 裸で実行したときに見栄えを良くするため。
ユーザー エクスペリエンス: たとえば、タイトルと alt は名詞の説明や画像情報の説明に使用され、ラベル タグを柔軟に使用できます。
• SEO に有利: 検索エンジンとの良好なコミュニケーションを確立すると、クローラーはより効果的な情報をクロールできます。クローラーはタグに依存して各キーワードのコンテキストと重みを判断します。
他のデバイス (スクリーン リーダー、ブラインド リーダー、モバイル デバイスなど) が Web ページを意味のある方法でレンダリングするための利便性
チームの開発と保守が容易になり、セマンティクスがより読みやすくなります。これは、Web ページの次のステップでは、すべてのチームがこの標準に従うため、差別化が減少する可能性があります。
• 3. HTMLコードを書くときに注意すべきことは何ですか?

非セマンティックなタグ div と span をできるだけ少なく使用します

セマンティクスが明確でない場合は、div または p を使用できます。p にはデフォルトで上下のスペースがあり、特殊な端末との互換性にとって有益であるため、p を使用してみてください。
• b、font、u などの純粋なスタイル タグを使用せず、代わりに CSS 設定を使用してください。
• 強調する必要があるテキストは、strong タグまたは em タグに含めることができます (ブラウザーのデフォルトのスタイル。CSS で指定できる場合は使用しないでください)。strong のデフォルトのスタイルは太字です (b は使用しないでください)。 em は斜体です (i は使用しないでください)。
表を使用する場合は、タイトルに caption、ヘッダーに thead、メイン部分に tbody、末尾に tfoot を使用します。テーブルヘッダーは通常のセルと区別する必要があります。テーブルヘッダーには th を使用し、セルには td を使用します。
• フォームフィールドはfieldsetタグで囲み、凡例タグを使用してフォームの目的を説明する必要があります。
各入力ラベルに対応する説明文はlabelタグを使用する必要があり、inputにid属性を設定し、labelタグにfor=someldを設定することで説明文が対応する入力に関連付けられます。
• 4. HTML5 に追加された新しいセマンティックタグについて詳しく説明してください。

こちらのフロントエンドマスターのブログをご覧ください。