1. HTML5とは？HTML Living Standardとの違い
2. HTML5の3つの特徴
3. HTML5で追加された主な新規エレメント要素
4. HTML5のスキル習得におすすめの学習方法3選
5. HTML5のおすすめ資格3選
6. HTML5とあわせて身につけたいプログラミング言語
7. 新卒学生におすすめのHTML5を活かせる職種3選
8. まとめ

＼15年超の実績を持つレバテックが運営／

ITエンジニア就活支援サービスに登録する

＼15年超の実績を持つレバテックが運営／

ITエンジニア就活支援サービスに登録する

1. HTML5とは？HTML Living Standardとの違い

HTML（Hyper Text Markup Language）とは、Webサイトの文章を書くための言語です。HTMLは1990年に開発されてから、何度かアップデートを重ねており、呼称の数字はバージョンを意味します。

HTML5とは、2014年に開発されたHTMLの改訂第5版のことです。しかし、2021年以降、HTMLはバーションの番号づけが廃止となり、公式には「HTML Living Standard」へ呼称が変更されています。

HTML5とHTML Living Standardは、一部タグの扱い方などに違いがあるものの、言語としての本質に変わりはありません。

HTML Living Standardの仕様にも、「HTML Living Standardは一言で言うとHTML5である」と説明されています。HTML Living Standardは、単なるHTML5の代替ではなく、広義のHTML5であると認識しておきましょう。

関連記事：【HTML入門】基本の書き方やよく使うタグを初心者向けに解説

＼15年超の実績を持つレバテックが運営／

ITエンジニア就活支援サービスに登録する

＼15年超の実績を持つレバテックが運営／

ITエンジニア就活支援サービスに登録する

2. HTML5の3つの特徴

ここでは、HTML5の特徴を3つまとめました。

一つ前のバージョンであるHTML4と比較して、HTML5でできるようになったことを中心に解説します。

文章構造が分かりやすい

HTML5は、過去のバージョンと比較して、文章構造が分かりやすいのが特徴です。文章構造を表す新しいタグが追加され、非常にシンプルかつ見やすくなっています。

HTML5では、より意味付けされた記述によって、ブラウザや検索エンジンがWebサイトの構成をより明確に理解できるようになりました。コーディングがシンプルになったことで、言語そのものの難易度も下がったといえるでしょう。

動画・音声を埋め込みやすい

HTML5の特徴として、動画や音声を埋め込みやすい点が挙げられます。

過去のバージョンでは、「Adobe Flash」と呼ばれる複雑なアプリケーション群を使用しなければなりませんでした。しかし、HTML5以降は、特定のタグを入力するだけで動画や音声を埋め込みできるようになっています。

埋め込まれたデータはパソコン・スマホを問わずに再生可能です。そのため、対応機種や使用環境を心配する必要がなく、気軽に動画や音声を埋め込みできます。

Webアプリケーションが作りやすい

Webアプリケーションが作りやすいのも、HTML5の特徴の一つです。API（アプリケーション・プログラミング・インターフェース）の追加によって、簡単にできることが増えました。

・ユーザーの位置情報の取得

・ドラッグアンドドロップ機能の追加　など

HTML5でより高度な機能を実装したWebアプリケーションを開発できるようになり、言語としての幅が広がったといえるでしょう。

＼15年超の実績を持つレバテックが運営／

ITエンジニア就活支援サービスに登録する

＼15年超の実績を持つレバテックが運営／

ITエンジニア就活支援サービスに登録する

3. HTML5で追加された主な新規エレメント要素

HTML5で新たに追加された要素のうち、代表的なものを下表にまとめました。

要素	機能
article	機能独立したコンテンツを示す
audio	機能音声を再生する
aside	機能補足的なコンテンツを示す
canvas	機能図形などを描画する
footer	機能フッター部分を示す
header	機能ヘッダー部分を示す
main	機能メインコンテンツであることを示す
section	機能一つのセクションを形成する
nav	機能リンクナビゲーションを表す
time	機能日付や時刻を示す
video	機能動画を再生する

なかでも、サイト構造を示すタグが追加されたことで、HTML5以降ではサイト構造が非常に明確で使いやすいものになりました。

＼15年超の実績を持つレバテックが運営／

ITエンジニア就活支援サービスに登録する

＼15年超の実績を持つレバテックが運営／

ITエンジニア就活支援サービスに登録する

4. HTML5のスキル習得におすすめの学習方法3選

ここでは、HTML5のスキルを身につけるための学習方法を3つ解説します。

