[初心者向け]HTMLの文法＆コードをチェックする方法

HTMLの文法＆コードをチェックする方法

HTMLの重要性

HTMLは、PHP や Pyhton などのプログラミング言語と違って、多少間違っていてもそれなりに動いてくれるもの。しかし、その寛容さに甘えていると、痛い目に合うかもしれません。まず HTML の重要性を知るために、HTMLをミスっていたらどうなるか、確認してみましょう。

買い物ボタンが動かない

ショッピングサイトに限らず、申し込みや問い合わせなど何だかのクロージングを仕掛けているサイトも少なくないと思います。PHP や データベースといったバックサイドは完璧でも、フロント部分の HTML をミスっていると 決済できない、申し込みできないという事態に。試しに以下のデモサイトで買い物をしてみて下さい。「申請」ボタンを押しても何も起きないと思います。

HTMLをミスっているショッピングサイト（DEMO）

そして HTML が大丈夫な場合はどうでしょうか？以下のデモサイトで先ほど同様に「申請」ボタンを押してみて下さい。恐らく画面下部に注文内容が表示されると思います。

HTMLが正しい場合のショッピングサイト(DEMO)

この「動くサイト」と「動かないサイト」、HTML のミスコードは下記の 1箇所。

正）　<input type="submit" name="submit" value="申請">

誤）　<input type="submit"　name="submit" value="申請">

何が間違っているか分かりますでしょうか？ミスっている方は、 type="submit" の後、半角スペースではなく全角スペースを入れています。ちょっと分かりづらいですよね。

レイアウトが崩れる

シンプルな Webサイトであれば、 HTMLのコードミスもすぐに気づいて修正できるのですが、フレームワークなどを用いて動的にHTMLコードを生成するようになると、HTMLのコードミスに気づきにくくなります。例えば、上図の場合、本来はページ最下部に表示されるはずのフッター要素が、ページのサイド部分に表示。これはデザイン的に致命的なミスですが、どうして気づかなかったのでしょう？それはテンプレート作成時は記事数がなかったのに、Webサイトの運営がはじまり記事数が増え、HTMLコードが変わっていったため起きた現象です。

</div> の位置を間違っていたために生じたバグですが、 Bootstrapを用いた場合、以下のようにちょっとした要素の表現でも <div> が連発。これはミスを誘発してしまいますよね。。。

【Bootstrap の コード例】

<div class="overlay" ></div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<div class="site-heading">
  <h1>Pythonチャンネル</h1>
    <span class="subheading">PythonやDjangoに関するあれこれ</span>
</div>
</div>
</div>
</div>

これらのような スペースの入力ミスや </div> のミスの他に、ミスしやすいポイントがありますのでご紹介させて頂きます。

ミスしやすいHTMLコード

閉じタグ

ご承知のように HTML タグの基本文法は、

<h2>HELLO</h2>

といったように「開始タグ」と「終了タグ」で構成されます。しかし、コード作成時は恐らく大丈夫と思うのですが、コード修正時に終了タグを消して、追記し忘れることはよくあります。また逆に終了タグがいらない <img>タグや <input>タグに終了タグを付けてしまうことも。

属性の記述ミス

HTMLタグは、属性を加えることで機能を拡張することができますね。例えば

<a href="https://codecamp.jp" target="_blank">リンク</a>

の target="_blank" や

<img src="●●.jpg" width="100%">

の width="100%" など。

これらの属性は決まった語句や組み合わせになりますので、ルールを知った上で記述しないと思うように動いてくれません。また Webの標準化団体 W3C は、 <img>タグに width="100%" を加えることを勧めていません。 CSS でスタイル設定してくださいと注意喚起されちゃいます。

古いタグ

独学で HTML を学習していると、時々 HTML4式の HTMLタグに出会います。例えば「フォントサイズの変更」と検索すると、 <font>タグの使い方が紹介。この <font> 使えなくはありませんが、 HTML5 では非推奨のタグです。この他にも

• <center>
• <frame>

など。またタグと属性の組み合わせも HTML5 と HTML4 では違ってくる場合がありますので、要注意です。例えば、 <iframe>タグの属性で位置を指定する align ですが、HTML5 では非推奨となっています。つまり以下の HTMLコードは❌。

<iframe src="/default.asp" width="200" height="200" align="right">

こうした問題、HTML初心者に限らずみんなストレスになることでしょう。そこでこれからご紹介する HTMLチェッカー が役立つというわけですね。

HTMLコードをチェックする方法

Webで 「HTML チェック」と検索するといくつか該当サービスが表示されますが、まずは信用度の高い W3C をご紹介。理由は、簡単且つチェック結果を信用できるからです。

W3C HTML Checkerでチェック

W3C HTML Checker サイト

こちらは Webの標準化活動を行っている World Wide Web Consortium（通称 W3C） の公式サイト。Web上で HTML のコードチェックを行うことができます。HTMLの規格を策定している団体が運営するサイトなので信頼できますよね。HTMLコードのチェック方法は、

• コードを直接入力してチェック
• HTMLファイルをアップロードしてチェックしてもらう
• 既に公開されている Webページを読み込んでもらってチェックしてもらう

