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デザイナはそちらもチェックしてみるといいだろう。

関連したタグ


ITセミナー

一覧

注目特集

関連サイト

転職ノウハウ

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

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

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

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

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

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

転職Q&A
転職Q&A

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

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

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

特別企画

一覧

    人気記事

    一覧

    イチオシ記事

    新着記事

    ジャパネット、「おさんぽジャパン」コラボ企画で鳥取県のグルメを紹介
    [21:39 3/2] 家電
    フレデリック・コンスタント、アナログ文字盤と時分針のスマートウオッチ
    [21:20 3/2] 家電
    「カープ女子」「オリ姫」に続く、女性のプロ野球ファンに対する呼称は?
    [21:09 3/2] 恋愛・結婚
    突然の交代劇は数年前から周到に準備 - 日本マイクロソフトの新社長は平野拓也氏、樋口泰行氏は会長へ
    [21:04 3/2] パソコン
    [及川光博]仮面ライダー役で自身の変身シーン「12回見た」
    [21:00 3/2] エンタメ

    特別企画

    一覧

      求人情報