今日のインターネット分野では、Web 標準という用語がユーザーや Web 開発者の概念としてますます流行しています。しかし、WEB 標準の概念は一般的すぎるため、WEB 標準とは何なのか、またその内容については人によって見解が異なります。 China E-Dong.com が主催する「E-Dong Cup」ShopEx テンプレート コンテスト フォーラムでは、出場者と審査員が WEB 標準とは何か、テンプレート コードの「表現技術」について熱く語りました この記事では、WEB 標準についての筆者の見解を説明します。 WEB標準で一般的に言われる概念を誰もが理解できるように。
いわゆる「標準」はなく、提案があるだけです
まず最初に、実際に存在するのは、ISO 標準や Ecma などの標準化を推進する組織だけであり、実際には WEB 標準というものは存在しないことを理解する必要があります。ほとんどの人が WEB 標準に言及するとき、実際には W3C の何かを参照しています。しかし、W3C は実際には標準を設定するのではなく、勧告を提供するだけです。「W3C 勧告とは、広範な合意形成を経て、W3C メンバーとディレクターの承認を得た仕様または一連のガイドラインです。」 W3C は、その勧告を広範に展開することを推奨しています。」
WEB標準の意味
一般に、WEB 標準は次の部分で構成されます。
• 有効な HTML/XHTML
•コードのセマンティクスが明確である
•コンテンツ (HTML/XHTML) プレゼンテーション (CSS) とインタラクション (JavaScript) の分離
ある人にとって Web 標準は上記のすべてを意味しますが、他の人にとってはそのほんの一部かもしれません。しかし最も重要なのは、これら 3 つの部分が優れたサイトを構築するために不可欠であるということです。
有効なHTML/XHTML
最初のポイントから始めましょう。有効なコードは WEB 標準への第一歩です。ほとんどの人にとって、有効とは HTML/XHTML コードのみを意味しますが、CSS 検証も存在することを忘れないでください。 HTML/XHTML コードの有効性を検証するということは、基本的に、Web ページ上のコードが選択した doctype に準拠しているかどうかを意味します。
正しい doctype を選択することは、HTML/XHTML コードがどのように解釈されるか、またブラウザごとにレイアウトがどのように異なるかを決定するため、重要です。検証されたコードは、ブラウザーの互換性をあまり考慮しなくても、さまざまなブラウザーで適切に表示できます。検証することで、ページ上の潜在的に影響を与えるコードを発見し、それらを修正して開発プロセスをより効率的にし、将来のメンテナンスコストを削減することができます。
コード検証ツール
コードのセマンティクスが明確である
ページ上に存在するすべての要素には意味があり、その意味を正確に表現できる必要があります。簡単に言えば、コンテキストに基づいて適切な要素を選択することを意味します。例は次のとおりです
このコードは不明瞭です
| 引用した内容は以下の通りです。 <div class="page-Heading">ページのタイトル</div> <a class="menu-item" href="/item-1">メニュー項目 1</a> |
同じパフォーマンスでも、セマンティクスはより明確になります
| 引用した内容は以下の通りです。 <h1>ページのタイトル</h1> <ul class="メニュー"> |
コードのセマンティクスを明確にするのは実際には非常に簡単です。h1 ～ h6 を使用してタイトルを定義し、p を使用して記事の段落を定義し、ul、ol などを使用してリスト項目を定義します。 。 。これにより、コードの必要な部分を簡単に見つけることができ、コードの量が減るため、ページの読み込み時間を大幅に短縮できます。そして、忘れないでください。これは SEO にも役立ち、Google やその他の検索エンジンがサイトのインデックスをより適切に作成できるようになります。
コンテンツ (HTML/XHTML) プレゼンテーション (CSS) とインタラクション (JavaScript) の分離
コンテンツ (HTML/XHTML) プレゼンテーション (CSS) と対話性 (JavaScript) を分離することが重要である理由は数多くあります。これらにはさまざまな役割分担があり、それらを合理的に使用する方法には慎重な検討が必要です。
別居の理由
パフォーマンス: css や js などの外部ファイルは、最初の読み込み後にユーザーのキャッシュに保存されるため、その後の読み込み時間が短縮され、エクスペリエンスが向上します。
全体的に: いつでもコードを見つけて正確に配置できます。
使いやすさ: コードはいつでも簡単に参照でき、Web サイト全体で再利用できます。
メンテナンス: パフォーマンスとインタラクションに関連するすべてのコードは、メンテナンスを容易にするために一元的に保存されます。
ユーザーに近づくにはどうすればよいでしょうか?
Webサイトをユーザーに近づけるには、余計に時間がかかるという意見もありますが、実は記事にある3つのポイントを押さえることができれば、ユーザーに近づくための大きな一歩をすでに踏み出しているのです。ユーザー。
正しく効果的なコードを使用すると、ページ上の間違ったコンテンツを見つけやすくなります。明確なセマンティクスを持つコードは、ハンドヘルド デバイスをより適切にサポートすることができ、CSS を変更せずにユーザーが Web サイトをより快適に閲覧できるようにすることもできます。構造、パフォーマンス、およびインタラクションを分離することで、JavaScript がサポートされていなくても Web サイトの基本的な機能を維持できます。もちろん、JavaScript レイヤーを追加することでサイトのエクスペリエンスを強化できますが、これは Web サイトの操作の最も基本的な部分ではありません。