0からはじめるWebサイト制作の勉強|知行合一

2015年6月より求職者支援訓練でWebサイト制作を学んでいます。学んだことの要点や実践での備忘録を記録して、一歩ずつ成長に努めます。

HTMLの文法チェック方法のまとめ

HTMLの文法チェックの方法について、まとめてみました。

ツリー構造の確認方法

マークアップしたHTMLが正しくツリー構造となっているか
次のサイトを利用して確認します。

HTML 5 Outliner

「ファイルを選択」をクリックして、確認したいHTMLファイルを選択するか、
「HTML:」の入力エリアに、確認したいHTMLのコードを貼り付けして、
「Outline this!」をクリックすると、見出しタグのツリー構造を確認することができます。

文法の確認方法

マークアップしたHTMLの文法にミスが無いかについて、次の方法で確認します。

  • 検証サイトに記述したHTMLの内容を貼り付けしてチェックをする。

validator.w3.org

  • Webブラウザの拡張機能を利用してチェックをする。

Firefoxに「HTML Validator」というアドオンを追加します。

アドオンを追加したら、作成したHTMLファイルをFirefoxで表示して、
右クリックメニュー「ページのソースを表示」をクリックすると、
ソースの表示に加えて文法チェックの結果が表示されます。

どんなに注意してコーディングしても
タイポは誰にでも起きるものです。

自分の目でタイポを見つけるのは
なかなか難しいので、これらのツールを上手に使って
タイポを素早く潰しましょう