HTMLタグをうまく使ったページ作り

ウェブは常に進化する有機体です。あなたのサイトがインターネットの発展の波に素早く追随できるように、長持ちし、インターネットの進化に適応するページを構築することが重要です。

きちんとしたHTMLマークアップで標準に準拠したページを構築することは、これを可能にし、さらに重要なことは、今後の運用において多くの時間と費用を節約することができることです。

Web技術はインターネット技術の進化に追随し、HTML技術も古くから存在し、その周辺技術も着実に発展してきました。

まずJavascriptがあり、CSS、XML、そしてAJAXがあり、HTML5の大量利用が定着し、Firefox、Safari、Opera、ChromeがHTML5にほぼ完全対応しています（この場合、MicrosoftのInternet Explorerが再びインターネットの足かせになります #-_-)

この記事では、基礎となるウェブ標準を探り、それらが何であるか、何を意味するか、そして重要でありながら見過ごされがちなこれらの問題に対する解決策について説明します。

HTMLマークアップとは何ですか？

簡単に言うと、quot;neat" HTMLマークアップとは、以下のものを指します。 整理されておらず、標準に準拠しており、意味のあるタグと構造を使用している。 .

面倒でないHTMLコードは、タグを十分に活用し、不要なコードを排除し、意味のあるマークアップだけを残しています。埋め込みCSSのような無駄な属性は避け、文書構造をきちんと整理しています。

同様に、煩雑にならないCSSコードは、それ自体の重複を避け、継承可能なプロパティを使用し（CSSはカスケードスタイルシートであることを忘れないでください）、CSSクラスを科学的に再利用する必要があります。

標準に準拠するとは、あなたのページを W3C HTML、CSS、XML標準の検証には、無料のW3Cバリデータを使用し、エラーを発見して修正し、100％準拠を知るためにテストを継続します。

なぜこれが必要なのでしょうか？ちゃんと表示されれば十分じゃないですか？

どのプロジェクトにも厳しい納期があり、ユーザーはできるだけ早くサイトを公開することを望んでいます。そのため、ウェブデベロッパーやデザイナーは、仕事を素早く、効率的にこなすことが求められます。

速い＝ずさん」「きちんとした標準に準拠したコードを書くのは時間の無駄」という罠に陥りがちです。よく、「ちゃんと表示されるから問題ない」と言う人がいます。

今ここで表示されても、来年はどうだろう？3年後はどうでしょう？ブラウザの世代交代は？デバイスの互換性は？

検索エンジンが、あなたのコードを一行ずつ調べて、えぐり出すと本当に思っているのですか？彼らは非常にうるさいですし、標準化されたコードを使用しないのであれば、検索エンジンそのものを追い出していることになります。

他の社員が入ってきてあなたのコードを修正したらどうなるのか、上司に解雇されたらどうなるのか、自分で飛び降りたらどうなるのか。あなたのコードを見て、その意味を理解する後継者が出てくるはずです。これを簡単にしたいのか、それとも悪役になって背中を刺されたいのか？

正しく書き始めましょう。迷惑な作業ではありませんし、時間もお金も節約でき、悩むことも少なくなります。

CSSを埋め込んだページを書く方が早い、構造を考えずに直接HTMLを書く方が楽だと思うかもしれません。

しかし、ドキュメントを改訂するときや、将来的にサイトをリニューアルすることになったとき、質の悪いコードによる混乱を補うために、より多くの時間を費やすことになります。新しいスタイルシートを作成する場合、HTMLコードに散在するその埋め込みCSSは多くの問題を引き起こし、それらを取り除くのに何時間も費やしてしまうこともあります。

スケーラブル、デバイスフレンドリー、セマンティック、容易なアップグレードが可能

モバイルブラウザはどんどん進化しており、モバイルインターネットへのアクセスはもはやブラックベリーに限ったことではなく、今や何億人もの人々が毎日携帯電話でWebを閲覧しています。

視覚障がい者のために開発された閲覧支援技術や、身体障がい者のために設計された特殊な操作系を持つ端末は、今や一般的なものとなっています。このような大きなユーザーを失いたくないのであれば、デバイスフレンドリーを考慮する必要があります。

あなたのサイトを点字で利用できるようにするには、次のような方法があります。  インターネットコンテンツストレージ および グーグルスナップショット Google Snapshotなどのツールを使用すると、ページを削除しても長期間ウェブ上に残る可能性があります。

きちんとした標準準拠のマークアップを使用することで、上記のような対処が容易になります。

やることとやらないこと（"要"と"不要")

DO - 定義済みタグを使用します。 例：h1はページのコンテンツで最も重要な部分であり、h2、h3などがそれに続く。h1は1ページに1つしか存在できません。

DO - 意味のある要素名を使用する。 例えば、同じレイヤーで#box12と#comment-footerはどちらが良いと思いますか？

<スパン DO - CSSの継承を活用する。 例えば、コンテナでfontプロパティを設定した場合、その子で異なるフォントを使用しない限り、その子で個別に設定する必要はない。こうすることで、スタイルシートが明確で簡潔なものになります。

<スパン DO - HTML、CSS、XMLのコードを標準に準拠させる。 W3Cバリデーターでエラーや警告を検証し、100％標準に準拠していることを知るために修正する。

<スパン DO - WYSIWYG エディターで生成されたコードを双方向にチェックします。 WYSIWYGブラウザはガベージコードの大きな発生源なので、それが生成するコードを可能な限り効率化するように心がけましょう。

<スパン DON'T - 埋め込みCSSスタイルや余計なタグや属性は使わないようにしましょう。 忙しくてもこれらを手書きで追加するのはやめましょう。

DON'T - "正しく表示する"に甘んじてはいけない。 なぜなら、ページに隠されたエラーが、他のブラウザやデバイスでページを破壊する可能性があるからです。