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 モテたいエンジニア

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

特別企画 [PR]

一覧

    人気記事

    一覧

    イチオシ記事

    新着記事

    男女約6割が「仕事をしながら夫婦で育児」が理想 – 夫に任せたい育児は?
    [13:11 7/5] 恋愛・結婚
    夫の夏のボーナス額に「満足」な妻は59.6% - お小遣いは渡す?
    [13:09 7/5] 恋愛・結婚
    女性が選ぶ"イイ女"とは? - 海外TVドラマの女性キャラランキング
    [13:04 7/5] 恋愛・結婚
    既婚者は何歳までに出会って結婚している? きっかけは?
    [13:00 7/5] 恋愛・結婚
    社会人がスポーツにかける費用は月平均6,906円 - 今後やりたいことは?
    [13:00 7/5] キャリア

    特別企画 [PR]

    一覧

      求人情報