こんにちは！ HTMLのことならお任せあれ、ライターのナナミです。
ホームページを作ろうと思って調べると、必ずと言っていいほど目にするHTML。ホームページ作成の基本となる言語です。
なんかHTML5ってよく見るけど、
4とか3もあるの？
初心者の方が避けては通れないそんな疑問、この記事でバッチリお答えしていきます！
- HTML5とは何か
- HTML4と何が違うのか
- HTML5で何ができるのか
これらを知って、HTML5をより活用できるようになっちゃいましょう。
そもそもHTMLの役割は？
HTMLとは、ホームページを作る際に使う言語です。プログラミング言語と思われがちですが、厳密にはプログラミング言語ではなく、マークアップ言語という種類になります。
HTMLは「HyperText Markup Language」(ハイパーテキスト マークアップ ランゲージ)の略です。ハイパーテキストとは、クリックした時に別のページに移動する、リンクのことを指します。普通のテキストから次のページへ移動する、テキストを超えた機能を持っていることを表しています。
このHTMLには、大きく分けて2つの役割があります。
文字や画像、リンクを表示する
HTMLファイルには、ホームページに表示する文字や画像、リンク先のアドレスの指定などを記述します。
それらの必要な情報を書いたHTMLをWeb上に公開し、ファイルにアクセスすることで文字や画像が表示されるのです。
もうこの時点で、ホームページ作成にHTMLが必須であることがよくわかりますね。しかしHTMLの役割はこれだけではありません。
ロボットにホームページの内容を理解させる
昨今よく聞くSEO対策（検索エンジン最適化）には、HTMLを正しく書くことが必須となります。
ホームページを作成し公開すると、Googleが検索結果に表示するためのデータを得るための情報収集機能、ロボットがホームページを閲覧します。このロボットがホームページの内容を理解するために、HTMLで「タグ」を付与し、情報を整理してあげる必要があります。
例えばブログを開いて見ていると、見出しと本文の違いは見た目で判断することができますよね。しかしロボットは画面を見るのではなくソース（HTMLで書かれているもの）を読み込んで判断するので、どれが見出しでどれが本文なのか、見た目で判断することはできません。
そんな時にHTMLで見出し用のタグ、本文用のタグを付与しておくことで、ロボットが「ココハ見出しデスネ」と理解してくれるのです。
デザイン適用のグループ分けをする
HTMLはあくまでも情報整理のための言語であり、見た目を整える機能は基本的にありません。見た目はCSSという別の言語で整える必要があります。
このCSSを適用する際、どこの範囲に適用するのかを指定してあげる必要があります。その適用範囲を決めるのもHTMLの役割です。
HTMLでしっかり分けてあげないと、見出しと本文が同じ文字サイズになってしまったり、変な範囲に背景色が付いてしまったりします。直接見た目を整えるわけではありませんが、美しいホームページのために必要不可欠なのです。
HTML5って何？
HTML5は今現在メジャーに使われているHTMLのバージョンです。過去にはHTML4も3もありましたが、もう使われているホームページはほぼ無いでしょう（相当古い場合は別ですが……）
これからHTMLを使うならば、HTML5だけ覚えておけばOKです。HTML4からの大きな変化により、より便利に、今の時代に必須な機能がたくさん追加されているからです。
2014年に発表された最新HTML
HTML5は、2008年に草案が発表され、2014年に正式にリリースされました。2019年8月時点では更に細かい修正が行なわれ、HTML5.2が正式な名称となります。
草案が発表された1年前である2007年、今では当たり前となったアレが発売されました。そう、iPhoneです。
当時は携帯電話を持っているのは当たり前、パソコンを持っている家庭も増えてきていたIT社会の過渡期です。そんななか革命的なデビューを果たしたiPhoneですが、当時のHTMLはスマホを想定したものではないため、扱いづらい部分が多々ありました。
そこで生まれたのがHTML5です。これからの時代に必要な「Webのプラットフォーム」として作られました。
現在はこのHTML5が主流となり、あらゆるホームページを表示し、ロボットに認識してもらうために使用されています。
HTML4から何が変わった？
ざっくりまとめると以下の3つの変化がありました。
- スマホに対応した
- 記述がシンプルになった
- 使えるファイル（音楽や動画）が増えた
HTML4から5への一番の変化は、パソコンだけでなくスマホにも対応可能となったこと、つまりマルチデバイス化です。これにより、スマホに向けたホームページを簡単に作れるようになりました。
また、HTML4ではcenterというタグをつけることで文字の位置を中央寄せにしたりしていましたが、それらのタグはすべて撤廃され、見た目の調整はすべてCSSで行なう仕様になりました。これにより、HTML5では記述がシンプルになり、扱いやすく見やすいコードになっています。
もちろん撤廃ばかりではなく、HTML5で追加されたタグもあります。この追加されたタグにより、HTML内で直接音楽や動画を埋め込むことができるようになりました。
徹底解剖！HTML5でできるコト
HTML4と比較すると、とっても便利になったことが伺えますね！より理解を深めるため、もっと詳細に、HTML5について紐解いてみましょう。
スマホ対応が超楽チン
まず一番注目したいのはやっぱりこれですね！スマホ対応がものすごーく楽になりました。
HTML5が普及する前は、スマホ用のホームページ、パソコン用のホームページと分けて作る必要がありました。「スマートフォンの方はこちら」みたいなボタンがあったりしましたよね。
つまりスマホ対応するためには、労力が単純に二倍になっていたわけです。辛い。
しかしそんな心配はもう必要ありません。HTMLファイルを全く同じにしても、問題なくスマホで表示することができます。URLも同じにできるので、スマホ用とパソコン用、分けて書いたりしなくていいんです。
2019年現在、スマホはパソコンよりも普及しており、ホームページのスマホ対応は必須となっています。そうなるとHTML4はもう出番なしですね、HTML5使いましょう、どんどん使いましょう。
3Dなアニメーションが作れる
HTML5の面白い追加要素として、3D対応があります。
これまでは奥行きのある表現や回転の表現などをすることはできませんでした。しかしHTML5では実現可能です。CSSと組み合わせることで、表示されている要素に簡単に動きをつけられるようになりました。
表現の幅が広がったことで、より使いやすく美しいホームページを作れるようになったのです。
音声や動画の埋め込みができる
表現の幅はCSSとの組み合わせばかりではありません。HTML4との違いでも解説したとおり、数多くのタグが追加され、音声や動画を埋め込むことができるようになりました。
これまではFlashというものを使って表現していましたが、そもそも動画をFlashに変換したりなど、面倒な作業が色々ありました……。もうそんなものは必要ありません、MP4ファイルをvideoタグで入れるだけで動画を埋め込むことが可能です。
※ぶっちゃけ今はYouTubeの動画を埋め込むパターンが多いので、あまり出番がない悲しい機能でもあります……存在だけでも覚えてあげてください。
簡単にフォームの入力チェックができる
タグの追加による恩恵は動画や音声だけではありません。メールフォームを構成するタグが追加されたことにより、HTMLで入力形式のチェックができるようになりました。
例えば電話番号の場合、平仮名や英字が入ることはあり得ませんよね。その場合「この項目は電話番号を入れるものです」とHTML側で作ってあげれば、平仮名などがある時に「不要な文字が入っていますよー」とアラートを出してくれるようになったのです。
※ただやっぱり細かい部分はHTMLだけではカバーできないので、JavaScriptという言語も併用することが多いです。頑張れHTML、負けるなHTML。
HTML5はどうやって勉強するべき？
こんなに魅力たっぷりなHTML5、Web業界では必須のスキルです。ホームページを作り出すコーダーだけでなく、デザイナーも学ぶべきですし、フロントエンドエンジニアというアプリ作成などをするエンジニアにとってはできて当然。あらゆるWeb開発の基礎中の基礎と言っても過言ではありません。
勉強するとなると、大量にあるタグを全て覚えなければいけないと思いがちですが、実は暗記の必要は一切ありません。コツだけ掴んでしまえば、あとは調べながらで全然OKなのです。
下記のような流れで順を追って学習していきましょう。
まずは書き方を覚えよう
まずは書き方のお作法を覚えるところから始めましょう。と言っても、HTMLのお作法はとっても簡単です。
【HTML】
はいこれだけです。HTMLは「開始タグ」と「終了タグ」があり、それで文字などを囲むことで要素のグループを作ることができます。
ここで注意したいのは
- タグの名前を間違えない
- 入れ子になるようにする
の2つだけです。タグのタイプミスはわかるとして、入れ子はちょっとわかりづらいと思うので例を見てみましょう。
【HTML】
文字などが入る場合ここに入れる
文字などが入る場合ここに入れる
いい例の方は、divタグの開始タグと終了タグの間に別のタグの開始から終了までがあります。
一方、悪い例ではちゃんと間に入ってませんね。これでは正しく表示することができないので、要注意です。
逆に言えば、注意しなければいけないのはこれくらいです。簡単ですね！
情報のグループ分けを練習しよう
書き方のお作法がわかれば、HTMLを書くことは簡単です。しかしHTMLで重要なのは、どこにどのタグを使うのか、情報のグループを正しく作ることです。
ガシガシ書き始める前に、まずはその練習をしていきましょう。自分の好きなホームページを開いて、「この部分は見出しだな」「この部分はリストだな」「ここは枠が付いているから何かしらのグループだな」と分類してみるのです。
ホームページを紙に印刷して書き込んでいくと、より感覚的な理解をすることができます。遠回りに思うかもしれませんが、騙されたと思って1ページだけでもやってみてください。
実際に書いてみよう
お作法も覚えた、グループ分けの感覚も掴んだとなれば、あとはどんどん書いていきましょう！
ここでのポイントは、タグの種類を意識することです。
「ここはリストだからリストのタグがあるなら使おう」とか、「ここはリンクだからリンク用のタグが必要だな」と、各分類には必ず対応するタグがあるはずと思って進めていきます。
もちろん思っただけでは、対応するタグが存在するのか、存在するとしたら何というタグなのかわからないですよね。当然調べる必要がでてきます。
この調べるのがポイントです。HTMLは暗記の必要はありませんが、必要な時に必要なタグを見つけ出すスキルが必要になります。
この手順はその調べるための練習なのです。
流れをまとめると下記のようになります。これを意識して書くことで、実践的なHTMLスキルを身につけることができるので超オススメです。
1.何を調べたいのかを明確にする(リストのタグを知りたい、リンクのタグを知りたいなど)
2.「HTML リスト タグ」などと調べたいキーワードでGoogle検索する
3.リファレンスなどが表示されるので、それを見て書く
更に具体的に、ホームページを作りながら学ぶ方法を下記の記事で紹介しています。こちらもぜひ参考にしてみてくださいね。
HTML5をより活用するプラスαスキル
HTML5は、他の言語を組み合わせることで更に便利で美しいホームページを作ることができます。むしろHTMLだけでは、100％の力を発揮できないレベルで重要です。
下記の言語も並行して学んで、より素敵なホームページを作れるようになっちゃいましょう。
見た目を美しく｜CSS
今回の記事でところどころ出てきたCSSは、ホームページの見た目を作り上げるための言語です。
文字の大きさ背景の色を設定したり、簡単なアニメーションを作ることもできます。
下記の記事で詳しく解説しているので、ぜひこちらもご覧ください。
動きをつけよう｜JavaScript
HTMLとCSSができるようになれば、ある程度のホームページは作ることができます。しかしそこに更に動きをつけることで、よりオシャレなホームページを作ることが可能です。
そのために必要なのがJavaScriptというプログラミング言語です。HTMLを追加したりCSSを書き換えたりして、より幅広いアニメーションを実現することができます。
JavaScriptはホームページ作成以外に、アプリの作成などにも活躍してくれます。ぜひ下記2つの記事で詳細をチェックしてみてください。
ブログが作れちゃう｜PHP
HTML、CSS、JavaScriptはホームページ作成の3種の神器です。そこから更にレベルアップできるのがPHPです。
WordPressというブログアプリケーションを構成しているプログラミング言語です。これを扱えるようになると、WordPressを使ったブログサイトの作成が可能になります。
仕事の幅もグッと広がるオススメの言語です。下記の記事で詳細を紹介しているので、こちらも参考にしてみてくださいね。
まとめ
HTML5は、現代のWebに必要不可欠な存在です。そして、ありとあらゆるプログラミングの登竜門でもあります。
プログラミング言語ではない分、覚えるのもとても簡単！ ぜひ気軽に触れてみて、その魅力を実感していただければ幸いです。
