ささぴよ 
この記事では、そもそもHTMLってなんだっけという話を追いながら、改めてその必要性とか、こんなことができるとかそういう部分を確認していこうと思います。
正確に技術としての理解をするということよりは、大枠としてどんなものなのかということや、どう使えるのかということをイメージでとらえるためにまとめている記事です。
この記事を通して興味が湧いたら、他の皆さんの書いている記事も見てみてください。必要な記事が読めるようになっていると思います。
目次ページはこちらにありますので、よかったらみてみてください。
この記事の目次
HTMLを書く理由
ざっくりいうと、ブラウザでサイトを表示させるためにはHTMLが無ければなりません。
と言われたときに、「えっ、プログラミングでPHPとかRubyとか使ってページ表示させてるでしょ？」って思ったあなたは割とイイところを突いているかもしれません。
ただ、その言葉の意味を正確に捉えようとすると、それは誤りです。どういうことかと言うと、どんなプログラミング言語を使っていても表示するために出力しているのはHTMLであるからです。
ブラウザで表示させるためには、プログラムがHTMLを作り出してそれをブラウザに送るという処理をしているわけです。なので、いきなりプログラミング言語を勉強したり、WordPressのことを勉強しようとする方もいらっしゃいますが、個人的にはHTMLとCSSについてをある程度理解してからそれぞれの言語やWordPressの勉強に入ることをお勧めしたいです。
HTMLの今まで
まぁ、私は歴史は未来を作らない（歴史をしっかり勉強しても未来に活かせるとは限らない）と思っているので、正直あまり知っていても意味がない気はするのですが、HTMLについては知っておかないとトラブルになるものもあると思いますので、あえて触れておきましょう。
これらをある程度把握していれば、ネットの古い情報に振り回されることはないでしょう。
CSSの登場による役割の変化
初期のHTMLはデザインも指定するものでした。しかし、時代の流れと共に表現するべきデザインの幅が広がり、CSSというものが生まれました。
それに伴って、現行のHTML5（HTMLのバージョン5系統）においては、「HTMLは、文書構造を提示するものとして使う」という方向性が明確になり、色々な指定が認められなくなりました。
例えばこんなコードが昔は使えたのです。
<p color=“#ff6600”>オレンジっぽくなるかな？</p>
ですが、いまは「color」という属性は廃止され使えなくなっています。あまり勧められる方法ではないですが、同じことをやろうとするとこんな感じで書けるということになります。
<p style=“color: #ff6600;”>オレンジっぽくなるかな？</p>
CSSの記述をタグに対して入れることができるという話ですね。この書き方をするとCSSファイルでの記述が一切消えてしまう（上書きされて使えなくなる）ので、積極的にはお勧めしません。ただ、JavaScriptを使った表現などでは、裏側でこのようなスタイリングがなされていることがあります。これは動的（状態に応じて変更される表示の際）に使われる手法です。
タグは小文字で
HTMLのバージョン4系統まではタグは大文字でも小文字でも良いとされてきました。また、同時期に台頭していたXHTMLについては、小文字を使わなければならないとされていました。
古めな解説を見ているとタグ名を大文字で書いているものがあったりします。初期のHTMLではそれが普通でした。むしろ大文字でないとダメという解説もあったと思います。（これはうろ覚えです。）
といったところで、現行のHTML5ではどうなのかというと、大文字小文字は区別されないということになっています。実務上タグのためにシフトキーを押しっぱなしにしたり、CapsLockを有効にするのは非効率的であることから、小文字で記述されることがほとんどになりました。
大文字で書くなというわけではないのですが、変な労力を割く必要はないですよね。
imgタグなどに/は不要
これまた過去のお作法との兼ね合いです。XMLをベースとしたXHTML時代においては、imgタグを利用する際に、タグを閉じる前に「/」をつけなければならないというルールがありました。これは、XMLのルールに則ったものです。
それを使って解説されている色々なコードや、XHTML内での利用を想定したコードでは今でも最後に「/」を入れているものがありますが、HTML5の見解としては「入れても良い」なので、裏を返すと「無いのが普通」です。
違反では無いですが敢えて文字を多く打つ必要はないですよね。
いくつかのタグは役割が変わった
以前までのバージョンのHTMLと比べると、HTML5ではいくつかのタグについて役割が変わっています。
例えば、当初は文字サイズを小さくする役割を持っていたsmallタグは、今となっては「注釈や細目を表すもの」として使われるようになりました。
必ずしも同じ意味合いで使われるわけではないので、書いているHTMLに合わせて適切な選択が必要だということですね。不安になるものがあれば、改めて確認してから使うのが良いでしょう。
箱で考えれば良い
実際「ボックスモデル」などと呼ばれますので、見た目上の考えは箱として考えて行くと良いでしょう。
文書の構造として、箱が2つの箱を跨ぐ形で内包されることはありません。段ボール箱の中に段ボール箱は入れられるけど、2個に分かれた段ボール箱に続きものを入れることはできないですよね？（切って繋いで…ってやったら、それは大きな１つの箱になってますしね。）
配置としてはCSS側でどうにでもできると（とりあえずは）思っておいたとしても、文書構造は箱の中に箱を入れるという考え方を覚えておきましょう。
実はこんなことも許される
タグを省略することができたりします。これは、見にくくなることも含め推奨されないのですが、たとえば、htmlタグを開始・終了共に省略できるパターンがあります。
結局自分の首を締めることになるので、あんまりお勧めしたくないのですが、そういう方法もあるぜということで知っておいてもイイでしょう。
もし他人様の書いたコードで省略を見つけたら、やんわりと「これ省略できるんですね！」くらいの反応を示して本人に対処を委ねましょう。問題が起こっていない（そして文法チェッカーでエラーにならない）のであれば、世の中的に誰も迷惑ではないので。
もし、そのコードが他の人の手に渡るものなら「できれば見渡しよくするために省略しないで書いてもらえますか？」っていう交渉はありだと思います。相手を尊重しながらね。
そんな感じで、意外と深いお話になっちゃった気がしますが、どうしても過去の情報が良くも悪くも消えていかないネット社会で、誤った情報に惑わされないためには知っておいた方がいいことというのがあると思いましたので、つらつらと書いてしまいました。
あまり難しく考えすぎず、「ページの文書構造を書くもの」で「ブラウザーが表示するために必ず必要なファイルのうちの1つ」と思っていただけたらと思います。