HTML semantics_html/css_WEB-ITnose についての理解

誰もが、特に一部の求人広告で、意味論という言葉を何度も見たことがあると思います。

実際、私も同じなのですが、これを見るたびに人材紹介会社が真似しているように感じます。実際、彼らは意味論が何であるかを理解できず、まったく重視していません。

だから、私はこのことを真剣に受け止めたことはありません。

しかし、最近この言葉を改めて目にして、この問題はよく考えなければいけないと思いました。それを記録するためにブログを書くだけです。

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

この概念を説明する前に、まず「構造-パフォーマンス-動作」について説明する必要があります。

デカップリングがコードの高度な状態である場合、「構造-パフォーマンス-動作」の原則がフロントデスクのベンチマークになります。

フロントエンド コードがますます大きくなるにつれて、コードの各部分が独自の役割を実行することがますます重要になります。

ご存知のとおり、フロントエンド コードは HTML + CSS + JS によって実装されます。それらは、「構造-パフォーマンス-行動」に対する責任に相当します。

HTML は構造を担当します。

構造は何ですか?簡単に理解すると、構造とはHTMLノードの階層や入れ子関係などです。たとえば、

<header>      <h1></h1></header><section></section><footer></footer>

上記のコードは、ヘッダー、セクション、フッターが同じレベルの文書構造であることを示しています。この場合、h1 はヘッダーの直接の子ノードになります。つまり、これらの間には 1 レベルのネストしかありません。

しかし、問題があります。以下のコードを見てください

<div>     <span style="font-size:16px;font-weight:bold;"></span></div><div></div><div></div>

このコードも構造を示していませんか?さらに、表示効果は上記のものと変わりません (ここでは、H1 がデフォルトの 16px、太字スタイルであると仮定します) では、この段落と比較した上記のコードの利点は何でしょうか?

利点は実際にはセマンティクスにあります。

最初のコードは構造を示すだけでなく、それが head、area ブロック、tail の兄弟であり、head に大きなタイトルがあることも示しています。そして、2 番目のコードはこれを反映できるでしょうか?

結論から言うと、意味化とは、タグの意味とそれに含まれるコンテンツを一致させることです

2. 意味化はなぜ必要なのでしょうか?

3つのポイントをまとめて

1. 機械がコードを理解しやすくすることでSEOに有利になります

上の2つのコードを例に挙げてみましょう。コードの一部、ましてや機械は人間のものです、それが何を意味するのかもわかりません。コードの最初の部分は、人間と機械の両方が理解できます。

検索エンジンのクローラーがコードを理解すると、Web サイトのランキングが自然に上がります。

2. コードがよりシンプルになり、再利用可能になりました。適切なタグを使用すると、CSS または JS を大幅に節約できます。

よりクリーンなコード: これは明白です。コードの 2 番目の部分にはさらに多くのスタイル定義がありますが、最初の部分にはスタイル定義がありません。

再利用性の向上: この HTML 構造が多くの場所で使用される場合、最初の段落にはより適用可能なシナリオが含まれます。たとえば、2 番目のコードは 16 ピクセルの太字で固定されていますが、最初のコードは、これが h1 であることを示しているだけです。h1 を書き換える場合は、h1 スタイルを使用します。あなたのものを使ってください。

CSS の記述を減らす: コードの簡潔さのセクションで説明したので繰り返しません。

js を減らす: これについては、たとえば次のコードを見てください。

<!-- 语义化的form --><form>    <input type="submit" /></form><!-- 非语义化的form --><form>    <a href="javascript:document.forms[0].submit()" >submit</a></form>

非セマンティック フォーム コードでは、タグと js を使用して送信関数を実装します。ただし、さらに js コードを書きました。次に、セマンティック フォームでは Enter キーを押して送信できますが、a タグを使用している場合は Enter キーを押して送信できません。もちろん、完璧なシミュレーションを実現するために、さらに多くの js を記述することもできますが、一体何が意味があるのでしょうか?

3. アクセシビリティの向上

これは主に、CSS をよく理解していないスクリーン リーダーやその他のブラウザ向けです。セマンティック HTML は CSS なしでも読むことができますが、非セマンティック HTML は困難です。

3. コードをセマンティックにする方法は?

w3c 検証では、コードがセマンティックであるかどうかを検証できません。また、コードがセマンティックであるかどうかをテストするツールはありません。

これはどういう意味ですか?これは、言語を学習してもコードのセマンティクスの問題を解決できないことを示しています。

コードをセマンティックにする方法については、方法はあると思います

まず、よく使われるタグを、タグの意味も含めてマスターする必要があります。 ここを参照してください

次に、HTML を記述するときは、この記述が意味論的な要件を満たしているかどうかを常に考えてください。

最後に、私はいくつかの大企業の Web サイト (特に新しいサイト) やオープンソース プロジェクトのコードをよく見ますが、誰もがこれを行っていることはわかっていますが、CSS の書き方や JS の書き方を見るたびに、ちょっと時間を取って、HTML の書き方を見て、なぜこのように書くのか考えてみましょう。

このようにして、HTML コードのセマンティクスは徐々に改善されていくと思います。

つまり、セマンティック HTML コーディングは決して解決できない問題ではなく、継続的に改善していく問題です。一度に学習するのに多くのエネルギーを費やす価値はなく、コツコツと蓄積していく必要があるスキルです。毎日少しずつ改善していきます。

最後に、この記事を読んだ多くの人の最初の反応は次のとおりだと思います... 「ああ、私が使用してきた HTML 記述方法はセマンティクスと呼ばれるものだったことがわかりました

その際には作成者と出典を明示してください。」当サイトQi Pa One flowers? http://www.cnblogs.com/season-Huang/ の記事を転載、商用利用はご遠慮ください