ピックアップコラム
-
Pickup!
サイドバーとは?サイドバーを設置するメリットと書き方
-
Pickup!
カラー別にみてみる!WEBサイトにおける配色パターン
-
Pickup!
プラグインなし!オリジナルSNSシェアボタンの作り方ガイド
-
Pickup!
ワードプレスのプラグインで画像の圧縮・最適化をしてみた
今ではWebサイト制作の定番スキルとなったHTML5。その一方で「HTML5ってHTML4と何が違うの?」「どうやって学習したらいいの?」と思われている初心者の方も多いのではないでしょうか。そこで本記事では、初心者の方でも分かりやすいようにHTML5の特徴や学び方について解説します。
目次
HTML(Hyper Text Markup Language/ハイパーテキストマークアップランゲージ)とは、マークアップ言語の一種です。
文章構造ごとにタグ(<>)を使って目印をつけることで、「A~Bまでが見出し」「C~Dまでが箇条書き」とコンピューターに理解させるための言語、と言った方がイメージしやすいかもしれません。
HTMLは何度かバージョンアップを重ね、2021年現在は改訂第5版にあたる「HTML5」以上が主流となっています。
▼HTMLのバージョンアップ履歴
HTML5は、あくまで目印を付ける「マークアップ言語」の一種です。
したがって、よく混同されがちな「プログラミング言語」や「CSS言語」とは目的・役割が異なります。
なお、マークアップとマークダウンの違いについては下記の記事でも詳しく解説しております。
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よりも勝っている6つの改良点について解説します。
HTML4では、大きく2つの要素に分類されていました。
▼HTML4の要素
一方、HTML5では上記の考え方が廃止され、一部を除きより細かい7種類の「カテゴリー」に分類されています。
さらに、特定の要素に対しどのカテゴリーに属した要素が記述できるのか、「コンテンツ・モデル」が定義されているのです。
▼HTML5の「カテゴリー」と「コンテンツ・モデル」
ユーザビリティを重視するGoogleでは、マルチデバイス対応をSEOの大きなアドバンテージと位置づけています。
だからこそ、HTML5ではPC・スマホ・タブレットなど端末の種類を問わず、それぞれの画面サイズに合わせて最適化する「レスポンシブ対応」が簡単になったのでしょう。
レスポンシブ対応しているサイトの作り方については下記の記事で解説しています。
HTML4で動画や音声を追加する場合、「Flash」などの専用プラグインを用いるのが主流でした。
しかし埋め込みコード自体が難解だったうえ、Flashのプラグインをインストールしていないユーザーは視聴できませんでした。
これに対し、HTML5では動画・音声ともに簡潔に記述できる専用タグが用意されています。
つまり、初心者でも扱いやすくなったのはもちろん、スマホなどでも対応機種を気にせず再生が可能になったのです。
アプリケーションのプログラミングを効率化するAPI(Application Programming Interface)が追加されたのも、HTML5ならではの特徴です。
▼HTML5に追加されたAPIでできること
HTML5なら、JSを使わなくてもCSS3と併用するだけでアニメーションが作成できます。
単純な変化を1回だけ再生するマウスオーバーだけでなく、3Dアニメーションも可能です。
HTML5では、ヘッダ・フッタ・セクションなどWebサイトを構成する文章構造がシンプルに表記できるようになりました。
同じヘッダでも、HTML4と比較してみるとその差は歴然です。
その結果、初心者でも扱いやすくなり、検索エンジンに構造が伝わりやすくなった分だけSEO対策としても有利になったのです。
この段落では、バージョンを問わず全てのHTMLの基本ルールについて解説します。
タグは全角記号ではなく、半角記号で記述するのがルールです。
できるだけコピペを使用し、全角記号のタイプミスを予防しましょう。
htmlの構成は大きく分類して「headタグ」と「bodyタグ」に分けられます。
▼headタグ
▼bodyタグ
Webページの構造をはじめ、ほとんどのHTMLタグはbody内に記述します。
下記は、初心者でも頻繁に使用するタグの一例です。
下記の9種類を使いこなせるようになるだけでも、メリハリのあるスッキリとしたサイト構成になります。
▼使用頻度の高いタグ
ここからは、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タグです。
<a>タグと併用し、「Home」や「お問い合わせ」へとリンクさせましょう。
<nav> <ul> <li><a href="">Home</a></li> <li><a href="">お問い合わせ</a></li> </ul> </nav>
ナビゲーションの作成方法などについては下記の記事で解説しています。
複数の要素を1つのセクションとしてまとめるのがsectionタグです。
下記の記述例では、h2(大見出し1)と付随するテキストを一塊のセクションとしてまとめています。
<article> <h2> HTML5とは</h1> <section> <p> HTML5のバージョンアップ履歴・・</p> </section> </article>
canvasタグは、アニメーションを作成する際に使用します。
ただし、canvasの機能は限定的ですからJavaScriptなどと組み合わせるのが一般的です。
<canvas id="canvas" width="300" height="300"></canvas>
まったくの初心者であれば、下記のような有料講座でHTML5を学習するのも1つの方法です。
同レベルの初心者同士、切磋琢磨できるのはもちろん疑問点を直ぐに質問できるという強みがあります。
▼HTML5を「有料」で学ぶ方法
一方、「お金をかけずにHTML5を学びたい!」という方なら、下記の2種類がおすすめです。
▼HTML5を「無料」で学ぶ方法
最近では、初心者向けの「HTML5入門講座」と謳った動画解説を掲載しているサイトも増えているようです。
なお、HTML5プロフェッショナル認定資格については下記の記事を参照して下さい。
この段落では、無料で利用できるHTML5の学習サイトをご紹介します。
出典:ドットインストール
ドットインストールには導入編にあたる初級動画のみ視聴できる無料会員と、月額1,080円の有料プレミアム会員の2種類があります。
まずは初心者向けの基礎講座を無料で試してみてはいかがでしょうか。
▼ドットインストールのメリット
有料会員にはソースコードが見られる、現役エンジニアに質問できるといった特典がついています。
ゆっくり動画を見る時間がない…という時に便利なテキスト系の学習サイト。
実務で利用されているプロの方も多く、その都度ピンポイントでHTML5の疑問点を検索したい時に便利です。
▼HTMLクイックリファレンスのメリット
初心者からプロの方まで参考になるテキスト版の学習サイトで、メインのHTML5だけでなくCSS3の知識もまとめて学べます。
▼ほんっとにはじめてのHTML5とCSS3のメリット
「ブログを始めたい!」「副業としてWebサイトを作ってみたい!」と思われているなら、ぜひHTML5の習得をおすすめします。
HTML5は、たとえ初心者でも独学でスキルを磨けるのが強み。
まずは、無料で始められる学習サイトをチェックしてみましょう。
受付時間:平日10:00~19:00(土・日・祝日を除く)