HTMLとその関連するフロントエンドフレームワークのセマンティクスを深く分析する

この記事では、主にHTMLのセマンティクスの詳細な分析と、それに関連するフロントエンドフレームワークを紹介します。シンプルなHTMLにも素晴らしい知識があります！それを必要とする友達は、セマンティクスに関する次の質問を参照できます

セマンティクスは、サインとシンボルの関係と、それらが表す意味を研究します。言語学では、主に言語のこれらのマーカー（単語、フレーズ、音など）の意味を研究しています。フロントエンド開発の分野では、セマンティクスは主にHTML要素、属性、および属性値（Microdataなどの拡張機能を含む）によって合意された意味を含みます。仕様で一般的に使用されるこれらの正式な条約セマンティクスは、プログラム（および後に開発に参加する人）がウェブサイトのあらゆる側面に関する情報をよりよく理解するのに役立ちます。ただし、これらの要素、属性、属性値のセマンティクスが正式にされている場合でも、開発者の適応性と共同選択の結果に従う必要があります。これにより、正式な条約セマンティクスが将来変更されることが可能になります（これはHTMLデザインの原則の1つです）。

セマンティックHTMLを書くという原則を順守することは、現代の専門的なフロントエンド開発の基礎の1つです。セマンティクスのほとんどは、現在または予想されるコンテンツプロパティに関連しています（H1要素、Lang属性、タイプ属性の電子メール値、Microdataなど）。

ただし、すべてのセマンティクスがコンテンツ指向である必要はありません。クラス名はセマンティックにすることはできません。それがどんな名前であっても、彼らは意味と目的を持っている必要があります。クラス名のセマンティクスは、それらのHTML要素とは異なる場合があります。 HTML要素のグローバルセマンティクス、特定のHTML属性、マイクロダタなどを使用してから、Webサイトまたはアプリケーションのローカル固有のセマンティクスを使用してそれらを区別できます。これらの特定のセマンティクスは通常、クラス属性などの属性値に含まれます。

これは、HTML5仕様のクラスプロパティに関する章で、ベストプラクティスが繰り返されますが...

…開発者は、クラス属性の値を使用して、実際のコンテンツを説明するものを説明することをお勧めします。

...そうする固有の理由はありません。実際、この方法が大規模なWebサイトまたはアプリケーションに適用されると、多くの場合、障壁になります。

HTML要素やその他の属性はすでにコンテンツレイヤーセマンティクスを提供しています

機械や訪問者の場合、クラス名が明らかにできる、またはnoでもない有用なセマンティック情報はほとんどありません。それがすでに合意されている名前の小さな部分でない限り（マシンで読みやすい）-Mircoformats

クラス名の主な目的は、CSSとJavaScriptのフックになることです。パフォーマンスと動作をページに追加する必要がない場合は、HTMLにクラス名を追加する必要がない場合があります

クラス名は、開発者に有用な情報を伝える必要があります。 DOMスニペットを読むと、特定のクラス名の特定の役割を理解するのに役立ちます。特に、複数人のコラボレーション開発チームでは、フロントエンド開発者がHTMLコンポーネントを扱っているだけではありません。

非常に簡単な例を見てみましょう：