の 3種類です。使ってみると分かるのですが、チェックは厳し目。例えば、 <img>タグには alt がないと注意されますし、 <table> も <thead> や <tbody> がないと注意されます。 実際には、 alt も thead も tbody もなくても動くんですがね。。。 しかし、半角と全角のスペースチェックができるのはこちらぐらいしかないかもしれません。

それにしてもイチイチ書いたコードを W3C にコピー＆ペーストするというのは面倒なもの。そこで HTMLコードを書くテキストエディタの機能をチェック。数あるテキストエディタの中から一番 HTML のデバグに優れたエディタをご紹介します。これならコードを書くと同時にチェックすることができますね。

テキストエディターのBracketsでチェック

【BracketsでのHTMLコードミスの様子】

Bracketsは Adobe社が開発を進める無料のテキストエディタで、HTMLの編集には特に長けています。デバグ面で言えば、

• 閉じタグの自動チェック
• スペース忘れの自動チェック（属性作成時）
• タグや属性の自動表示

など、Visual Studio Code や Atom、 Sublime Text などに比べて HTMLを書きやすいですし、見やすいです。特に指定がなければ、 Brackets で HTMLを書くのがいいかもしれませんね。

CodeCampのエディタ

こちらは CodeCamp が提供している生徒さん向けのオンラインエディタで、こちらでも HTMLコードのミスをリアルタイムでチェック可能。コードを書きながらミスを確認することができますし、書いたコードのプレビューが同一画面で確認できますので便利です。ミスのハイライトは Bracktes と同等と思います。

バグを発見できない時は

HTMLの学習を進めていくと、「あっているはずなのに思ったように表示されない」ということもでてきます。上記で紹介したようなチェックツールも一つですし、ブラウザのチェック機能を利用する手も一つと思います。

【ブラウザでHTMLコードをデバグする方法】

Step.1　現状確認
画像が表示されていません。

Step.2　怪しいところで「右クリック → 検証」
上手く表示されていない箇所で「右クリック」から「検証」を選択。ブラウザによって「検証」の用語は異なりますが「要素を検証」などそれらしい項目を選択しましょう。<img>タグのはずが、 <imgsrc="">という不思議なタグに。。。これを直してみましょう。

Step.3　HTMLの編集

おかしな HTMLコードの上で 「右クリック → Edit as HTML」 を選択。これで一時的に HTMLコードを編集できるようになりました。本来の <img>タグに書きなおしてみましょう。

画像が表示できましたね。このように HTMLチェックツールやエディタのデバグ機能では発見できない時は、ブラウザで直接 HTMLを確認、編集してみることが手っ取り早いかもしれません。またページ全体のコードは、ブラウザ上で 「右クリック → ページのソースを表示」 で HTMLコードが確認できます。 </div>の設定が怪しい時は、コード全体を見てみると、バグを発見できるかもしれませんよ。

HTMLのコードミスとSEO

「HTMLを正しく記述しないと検索順位が落ちる」と思われている方もいらっしゃると思います。確かなことは言えませんが、以下の点からそれほどシビアになる必要はないかもしれません。

• Googleが「コードミスはSEOにあまり影響しない」と言っていた（2017）*
• yahoo.co.jp を W3C でチェックするとエラーは 220 あった*

またページの読み込みスピードも「HTMLコードミスあり」と「ミスなし」で比較しましたが、ほとんど変わりませんでした。

つまり HTML を正しく書くことは、

• 確かな機能
• 確かなレイアウト
• 再可読性・編集性

といった点に影響するということですね。

aタグと見出しタグ

すこし HTMLの学習を進めていくと、見出しタグにリンクを設定したい場面も。その場合、

<a href="https://●●.com"><h2>タイトル</h2></a>

でいいのでしょうか？それとも

<h2><a href="https://●●.com">タイトル</a></h2>

と <a>タグを <h2>タグで囲うのが正しいでしょうか？ コードの出力結果も同じで、ハッキリわからないので W3C のコードチェッカーに両方のコードをポスト。どちらもエラーはなしで、両方正解という結論に。しかし、世間一般の HTMLコード見ますと、

<h2><a href="#">タイトル</a></h2>

の方が大多数。とりあえずは、見出しタグで <a>タグを囲う方法で良さそうですね。

まとめ

HTMLの学習初期は、とにかく自分の書いたコードが表示されれば嬉しいものですが、 CSS や JavaScript など複数の要素が加わってくると、段々難しくなり、エラー発見も困難に。ここで挫折するか、それとも学習を継続できるかは「モチベーション」「心的余裕」などありますが、「学習環境」もポイントになるのではないでしょうか。

自分ではわからないエラーも、他の人に聞けば直ぐに解決できる、ということもよく聞きます。『オンライン × マンツーマン』でプログラミング学習を支援する CodeCamp はそんな独学者の強い味方になってくれること間違いなしでしょう。

刻々と変化する社会情勢、 IT技術に早期適応するためにも一人で悩んでいる時間、ないかもしれませんね。ちなみに CodeCamp では、随時無料相談や無料体験を受け付けていますので、ホームページから空きスケジュールを確認してみて下さい。直ぐに体験申し込みできるかもしれませんよ。