私が見るように、ウェブ標準の場所

Web開発者のコ​​ミュニティでは、Web標準への準拠の必要性に関する論争が長い間解消されていません。 標準自体の本質は、コードの正確性とウェブサイトの構造に関する規則と基準を直接形成しようとする試みです。 現在、問題のない最新のブラウザはエラーで記述されたサイトコードを表示するため、Web開発は開発の最中に最も自由なタイプの開発の1つです。 これに基づいて、ブラウザが誤って作成されたリソースを正しく表示する必要がないという標準に焦点を当てる目に見える理由はなく、エンドユーザーは違いの存在を確認せず、疑うこともありません。 また、検索エンジンによる構造要素の無視については、かなり議論の余地のある意見があります。 しかし、実際には問題はやや広範です。







基準





Web標準の世界で天候を形成する最も影響力のある構造は、World Wide Web Consortium(W3C)とWeb Standardization Working Group(WaSP)の2つの組織です。

W3Cコンソーシアムは1994年に設立され、80を超える技術仕様と推奨事項をリリースしています。 コンソーシアムによって指定されたテクノロジーには、ハイパーテキストマークアップ言語(HTML)、拡張可能なハイパーテキストマークアップ言語(XHTML)、カスケードスタイルシート(CSS)、およびドキュメントオブジェクトモデル(DOM)があります。

WaSPは、W3C勧告をより完全に実装するという文脈でWebコンテンツおよびソフトウェア開発者をサポートするために、独立したWeb開発者グループによって作成された組織です。



ほとんどのWeb開発者は、コーディング方法に関する特定の仕様としてWeb標準の概念を理解することに慣れています。 ただし、コードのいわゆる「有効性」に加えて、標準はコンテンツのより深く、論理的に正しいコンパイルを意味します。 言い換えれば、文書は完全に「有効」であるかもしれませんが、標準とはまったく一致していません。 規格に従って、すべてのロジック要素は意図した目的に使用する必要があります。 これにより、ドキュメントが外部サービスやアナライザーとより自由にやり取りできるようになります。 言い換えると、セマンティックに基づいて形成されたドキュメントは、ドキュメントの正しい構造化であり、各HTML構造要素は、ブラウザでの見た目ではなく、セマンティックの目的に基づいて選択されます。

セマンティックレイアウトは、構造と表示の分離の概念に従うことを意味します。 HTML 4.01仕様で推奨されている概念では、ハイパーテキストマークアップ言語はドキュメントの構造を記述するためだけに使用することを推奨しており、この構造を視覚的に表現するために、正式に承認された別のW3C標準であるカスケードスタイルシート(CSS)が提案されています。 また、構造と表示の分離の概念に従って、すべての装飾要素は文書の内容とは別に記述しなければならないという事実にも注意を払う必要があります。



したがって、設計要素の実装に複雑なブロック構造を使用する

<div id="rounded-box">

<b class="r3"></b><b class="r1"></b><b class="r1"></b>

<div class="inner-box">

<p>.</p>

</div>

<b class="r1"></b><b class="r1"></b><b class="r3"></b>

</div>











同じテーブルを使用する代わりに

<table id="rounded-box">

<tr>

<td class="r3"></td><td class="r1"></td><td class="r1"></td>

</tr>

<tr>

<td></td><td>

<p>.</p>

</td><td></td>

</tr>

<tr>

<td class="r1"></td><td class="r1"></td><td class="r3"></td>

</tr>

</table>











コードをより有効にせず、通常は意味をなしません



このコードの有効なバージョンは、次のようになります。

<div id="idname">

<p>.</p>

</div>











パーサー





Web標準化の原則と推奨事項により、ブラウザ、検索エンジンなどのパーサープログラムを使用してドキュメントを簡単に処理できます。

正しいコード生成により、パーサーはコードを正しい形式にする必要がないため、処理時間を短縮できます。 さらに、コード修正メカニズムを持たないパーサーが誤ったドキュメントを処理しないという事実に注意を払う価値があります。 このようなパーサーの例としては、XSLスタイルをオーバーレイするときの変換など、任意のXMLハンドラーがあります。

