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

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

特別企画

一覧

    人気記事

    一覧

    イチオシ記事

    新着記事

    私立大の約3割が2015年大学入試にネット出願 - 一般入試で紙の願書廃止も
    [12:40 9/19] キャリア
    自分やパートナーへ「ご褒美」ってあげる? - "セルフご褒美"で人気は…
    [12:39 9/19] 恋愛・結婚
    【レポート】東京ゲームショウ2014 - ロジクール、新開発スイッチの最上位ゲーミングキーボード「G910」を発表
    [12:38 9/19] パソコン
    学研、「学研の図鑑 LIVE 『宇宙』」を発売 - BBCの映像DVDやARなどを収録
    [12:38 9/19] テクノロジー
    MRJの飛行試験機がついに完成! 10月18日にロールアウトへ - 初飛行は2015年
    [12:36 9/19] 旅行

    特別企画

    一覧

      求人情報