HTMLを小綺麗にするための4つの方法

ニュース
トップ

HTMLを小綺麗にするための4つの方法

後藤大地  [2008/07/04]

HTMLを規約にそった記述にすることは最低条件として要求されることだが、最後の状態ではない。まずHTMLを規約にそった記述にし、さらに次の段階でアクセサビリティに対応できる形式であったり、必要になる情報を追加したり、もっと小ざっぱりとさせてブラッシュアップさせた方がいい。

Kevin Yank氏がSitePointにアップした4 Easy Ways To Spruce Up Your HTML Markupはその点でかなり興味深いドキュメントだ。同氏はこれまでの経験からHTMLドキュメントを小ざっぱりとさせるための4つの方法を紹介している。要約すると次のとおり。

  1. h1、h2、 h3などのヘッダ要素を厳密に階層化する。h2のあとでh3を飛ばしてh4をつけるといったことをしない。ヘッダ要素による階層化はFirefoxのエクステンションWeb Developerを使うとわかりやすい。InformationからView Document Outlineを選択すると階層構造が表示されるようになる
  2. HTML文書内リンクにname属性ではなくid属性を使う。古いやりかたで<a name="target">のようにしてname属性を使うものがあるが、<h2 id="target">のようにid属性を使った方が小ざっぱりと仕上がる
  3. html要素に言語を指定する。たとえば<html lang="en">など
  4. 文字エンコーディングを指定する。たとえばhead要素内のmeta要素でcontent="text/html; charset=UTF-8"のように指定

ヘッダ要素を階層化させることはナビゲート向けスクリーンリーダなどのアクセス技術にとっても意味がある。文書としても内容を整理することになりお勧めだ。それ以外どれも基本的な内容だが、HTML文書をブラッシュアップするにはわかりやすい指針だ。HTMLのブラッシュアップを検討している場合には同氏のドキュメントを検討してみてほしい。

4 Easy Ways To Spruce Up Your HTML Markupに寄せられているコメントには、h1要素はHTML文書に1つにした方がスマートであること、idはIEで特定の操作をした場合に問題があるのでそれは注意した方がいいこと、といった議論もおこなわれている。コメントにも参考になる情報が多いのでWebデザイナはそちらもチェックしてみるといいだろう。

関連したタグ


マイナビニュースのセミナー情報

オススメ記事

マイナビニュースの集合特集

関連サイト

新着記事

転職ノウハウ

あなたの仕事適性診断
あなたの仕事適性診断

4つの診断で、自分の適性を見つめなおそう!

Heroes File ~挑戦者たち~
Heroes File ~挑戦者たち~

働くこと・挑戦し続けることへの思いを綴ったインタビュー

はじめての転職診断
はじめての転職診断

あなたにピッタリのアドバイスを読むことができます。

転職Q&A
転職Q&A

転職に必要な情報が収集できます

ドS美人面接官 vs モテたいエンジニア
ドS美人面接官 vs モテたいエンジニア

入室しようとしたら、マサカリ投げられちゃいました!?

特別企画

一覧

    人気記事

    一覧

    イチオシ記事

    新着記事

    ヤマハ、独立構成の電源や192kHz/32bit DAC搭載のネットワークCDプレーヤー
    [15:50 9/3] 家電
    ローランド、初の光造形式3Dプリンタ「ARM-10」と新3D切削機「SRM-20」
    [15:46 9/3] パソコン
    サイエンスダイエット猫用ドライがリニューアル、待望の「まぐろ」が登場
    [15:38 9/3] ライフ
    東京都・台東区で起業を目指すクリエイター向けの"創業スクール"を開催
    [15:31 9/3] クリエイティブ
    SAS、塩野義製薬とHadoop上でビッグデータを活用した研究プロジェクト
    [15:16 9/3] エンタープライズ

    特別企画

    一覧

      求人情報