【3分でわかる】HTML5とは?初心者向けに超わかりやすく説明してみた

こんにちは! 侍エンジニア塾ブログ編集部です。これからプログラミング学習や、HP制作に取り組もうとしている方の中には、

HTML5ってよく聞くようになったけど、実はあんまりわかってないんだよなぁ〜

という方も多いと思います。HTMLとの違いなんかも気になるところですよね。

そこで今回は、HTML5とは何か?を初心者でも3分で理解できるように易しく説明していきます。概要や以前との違いも解説していますので、ぜひご覧ください!

そもそもHTMLとは?

HTML5の説明に入る前に、「そもそも、HTMLってなに?」という方もいるかと思います。

HTMLとはHyper Text Markup Language(ハイパーテキストマークアップランゲージ)の略で、Webページの内容を書くための言語のようなものです。Webの世界では基本中の基本の言語になってきますね。

そんなHTMLの概要がサクッとわかるようにこちらでまとめていますので、先に目を通しておくと良いかもしれません。

HTML5とは?

shutterstock_178000856

画像:shutterstock

HTML5とはHTMLのバージョン5、改訂第5版のことです。初期のHTML1が開発されたのが1993年、それからバージョンアップを重ね1999年12月にバージョンアップされたHTML4が開発されました。

このHTML4が昨今のホームページを作る言語としてWEBを支えてきました。そして2014年10月28日にHTML5が発表されました。

そんなHTML5は今どのように導入されていて、以前との違いは何なのかについて説明していきます。

以前と比べて何が変わったの?

HTML4と比べて改善されたところを一言で表すとすれば、このようになります。

「今まで複雑だった処理が簡単に出来て、HTMLをより構造的にスッキリ書けるようになった!」

改善された箇所は数多くあるのですが、その中でも特に目立つものを3つご紹介します。

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

これまでのHTML4では、動画を使うには「Flash」というものを使っていました。ただこのFlashの組み込みは、初心者にとっては多少複雑な部分がありました。

しかしHTML5では、<video>や<audio>という「タグ」を使用して、動画や音声をシンプルに扱えるようになりました。しかもPCだけでなくスマホなどでも再生可能なので、HP制作時などに対応機種を気にする必要がなくなりました。

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

002_1 (1)

引用:@HTMLクイックリファレンス http://www.htmq.com/html5/002.shtml

今までのHTML4でWEBページを構築すると、タグで文章が埋め尽くされてしまいました。HTML5では、文書構造を表す新しい要素が加わることでシンプルに見やすくなっただけでなく、ブラウザや検索エンジンに対してより明確に文書構造を伝えられるようにもなりました。

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

3.WEBアプリケーションがつくりやすくなった

HTML5では、HTML4以前では実現することが難しかった高度な機能を実現するための様々なAPIが新たに追加されました。

APIとは、Application Programming Interfaceの頭文字を取ったもので、 アプリケーションをプログラミングする際の決まりごとのことです。 つまり、何らかの機能を実現する際に指定する命令や関数の記述ルールを定めたものです。

例えば、ユーザーの位置情報を取得したり、ドラッグ&ドロップ機能を追加したりするのは以前は難しかったんですが、それも簡単に組み込むことができます。APIを利用することで、 単に文書を作成するだけではなく、 より高度な機能を持ったWEBアプリケーションを構築することが可能となりました。

HTML5と合わせて身に付けたい言語


画像:shutterstock

上記で解説した通り、HTML5では出来ることはますます広がっていますが、合わせてCSSとJavaScriptを身につけると更に制作・表現の幅は広がります。

例えばCSS3を組み合わせると、ボタンの上にカーソルを当てた時にアニメーションをつけられたり、JavaScriptを使うと位置情報の取得や映像の再生ができたりなど、より動的なサイトの作成が可能になるんですね。

しかしホームページ1つ作るにも、やりたいことが多いと、サーバーの知識やwordpressやPHPなど理解しなければいけないことが増えてきます。

じゃあどうしたらいいの?

