デザイン学部で学習を開始しよう!

まずは無料会員登録!デザインスキルや知識を得られる授業をオンラインで開講中。最新のWeb制作スキルを身につけましょう。

HTML5 違い

■HTML5とは?


コンピュータをよく使う人なら一度は耳にしたことがある「HTML」。HTMLとは、Hyper Text Markup Languageの頭文字を取ったもので、直訳すると「ハイパーテキストのための、(文章に)目印を付ける文法(言語)」という意味です。つまり、私たちが普段読み書きする文章の、見出し・段落・箇条書きなどの要素をコンピュータに捉えさせるための文法ですね。初期のHTML1.0が開発されたのが1993年、それからバージョンアップを重ね、1999年12月にバージョンアップされたHTML4.01が昨今までホームページを作る言語としてWebを支えてきました。

そして、2014年10月28日にHTML5が勧告されました。特に「HTML5」は今多くの注目を集めています。今回はHTML5を使って出来ること、従来のHTML4との違いをまとめました。

 

目次


1. どんなデバイスでも再生出来る動画や音声データを埋め込める
2. ウェブアプリケーションが構築しやすい
3. より明確に文書構造を示すことが出来る
4. CSS3を駆使すれば、描画表現の幅が広がる
5. HTML5を使って作られたサイト4選


 

1. どんなデバイスでも再生出来る動画や音声データを埋め込める


これまでのHTMLでは、動画を使うには「Flash」を使っていました。しかしHTML5では、動画や音声データをHTMLから扱えるようになります。 新しく追加される<video>や<audio>を使用し、(<img>で画像を扱うように)動画や音声をシンプルに扱えるようになります。

 

2. ウェブアプリケーションが構築しやすい


HTML5では、高度な機能を実現するための様々なAPIが新たに追加されています。APIとは、Application Programming Interfaceの頭文字を取ったもので、 アプリケーションをプログラミングする際の決まりごとです。 つまり、何らかの機能を実現する際に指定する命令や関数の記述ルールを定めたものです。新しく加わった主な機能として以下のものが挙げられます。

・ドラッグ&ドロップ機能
・ユーザー位置情報
・オフライン使用
・ファイル操作
・履歴操作

それぞれのAPIで定められた命令や関数を指定すれば、 簡潔な記述でこれらの機能を実現することが出来ます。HTML5ではこれらのAPIを利用することで、 単にHTML文書を作成するだけではなく、 より高度な機能を持ったウェブアプリケーションをウェブ標準として構築することが可能になります。

 

3. より明確に文書構造を示すことが出来る


今まではHTMLでWebページを構築すると、“”タグで文章が埋め尽くされてしまいました。 HTML5では、文書構造を表す新しい要素が加わることで、ブラウザや検索エンジンに対してより明確に文書構造を伝えられるようになります。代表的なタグを以下に示します。

  • article … 記事の部分
  • aside … 関連リンクなど
  • figcaption … figureした部分の脚注
  • figure … 画像や映像などを範囲設定をする
  • footer … 文書のフッター部分で、作者情報や著作権などを書くことが可能
  • header … 文書のヘッダー部分
  • hgroup … 見出しタグをグルーピングする場合に使用する
  • mark … 文字列な中のハイライト。例えば、検索結果の中に「検索ワード」をハイライトしたい場合に使用する
  • nav … ナビゲーション
  • section … 文書のそれぞれの要素を囲む
  • time … 文字列が時間や日付の場合に使用する

これらを利用することで、それぞれの役割に応じて適切な要素に割り当てることが出来るようになります。

HTML5 違いz
HTMLクイックリファレンスより引用)

 

4. CSS3を駆使すれば、描画表現の幅が広がる


HTML5とセットで紹介されるCSSの新しい技術「CSS3」を使えば、下記のような処理をJavascriptを使わず、簡単に実現することが出来ます。

・透過処理
・角丸
・ドロップシャドウ
・線形グラデーション
・円形グラデーション
・回転
・縮小
・傾斜
・アニメーション

これまでプログラマでなければ扱うことが難しかったJavascript。CSS3を使えばアニメーションも使うことが出来ます。

 

5. HTML5を使って作られたサイト集


HTML5ではJavascriptやFlashを使うことなく、下記のようなWebサイトが作ることが出来ます。従来のサイトにはない動きをするところに注目です。
 

MARIOKART

HTML5 サイト マリオカート
 

・ROXIK

HTML5 サイト 事例
 

Andrew Hoyer

HTML5 サイト 事例


The Shodo 書道

HTML5 サイト 事例



HTML5について、理解を深めて頂けましたか?

今注目されるHTML5について、更に興味を持たれた方は是非下記の授業で学んでみてくださいね。

HTML5でクリスマスツリーをつくろう【canvas描画編】

HTML5 canvas 描画

 


WEBデザイナー学部では毎週Webデザインについての分かりやすい授業をお届けしております♪

初心者でWebデザインを学びたい方、自分のWebデザインの技術を磨きたい方は是非チェックしてみてください

学部登録(無料)すると、自分のカリキュラムの進捗が一目で分かるようになり、先生がイチオシするツール紹介などの役立つコラムつきメールが受け取れるようになります!


スクー教務課:金子

  • このエントリーをはてなブックマークに追加

デザイン学部の記事一覧

生放送授業への参加は無料です
Schooの会員登録および生放送授業への参加は無料です。生放送授業では先生に質問したり他のユーザーと一緒に楽しく学ぶことができます。
×