書籍やオンライン学習サイトで独学する

まずは、書籍やオンライン学習サイトを活用して独学する方法です。独学は、未経験からでも低予算で学習を始めやすいメリットがあります。

独学で挫折しないためには、初心者から上級者まで、自分のレベルに合った書籍を選ぶのがポイントです。HTML5の知識は書籍でも学べます。しかし、実践できるスキルを習得するためには、コードを書く練習もしなければなりません。

オンライン学習サイトは無料で利用できるものもあれば、コンテンツによって追加で利用料金が発生するケースもあります。

おすすめのオンライン学習サイトは、Progateやドットインストール、Schooなどです。特に、初心者や未経験の方は、独学から始めてみるとよいでしょう。

関連記事：HTML・CSSを本で勉強したい学生へ！おすすめの本と選び方

プログラミングスクールに通う

HTML5のスキルを身につけるためには、プログラミングスクールに通うのもおすすめです。プログラミングスクールなら、作り込まれたカリキュラムに沿って、一定期間内に確実にスキルを習得できる仕組みが整っています。

学習中に問題や疑問点があれば、いつでも講師やメンターに頼れるため、初心者でも挫折しにくいでしょう。一方で、独学と比べた場合、費用がかかるデメリットもあります。

プログラミングスクールによって、費用やカリキュラムの内容はさまざまです。学生向けのプログラミングスクールであるレバテックカレッジなら、月額29,800円（税込）で受講できます。

レバテックカレッジなら、未経験からでもWebサービスの開発に必要なスキルを効率よく身につけられます。独学でスキルを習得できるか不安な方は、プログラミングスクールを検討してみてください。

勉強会やセミナーに参加する

HTML5の知識やスキルを身につけるために、勉強会やセミナーに参加する方法もあります。最近ではオンライン・オフラインを問わず、プログラミングの学習者向けにさまざまな勉強会やセミナーが開催されています。

どのような勉強会やセミナーに参加するかは、TECH PLAYやconnpass、DoorKeeperなどから探すのがおすすめです。

勉強会やセミナーでは、現役エンジニアから最新のスキルを学べるだけでなく、直接悩みを相談できるケースも少なくありません。また、同じような境遇の参加者とも交流できるので、学習のモチベーションの維持にもつながります。

学びを深めるためにも、興味がある勉強会やセミナーを見つけたら積極的に参加しましょう。

関連記事：HTMLを学習したい学生必見！学習方法やおすすめのサイトを紹介

＼15年超の実績を持つレバテックが運営／

ITエンジニア就活支援サービスに登録する

＼15年超の実績を持つレバテックが運営／

ITエンジニア就活支援サービスに登録する

5. HTML5のおすすめ資格3選

HTML5に関連する資格を目指して試験対策すれば、効率よく知識やスキルを身につけられるでしょう。資格の取得は、就職・転職活動の際にスキルをアピールする材料にもなるのでおすすめです。

ここでは、HTMLに関連するおすすめの資格を3つ紹介します。

HTML5プロフェッショナル認定試験

HTML5プロフェッショナル認定試験は、エルピーアイジャパン（LPI-Japan）が運営する能力試験制度です。認定基準はレベル1とレベル2の2種類で、取得すれば、最新のマークアップに関する技術と知識が身についていることを証明できます。

レベル	レベル1	レベル2
試験時間	90分	90分
受験料（税込）	16,500円	16,500円
試験方式	コンピュータベーストテスト（CBT）	コンピュータベーストテスト（CBT）
スキルレベル	HTMLを使ってシンプルな内容のWebサイトを制作できる	動的コンテンツの制作、アプリケーションの開発ができる
合格スコア	約7割程度の正答率	約7割程度の正答率

また、レベル1の一般的な学習期間の目安は3か月〜半年程度、レベル2なら半年〜1年程度とされています。HTML5の知識とスキルを身につけるために、自分なりに期限を決めて学習に取り組むとよいでしょう。

Webクリエイター能力認定試験

Webクリエイター能力認定試験は、サーティファイ Web利用･技術認定委員会が運営する能力試験制度です。認定試験に合格すれば、Webクリエイターに必要とされる、Webサイト制作のデザイン能力およびコーディング能力を証明できます。

認定基準	スタンダード	エキスパート
試験時間（公開試験）	60分	知識問題：20分実技問題：90分
受験料（税込）	5,900円	7,500円
試験方式	コンピュータベーストテスト（CBT） Webベーステスト（WBT）	コンピュータベーストテスト（CBT） Webベーステスト（WBT）
スキルレベル	HTMLを使って、Webページのデザインやレイアウトを表現できる	動きのあるWebページの表示、マルチデバイス対応、新規サイトの構築ができる
合格スコア	得点率65％以上	得点率65％以上