というあなたにはプログラミングスクールの受講をおすすめいたします。弊社「侍エンジニア塾」ではマンツーマンレッスンでのプログラミング指導を行なっているので、効率よくプログラミングを身につけることが可能です。

また、実務経験のあるインストラクターが講師になるので、オリジナルのサイトを作り上げるところまでを目標とし、受講後は独学で学べるように、まずは一人で1から作り上げる実践型の教育カリキュラムを組んでおります。

レッスン内容の詳細は以下からご確認ください。

侍エンジニア塾
無料体験レッスンの詳細はこちら

導入は進んでるの?

shutterstock_383617675

画像:shutterstock

HTML5が発表されたばかりの2014年は、まだ各ブラウザで対応していないものもありましたが、2019年3月現在ではほとんどのブラウザで対応しています。

ただ、各ブラウザのバージョンによっては使用できないものもあるので、気になる方はこちらで確認してみてください。

HTML5の学習ステップ

HTML5を学ぶには、以下のステップで学んでいくと簡単なウェブサイトを作成できるようになります。

  • 1.HTMLの基礎について理解を深める
  • 2.学習サイトや書籍でCSSも合わせて学習
  • 3.オリジナルウェブサイト制作

HTMLの基礎については学習サイトで基本的なタグの書き方について学ぶのがおすすめです。なかでもProgateがゲーム感覚で理解を深めやすいためおすすめです。

2の段階で、CSSも合わせて言語への理解を深めるにはドットインストールや「」
それ以外に詳しい書籍やサイトについてはこちらの記事で解説していますので見てみてください。

エンジニアへ転職をするにはプログラミングスクールへ

HTML5をはじめとして、今後プログラミング言語も身につけてエンジニアになっていくには、プログラミングスクールでの学習がおすすめです。

独学でプログラミングを身につけるには1000時間必要と言われていますが、スクールに通うことでその時間を圧倒的に短縮することができるからです。

弊社「侍エンジニア塾」では、以下の3つの特徴で完全個別型の指導をしています。

  • あなたの目的にそった専属講師によるマンツーマンレッスン
  • キャリアから逆算して無駄をそぎ落としたカリキュラム
  • あなたのアイディアを形にするオリジナルサイト・アプリ開発支援

エンジニアになってからは基本的にその会社独自のサービスに携わり、学習時期には出くわさなかったオリジナルエラーを解決しなければいけないのですが、弊社のカリキュラムではオリジナルサイト・アプリの作成も行うため、エンジニアになってから必要なスキルを受講期間中に身につけ始めることができます。

これも完全個別に特化した指導を行なっているからこその弊社の強みです。

無料体験レッスンではただのサービス説明ではなく、HTMLを身につけた後のプログラミング学習プランや、キャリア展望、今後の学習ロードマップなど無料体験だけでもあなたの今後のプログラミング学習を効率的に進める内容になっています。

下記のカレンダーよりオンラインでの受講も可能ですので、お気軽にお申し込みください。

まとめ

いかがでしたか?HTML5とは?を以前との違いも含めて簡単に説明してきました。

HTMLはWeb制作をするには様々な場面で必要な機会があるため、身につけておきたいスキルです。

この記事を参考に皆さんの学習が進んだら幸いです。

LINEで送る
Pocket

最短でエンジニアを目指すなら侍エンジニア塾

cta_under_bnr

侍エンジニア塾は業界で初めてマンツーマンレッスンを始めたプログラミングスクールです。これまでの指導実績は16,000名を超え、未経験から数多くのエンジニアを輩出しています。

あなたの目的に合わせてカリキュラムを作成し、現役エンジニア講師が専属であなたの学習をサポートするため効率よく学習を進めることができますよ。

無理な勧誘などは一切ありません。まずは無料体験レッスンを受講ください。

無料体験レッスンの詳細はこちら

書いた人

侍ブログ編集部

侍ブログ編集部

侍エンジニア塾は「人生を変えるプログラミング学習」をコンセンプトに、過去多くのフリーランスエンジニアを輩出したプログラミングスクールです。プログラミングに役立つ情報や有用な情報を発信していきます。
サービスページはこちら
ツイッターはこちら
フェイスブックはこちら

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説