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期、劇場版パート2と続けたい」と意欲
    [20:35 12/21] ホビー
    「ワカコ酒」の新久千映による新連載など、WEBマンガのぜにょんで開始
    [20:20 12/21] ホビー
    インテルがトッテナムMFレノンに興味か…MFグアリンとのトレードとも
    [20:01 12/21] ライフ
    [武田梨奈]婦警姿で連続板割り披露
    [19:50 12/21] エンタメ
    アジア杯に向けミランを離脱する本田に指揮官「不在はとても大きい」
    [19:32 12/21] ライフ

    特別企画

    一覧

      求人情報