HTML セマンティック タグ_html/css_WEB-ITnose

ご存知のとおり、今日の Web ページは HTML、CSS、JS の 3 つの主要な要素で構成されています。HTML は Web ページ全体の骨格であり、それに基づいて JS が変更されます。スケルトンを使用すると、ウェブページが血と肉を持った「人」になり、動くことができます。 HTML のデザインに無理があると、見た目をいくら変えても、明らかな欠点は隠せない、骨が弱い人のようなものです。

HTML タグにはすべてセマンティクスに関する考慮事項があります。たとえば、table のセマンティクスは「テーブル」、tr は「セル行」、td は「セル」です。 Web ページのタグが適切なセマンティクスを持っているかどうかを判断する簡単な方法は、「スタイルを削除して、Web ページの構造が適切で整然としているかどうか、そしてまだ非常に読みやすいかどうかを確認する」です。適切なセマンティクスを持つページの場合、h タグは完全かつ隙間なく整然としていて、h1、h2、h3、h4 などの順序で配置されている必要があります。 Web Developer または firebug を使用して作業中に表示できます。 W3C の公式 Web サイト http://www.w3.org/ は、優れたセマンティクスの典型的な広告です。

以下は、スタイルなしの W3C 公式 Web サイトです

スタイルを解除した後の Web ページの読みやすさを確保し、Web 標準に準拠するには、次の点に注意する必要があります:

1 使用する数は最小限に抑えます非セマンティックなタグ div を可能な限り使用し、span;

2 セマンティクスが明確でない場合は、div または p を使用できます。p にはデフォルトで上下のスペースがあり、特殊な端末との互換性に有利です。

3 : b、font、u などの純粋なスタイル タグを使用せず、代わりに CSS 設定を使用します。

4 囲まれ、尻尾はT足で囲まれます。テーブルヘッダーは通常のセルと区別する必要があります。テーブルヘッダーには th を使用し、セルには td を使用します。

6 フォームフィールドは fieldset タグで囲む必要があり、フォームの目的を説明するには凡例タグを使用する必要があります。各入力タグにテキストは label タグを使用する必要があり、input に id 属性を設定し、label タグに for=someld を設定することで、説明テキストが対応する入力に関連付けられます。