HTML5って何?どんな機能があるの?HTMLの特徴をまとめてみた

ハム氏
ねぇねぇ、HTML5って何?HTML4と何が違うの?
 
なっちゃそ
HTMLにはバージョンって考え方があってね、それの最新が今はHTML5なんだよ。HTML4と比べるとだいぶ仕様が変わっていてすごく使いやすいバージョンだよ。今回はその中でよく使う機能を紹介していくね。
 
ハム氏
よろしく頼むよ。
 
なっちゃそ
HTML自体がよくわからんっていう人は『超入門!HTMLを徹底的に解説します』で概要を掴んでから読んでね。
 

HTMLのバージョンについてちょこっと解説

 
 
HTMLにはバージョンというものがあって、バージョンによって使えるタグの種類やHTMLの書き方が違ってきます。
 
ちなみにこのHTMLの仕様を決めてるのはW3C(World Wide Web Consortium)という組織らしいです。
 
正式名称「World Wide Web Consortium(ワールド・ワイド・ウェブ・コンソーシアム)」は、World Wide Webで使用される各種技術の標準化を推進する為に設立された標準化団体、非営利団体です。(ウィキペディアより)
 
まあ・・・これについては興味ある人は調べてみてください(笑)
 
 
そして、今使われているバージョンは「HTML4.01」「XHTLM1.0」「HTML5」の3つ。
 
1つずつ解説していくと、
 

HTML4.01

最も一般的に使われているHTMLのバージョン。

 XHTLM1.0

HTML4.01を拡張したもので特徴を似ています。記述方法がかなり厳密ですが、一方で要素を拡張することができるという特徴があります。

 HTML5

最新のバージョン。以前のバージョンに比べて使えるタグの種類が増え、よりシンプルに書くことができるようになりました。また検索エンジンに優しくなったとも言われています。
最近はブラウザの対応も追いついてきたのでこのバージョンが主流になりつつあります。わたしも普段このバージョンを使ってサイトを作っています。
 
 
ハム氏
なるほどー。実際のところどんな機能があるの?
 
なっちゃそ
HTML5になって便利になった点はたくさんあるんだけど、今回は6個ピックアップして紹介していくね。
 

HTML5の特徴

 
 
ここではHTML5の特徴を6つに絞って紹介していきたいと思います
 

HTML5の特徴① コンテンツモデルという概念がある

 
HTML5以前のバージョンにはブロック要素・インライン要素という概念があり、全てのタグがこのどちらかに分類することができましたが、HTML5ではこのブロック要素・インライン要素という考え方が消えて7つのコンテンツモデルという概念になりました。
7つのコンテンツモデル、一体どんなものなのかというとざっくりとこんな感じ。
 
メタデータ・コンテンツ・・・・文書情報や他の文書との関係を定義するもの
 
フロー・コンテンツ・・・子孫にテキストなどを持つもの
 
セクショニング・コンテンツ・・・見出しと概要をつけられるもの
 
ヘッディング・コンテンツ・・・セクションの見出しとなるもの
 
フレージング・コンテンツ・・・段落などの中に含まれる文節・語句など
 
エンベディッド・コンテンツ・・・文書に他のリソースを埋め込むもの
 
インタラクティブ・コンテンツ・・・ユーザーによる操作に対応するもの
 
 これらすべてを覚えないといけないということではないので今の段階では「コンテンツモデルという考え方がある」ということをふわっと覚えておく程度で大丈夫です。

HTML5の特徴② 構造がシンプルで検索エンジンに優しい

 
以前までのバージョンではコンテンツが<div>タグ埋め尽くされるという現象が起きていたのですが、HTML5では要素の役割を表すタグが新しく作られたため、非常にすっきりとソースを書くことができます。
 
また、コンテンツ内のどの部分がどのような役割を担っているのかを検索エンジンが把握しやすくなったため、検索エンジンに優しくなったと言われています。
 
なっちゃそ
HTML5から使えるようになった便利なタグをいくつか紹介しますね。
 

header

文書のヘッダー部分を表現するときに使う

 
 footer
 
文書のフッター部分を表現するときに使う 

 

nav

ナビゲーションを表現したいときに使う 

 

article

それ地震で完結していて、ユーザーに理解ができるコンテンツに使う
また、sectionタグと同様にこれで内包されたタグはレベルが1つ下がりますが、見出しタグは必須でないです。

 

section

コンテンツの1章2章3章と区切る部分で使う

見出しタグと必ずセットで使用する必要がありますが、sectionで囲むと見出しタグ(hタグ)のレベルが1つ下がってしまうので注意が必要です。

 

main

そのページの主要な部分を囲むタグ

 

aside

関連リンクを表現したいときに使う 

 

figure

画像や映像などの範囲を指定したいときに使う 

 

figcaption

figureとして指定した部分に脚注をつけるときに使う

 

hgroup

見出しタグをグルーピングしたいときに使う

 

