アニメやゲームの感想から、ブログ運営、お金(資産運用、節税)、健康の話まで雑多につぶやくブログです

【違い】HTML5はHTML4と比べて何が変わったか【比較】

3 min 0 views
【違い】HTML5はHTML4と比べて何が変わったか【比較】

【違い】HTML5はHTML4と比べて何が変わったか【比較】

【違い】HTML5はHTML4と比べて何が変わったか【比較】:艦これ

結構前の話になってしまいますが、艦これで HTML5 対応が行われた事で

ついに!😆

iOS 端末でも!😆

プレイ可能に!😆

当時「ついに外出先でもプレイできる!」と喜んだものです😌

今回は、HTML4 と HTML5 でどういった所が変わったか
お話できればと思います。

HTML5/HTML4比較:気になったきっかけ

艦これ以前に、注目していた話題としましては

バンナム、HTML5活用の新作ゲーム「アイドルマスター シャイニーカラーズ」発表

↑上記の記事の通り

アイマスの新作がブラウザゲーで出る!?
という所で「HTML5」を意識するようになりました。

アイドルマスター シャイニーカラーズ 公式

HTML5/HTML4比較:そもそもHTMLって?

【違い】HTML5はHTML4と比べて何が変わったか【比較】:HTML

今更ですが、HTML は
Hyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の略。
Webページを作成するためのMarkup(マークアップ)言語となります。

こちらのサイトが詳しいです。

HTML5/HTML4比較:HTML5って?

HTML5 は、HTMLのバージョン5の事です。

  • 初期のHTML1が開発されたのが1993年
  • 1999年12月に HTML4 が 開発されました。
  • そして、2014年10月HTML5が発表されました。
    現在では、ほとんどのブラウザで対応しています。

HTML5の基本的な機能はIE9以降から対応しているようです。
(IE8以下へも「JavaScript」を用いれば対応は可能)

HTML5/HTML4比較:HTML4 との違い

HTMLがスッキリ書けるようになった

HTML4

【違い】HTML5はHTML4と比べて何が変わったか【比較】:HTML4のコード

HTML5

【違い】HTML5はHTML4と比べて何が変わったか【比較】:HTML5のコード

文書構造がシンプルになった

今までのHTML4でWEBページを構築すると
タグで文章が埋め尽くされてしまいました。

HTML5では、文書構造を表す新しい要素が加わる事で
シンプルに見やすくなっただけでなく
ブラウザや検索エンジンに対してより明確に文書構造を伝えられるようにもなりました。

【違い】HTML5はHTML4と比べて何が変わったか【比較】:構造の違い

例えば
ヘッダを示す<header>フッタを示す<footer>
一つのセクションであることを示す<section>
 記事であることを示す<article>
 ナビゲーションであることを示す<nav>などの要素が追加されており
それぞれの役割に応じて適切な要素に割り当てることができるようになりました。

動画や音声の埋め込みが簡単になった

HTML4まで

  • サイト内で動画を再生させるためには
    Flash」という技術を使って作成する必要があった。
  • しかし、Flashを作成するにはHTMLと別の知識が必要になり
    初心者の人にはハードルが高かった。

HTML5から

  • <video>や<audio>といったのタグを使う事で
    動画や音声の再生ができるようになった。
  • パソコンでもスマホでも同じタグを使うことが出来るので
    機種を気にする必要がなくなった。

ウェブアプリケーションを作りやすくなった

HTNL5では、HTML4までは実現が難しかった
ウェブアプリケーションが作りやすくなりました。

  1. ユーザーの位置情報を取得したり
  2. ドラッグ&ドロップ機能を追加したり

ということが簡単に可能。
HTML5になってから高度な機能を実現する為の
様々なAPIが追加されたためです。

CSS3を同時に使用すれば、表現の幅が広がる。

HTML5とセットで使われることの多い「CSS3」という技術を使えば
Javascriptを使わずにアニメーションやフラットボタンの作成が可能です。

これまでJavascriptでなければ作れなかった表現を
CSS
HTMLで作れるようになれば、デザイナーで対応できる範囲が広がります。

すごいぞ! canvas !

また、HTML5には、Webアプリの制作に役立つ
canvas」という要素があります。

  1. クライアント側の処理だけで動的に描画!
  2. 特別なプラグイン不要!
  3. Flash を使用しない! Flash のスキルも不要!
  4. ゲームは勿論、ビジネス用途での応用も期待!

というわけで canvas を利用すると、こんな事ができるよ!
というサンプルになりそうなものを探してきたの以下に
記載したいと思います。

↑参考サイト様

HTML5/HTML4比較:感想

知っているようで知らなかった HTML5 について調べてみました。

HTML4 と比べると、大幅に快適になった印象ですね。
シンプルに、かつ色々な事が簡単にできるようになったようです。

特にWEBアプリケーションを作成できるようになった事で
艦これなんかも恩恵を受けているんでしょうね😃

自分も簡単なものでよいので HTML5 で何か作ってみたいなぁって思いました。

では、今回はこの辺で👋

hal_neko

hal_neko

会社員雑記ブロガー

元スーパー店員。ゲーム屋さん所属。来世は猫がいいです。
趣味やお金の事について雑多につぶやいてます。
ブログでそこそこ稼げるようになるのが目標です(- -)
そこそこって大事。そういうこと。

FOLLOW

カテゴリー:
タグ:
関連記事

コメントを残す

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