- 更新日: 2020年8月25日
- 公開日: 2020年8月9日
HTML5とは？初心者向けに特徴や書き方もあわせて解説！
「HTML5ってHTMLとどう違うの？」「HTML5を使うのに何か設定は必要？」
「そもそもHTMLって何？」
こんな疑問を持っている方も少なくないはず。
この記事では、HTML5を理解してもらうために大きく分けて以下4つをご紹介します。
・HTML5の特徴
・HTMLのバージョン確認方法
・HTML5が対応するブラウザ
・HTML5で追加されたタグの紹介
また記事後半では、これから学ぶ入門者に向けて、学習の流れや資格情報にも触れていきます！
そもそもHTMLとは？
HTMLとは、Hyper Text Markup Language（ハイパーテキストマークアップランゲージ）の略で、Webページの見た目部分を作っている言語です。
実は今見ているこのページも、HTMLで作られています。
試しに、このページ内で右クリックをして、「ページのソースを表示」をクリックしてみてください。
ちょっとややこしいですが、よく見るとタグという『<>』で囲まれたパーツが、たくさんあるのが分かりますね。
普段Webページでよく目にする表や見出し、箇条書きやリンクなども、すべてタグで形作られているんです。
HTMLで作った見出しや箇条書きは、CSSで色を付けたり透けさせたりと、自由にデザインしていきます。
HTMLは通常CSSと組み合わせて使われていて、現在Web上に存在するほとんどのページがHTML & CSSで構成されています。
HTML５とは？３つの特徴を解説
HTML5はHTMLの最新バージョンです。
長い間HTML4が主流でしたが、Webの急速な発展に合わせて2014年10月にW3CがHTML5を勧告しました。
2017年12月には最新バージョンのHTML5.2が勧告され、今日に至るまでWebの標準となっています。
これまで複雑だった処理や構造が、HTML5では非常にシンプルになりました。
実際には非常に多くの機能が追加されていますが、ここでは特に重要な特徴を3つご紹介します！
特徴その①シンプルな文書構造
HTML5ではヘッダーやフッターといった、Webページの構造を示すためのタグが追加され、文書構造がとてもシンプルになりました。
以下はヘッダーの書き方を例に、HTML4とHTML5を比べています。
HTML4 → <div id="header"></div>
HTML5 → <header></header>
HTML5の方が、シンプルで非常に分かりやすいですね。
ブラウザや検索エンジンにも構造の意味が伝わりやすくなり、SEO対策おいても大きなメリットとなりました。
特徴その②動画や音声の埋め込み
これまでHTML4では、ブラウザに動画や音声を挿入する場合、『Flash』のような専用のプラグインが必要でした。
しかしHTML5には、プラグインがなくても動画や音声が挿入できる専用のタグが追加されています。
特徴その③レスポンシブ対応
スマホやタブレットの急速な普及に合わせ、携帯端末でWebサイトを閲覧するユーザーが年々増してきています。
ただ、PC用に作ったWebサイトをスマホで見るとなると、画面サイズが小さくて見づらいですよね。
そこでHTML5では、表示する端末ごとに画面サイズを最適化する処理を可能にしました。
どんな端末でも自動で見やすくする処理を、『レスポンシブWebデザイン』と呼び、CSSと合わせて設定します。
HTML5はどうすれば使えるの？
HTML5を使うために必要な、HTMLバージョンの確認方法とHTML5対応ブラウザについて解説します。
HTMLバージョンの確認方法
HTMLを書く際は、1行目で『文書型宣言』をおこなうのが決まりです。
『文書型宣言』とは「このテキストがHTMLのどのバージョンなのか」を示すものです。
HTML4の文書型宣言
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
HTML5の文書型宣言
<!DOCTYPE html>
どちらがスッキリしているかは、一目瞭然ですね。
HTML5を使う際、1行目を上記のように記述する以外は、特に設定や確認は必要ありません。
HTML5に対応するブラウザ
勧告された当初はHTML5を表示させられるブラウザは多くありませんでしたが、現在はほとんどのブラウザが問題なくHTML5を表示できるようになりました。
Can I USEというサイトを利用すれば、HTML5 & CSS3の対応状況が調べられます。
また、ブラウザごとに表示可能なHTMLのタグやCSSのプロパティも検索可能です。
追加されたタグ紹介
HTML5になって追加されたタグをいくつかご紹介します！
< header >タグ
< header >はヘッダー部分を表すタグで、導入的なコンテンツとして使われます。
ロゴ画像や、ナビゲーションメニューなどを記述するのが一般的です。
< header >
< img src="img/logo.png" >
< /header >
navタグ
< nav >はナビゲーションを表すタグで、メニューのリンクなどに使われます。
サイト内の別ページや、様々なコンテンツに移動するためのリンクを配置するのが一般的です。
< nav >
< ul >
< li >< a href="" > Home < /a></li >
< li >< a href="" > ブログ < /a >< /li >
< li >< a href="" > お問い合わせ < /a >< /li >
< /ul >
</ nav >
< aside >タグ
< aside >は、メインコンテンツと関連性の薄いコンテンツを表すタグです。
サイドバーなどに配置する広告や、補足情報を配置するのが一般的です。
< aside >
< h2 >広告< /h2 >
< p >これは広告です。< /p >
< /aside >
< article >タグ
< article >は、メディアの記事や独立したコンテンツなどを表すタグです。
ブログのような記事の1つ1つを囲うのに使われるのが一般的です。
< article >
< h1 >記事タイトル< /h1 >
< p >文章の段落< /p >
< /article >
< footer >タグ
< footer >はフッター部分を表すタグで、締めくくりのコンテンツとして使われます。
様々な使い方がありますが、会社概要やコピーライト、先頭に戻るリンクなどを配置するのが一般的です。
< footer >
< p >< a href="#" >先頭へ戻る< /a >< /p >
< p >© All rights reserved by ・・・< /p >
< /footer >
< canvas >タグ
< canvas >は、プラグインを使わずに図を描画するためのタグです。
< canvas >タグは描画する場所を用意するだけで、実際にはJavascriptで描画するので注意してください。
< canvas id="canvas" width="480" height="320" > < /canvas >
< script >
// JavaScriptのコード
< /script >
< audio >タグ
< audio >は、プラグインを使わずに音声ファイルを埋め込むタグです。
controls属性で再生・停止などの制御を行う、インターフェースを表示させます。
< audio src="sample.mp3" controls="controls" >< /audio >
入門者向け！学習の準備と流れ
初めて学習する方にとっては、何が必要でどうすれば書いたコードを確認できるのか、わからないことだらけですよね。
大まかな学習の準備と流れを解説します！
ブラウザとエディタの準備
学習を始めるにあたって、テキストエディタとブラウザさえあれば、まずは問題ないでしょう。
テキストエディタもブラウザも種類は豊富ですが、どれがいいか分からない場合は以下の2つをおすすめします。
・テキストエディタ ⇨ 『Visual Studio Code』『Atom』『Sublime Text』など
・ブラウザ ⇨ 『Google Chrome』
Google Chromeの検証モードは、ソースコードを手早く確認できるので、非常に便利です。
ここで挙げているものはすべて無料なので、ぜひ使ってみてください。
書いたものをブラウザで表示
Google Chromeで表示させたい場合は、テキストエディタ該当のタブをGoogle Chromeのタブ部分に向けて、ドラッグ&ドロップするだけです。
[Visual Studio Codeの場合]
1.コードを書いて保存したら、赤枠のタブ部分をドラッグ。
2.そのままGoogle Chromeの、赤枠タブ部分に持っていってドロップ。
HTML5に関連する資格
最後にHTML5に関連する資格を2つ解説します。
[Webクリエイター能力認定試験]
W3Cに完全準拠した、マークアップスキル測定試験です。
試験はスタンダードとエキスパートの2種類あり、使用するエディタによって試験時間が変わります。
公式ページによると、合格までの学習時間は24〜38時間程度です。
■スタンダード
試験時間：60分前後
費用：¥5,900(税込み)
試験実施：随時
■エキスパート
試験時間：120分前後
費用：¥7,500(税込み)
試験実施：随時
[HTML5プロフェッショナル認定]
HTML5だけでなく、CSS3、JavaScriptも含めて技術力を測定する試験です。
Level1とLevel2があり、試験はCBTと若干の入力問題で構成されています。
■Level1
試験時間：90分
費用：¥15,000(税別)
問題数：60問
試験実施：随時
■Level2
試験時間：90分
費用：¥15,000(税別)
問題数：40〜45問
試験実施：随時
＼一流デザイナーのスキルが身に付く／
まとめ
HTML5は初心者でも習得しやすく、他のプログラミング言語の理解にも繋がりやすいので入門言語としておすすめです。
「まったくの初心者で何から始めていいかわからない」という方は、CodeCampの無料体験をぜひご利用ください！
マンツーマンのオンラインレッスンで、プログラミングの楽しさに触れてみませんか？
- この記事を書いた人
- 佐藤恭平
