HTML5とは？新規タグとHTML5で出来るようになったこと
HTML5とは？
この記事を読むための時間：5分
HTMLの勉強をはじめると、「最新のHTML5では、どんなことができるようになったの？」
「新しく追加されたタグが便利って聞いたんだけど、どんなタグが追加されたの？」など、
「新たにできるようになったこと」や「新しく増えたタグでどんなことができるのか」などが気になってきますよね。
そこで本記事では、HTML5の概要からHTML5で出来るようになったこと、またHTML5で新しく追加されたタグについてお話しします。
目次
そもそもHTML5って何？
そもそもHTML5とは、2014年に大幅に改定されたHTMLの最新バージョンのことです。
わかりやすく説明すると、HTMLが開発されてから大幅に5回のバージョンアップをしたということです。
2020年現在、2017年にバージョンアップされたHTML5.2が最も新しいバージョンです。
HTML5で出来るようになったこと
では、一体どんなことが出来るようになったのでしょう？
今までのHTMLでは出来なかったことを中心に5つご紹介します。
① どんなブラウザや媒体からでも正しく表示できる
これまでのHTMLは、ブラウザの互換性機能が低く、ブラウザごとに正常に表示されたり、されなかったりと非常に不安定な状態でした。
しかしHTML5では、「ブラウザの互換性が格段に向上」したため、現在では、HTML5で制作されたウェブページなら、どのブラウザや媒体からでも正しく表示されるようになりました。
② プラグインを使用せず音楽や動画が埋め込める
これまでのHTMLでは、動画や音楽を埋め込むためには動画や音声を再生させるためのプラグインが必要でした。
しかし、HTML5で音声や音楽を読み込むためのタグが追加されたおかげで、プラグインを使用せずとも、動画や音声などをウェブサイト内に埋め込めるようになりました。
また、ユーザー側もプラグインに対応している媒体で無ければ、見聞きできなかった動画や音声が、PC、スマホ、タブレットなど、どんな媒体でも再生できるように進化しました。
③ ユーザーの位置情報が取得できるようになった
HTML4まではユーザーの位置情報を取得する実装が難しかったのですが、
HTML5になりAPI機能も進歩した結果、今まで困難だったユーザーの位置情報が取得できるようになりました。
ユーザーの位置情報が正しく表示されることで、スマホで簡単に現在地を確認することができたり、近くのお店情報なども簡単に取得できるようになり、非常に便利な機能やサービスを受けられるようになりました。
④ タグの記述がシンプルになった
HTML5は、タグの記述もシンプルになりました。
今までのHTMLでは、divタグでまとめ、一つ一つをdivダグで名前を付けて管理するというルールがあったため、タグも複雑で記述も面倒な作業でした。
しかしHTML5になり、基本的なタグの記述が、〈タグ名〉〜〈/タグ名〉というふうに、非常にシンプルな記述でOKになったため、効率よくサイトの制作ができるようになりました。
また、タグの記述がシンプルになったことでHTML5の習得も速くなり、文章構造などもわかりやすくなりました。
⑤ 3Dアニメーションの作成ができるようになった。
今までのHTMLでは平面のアニメーションしか作成できませんでした。
しかし、HTML5で新しく登場した「canvas」タグを使用し、JavaScriptで描写することで簡単に3Dのアニメーションを作ることができるようになり話題となりました。
HTML5にデメリットはないの？
格段に進化したHTML5ですが、デメリットはなのでしょうか？
さまざまな口コミや情報を調査してみると、
HTML5は2020年現在、HTML5が勧告されてから約3年経過しますが不具合などはあまり起きていないようで、悪い口コミもほぼ見られませんでした。
このことから今のところ、HTML5にはこれといったデメリットは見当たらないと言えるでしょう。
新しく追加されたタグとは？
HTML5では新規でタグが追加され話題となりました。
ではその新規タグとはどのような意味を持つタグなのでしょうか？
ここからはHTML5で追加された新規タグを簡単にご紹介します。
新規タグ一覧
1.articleタグ
| タグの意味 | ウェブページの中でも「独立した記事」であることを表すタグ |
| 記述方法 | 〈article〉〜〈/article〉 |
| タグの特徴 |
|
2.asideタグ
| タグの意味 | ウェブページの中でも「余談や本筋と関係のない内容」であることを表すタグ |
| 記述方法 | 〈aside〉〜〈/aside〉 |
| タグの特徴 |
|
3.audioタグ
| タグの意味 | ウェブサイト内に音声を埋め込むことを表すタグ |
| 記述方法 | 〈audio〉〜〈/audio〉 |
| タグの特徴 |
|
4.canvasタグ
| タグの意味 | 画像やプラグインを使用せずにJavaScriptベースで図形やアニメーションなどを作成できるタグ |
| 記述方法 | 〈canvas〉〜〈/canvas〉 |
| タグの特徴 |
|
5.footerタグ
| タグの意味 | 自身が属するセクションのフッタとなるグループを表すタグ |
| 記述方法 | 〈footer〉〜〈/footer〉 |
| タグの特徴 |
|
6.headerタグ
| タグの意味 | セクションの先頭となるグループを表すタグ |
| 記述方法 | 〈head〉〜〈/head〉 |
| タグの特徴 |
|
7.navタグ
| タグの意味 | その要素がページ上の主なナビゲーションであることを表すタグ |
| 記述方法 | 〈navi〉〜〈/nevi〉 |
| タグの特徴 |
|
8.sectionタグ
| タグの意味 | ウェブページ内の文章やコンテンツの一部をまとめて1つのセクションであることを表すタグ |
| 記述方法 | 〈section〉〜〈/section〉 |
| タグの特徴 |
|
9.timeタグ
| タグの意味 | 24時間制の時刻や日付（グレゴリオ暦）を正確に表すタグ |
| 記述方法 | 〈time〉〜〈/time〉 |
| タグの特徴 |
|
10.videoタグ
| タグの意味 | HTMLコンテンツ内に動画を埋め込むことを表すタグ |
| 記述方法 | 〈video〉〜〈/video〉 |
| タグの特徴 |
|
まとめ
本記事では、HTML5で出来るようになったことと新規タグについて解説しました。
HTML5にバージョンアップされてから、
-
どのブラウザや媒体からでも正しくウェブページが閲覧できる
-
動画や音楽を簡単に埋め込めるようになった
-
タグの記述がシンプルになった
-
ユーザーの位置情報を取得できる
-
3Dアニメーションの作成
など、今までのHTMLよりも出来るようになったことが格段に増えました。
また新規タグが追加されたことで、HTML5は更に進化しさまざまな便利なアプリやサービスが開発されるでしょう。
ぜひ、これからHTMLを学ぶ方はHTML5から学習することをおすすめします。ぜひ、参考にしてください。
弊社代表著作
「Web集客実戦書（定価1,000円）」
ダイジェスト版“無料”プレゼント
アマゾンKindleストアでベストセラー1位の弊社代表著作「小さな会社のWeb集客実戦書（定価1,000円）」の ダイジェスト版(1/3程度の内容を掲載)を無料でプレゼントします！
アマゾンKindleストアでベストセラー1位の弊社代表著作「小さな会社のWeb集客実戦書（定価1,000円）」の ダイジェスト版(1/3程度の内容を掲載)を無料でプレゼントします！
- アマゾンKindleストア『広告・宣伝 』カテゴリー売れ筋トップ100第1位
- PDF形式なのでKindleがなくても読める
- 弊社が成果を挙げてきた珠玉のノウハウが詰まった1冊
- kindle unlimitedなら正式版が無料で読める
“本書の方法を実践した方、結果出ています。”
無料ダイジェスト版を是非お読みください。
詳しくは以下をクリックしてみてください。
“本書の方法を実践した方、結果出ています。”
無料ダイジェスト版を是非お読みください。詳しくは以下をクリックしてみてください。
