コードをセマンティックにする HTML のヒント

HTML のセマンティクスはありふれた問題のようです。Google で検索すると、セマンティクスに関する記事がたくさん見つかります。なぜセマンティック タグが必要なのでしょうか。HTML の各タグにはそれぞれ特定の意味があり、セマンティクスとは、適切なタグを適切な場所で使用することであり、人間と機械 (機械はブラウザーと検索エンジンとして考えることができます) が一目で理解しやすいようにすることを意味します。私の説明がわかりにくい場合は、Google で検索してください。

適切なラベルを適切な場所で使用するにはどうすればよいでしょうか?

これは単純な理解の論理です。例えば、h1～h6 タグはタイトルに、ul は順序なしリストに、ol はコンテンツ付きリストに、dl はリストの定義に、em と strong タグは強調に使用します... 端的に言うと、HTML タグのそれぞれの英語の解釈によって、そのセマンティクスが決まります (この記事の後半で、よく使われる HTML タグの英語の解釈の比較表を参考として掲載します)。

人間と機械の両方にとって明らかなことは何でしょうか?

HTML ページがセマンティックかどうかを確認する最良の方法は、ページから CSS リンクを削除して、ページ構造が適切かどうか、またページがまだ読み取り可能であるかどうかを確認することです。なぜそう言えるのでしょうか? ブラウザにはデフォルトのスタイルがあることは誰もが知っています (Chrome の Web 開発者ツールを使用することをお勧めします)。  プラグイン、またはFirefox Web Developer  たとえば、h1～h6 には、太字/縮小フォント サイズ、上下の余白、ul、ol、dl にはデフォルトの箇条書き、strong にはデフォルトで太字スタイルなどのデフォルト スタイルがあります... したがって、同じページの場合、ページ CSS が削除されても、意味的に整形式の HTML は引き続き適切に機能します。

もう 1 つのポイントは、適切なセマンティック コーディングは検索エンジンにとってより使いやすいということです。検索スパイダーは CSS を認識しませんが、HTML タグは認識できます。

以下に簡単な例を示します。

上記の簡単な例と、CSS 定義のない効果図から、2 つの違いを理解できるはずです。Html5 を学習している場合、ヘッダー、フッター、サイドバー、記事などの要素はすべて新しく追加されたセマンティック タグです。
HTML コーディングのセマンティック化は、高品質のフロントエンド開発への第一歩です。Web 標準への準拠が向上し、スタイルを削除した後もページが整然とした状態を保つことができます。セマンティック化のより詳しい紹介については、Google で検索するか、Adam の「Web フロントエンド開発の実践方法」をお読みください。  第3章。
付録: 中国語と英語のタグ意味の比較表

以下を付け加えておきます

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

適切な HTML タグを選択すると、開発者はより洗練されたコードを読み書きしやすくなり、ブラウザのクローラーやマシンはコードを適切に解析できるようになります。

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

CSS がなくてもページをそのままの状態で見栄え良くするために、ページは適切なコンテンツ構造とコード構造を示すこともできます。
ユーザーエクスペリエンス: たとえば、title と alt は名詞や画像情報を説明するために使用され、label タグは柔軟に使用されます。
SEO に最適: 検索エンジンとの良好な通信を確立すると、クローラーがより有効な情報を取得できるようになります。クローラーはタグを使用して各キーワードのコンテキストと重みを判断します。
他のデバイス (スクリーン リーダー、視覚障害者用リーダー、モバイル デバイスなど) による解析を容易にし、Web ページを意味のある方法でレンダリングします。
チーム開発とメンテナンスを容易にし、セマンティクスをより読みやすくすることは、Web ページの次のステップにおける重要なトレンドです。W3C 標準に従うチームはすべて、差異を減らすためにこの標準に従います。

3. HTML コードを書くときに注意すべきことは何ですか?

1. div や span など、意味的に無意味なタグはできる限り使用しないでください。
2. セマンティクスが明らかでない場合、div または p のどちらかを使用できる場合は、p を使用するようにしてください。p はデフォルトで上下のスペースを持っているため、特殊な端末との互換性に役立ちます。
3. 純粋なスタイル タグや、仕様でサポートされていないタグ (b、font、u、center、strike、menu など) は使用しないでください。代わりに CSS 設定を使用してください。
4. 強調する必要があるテキストは、strong タグまたは em タグに含めることができます (ブラウザのデフォルト スタイルです。CSS で指定できる場合は使用しないでください)。strong のデフォルト スタイルは太字 (b は使用しないでください)、em は斜体 (i は使用しないでください) です。
5. 表を使用する場合は、タイトルには caption、ヘッダーには thead、本文には tbody、フッターには tfoot を使用します。表のヘッダーと一般セルは区別する必要があり、表のヘッダーには th を使用し、セルには td を使用します。
6. フォーム フィールドは fieldset タグで囲み、フォームの目的は legend タグで説明する必要があります。
7. 各入力タグに対応する説明文はラベルタグを使用する必要があり、入力にid属性を設定し、ラベルタグにfor=someldを設定することで、説明文を対応する入力に関連付けることができます。
8. 特定のタグの属性を省略しないでください。<img> タグの alt 属性は、画像が正常に表示できない場合に代替テキストとして使用されます。<a> タグの title 属性は説明情報として使用でき、マウスをホバーするとプロンプトメッセージが表示されます。

Yahoo からのインタビューの質問:

<P> 私が書くのはHTMLではなく、孤独です。 <br><br> 私は言った:<br>私に執着しないで、私はただの伝説よ

問題には次のようなものがあります:

1. html と xhtml 標準の違いは、xhtml は厳密な構造を持ち、タグは閉じる必要があり、単一のタグは末尾に / を追加して閉じる必要があり、タグは小文字でなければならないことです。
2. 構造とスタイルの分離。スタイルを制御するために <br/> を使用しないでください。構造を合理的に設計します。改行するには各段落に p を追加します。スタイルは CSS を使用して実装する必要があります。
3. タグを合理的に使用し、タグの意味に注意してください。略語は <abbr> でマークでき、「I」は <cite> でマークでき、引用されたスピーチの内容は <q> でマークできます。

//コード参照は以下のとおり
<p>私が書いているのは <abbr title="Hypertext Markup Language">HTML</abbr> ではなく、孤独です。 </p>
<p><cite>私は</cite>こう言いました: <q>私に執着しないでください。私はただの伝説です</q></p>

上記は、コードをセマンティック化する HTML テクニックの詳細な内容です。HTML セマンティック化の詳細については、123WORDPRESS.COM の他の関連記事をご覧ください。