セマンティックHTMLとは

セマンティック HTML とは、コンテンツの構造 (コンテンツ セマンティクス) に従って、適切なタグ (コード セマンティクス) を選択することで、開発者がより洗練されたコードを読み書きしやすくすると同時に、ブラウザがクローラと機械はうまく解析します。セマンティゼーションは SEO にとって有益であり、検索エンジン クローラーが Web ページをよりよく理解し、より効果的な情報を取得し、重要度を高めるのに役立ちます。

このチュートリアルの動作環境: Windows 7 システム、HTML5 バージョン、Dell G3 コンピューター。

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

#

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

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

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

3. HTML コードを記述するときに注意すべき点は何ですか?

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

推奨チュートリアル: 「

html ビデオ チュートリアル 」

以上がセマンティックHTMLとはの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。