2022年度の合格率は、スタンダードとエキスパートの平均で89.92％でした。ほかの資格と比べて難易度が易しいため、未経験や初心者でも挑戦しやすいでしょう。

ウェブデザイン技能検定

ウェブデザイン技能検定は、特定非営利活動法人インターネットスキル認定普及協会が実施する国家資格です。試験は3級から1級まであり、合格すると独占名称である「ウェブデザイン技能士」を名乗ることができます。

等級	3級	2級	1級
試験時間	学科：45分実技：60分	学科：60分実技：120分	学科：90分実技：180分ペーパー実技：60分
受験料（税込）	学科： 6,000円実技： 8,000円または3,000円（25歳未満の在職者）	学科： 7,000円実技： 16,000円または7,000円（25歳未満の在職者）	学科： 8,000円実技： 25,000円
試験方式	学科：筆記試験（マーク方式）実技：課題選択方式	学科：筆記試験（マーク方式）実技：課題選択方式	学科：筆記試験（マーク方式）実技：課題選択方式
スキルレベル	HTMLを使ったシンプルな内容のwebサイトを制作できる	画像の作成・加工や、データのアップロードを含むWebサイトの管理能力がある	Webデザイン領域における幅広い知識と経験を活かして、Webサイトを設計できる
合格スコア	学科：70点以上／100点満点実技：70点以上／100点満点（試験要項に示す各作業分類において配点の60％以上）	学科：70点以上／100点満点実技：70点以上／100点満点（試験要項に示す各作業分類において配点の60％以上）	学科：70点以上／100点満点実技：70点以上／100点満点（試験要項に示す各作業分類において配点の60％以上）

3級は未経験でも受験できますが、2級や1級は受験資格があるうえに、難易度も高まります。Webデザインの基礎知識を身につけるために、まずは3級の取得を目指しましょう。

＼15年超の実績を持つレバテックが運営／

ITエンジニア就活支援サービスに登録する

＼15年超の実績を持つレバテックが運営／

ITエンジニア就活支援サービスに登録する

6. HTML5とあわせて身につけたいプログラミング言語

HTML5のスキルを活かしてサイト制作や表現の幅を広げるためには、ほかのプログラミング言語の習得が必須です。

ここでは、HTML5とあわせて身につけたいプログラミング言語を紹介します。

CSS

CCSはWebサイトのサイズや色、レイアウトなどを設定するための言語です。

HTMLがWebサイトに表示されるテキストや画像を記述するのに対し、CSSはテキストや画像の見栄えをよくするためのデザインに用いられます。HTMLとCCSはセットで使用されるケースがほとんどで、Web領域に関わるならそれぞれが必須の言語です。

関連記事：学生向けのCSSの入門方法！概要や基本構文について解説

JavaScript

JavaScriptは汎用性の高いプログラミング言語で、Webサイトにアニメーションのような動的な要素を付与できます。

Webサイト閲覧時に画面上で別のウィンドウが自動的に起動する「ポップアップウィンドウ」にも活用されている言語です。HTMLとあわせてJavaScriptを身につけると、Webサイト制作における表現の幅が広がります。

関連記事：JavaScriptとは？できることや将来性・勉強方法を解説

＼15年超の実績を持つレバテックが運営／

ITエンジニア就活支援サービスに登録する

＼15年超の実績を持つレバテックが運営／

ITエンジニア就活支援サービスに登録する

PHP

PHPは、Webページを動的に表示させるなど、サーバーサイドでのデータ処理に用いられるプログラミング言語です。HTMLやCSSとあわせて、WebサイトやWebアプリケーションの構築に利用されています。

PHPは、HTMLやCSSと違って、ユーザーの操作によって表示する内容を変えるなど、動的な仕組みを作れるのが特徴です。世界的トップシェアのCMS（コンテンツ・マネジメント・システム）「WordPress」でも採用されており、PHPは需要が高い言語だといえます。

HTMLを学ぶなら、PHPもあわせて身につけるとよいでしょう。

関連記事：学生向けPHPの入門方法！環境構築や基本構文を紹介

Ruby

Rubyは日本人によって開発されたプログラミング言語で、ECサイトやSNSの構築、Webアプリケーションの開発などに用いられます。静的なHTMLとCSSに加えてRubyを使用することで、ユーザーの操作に応じて変化するWebページの制作が可能です。

