HTML4やHTML5など同じ"HTML"でも時代と共にバージョンアップしてきました。
この記事では、現在最も使用されているHTML5について詳しく紹介していきます。
今回の記事では
- HTML5では何ができるのか
- 今までのバージョンとは何が違うのか
- HTML5で追加・廃止されたタグの一覧
という内容を解説していきます！
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
目次
そもそもHTMLとは？
HTML5の説明に入る前に、簡単にHTMLとは何かを解説します。
HTMLとは、ものすごく簡単にいうとWebサイトの構造をコンピュータがわかるように教える言語です。
つまり、サイトの骨組みの部分を担当しているということです。
WebサイトやWebページを作るためには、文章や画像が必要ですよね。これらを表示するための情報をHTMLに記述していくことによって、Webサイトやページの骨格ができあがります。
イメージしにくい人は新聞を作るような工程を思い浮かべると分かりやすいかと思います。「ここが一つのまとまりで、この文章は見出しにしよう。ここに画像を入れて・・・」という構造をHTMLで作るといった感じです。
HTMLの歴史
HTMLはアップデートを繰り返してきましたが、現在使われているのはHTML5というバージョンです。
過去のものは使えなくなる（現在では非推奨）ので、現在使われているものを学習すれば大丈夫です！これからもアップデートされていくので、常に最新のものを学習するよう意識しておきましょう。
HTML5で変わったこと
HTML5はHTML4の進化版で、より扱いやすく、わかりやすくなっています。どんなことが変わったのか、HTMLでどんなことができるようになったのかを解説していきます！
DOCTYPE宣言が簡単になった
HTMLを使用するには、DOCTYPE宣言という記述が必要です。HTML4までは宣言にいくつか書き方があり、長めの記述が必要でした。
HTML5では以下の記述だけでHTMLを使用することができます！
<!DOCTYPE html>たったこれだけです。簡単ですよね！
新しいタグで構造がわかりやすくなった
HTML5から、ページをエリアごとに管理するタグが追加されました。エリアごとというのは、例えばヘッダーやフッターなどの部分です。
ヘッダーやフッターを作るには、以下のように記述します。
<header></header>
<footer></footer>他にも、文書構造を伝えるタグがいくつかあります。
- header
- footer
- nav
- section
- aside
- article
などです。これらのタグを正しく使うことで、Googleがページの内容を理解してくれるようになります。
つまり正しくタグを使うことで、SEO対策にも効果的にはたらくようになりました！
動画や音声データを再生できるようになった
HTML4までは、動画を埋め込む場合はFlashという埋め込みコードを使う必要がありました。端末によっては専用のプラグインが必要になるなど、ユーザーへの負担が懸念されていました。
しかし、HTML5ではvideoというタグを使うことで、どんな端末でも簡単に動画や音声を再生できるようになったのです。
videoタグについてはこちらの記事でより詳しく解説しています。
HTML5でvideoタグを使って動画を埋め込む方法を簡単解説！
レスポンシブ対応がしやすくなった
Webサイトを表示する端末は、現在はスマホが主流ですよね。
そのため、サイトを作るときにもスマホで見たときの視認性を考えることが非常に大切です。
表示している端末によってサイトを見た目を変えていくことをレスポンシブ対応といいます。
HTML5では、レスポンシブ対応を簡単に行えるようになりました。このような処理はHTMLのみでなくCSSを一緒に書いていくことで可能です。
- DOCTYPE宣言が簡単になった
- 新しいタグで構造がわかりやすくなった
- 動画や音声データを再生できるようになった
- レスポンシブ対応がしやすくなった
HTML5で追加されたタグ一覧
HTML5から追加されたタグで、よく使うものをピックアップしてみました！
| タグ | 説明 |
|---|---|
| <article> | 自己完結したセクション |
| <aside> | 補足的なセクション |
| <audio> | 動画や音声を再生する |
| <footer> | フッター |
| <header> | ヘッダー |
| <main> | メインコンテンツ |
| <mark> | テキストのハイライト表示 |
| <nav> | ナビゲーション |
| <section> | セクション |
| <source> | メディアリソースの候補を指定する |
| <track> | 動画・音声と同期するテキストトラック |
| <video> | プラグインを使わずに動画を再生する |
| <wbr> | 改行位置の候補を表す |
HTML5で廃止になったタグ一覧
今度はHTML5で廃止になったタグの一覧です。こちらは使わないようにしましょう。
| 要素 | 説明 |
|---|---|
| <acronym> | 略語（頭字語） |
| <applet> | Javaアプレットの埋め込み |
| <basefont> | 基準となるフォントサイズ |
| <bgsound> | BGMの再生 |
| <big> | 大きめの文字 |
| <blink> | 文字の点滅 |
| <center> | センタリング |
| <dir> | ディレクトリ型のリスト |
| <font> | フォントのサイズ・色・種類 |
| <frame> | フレーム内の設定 |
| <frameset> | ウィンドウの分割 |
| <isindex> | 1行のテキスト入力欄 |
| <marquee> | 文字のスクロール |
| <nobr> | 改行させない |
| <noembed> | embed要素の代替コンテンツ |
| <noframes> | フレームの代替コンテンツ |
| <strike> | 取り消し線 |
| <tt> | 等幅フォント |
最後に
HTMLは簡単に思われがちですが、奥が深くておもしろい言語です。きちんとコードがかける人はそれだけで重宝されるので、しっかりとHTMLの知識をつけていくことが大事ですね。
今回の記事ではHTML5というバージョンについて説明してきましたが、HTMLを含めたWebの技術はこれからも進化していきます。継続的に学習をしていく姿勢を持ち続けましょう！
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