前述の構造と表示の分離の原則により、不要なコンテンツをすべて除外することができ、ドキュメントの処理速度が向上します。 また、仕様に従って使用された要素は、ドキュメントのインデックス作成を改善します。



人間の観点から見ても、他の目的に使用される空の<b>要素が多数ある冗長コードはばかげているようです(もちろん、パーサーのようにhtmlコードをxml構造と見なす場合)



<div id="rounded-box">

<b class="r3"></b><b class="r1"></b><b class="r1"></b>

<div class="inner-box">

<p>.</p>

</div>

<b class="r1"></b><b class="r1"></b><b class="r3"></b>

</div>











各種デバイス





構造とプレゼンテーションの分離の原理により、構造に関係なく、さまざまなデバイスでドキュメントの正しいプレゼンテーションを構成できます。 このようなデバイスには、モバイルデバイス、デジタルプロジェクター、テレビ、およびその他のデバイスが含まれます。

CSSを使用すると、視覚だけでなく印刷デバイスにも個別のスタイルルールを設定できます。 CSSを使用すると、印刷時に不要な要素(さまざまなメニュー、ニュースフィード、プレゼンテーションブロック、広告など)を簡単に非表示にして、ドキュメントのメインコンテンツのみを印刷できます。



それは、印刷用、モバイルデバイス用などの個別のページを作成することを意味します。 正しくない!



障害者のためのアクセシビリティ





コードの品質は、障害を持つ人々の情報の可用性に直接影響することを理解する必要があります。 障害のある人向けの特定のデバイスには、点字ディスプレイとスクリーンリーダーがあります。 このようなメディアデバイスを使用した情報の表示の品質は、ドキュメントの構造に直接依存し、開発者が標準を無視した場合、コンテンツを誤って解釈する可能性があります。 2008年12月の調査検索システムOpera Mamaの結果によると、障害者が快適に使用するのに適したサイトの数は非常に少なく、0.7%はスクリーンリーダーに最適化され、点字ディスプレイには1.8%未満です。



W3Cは、開発者が障害のある人がインターネット上にできるだけ簡単かつ便利に滞在できるようにすることを奨励しています。



そして、ここでもhtmlドキュメントの構造に戻ります。その要素は、レンダリングされた表現と同じ順序で移動する必要があります。 事実は、情報はコード内の順序でスクリーンリーダーによって読み取られるということです。



基本的にそのコンテンツは視覚障害を持つ人々によって画像の代わりに受け取られるため、代替画像の属性は画像自体と同じ意味的負荷を負うべきです。



省資源





標準を使用すると、人件費と技術リソースの両方を大幅に節約できます。 主要なブラウザの現在のバージョンですべてが機能する場合でも、標準への準拠が非常に望ましいです。これは将来のリリースで変更される可能性があります。 標準の使用は、将来のブラウザの開発に関係なく、製品が機能することを保証するものです。



構造とプレゼンテーションが分離されているため、ページはいくつかの別個のドキュメントで構成されており、冗長性の排除に貢献し、結果としてページの重量を減らします。 さらに、すべての外部ファイルはブラウザーによってキャッシュされ、正しく構成されたコードを修正する必要はありません。 これにより、ページの読み込み速度が向上し、サーバーの負荷が減少します。 また、分離の原理に基づいたサイトのメンテナンスははるかに簡単です。



さまざまなデバイスの特定のバージョン用に個別のWebページを作成することは意味がありません。これは、開発と保守の人件費の削減につながります。 CSSを使用すると、Webページの視覚的な表示を完全に制御できます-構造要素の非表示と表示、その場所、サイズ、外観の変更。



おわりに





私は、標準の使用を提唱するためにこれについて書かないことにしました。ただ、これが私が見るすべてであり、おそらく他の誰かの誤解を払拭することを示したいです。 私は、規格に準拠しようとするときに遭遇する問題について故意に黙っており、それらは非常に明白であり、コメントで与えられるように思われます。



All Articles