Rubyは文法がシンプルで書きやすく、習得の難易度も易しめです。日本語の情報が多く、初心者にも学びやすいといえます。

関連記事：学生向け｜Rubyとは？メリットや使われている業界などを解説

＼15年超の実績を持つレバテックが運営／

ITエンジニア就活支援サービスに登録する

＼15年超の実績を持つレバテックが運営／

ITエンジニア就活支援サービスに登録する

7. 新卒学生におすすめのHTML5を活かせる職種3選

最後に、新卒向けにHTML5の知識を活かせる職種を3つ紹介します。

基本のマークアップ言語であるHTML5だけを身につけていても、エンジニアとして仕事をするのは難しいでしょう。仕事の幅を広げるためにも、ほかのスキルを身につける必要があります。

それぞれの職種において、HTML5に加えて必要とされるスキルもまとめているので、参考にしてください。

コーダー

コーダーとは、コーディングを専門とするエンジニア職です。コーディングとは、HTML5などの言語を用いてソースコードを記述し、ブラウザ上にWebサイトを構築する作業を意味します。

HTML5に加えて、コーダーにはCSSやJavaScriptなどのプログラミングスキル、検索エンジンでWebサイトの露出を増やすために必要なSEOの知識も必要です。

コーダーの仕事は指示どおりに作業できる能力が求められるため、自分でデザインするというよりは作業感の強い業務が多いといえます。

関連記事：コーディングを仕事にするには？コーダーとして就活したい方必見！

Webデザイナー

Webデザイナーとは、Webサイトのデザインをする仕事です。Webサイトの見た目や配色はもちろん、ユーザーの使い勝手や運用・管理のしやすさなども考慮してデザインする必要があります。

Webデザイナーはコーダーに必要なスキルに加えて、下記のスキルが必要です。

・Webデザインの知識

・デザイン作成ツールを扱うスキル

・企画力や提案力　など

代表的なデザイン作成ツールには、「Illustrator」や「Photoshop」などがあります。また、Webデザイナーとしてクライアントの要望に応えるためには、デザインを生み出すセンスも不可欠です。

関連記事：Webデザイナーへの就職は厳しい？仕事内容や7つの必要なスキルを解説

フロントエンドエンジニア

フロントエンドエンジニアは、「フロントエンド」と呼ばれるWebサイトやWebサービスにおいてユーザーが直接操作する部分の開発を担います。

フロントエンドエンジニアとして活躍するためには、コーダーに必要なスキルに加えて、下記のスキルが必要です。

・サーバーサイドの知識

・フレームワークスキル

・マネジメント力　など

「サーバーサイド」とは、WebサイトやWebサービスにおいてユーザーに見えない裏側で機能している部分を意味します。

フロントエンドエンジニアとして、サーバーサイドの知識も持っていれば、チーム内におけるコミュニケーションがスムーズになり、仕事を進めやすくなるでしょう。

なお、フロントエンドエンジニアはコーダーの上位職種と考えられているため、コーダーを経験した後にキャリアアップする人が多い職種です。

関連記事：フロントエンドエンジニアは新卒・未経験でもなれる？採用される5つの方法

＼15年超の実績を持つレバテックが運営／

ITエンジニア就活支援サービスに登録する

＼15年超の実績を持つレバテックが運営／

ITエンジニア就活支援サービスに登録する

8. まとめ

HTML5はWebサイト制作に欠かせないマークアップ言語の一つです。文章構造がシンプルで動画や音声の埋め込みがしやすく、以前のバージョンと比べて扱いやすくなりました。

2021年以降、公式には「HTML Living Standard」と呼称が変更されていますが、言語の本質に変わりはありません。特に、Web系企業への就職を目指している場合は、学生のうちからHTML5の知識を身につけておくとよいでしょう。

ITエンジニアを目指す新卒学生向け就活エージェントならレバテックルーキー

レバテックルーキーは、レバテックが運営するITエンジニア専門の就活エージェントです。多数のITエンジニアのキャリア支援経験のあるアドバイザーが、あなたのスキルと希望に合わせた企業の紹介から、人事目線での面接対策など、就職までを一貫してサポートします。ES添削、面接対策、ポートフォリオ作成サポートなども実施していますので、まずは一度カウンセリングにお越しください。

就活アドバイザーに相談してみ

HTML5に関する記事一覧

HTML5とは？言語の特徴や学習方法からおすすめ資格3選を解説