きちんとしたHTMLマークアップを使用してページを構築します

インターネットは絶えず進化する有機体です。長期にわたってインターネットの発展に適応できるページを構築することが重要です。これにより、Web サイトはインターネットの急速な発展にすぐに対応できるようになります。

クリーンな HTML マークアップを使用し、標準に準拠したページを構築することで、これを実現できます。さらに重要なことに、将来の運用で多くの時間とコストを節約できます。

ウェブページ技術は、インターネット技術の発展とともに進歩してきました。HTML技術は長い間開発され、それに付随する技術も安定的に発展してきました。

最初は Javascript、次に CSS、XML、そして今は AJAX です。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 によって多くの問題が発生し、それを削除するのに何時間もかかる可能性があります。

スケーラブル、デバイスフレンドリー、セマンティック、アップグレードが簡単

モバイル ブラウザはますます高速化しています。モバイル インターネット アクセスはもはや BlackBerry だけのものではありません。現在、何億人もの人々が携帯電話を使用して毎日 Web を閲覧しています。

視覚障害者向けに開発された補助ブラウジング技術や、身体障害者向けに設計された特別なインターフェースを備えたデバイスを目にすることは、すでに一般的になっています。これほど大きなユーザーベースを失いたくないのであれば、デバイスの使いやすさの問題を考慮する必要があります。

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

クリーンで標準的なマークアップを使用すると、上記の状況に対処しやすくなります。

すべきこと、すべきでないこと

実行 - 定義済みのタグを使用します。たとえば、h1 は Web ページで最も重要な部分であり、次に h2、h3 などが続きます。Web ページには h1 が 1 つしか存在できません。

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

実行する - CSS 継承を活用します。たとえば、コンテナーでフォント プロパティを設定する場合、別のフォントを使用しない限り、子要素で個別に設定する必要はありません。これにより、スタイルが明確かつ簡潔になります。

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

実行する - WYSIWYG エディターによって生成されたコードを再確認します。 WYSIWYG ブラウザはジャンク コードの主な発生源なので、生成されるコードはできる限りシンプルにするようにしてください。

しないでください - 埋め込み CSS スタイルや余分なタグや属性は使用しないでください。たとえ非常に忙しいとしても、これらのものを追加しないでください。

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