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

【違い】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(マークアップ)言語となります。

 

侍エンジニア塾Blog

HP制作を行う上で欠かせないHTML。 しかし、「HTMLって実際どんなことができるの?」「そもそもHTMLってなんぞや…

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

 

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にcanvasという機能があり、それを使って簡単なスマホでもパソコンでも使えるお絵かきソフトを作って見ました。…

↑参考サイト様

 

お絵かきソフト

お絵かきページ

お絵かきソフト#canvas { border:1px solid gray;}#aaa { overflow:hidden; margin-top:20px;}#ccc { […]

スマホでお絵かき

HTML5/HTML4比較:感想

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

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

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

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

では、今回はこの辺で👋

 

【違い】HTML5はHTML4と比べて何が変わったか【比較】
フォローお願いします!
>多機能で速いWordPressテーマ「THE THOR」

多機能で速いWordPressテーマ「THE THOR」

本ブログは有料WordPressテーマ「THE THOR」を使用しています。
プラグイン不要でSEO対策が可能なWordPressテーマです。
「豊富なカスタマイズ」「プラグインいらずで多機能」
「デザインダウンロードで見た目をガラッと変更!」
国内NO1のテーマを目指して作られ、今後も進化し続けます。
万全のサポート体制でインストール・初期設定とスムーズに進みますので、初心者ブロガーにもおすすめです。

CTR IMG