HTMLを使って会話するコツ

HTMLを使って会話するコツ

Hey, guys!

こんにちは、カオツです。
日本人なのになんで英語なんて勉強しなきゃいけないの。
とか言ってられない時代になりましたね。

海外の人とコミュニケーションをとりたいから英語を勉強する。
機械とコミュニケーションをとりたいからプログラミング言語を勉強する。
今回はそんな話をしたいと思います。

コミュ症でも安心HTML

人とコミュニケーションを取るのって大変ですよね。
相手の気持ちを考えたり、相手の立場を考えたり、状況、空気を読んだり。。。
上手くコミュニケーションが取れなくて疲れるなーって人多いと思います。
僕もそうです(笑)

そんな僕でも気を使わずに話せるのがパソコンです。

僕が初めてパソコンと筆談したのはHTMLという言語でした。
HTMLは基本ブラウザを通して対話します。

ブラウザはこちらの言葉がおかしいと直ぐに拗ねるし、記述を間違えても何も教えてくれないし、、、案外扱いづらい、、、と初めは思ってましたが、こちらがしっかりに把握すれば人との会話とは比べ物にならないくらいスムーズに意思の疎通ができるとってもいいやつ!

そんなんブラウザとHTMLで話すなかで間違えがちなことを1つピックアップしてみました。

開始タグと閉じタグ

小さい頃おかんに「冷蔵庫のドア開けたらちゃんと閉めなさいよ!」ってよく怒られませんでした?
それと同じです。(編集部:えっ!?)

image07

これだけ見れば簡単そうに見えますが、開始タグが多くなると閉め忘れが起るんです。

例1)

image06

こんな感じで、上記の記述は完全に閉め忘れてますね。
おかんに怒られるやつです。

例2)

image04

これでちゃんと閉められましたね。
赤文字の部分が締め忘れていた箇所です。

締め忘れを防止するとっておきの方法がこちら。

例3)

image05

どうでしょう!?
タグの先頭にスペースをつけるだけでうんと見やすくなりました!
開始タグと閉じタグの位置が必ず同じ列に来るのでパット見て閉じていることを確認できますね。

HTMLは先頭にスペースを入れて書くのがスタンダードです。

ちなみに、入力フォーム等でよく使われる<form>タグの閉じタグを忘れたり、書き間違えると、お客様が入力されたデータが届かない!なんて身の毛もよだつようなことが起こるので気をつけてくださいね。。。

ミスを解決するには

まず複雑な構造だと、どこで閉じているのか、ミスをしているのかがわかりません。
そこでテキストエディタの機能を使ってみましょう。

専用のHTMLエディタまではいかなくても、無償のテキストエディタでも自動整形するツールがたくさんあるので、それを利用することでかなり軽減できます。

例えば、bitWaveでも何度か紹介していますがAtomなんてどうでしょう?
他の人が書いたHTMLの先頭にスペース(インデント)がなかったら、いちいち入れるのは面倒ですね。

オンラインツールでDirty Markupというのがあります。

文字通り汚いマークアップをきれいにしてくれるツールです。
ミスがあると正常な入れ子構造にならないので、気づきます。

ミスを発見するには

入れ子のミスの場合、完全にミスの箇所を自動修正するツールは少ないですが、絞り込みはできます。

例えばChromeのプラグインだとhtmlエラーチェッカーなどがあります。

その他、ブラウザプラグインでもHTML整形や文法チェックは、多数出ているのでGoogleで検索してみてください。

まだまだあるHTMLの注意点

本当はもっと大切なルールは沢山ありますが、書き出したらきりが無いので今回はここまで。
僕もまだまだ知らないエラーが沢山あるので、日々トライ&エラーで知識を増やしています。

目指せHTMLマスター!

コメント