HTML5を初心者の方のために分かりやすく解説！学習サイトも紹介
2021.01.27
今ではWebサイト制作の定番スキルとなったHTML5。その一方で「HTML5ってHTML4と何が違うの？」「どうやって学習したらいいの？」と思われている初心者の方も多いのではないでしょうか。そこで本記事では、初心者の方でも分かりやすいようにHTML5の特徴や学び方について解説します。
HTML5とは？バージョンアップ履歴
HTML（Hyper Text Markup Language／ハイパーテキストマークアップランゲージ）とは、マークアップ言語の一種です。
文章構造ごとにタグ（<>）を使って目印をつけることで、「A～Bまでが見出し」「C～Dまでが箇条書き」とコンピューターに理解させるための言語、と言った方がイメージしやすいかもしれません。
HTMLは何度かバージョンアップを重ね、2021年現在は改訂第5版にあたる「HTML5」以上が主流となっています。
▼HTMLのバージョンアップ履歴
- HTML初版：1989年
- HTML1：1993年
- HTML4：1999年12月
- HTML5：2014年10月
- HTML5.1：2016年11月
- HTML5.2：2017年12月
マークアップ言語・プログラミング言語・CSS言語の違いは？
HTML5は、あくまで目印を付ける「マークアップ言語」の一種です。
したがって、よく混同されがちな「プログラミング言語」や「CSS言語」とは目的・役割が異なります。
- マークアップ言語：コンピューターに「文章構造を伝える」言語
- プログラミング言語：コンピューターに「データ処理を命令する」言語
- CSS言語：文字色やサイズなど「装飾を指定する」スタイルシートの規格の一種
なお、マークアップとマークダウンの違いについては下記の記事でも詳しく解説しております。
HTML5の使用ルール！文書型宣言の方法
HTMLを記述する際のルールは1つだけ。
1行目にHTMLのバージョンを示す「文書型宣言」を記載しなければなりません。
▼HTML5の文書型宣言
<!DOCTYPE html>
▼HTML4の文書型宣言
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
上記の通り、HTML5の文書型宣言は従来のHTML4よりも格段にシンプルになっているのが分かります。
HTML5にできること！HTML4との違いとは？
この段落では、HTML5がHTML4よりも勝っている6つの改良点について解説します。
ブロック要素とインライン要素による分類が廃止
HTML4では、大きく2つの要素に分類されていました。
▼HTML4の要素
- ブロック要素：見出しや段落といったコンテンツの「骨組み」となる要素
- インライン要素：リンクや文字の強調といった「文章中の一部」として扱う要素
一方、HTML5では上記の考え方が廃止され、一部を除きより細かい7種類の「カテゴリー」に分類されています。
さらに、特定の要素に対しどのカテゴリーに属した要素が記述できるのか、「コンテンツ・モデル」が定義されているのです。
▼HTML5の「カテゴリー」と「コンテンツ・モデル」
- メタデータ・コンテンツ：<meta>や<title>など、<head>内で使用できる要素
- フロー・コンテンツ：<span>や<ul>など、<body>内で使用できる要素
- セクショニング・コンテンツ：<article>や<section>など、文章の区切りを表す要素
- ヘッディング・コンテンツ：<h1>～<h2>までの見出し要素
- フレージング・コンテンツ：<a>や<br>など、HTML4のインライン要素と同じ
- エンベッディッド・コンテンツ：<audio>や<video>などの埋め込み要素
- インタラクティブ・コンテンツ：<a>や<label>など、ユーザーが操作できる要素
簡単レスポンシブ対応
ユーザビリティを重視するGoogleでは、マルチデバイス対応をSEOの大きなアドバンテージと位置づけています。
だからこそ、HTML5ではPC・スマホ・タブレットなど端末の種類を問わず、それぞれの画面サイズに合わせて最適化する「レスポンシブ対応」が簡単になったのでしょう。
レスポンシブ対応しているサイトの作り方については下記の記事で解説しています。
動画や音声データが簡単に扱える
HTML4で動画や音声を追加する場合、「Flash」などの専用プラグインを用いるのが主流でした。
しかし埋め込みコード自体が難解だったうえ、Flashのプラグインをインストールしていないユーザーは視聴できませんでした。
これに対し、HTML5では動画・音声ともに簡潔に記述できる専用タグが用意されています。
- 動画データ：<video>
- 音声データ：<audio>
つまり、初心者でも扱いやすくなったのはもちろん、スマホなどでも対応機種を気にせず再生が可能になったのです。
アプリケーションが簡単に作成できる
アプリケーションのプログラミングを効率化するAPI（Application Programming Interface）が追加されたのも、HTML5ならではの特徴です。
▼HTML5に追加されたAPIでできること
- 高機能アプリケーションの作成が簡単になった
- ユーザー位置情報の取得
- ウェブアプリケーションのオフライン使用が可能
CSS3との併用でアニメーションが作成できる
HTML5なら、JSを使わなくてもCSS3と併用するだけでアニメーションが作成できます。
単純な変化を1回だけ再生するマウスオーバーだけでなく、3Dアニメーションも可能です。
タグによるシンプルな文章構造
HTML5では、ヘッダ・フッタ・セクションなどWebサイトを構成する文章構造がシンプルに表記できるようになりました。
同じヘッダでも、HTML4と比較してみるとその差は歴然です。
- HTML4：<div id=”header”></div>
- HTML5 ：<header></header>
その結果、初心者でも扱いやすくなり、検索エンジンに構造が伝わりやすくなった分だけSEO対策としても有利になったのです。
HTMLで使用するタグの記述方法
この段落では、バージョンを問わず全てのHTMLの基本ルールについて解説します。
タグ記述の基本ルール
タグは全角記号ではなく、半角記号で記述するのがルールです。
できるだけコピペを使用し、全角記号のタイプミスを予防しましょう。
- 書式：半角記号
- <要素名>：開始タグ
- </要素名>：終了タグ
- <要素名>文字列</要素名>：開始タグ＋文字列＋終了タグの順番で記載する
- 大見出し1の記述例：<h1>大見出し1の文字列</h1>
<head>と<body>
htmlの構成は大きく分類して「headタグ」と「bodyタグ」に分けられます。
▼headタグ
- 対象：検索エンジンやWebブラウザ向け
- 特徴：画面上に「表示されない部分」を囲うタグ
- 種類：titleタグ／metaタグ／linkタグ／scriptタグ
▼bodyタグ
- 対象：ユーザー向け
- 特徴：画面上に「表示される部分」を囲うタグ
- 種類：pタグ／hタグ／ulタグ／aタグなど
Webページの構造をはじめ、ほとんどのHTMLタグはbody内に記述します。
初心者でも使用頻度の高いタグ9つ
下記は、初心者でも頻繁に使用するタグの一例です。
下記の9種類を使いこなせるようになるだけでも、メリハリのあるスッキリとしたサイト構成になります。
▼使用頻度の高いタグ
- <h1>～<h6>（エイチワン～エイチシックスタグ）：見出し
- <a>（エータグ）：リンクの指定
- <p>（ピータグ）：一つの段落であることを示す
- <ol>（オーダード リストまたはオーエルタグ）：番号つきのリスト
- <ul>（アンオーダード リスト）：箇条書きなど順序のないリスト
- <q>（クォートタグ）：引用文
- <sub>（サブスクリプトタグ）：下付き文字
- <img>（イメージタグ）：画像
- <table>（テーブルタグ）：表
HTML5新規タグの記述方法
ここからは、HTML4からHTML5へバージョンアップした際に追加されたタグの中から、代表的な5つをご紹介します。
<header>はWebサイト構成のヘッダ部分を表すタグで、ロゴ画像やナビゲーションメニューなどを記述する際に使います。
<header>
<img src="img/logo.png">
</header>
< footer>はWebサイト構成のフッター部分を表すタグです。
下記のようにコンテンツ下部から最上部へのリンク、「Copyright ©PECOPLA Co.,Ltd. All Rights Reserved.」といったコピーライトにも使用できます。
<footer>
<p><a href="#">ページTOP</a></p>
</footer>
navタグ
ナビゲーションを表す際に使用するのがnavタグです。
<a>タグと併用し、「Home」や「お問い合わせ」へとリンクさせましょう。
<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="">お問い合わせ</a></li>
</ul>
</nav>
ナビゲーションの作成方法などについては下記の記事で解説しています。
sectionタグ
複数の要素を1つのセクションとしてまとめるのがsectionタグです。
下記の記述例では、h2（大見出し1）と付随するテキストを一塊のセクションとしてまとめています。
<article>
<h2> HTML5とは</h1>
<section>
<p> HTML5のバージョンアップ履歴・・</p>
</section>
</article>
canvasタグ
canvasタグは、アニメーションを作成する際に使用します。
ただし、canvasの機能は限定的ですからJavaScriptなどと組み合わせるのが一般的です。
<canvas id="canvas" width="300" height="300"></canvas>
初心者向けHTML5のおすすめ学習方法4選
まったくの初心者であれば、下記のような有料講座でHTML5を学習するのも1つの方法です。
同レベルの初心者同士、切磋琢磨できるのはもちろん疑問点を直ぐに質問できるという強みがあります。
▼HTML5を「有料」で学ぶ方法
- プログラミングスクールに通学する
- Web講座を受講する
一方、「お金をかけずにHTML5を学びたい！」という方なら、下記の2種類がおすすめです。
▼HTML5を「無料」で学ぶ方法
- 無料で受講できるWeb講座
- 閲覧フリーの学習サイト
最近では、初心者向けの「HTML5入門講座」と謳った動画解説を掲載しているサイトも増えているようです。
なお、HTML5プロフェッショナル認定資格については下記の記事を参照して下さい。
初心者向けHTML5の無料おすすめ学習サイト3選
この段落では、無料で利用できるHTML5の学習サイトをご紹介します。
ドットインストール
出典：ドットインストール
ドットインストールには導入編にあたる初級動画のみ視聴できる無料会員と、月額1,080円の有料プレミアム会員の2種類があります。
まずは初心者向けの基礎講座を無料で試してみてはいかがでしょうか。
▼ドットインストールのメリット
- スマートフォンでも視聴可能
- 6,000本を超える動画数（有料込み）
- 全ての動画が3分以内なので、すきま時間に学べる
有料会員にはソースコードが見られる、現役エンジニアに質問できるといった特典がついています。
HTMLクイックリファレンス
出典：HTMLクイックリファレンス
ゆっくり動画を見る時間がない…という時に便利なテキスト系の学習サイト。
実務で利用されているプロの方も多く、その都度ピンポイントでHTML5の疑問点を検索したい時に便利です。
▼HTMLクイックリファレンスのメリット
- アルファベット順と目的別で検索しやすい
- 実例つきのプロパティ
- サンプルソースの直後に実例が表示されるので分かりやすい
ほんっとにはじめてのHTML5とCSS3
出典：ほんっとにはじめてのHTML5とCSS3
初心者からプロの方まで参考になるテキスト版の学習サイトで、メインのHTML5だけでなくCSS3の知識もまとめて学べます。
▼ほんっとにはじめてのHTML5とCSS3のメリット
- HTMLの組み方が、初心者にも分かるやすく書かれている
- 基礎から実務レベルまで、一通りの学べる
まとめ
「ブログを始めたい！」「副業としてWebサイトを作ってみたい！」と思われているなら、ぜひHTML5の習得をおすすめします。
HTML5は、たとえ初心者でも独学でスキルを磨けるのが強み。
まずは、無料で始められる学習サイトをチェックしてみましょう。
関連
SEO対策コンテンツSEO
SEO基礎SEO対策
Google関連SEO対策
Webサイト制作Webデザイン
