セマンティクス: Html/Xhtml は本当に標準に準拠していますか?

<br />原文: http://jorux.com/archives/what-is-semantics/
セマンティクスはセマンティクス（科学）と翻訳することができ、Html/Xhtml が標準に本当に準拠しているかどうかの重要な部分です。 Jorux は、彼自身の意見を皆さんと議論するためにここにいます。不適切な点があれば、訂正してください。なぜ西洋では多くの人がウェブページのセマンティクスをそれほど重視するのでしょうか。西洋はより規則を遵守し、標準を重視していると言う人もいるかもしれませんが、私が言いたいのは、これらの外見の背後には「見えざる手」がそれをコントロールしているということです。
ここで、ナビゲーションバーの例を挙げて、私の主張を説明したいと思います。次のようなナビゲーション構造をたくさん見たことがあるはずです。
ホーム | 概要 | ブログ | メッセージ | アルバムこれらすべてに共通する特徴は、各エントリを区切る区切りバー「|」があることです。ナビゲーションバーの上記の効果を実現するには、Html/Xhtml を記述する方法が多数あります。ここでは、いくつかの典型的な例を示します。
例1:
<p><a href=”home.html”>ホーム</a> | <a href=”about.html”>概要</a> | <a href=”blog.html”>ブログ</a> | <a href=”message.html”>メッセージ</a> | <a href=”album.html”>アルバム</a></p>
例2:
<ul>
<li><a href=”home.html”>ホーム</a></li>
<li>|</li>
<li><a href=”about.html”>概要</a></li>
<li>|</li>
<li><a href=”blog.html”>ブログ</a></li>
<li>|</li>
<li><a href="message.html">メッセージを残す</a></li>
<li>|</li>
<li><a href=”album.html”>アルバム</a></li>
</ul>
例3:
<ul>
<li><a href=”home.html”>ホーム</a> | </li>
<li><a href=”about.html”>概要</a> | </li>
<li><a href=”blog.html”>ブログ</a> | </li>
<li><a href=”message.html”>メッセージを残す</a> | </li>
<li><a href=”album.html”>アルバム</a></li>
</ul>
例4:
<ul>
<li><a href=”home.html”>ホーム</a></li>
<li><a href=”about.html”>概要</a></li>
<li><a href=”blog.html”>ブログ</a></li>
<li><a href="message.html">メッセージを残す</a></li>
<li><a href=”album.html”>アルバム</a></li>
</ul>
上記は、セマンティクスを説明するための 4 つのナビゲーションバーの HTML/XHTML の例です。
例 1 では、段落 p をナビゲーションバーのセマンティック要素識別子として使用しています (div などの構造要素ではなく)。明らかに典型的なミスで、元々は項目 (リスト) だったナビゲーションバーを段落と間違えていました。
例 2、3、4 はすべて、ナビゲーションバーのセマンティック要素識別子として ul/li を使用しています。これらの例の唯一の違いは、区切り文字 "|" の位置と、それが HTML/XHTML に表示されるかどうかです。
CSS の存在とその外観を制御する機能のおかげで、上記の 4 つの例の外観は、肉眼では気付かれないまままったく同じにすることができます。しかし、これは単なる見かけ上の話です。検索エンジンがインターネット上で地位を高め、XML がより頻繁に使用され、より重要になるにつれて、ロボットである検索エンジンは HTML/XML/XML ソースコードのみを読み取り、CSS は読み取りません。つまり、検索エンジンは Web ページの見栄えの良さよりも、そのページの実際の意味を重視するようになります。言い換えれば、Web ページをセマンティック標準に準拠させることは、これらのロボットが Web ページをよりよく理解し、検索結果での Web サイトのランキングを向上させ、より大きな利益を得ることができることを意味します。この見えざる手は、Web ページが W3C テストに合格したかどうかよりもさらに重要なセマンティクスに対する西側諸国の重点を決定します。
個人的には、セマンティクスの意味は次のようになると考えています。
CSS を削除しても、Web ページは標準的でわかりやすい外観のままになります。
このルールにより、肉眼とロボットのロジックをある程度統一することができます。上記の理論を使用すると、例 1の間違いが理解しやすくなります。エントリ内のキーワードは、段落内のキーワードよりも価値があります。もともと記事であるコンテンツに段落を使用する必要があるのはなぜですか? ！
では、例 2、3、4ではなぜセパレーターがそれほど重要なのでしょうか?
例 2 と 3 の違いは位置だけです。外観を制御する CSS がないため、Html/Xhtml 表現の違いは明らかです。読者は試してみてください。例 2では、スプリッターだけで 4 つの li 要素を占有し、元の 5 つの li 要素は 9 つになります。例えば、5人だった会社が9人になった場合、全員の持ち株は半分に薄まり、各株主の重要性は確実に弱まります。さらにひどいのは、株主のうち4人がまったく同じ人物だということです。ロボットは、これら 4 人の株主 (|) をより重要と見なし、他の株主 (キーワード) の重要性を低下させる可能性があります。例3では、分離者を元の株主の秘書にすることで、キーワードの重要性は当然影響を受けません。
見た目の観点から見ると、例 3 は例 2よりも優れています。例 2では、区切り線が 1 行を占めており、わかりにくいです。
次に例 4では区切り文字が使用されていないため、意味的にはより優れています。セパレーターバーの外観は、画像の背景を使用して CSS で簡単に実現できます。さらに、このタイプのような単色のセパレーターバーは、gif 形式で数バイトしか占有しないため、ダウンロード速度に影響しません。
上記は、Jorux が西洋人とのコミュニケーションから得た洞察と、ユーザーからのフィードバックを組み合わせたものです。異なる意見や質問がある場合は、遠慮なく批判してください。
これが中国本土の友人たちの注目を集め、 h1/h2/p/ul/li/blockquote/tableなどの意味要素の使用と標準化に注意を払い、 divなどの構造要素を乱用しないように促すことを願っています。Robotはそのような要素にあまり近づきません。たとえば、厳密に言えば、1 つの Web ページには Web ページのタイトルとなるh1 が1 つだけ許可されます。Robot における h1 のステータスは、<title></title> に次ぐものです。
注:前回の更新がいつだったか忘れてしまいました。更新速度が速すぎて、諦めてしまいそうになります。こんな半端なサイトはだんだん忘れ去られていくだろうと思っていたのですが、フィードの購読者数がどんどん増えてきており、Feedburner のカウンターに何か問題があるのではないかと疑ってしまいます。
私を慰めてくれるのは、この記事「ブログ投稿ではなく記事を書こう」です。インタラクティブインターフェースの権威である Jakob Nielsen 氏は、どうやらカタツムリのようなペースの合理性を見つけたようです。この人のアラートボックスを購読できます。

<<: CSS3 フリップカード番号サンプルコード

>>: MYSQLが中国語を認識できない問題の恒久的な解決策