クリーンな HTML マークアップを使用してページを作成する_HTML/Xhtml_Web ページの制作

インターネットは常に進化する生物です。インターネットの発展に長期的に適応できるページを構築することは、ウェブサイトがインターネットの急速な発展に迅速に対応できるようにするために非常に重要です。

クリーンな HTML タグを使用し、標準に準拠したページを構築すると、これを行うのに役立ちます。さらに重要なことに、今後の運用で多くの時間と費用を節約できます。

Web ページの技術はインターネット技術の発展とともに進歩しており、HTML 技術は古くから発展しており、それに付随する技術も着実に発展してきました。

最初は Javascript、次に CSS、XML、そして今では HTML5 の大規模なアプリケーションも形になり始めています。Firefox、Safari、Opera、Chrome は基本的に HTML5 を完全にサポートしています (この問題については、Microsoft の Internet Explorer が再びインターネットの発展を妨げる#-_-)

この記事では、基本的な Web 標準について検討し、それらが何であるか、その重要性は何か、そしてこれらの重要だが見落とされがちな問題の解決策について説明します。

「クリーンな」HTML マークアップとは何ですか?

簡単に言えば、「クリーンな」HTML マークアップとは、冗長性がなく、標準に準拠し、意味のあるタグと構造を使用している ことを意味します。

煩雑な HTML コードはタグを最大限に活用し、不要なコードを削除し、意味のあるタグのみを保存できます。埋め込み CSS などの無駄なプロパティを回避し、ドキュメントの構造をきれいに保ちます。

同様に、面倒な CSS コードはそれ自体の重複を避け、継承可能なプロパティを使用し (CSS の本来の目的はスタイル シートをカスケードすることであることを思い出してください)、CSS クラスを科学的に再利用する必要があります。

標準への準拠とは、ページが W3C の HTML、CSS、および XML 標準検証に合格できることを意味します。無料の W3C バリデーターを使用してエラーを見つけて修正し、テストを続行します。 100% 準拠しているということです。

これはなぜですか?普通に表示できれば十分ではないでしょうか？

どのプロジェクトにも期限は厳しく、ユーザーはウェブサイトをできるだけ早くリリースすることを望んでいます。そのため、Web サイト開発者やデザイナーは、作業を迅速かつ効率的に完了する必要があります。

罠に陥りやすいのです。速いということはずさんなことを意味し、標準に準拠したきれいなコードを書くのは時間の無駄です。 「正常に表示されていれば問題ない」とよく言われます。

現時点ではそうなっていますが、来年はどうなるでしょうか?今から3年後はどうなるのでしょうか？ブラウザをアップグレードした場合はどうすればよいですか?デバイスには互換性がありますか?

検索エンジンがコードを 1 行ずつ調査すると本当に思いますか? 標準化されたコードを使用しないのは、検索エンジンを自分で追い払うのと同じことです。

他の従業員があなたのコードを変更しに来た場合はどうなりますか? 上司に解雇されたり、あなた自身が転職した場合はどうなりますか?あなたのコードを見て、その意味を理解する後継者が現れるでしょう。簡単に済ませたいですか、それとも彼に背後から刺してもらいたいですか？

正しく書き始めてください。面倒な作業ではありません。時間とお金を節約し、心配も少なくなります。

埋め込み CSS を使用してページを作成した方が速いと考えるかもしれません。あるいは、構造を考慮せずに HTML を直接記述する方が便利だと考えるかもしれません。

しかし、ドキュメントを変更したり、将来 Web サイトを改良したい場合は、低品質のコードによって引き起こされる干渉を補うために、より多くの時間を費やすことになります。新しいスタイル シートを作成する場合、HTML コード全体に埋め込まれた CSS が多くの問題を引き起こし、CSS を削除するのに何時間もかかる場合があります。

拡張可能、デバイスフレンドリー、セマンティックでアップグレードが簡単

モバイル ブラウザはますます高速に開発されており、携帯電話でのインターネット アクセスはもはや BlackBerry の独占的な領域ではありません。現在、何億人もの人々が携帯電話を使用して毎日 Web を閲覧しています。

視覚障害のある人のために開発された支援ブラウジング技術や、身体障害のある人のために設計された特別な操作インターフェイスを備えたデバイスは、すでに一般的になっています。このような大規模なユーザー ベースを失いたくない場合は、デバイスの使いやすさを考慮する必要があります。

あなたの Web サイトは、 インターネット コンテンツ ストレージ 、Google スナップショット などのツールを使用して点字形式でユーザーに提供される場合があります。ページは削除されても、長期間ウェブ上に残る可能性があります。

標準に準拠したクリーンなマークアップを使用すると、上記の状況に簡単に対処できます。

すべきこととしてはいけないこと (「すべき」と「すべきではない」)

DO - 事前定義されたタグを使用します。 例: h1 は Web ページのコンテンツの最も重要な部分で、次に h2、h3 などが続きます。Web ページには h1 は 1 つだけ存在できます。

DO - 意味のある要素名を使用します。 他の人がコードを読んだ場合、クラスと ID の名前付けの意味を理解できるかどうかを自問してください。たとえば、同じレイヤーで #box12 と #comment-footer を使用すると、どちらの方が優れていると思いますか?

すべきこと - CSS 継承を最大限に活用してください。 例: コンテナにフォント属性を設定する場合、別のフォントを使用しない限り、その子要素で個別に設定する必要はありません。これにより、スタイルシートが明確かつ簡潔になります。

DO - HTML、CSS、および XML コードを準拠させます。 W3C バリデーターを使用してエラーと警告を検証し、標準に 100% 準拠するまで修正します。

DO - WYSIWYG エディターによって生成されたコードの双方向検査。 WYSIWYG ブラウザは、ガベージ コードの主な発生源です。生成されるコードを可能な限り合理化してください。

禁止 - インライン CSS スタイル、無関係なタグや属性を使用しないでください。 どんなに忙しくても、これらを気軽に追加しないでください。

禁止 - 「正しい表示」に満足しないでください。 ページに隠されたエラーにより、他のブラウザやデバイスでは認識できないほどページが破壊される可能性があるためです。