mark

文字列の中にハイライトを設定したいときに使う 

 

time

時間や日にちをテキストで表現したい際に使う

 

HTML5の特徴③ 動画や音声が組み込みやすい

 
 
以前までのバージョンではサイトに動画を組み込みたいときに「Flash」という少し複雑な技術を使っていましたが、HTML5では<video>タグなどを使用して動画や音声データをHTML内に組み込むことができるため動画や音声をシンプルに扱うことができます。
また、HTMLに組み込んだ動画はPCだけではなくスマホなどでも再生することができるため、対応機種を機にする必要がありません。
 
 

HTML5の特徴④ Webアプリケーションが作りやすい

 
HTML5では高度な機能を実現するための様々なAIPが新たに追加されています。
 
APIとは・・・Application Program Interface(アプリケーション・プログラム・インターフェース)の略で、OSや、部品化されたソフトウェア(コンポーネント)など、ソフトウェア開発者が共通して使う機能を、外部から呼び出して利用するための規約のことです。
 
個々のソフトウェア開発者はAPIに従って公開されている機能を利用することで、開発者が一からプログラミングすることなく、高機能なコンテンツや機能を短期間かつ低コストで開発することができるようになります。(インターネット用語辞典より)
 
つまりアプリケーションをプログラミングする際に指定する命令や関数の記述ルールを定めたものでこれを使用すると簡単な記述で色々な機能が実装できるよってことです。これについてはいつか別途記事にするかもしれませんが多分きっとしません(笑)
 
 
HTML5から加わった機能をいくつか紹介しておきますね。
 
 
・ドラック&ドロップする機能
 
・ユーザーの位置情報を伝える機能
 
・オフラインで使用する機能
 
・ファイル操作機能
 
・履歴操作機能
 
 
これらはそれぞれのAPIで定められた命令や関数を使用すればシンプルな記述で実装することができます。
 
HTML5ではより高度な機能を持ったウェブアプリケーションをウェブ標準として構築することができる・・・みたいです。
 
わたしはアプリには詳しくないのでこの機能についてはこの辺で。
 

HTML5の特徴⑤ 様々な機能がついたフォームを作成することができる

 
HTML5のinput要素にはいくつか便利な属性が追加されていて、はこれまでJavaScriptを使わないと実装できなかった機能をお問い合わせなどのフォーム(入力欄)に設置することができるようになっています。
 
なっちゃそ
入力フォームはwebサイトを作る場合は頻繁に作ることになる部分なので、これから紹介する属性は覚えておくと結構使えますよ。
 
 
autofocus属性・・・この属性を指定すると、ページを読み込んだタイミングで入力欄にフォーカスが当たります基本的に検索ボックスやお問い合わせフォームの一番上の入力欄に設置するとよいかと思います。
 
autocomplete属性・・・この属性をonにすると、ユーザーが入力したデータをもとに自動的に候補を提示してくれるようになります。検索フォームとかに設定すると便利ですね。
 
 
required属性・・・お問い合わせフォームなどによくある入力必須の項目に指定する属性です。
この属性を指定すると指定された項目内が空欄の場合はエラーが表示されます。これが一番使用頻度が高いですね。
 
 
pattern属性・・・この属性を使うと入力項目のフォーマットを指定することができます。
入力された内容がフォーマットで指定したパターンと一致しなかった場合はエラーが表示されます。電話番号の欄には数字のみ、メールアドレスの入力欄には半角英数字のみを指定することでフォーマットを制限することができます。
 
 
placeholder属性・・・この属性を使うと入力欄に何を入力したら良いかわかりやすくなるようにヒントをうっすら記述することができます。
電話番号やメールアドレスなどで設置するとわかりやすくで良いかと思います。
 
 
 

HTML5の特徴⑥ CSS3と合わせると描画表現の幅が広がる

 
HTML5と並んでCSS3というCSSのバージョンがあるんですが、これを駆使すればこれまでJavaScriptを使わないと実現できなかったエフェクトやアニメーションをHTMLとCSSのみで実装することができるんです。控えめに言って最高ですね。CSS3大好きです。
 
なっちゃそ
CSS3については別途丁寧に解説していきたいのでここでは軽〜く紹介するだけにしておきますね。
 
 
・文字色や背景色に透過処理を施すことができる(半透明にすることができる)
 
・角丸にすることができる
 
・ドロップシャドウを設定することができる
 
・線形グラデーション/円形グラデーション
 
・回転エフェクト
 
・縮小エフェクト
 
・ドロップダウン実装
 
・アコーディオン実装
 
 
このような機能をJavaScriptなしで実現できるとデザインの幅が広がって楽しいですね。
 
 

まとめ

 
いかがでしたか?
ちょっと前まではHTML5はブラウザ対応が追いついておらず「便利だけど使えない・・・」といった状態でしたが、最近はブラウザ対応も追いついてきたみたいなので存分に使ってみてくださいね。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です