【関連記事】[*HTMLのtableで表を作成するには？基本用法からCSSまで図解*](https://and-engineer.com/articles/ZyMQ5BEAAB8ATD6M)

*Webページを表示させるための文書であるHTMLでは、スクリプトを利用してWebページに動的な動作やインタラクティブな機能を追加することができます。*

ここではまず、HTMLでスクリプトを利用することでどのようなメリットがあるのか、HTML内でスクリプトを使用する際に使う\<script\>タグの役割について説明します。

HTML入門：基本から学ぶHTMLの構造と構成要素を解説！

**HTMLでは、Webページにスクリプトを埋め込むことで、ページの動作を制御できるメリットがあります。**ほとんどの場合、JavaScriptが使われますが、VBScriptなど他のスクリプトを使用することもできます。

具体的には、ページのコンテンツを動的に変更したり、追加したりできます。例えば、ボタンをクリックすると追加のテキストが表示されるような動作を実現できます。

また、ユーザがフォームを送信する前に、スクリプトを使ってフォームの入力値を検証することができます。これにより、不正な入力がある場合に警告メッセージを表示したり、フォームの送信を中止したりすることができます。

VBScriptが非推奨になった？その理由と代替言語を解説

HTMLでスクリプトを使用する場合には、\<script\>タグを使用します。

*HTML文書内の\<script\>タグ内にスクリプトコードを記述することで、HTMLページにクライアントサイドスクリプトのプログラミングを組み込むことができます。*

また、\<script\>タグの様々な属性を利用することで、スクリプトの制御やパラメータの指定を行い、スクリプトの動作を調整することができます。

\<script\>タグは、外部動画サービスのプレーヤーなどをWebページに埋め込む時にも使われます。コンテンツのパラメータをカスタマイズすることで、ユーザに合わせた表示を行うことができます。

## HTMLでのscriptの基本的な使い方

ここでは、HTMLでスクリプトを使用する方法を解説します。基本的な記述方法と、HTML内に直接記載するインラインスクリプト、外部ファイルからのスクリプトの読み込みについて確認しましょう。

ここから、一般的によく使われるJavaScriptの場合で説明を進めていきます。

HTMLでスクリプトを記述するには、\<script\>タグを使用します。\<script\>タグの基本的な記述方法は以下の通りです。

```html
<script>
  // ここにJavaScriptコードを記述します
  alert("Hello world!");
</script>
```

*\<script>～</script>\の間には、JavaScriptコードを記述します。*上記の例では、ページを読み込むと「Hello world!」というアラートが表示されます。

また、HTMLとJavaScriptは、相互に連携して動作することができます。例えば、HTMLの要素にクリックイベントを追加して、JavaScriptコードを実行できます。

```
<button onclick="alert('Hello world!');">クリック</button>
```

上記の例では、ボタンをクリックすると「Hello world!」というアラートが表示されます。

JavaScriptの入門！その概要や文法の基礎について解説！

*インラインスクリプトとは、HTMLの中に直接スクリプトを記述する方法です。HTMLの<script>～</script>タグの間にスクリプトコードを記述します。*

\<script\>タグは、\<head\>要素または\<body\>要素の中に配置することができ、その位置によってスクリプトの実行タイミングが異なります。

\<head\>要素内に記述された場合、ページの読み込み前にスクリプトが実行され、\<body\>要素内に記述された場合は、ページの残りの部分が読み込まれた後にスクリプトが実行されます。

インラインスクリプトのようにHTMLに直接スクリプトを書かずに、スクリプトが書かれた外部ファイルを読み込んでスクリプトを実行することもできます。

*外部ファイルを読み込む方法は、複数のページで同じスクリプトを使用したい場合や、サイトの訪問者にスクリプトを隠したい場合に便利です。*また、コードの再利用性や保守性が向上し、管理が容易になります。

具体的な手順としては、スクリプトを記述した外部ファイルを作成し、\<script\>タグのsrc属性でファイルを指定します。

例えば、JavaScriptのファイルである「sample.js」を作成し、内には以下のようなコードが記述されているとします。

次に、HTMLファイルで\<script\>タグを使用して、外部ファイルを読み込みます。以下のように記述します。

```
<script src="sample.js"></script>
```

このようにすることで、sample.jsの中身がHTMLファイルに埋め込まれ、指定したタイミングでJavaScriptが実行されます。

## ＜script＞タグの属性について

HTMLで\<script\>タグを使う場合、さまざまな属性を指定することで、使用するスクリプトの種類を宣言したり、スクリプトの動作タイミングを制御したりすることができます。

*\<script\>タグのtype属性は、使用されるスクリプトコードの種類を指定します。*

\<script\>タグではJavaScriptが使われることが多く、一般的にはJavaScriptのMIMEタイプであるtext/javascriptが使われます。他に、VBScriptを使用する場合のtext/vbscriptも利用可能です。

具体的には、以下のようにコードを記述します。

```
<script type="text/javascript">
    // JavaScriptコード
</script>
```

HTML5ではtype属性を省略することも可能で、その場合は「type="text/javascript"」としてみなされます。また、moduleを指定すると、スクリプトがJavaScriptモジュールとして扱われます。

HTML5とは？特徴や変更点・関連用語・対応ブラウザを解説！

src属性は、外部スクリプトファイルのURLを指定します。*src属性を使うことで、HTML文書に直接スクリプトを埋め込む代わりに、外部のスクリプトファイルを読み込むことが可能です。*

例えば、以下のコードでは指定したURLからスクリプトファイル「sample.js」を取得し、ページにスクリプトを適用することができます。

```
<script src="https://example.com/sample.js">
    // JavaScriptコード
</script>
```

通常、HTMLファイルの中にスクリプトがある場合、一旦表示処理を中断してスクリプトを読み込んで実行し、実行完了後に表示を再開します。

*async属性とdefer属性は、このHTMLの読み込みとスクリプトの読み込みを非同期で行い、実行のタイミングを制御するための属性です。*

async属性を指定すると、HTMLの読み込みと表示を行いながら、スクリプトの読み込みと実行を並行して行います。

例えば、ページを読み込みながらユーザが入力したデータを検証するスクリプトを読み込んで実行する場合に使用できます。

一方、defer属性を指定すると、HTMLの読み込みと表示が完了した後で、先頭からスクリプトが実行されます。

例えば、ページの読み込みが完了した後にページのナビゲーション機能を提供するスクリプトを読み込む場合に使用できます。

*nomodule属性は、モジュールスクリプトに非対応の古いブラウザ向けに、代替スクリプトを指定できます。*

nomodule属性が付与された\<script\>タグ内のスクリプトは、モジュールスクリプトをサポートしていないブラウザでのみ実行されます。

一方で、モジュールスクリプトに対応しているブラウザーではnomodule属性は無視されます。

```
<script type="module" src="sample.js"></script>
<script nomodule src="sample2.js"></script>
```

上記の例では、type属性でmoduleを指定されたsample.jsがモジュールスクリプトとして読み込まれますが、モジュールスクリプトに非対応のブラウザーではsample2.jsが代替として実行されます。

HTMLでスクリプトを使用する場合に気を付けたいこととして、スクリプトのコメントアウト、実行順序について解説します。

*HTMLにおいてスクリプトを使用する時に、\<script\>要素に対応していない古いブラウザでスクリプトがそのまま表示されるのを防ぐため、scriptの記述部分をHTMLコメントアウトする場合があります。*

具体的な方法としては、スクリプトを記述する部分を以下のように囲んでコメントアウトします。

```

```

近年のブラウザではほとんどが\<script\>要素に対応しているため、コメントアウトする必要性は低くなっていますが、過去に作られたWebサイトをメンテナンスする時に残っている可能性があるので、覚えておくと良いでしょう。

HTMLのコメントアウトの書き方は？使い方と注意事項を解説

### scriptの位置に応じた実行順序に気を付ける

*\<script\>タグをHTML内に記載する場合、\<head\>タグや\<body\>タグの中に配置することができますが、それぞれで実行順序が異なります。*

\<head\>内に\<script\>タグを配置すると、ページの読み込みが完了するまでスクリプトが実行されません。そのため、HTMLの要素が完全に読み込まれる前にスクリプトが実行されることを防ぐことができます。

一方、\<body\>タグの中に\<script\>タグを配置すると、ページの読み込みが進むのに合わせてスクリプトが実行されるため、ユーザがページを見ている間にスクリプトが処理されます。

ここでは、スクリプトの使用例を紹介します。実際に使用する場合の参考にしてください。

### scriptでアラートを表示させる

\<script\>タグを使用して、Webサイト上でアラートを使ったメッセージを表示させることができます。
次のコードではユーザがページを訪れた際にサンプルサイトであることをアラート表示します。

```
<!DOCTYPE html>
<html>
<head>
    <title>アラート表示の例</title>
</head>
<body>
    <script>
        alert("このサイトは架空のサンプルサイトです。表示内容はサンプルです。");
    </script>
    <p>これはサンプルサイトです。</p>
</body>
</html>
```

HTMLでは、スクリプトを使ってWebページに動的な機能やインタラクティブな要素を追加できます。HTML内で<script>タグを使ってスクリプトコードを記載します。この記事では、HTMLでスクリプトを活用したい方のために、使い方やポイント、使用例を解説します。

WebページにJavaScriptなどのスクリプトを埋め込むことで、ページの動作を動的に制御できる

\<script\>タグを使ってスクリプトコードをHTML文書に組み込み、タグの属性でスクリプトの種類や動作を制御できる

HTML内に直接記載するインラインスクリプトか、外部のスクリプトファイルを読み込んで使うことができる

HTMLでscriptの書き方まとめ！使用例から使う時のポイントまで解説

**HTML5とは、ハイパーテキスト記述言語（HyperText Markup Language）の5回目の改訂版を指します。**HTMLの仕様はWeb Hypertext Application Technology Working Group（WHATWG）が策定し、World Wide Web Consortium（W3C）で勧告されています。

【参考】：[WHATWG HTML Living Standard](https://html.spec.whatwg.org/multipage/)

HTML 5.1以降はHTML Living Standardに基づいており、現在最新の仕様はHTML 5.2を勧告後、HTML Living Standardに統合され仕様統一されています。

【参考】：[HTML 5.2 W3C Recommendation](https://www.w3.org/TR/html52/)

*HTML5のベースとなっているHTMLは、ハイパーテキスト記述言語です。*ハイパーテキストとは、複数の文書を相互参照するためのリンク（ハイパーリンク）機能を有する仕組みを指します。

ハイパーテキストはWeb（World Wide Web）を始めとするウェブ系システムで標準利用されています。ウェブ系システムで使用するウェブコンテンツはHTMLで記述されており、コンテンツの通信や表示をしたり、直接PCに格納されたHTML文書をブラウザで表示したりすることができます。

HTMLとは？できることや初心者向けのタグの例、CSSについても紹介

HTMLは登場以来文書（コンテンツ）の構造と見栄えを指定できました。その後、煩雑な言語仕様を整理するために文書構造をHTMLが担当し、見栄えをCSSが担当することで役割を分離しました。

それからHTML4では文書構造を表すために利用されていたものの、ウェブサイトの高機能化によりリッチウェブアプリケーションのプラットフォームとしてのニーズが強まりました。

リッチウェブアプリケーションでは、視覚的なリッチコンテンツやマルチメディア機能が必要とされます。*HTML4では十分とは言えないために各ベンダーが独自拡張を進め、このバラバラの実装を整理したものがHTML5です。*HTML5は検索エンジン向けのタグが用意され、利便性が向上しました。

さらに、ビデオやオーディオの再生やオフライン表示のAPI等が追加されており、アプリケーションプラットフォームとしての機能追加が特徴です。

【初心者必見】HTMLとCSSの違いは？基本知識と学習方法も解説！

Adobe Flashは、長らくMacromedia Flashとしてリッチコンテンツのプラグインとして活用されていました。FlashはHTMLで用いるプラグインで動画やゲームで利用されていましたが、脆弱性が多数発見され、ブラウザがクラッシュすることが多かったのが実態です。

上記理由から、Apple社の当時のCEOスティーブ・ジョブズ氏はFlashを使用せずにHTML5を強力に推進しました。このためAdobe社はFlash継続をあきらめ、2020年末にFlash Playerの開発と配布を終了しました。

*ブラウザ提供各社は2015年から2016年にFlashのブロックを開始しており、2020年末のFlash終了への影響はほとんどありませんでした。*

*HTML5 プレイヤーとは、Flash Playerで提供していた動画再生機能をHTML5に置き換えたものです。*HTML5ではプラグインなしで動画やアニメーションを再生できます。そのため、HTML5 プレイヤーとは\<video\>要素を用いて動画再生機能を実装したものを指します。

HTML5 プレイヤーの実装例は、YouTubeが有名です。YouTubeでは2015年からHTML5 プレイヤーをデフォルトの動画プレイヤーとしています。その他にも、JavaScriptのライブラリとして提供するVideo.jsも数多く利用されています。

【参考】：[Video.js](https://videojs.com/)

*HTML5 ゲームとは、主にモバイル向けゲームで用いる用語です。*従来のスマホアプリはApp StoreやGoogle Playにアプリを登録し、Apple社やGoogle社のコントロールの下、アプリ配信を行っていました。主にアプリはゲームエンジンやライブラリ等を用いて開発するネイティブアプリとなります。理由は当時のスマホの性能が追いつかなかったためです。

近年スマホの性能向上が著しいために、ネイティブアプリではなくHTML5を用いてゲームを提供することが増えています。これは性能向上の他にも、Apple社やGoogle社のコントロールを受けないで配信や課金をしたいことが背景にあります。そのためHTML5 ゲーム市場は今後の成長が見込まれる領域です。

HTML5の最初の企画となるHTML 5.0は2008年にドラフトが公開され、2014年に勧告されました。2014年から2015年にかけてHTML5対応ブラウザが整備されています。*そのため代表的なブラウザであるEdge・Firefox・Chrome・Operaは問題なく動作しますし、そのほかのブラウザも順次対応機能が実装されています。*

ブラウザの対応状況を確認するには、「Can I use」や「HTML5test」等でHTML5の実装状況やお使いのブラウザの機能適合が確認できます。さらに、YouTubeでも対応ブラウザかどうかを表示してくれます。

【参考】：[Can I use](https://caniuse.com/)
【参考】：[HTML5test - How well does your browser support HTML5?](https://html5test.opensuse.org/)
【参考】：[YouTube サポートブラウザ](https://www.youtube.com/supported_browsers)

*HTML5の開発は、マークアップ言語に沿ったコンテンツをテキスト形式として作成します。*したがって、テキスト文書を作成する環境があればすぐにでも開始できます。具体的には、テキスト編集するためのエディタ、およびHTML5を表示するブラウザの準備ができれば問題ありません。

なお、HTML5に対応する統合開発環境（IDE）があるとさらに簡単に開発を行うことができます。具体的にはMicrosoft社のVisual Studio、オープンソースソフトウェアのNetbeansやEclipseの利用者が多いです。いずれも日本語に対応しています。

【参考】：[Microsoft Visual Studio](https://visualstudio.microsoft.com/ja/)
【参考】：[Apache NetBeans](https://netbeans.apache.org)
【参考】：[Netbeans 日本語化](https://github.com/junichi11/netbeans-translations-ja/releases)
【参考】：[ECLIPSE](https://www.eclipse.org/)
【参考】：[Pleiades All in One Eclipse日本語化](https://willbrains.jp/)

IDEとは？詳細やメリット、おすすめのIDEを紹介します！

Visual Studio 2022の新機能がIDEで歴代最高な理由

Eclipseとは？統合開発環境を日本語プラグインで快適に構築する方法を解説！

**HTML5はブラウザ機能とテキストエディタを用いるため、特に追加インストールは必要ありません。**統合開発環境（IDE）を使用する場合はそれぞれダウンロード・インストールを行い利用していきます。

動画編集ソフトによっては、ブラウザの拡張機能を使用するためにインストールが求められる場合がありますが、通常は必要としません。

**HTML5はHTML4と後方互換性を維持しながら、機能改善が図られています。**以下に代表的な変更点を記載しておきます。

・*文字エンコーディング*
従来の指定に加えて、以下のシンプルな指定が可能となり使いやすくなりました。
HTML4：\<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"\> 
HTML5：\<meta charset="UTF-8"\>

・*DOCTYPE*
こちらも従来の記述をシンプル化し、\<!DOCTYPE html\>と簡略化されました。

・*言語要素*
section、article、aside、hgroup、header、footer、nav、figure、の要素が追加されました。従来div要素で行っていた文書構造がより分かりやすく整理されました。

・*マルチメディアコンテンツ用言語要素*
audio、videoの要素が追加されました。ともにAPIが提供されており独自のインターフェイスを開発可能です。その他グラフィックス用canvas要素や、ダウンロード管理用progress要素等が追加されました。

上記のほかにも追加された要素や変更された要素があります。詳細はW3Cのドキュメントで定義されています。

【参考】：[W3C HTML5 Differences from HTML4](https://www.w3.org/TR/html5-diff/)
【参考】：[W3C HTML5 における HTML4 からの変更点](https://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/)

冒頭で記述した通り、HTMLの仕様はWeb Hypertext Application Technology Working Group（WHATWG）が策定し、World Wide Web Consortium（W3C）で勧告されています。HTML 5.1以降はHTML Living Standardに基づいており、現在最新の仕様は、HTML 5.2まで勧告されています。

この標準化の過程の中で、HTML5をW3Cがしっかり仕様策定する流れと、機能拡張を順次実施したいWHATWGで仕様の差異が生じてしまいました。そのため、ウェブブラウザ開発ベンダにより立ち上げられたWHATWGのHTML Living Standardが、HTMLの標準規格として存続することになりました。

現在、2021年1月にWHATWGのHTML Living StandardがW3Cによって勧告されており、ダブルスタンダードが廃止されたことで統一化がなされました。**HTML Living Standardの仕様ドキュメントを見ると、「HTML Living Standardは一言で言うとHTML5である」と説明しています。**

HTML5はなぜ廃止された？いつからなのか、仕様変遷も紹介！

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

HTML5が「HTML Living Standard」に変更されたことで、HTML5の認定資格であった「HTML5プロフェッショナル認定試験」についてはどうなるのでしょうか。

公式サイトによると、「HTML5プロフェッショナル認定は今後も、HTML Standardとしてバージョンアップを行い、Webエンジニアの認定としての価値を維持していく」としており、*これまで資格を取得した方やこれから受験を検討している方に対する影響はないようです。*

【参考】：[HTML5はHTML Standardへ呼称変更　～ HTML5プロフェッショナル認定試験は今後も有効 ～ ｜「HTML5プロフェッショナル認定試験」公式サイト](https://html5exam.jp/measures/column_01.html)

これを踏まえ、ここでは「HTML5プロフェッショナル認定試験」について、試験概要や難易度について紹介します。

**HTML5プロフェッショナル認定試験とは、HTML5・CSS3・JavaScriptなどのWebコンテンツ制作やWebアプリケーション、動的なWebコンテンツの開発・設計の技術や知識を測る試験のことです。**

【参考】：[試験概要｜Web資格なら「HTML5プロフェッショナル認定試験」公式サイト](https://html5exam.jp/outline/)

試験は、Webコンテンツ制作の基礎の実力を測るレベル1と、JavaScriptを中心とした動的Webコンテンツの開発・設計の能力を認定するレベル2に分けられます。

*【レベル1】*
・試験名：HTML5プロフェッショナル認定試験 レベル1
・試験時間：90分（試験後の簡単なアンケートの時間を含む）
・問題数：約60問
・受験料：16,500円（税込）
・有効期限：5年間

*【レベル2】*
・試験名：HTML5プロフェッショナル認定試験 レベル2
・試験時間：90分（試験後の簡単なアンケートの時間を含む）
・問題数：40～45問
・受験料：16,500円（税込）
・有効期限：5年間

両試験はどちらもCBT（コンピュータベーストテスト）で実施され、全国各地の試験センターでの受験、または自宅や職場からのオンライン受験が可能です。試験日程においては空いている日時に予約できるため、受験スケジュールを立てやすいでしょう。

合否については、テストセンターで受験した場合は、テスト終了後すぐにその場で結果が表示され、オンライン試験の場合はピアソンVUEにログインした後に確認できます。

HTML5プロフェッショナル認定試験は合格率などを公表していないため、具体的な難易度を測るのは難しいですが、*レベル2に合格するにはレベル1に合格する必要があります。*

そもそもの認定条件として、レベル2はレベル1に合格することを前提とされた試験であるため、難易度はレベル2の方が高いことがわかります。

また、学習期間の目安としてレベル1は3か月〜半年程度、レベル2は半年〜1年程度と公表しています。さらに公式サイトの資格体系の紹介において、レベル1とレベル2の難易度の差を表したグラフが掲載されているので、気になる場合は参考程度にチェックしておきましょう。

【参考】：[HTML5プロフェッショナル認定試験 レベル1について（Ver2.5）｜試験概要](https://html5exam.jp/outline/lv1.html)

HTML5プロフェッショナル認定試験が難しい？試験内容や取得方法

HTMLからJavaを動かせる？JavaScriptを動かす方法も解説

## HTML5を理解して多様なウェブアプリケーションに活用しよう

**HTML5は文書構文がシンプル化され、リッチコンテンツや動画配信等広範囲に活用されています。**特にスマホの動画再生やすきま時間のゲームや学習コンテンツは市場拡大が続いています。

このためHTML5を理解したら多様なウェブアプリケーションに活用し、スキルアップを図ることをおすすめします。

HTML・CSSは独学で習得できる？初心者におすすめな最短の勉強方法

初学者必見！HTMLを勉強するのにおすすめの本を5つ厳選

初心者におすすめのHTMLエディタ5選！便利な機能で開発効率もアップ

HTML5とは、ハイパーテキスト記述言語の5回目の改訂版を指します。Flashの終了に伴いHTML5で動画やアニメーションへの用途が拡大しています。ここでは、HTML5の特徴やHTML4からの変更点、さらに関連用語や対応ブラウザ等を多岐にわたって解説します。

HTML5とはHTMLの5回目の改訂版を指し、マルチメディアやリッチコンテンツに対応します

HTML5は、現在HTML Living Standardにおいて仕様化と機能拡張を行っています

HTML5では構文の簡略化がされており、多用途に活用が期待されています

**▼ITエンジニアにおすすめの資格一覧をご紹介！**

ITエンジニアも資格がある方が有利？おすすめの関連資格を解説！

HTMLは「HyperText Markup Language」の略で、Webサイトの構造を定義するためのマークアップ言語です。Webプログラミングを行う上で必須の言語であり、多くのWebプログラミング初心者が最初に学習する言語でもあります。

そんなHTMLには、関連資格がいくつかあります。HTMLを習得するのに必ずしも資格取得が必要なわけではありませんが、HTMLを用いて仕事をする上で大きなメリットがあります。

この記事では、HTML関連の資格取得によるメリットやおすすめの資格試験を紹介します。これからHTMLを扱う職種に就こうと考えている方、HTML関連の資格取得を検討している方はぜひ参考にしてください。

【参考】：[HTML Standard](https://html.spec.whatwg.org/multipage/)

HTMLはハイパーテキスト記述言語ですので、主にHTTP通信で用いられる記述言語です。そのため、Web系システムのコンテンツには必須の記述言語です。このことから、**HTMLを扱う知識・技術はWebデザイナーおよびWebクリエイターには必要なスキルと言えるでしょう。**

また、近年のアプリケーションではWeb形式での表示機能を活用することもあります。そのため、Webブラウザのフロントエンドとなる処理を担当する*フロントエンドエンジニアにとっても、HTMLの資格取得はスキルアップのために有効であると言えます。*

こういった職種に就いている方、また目指している方は、HTML関連の資格が就職や転職、キャリアアップに繋がります。目指すキャリアを着実に積み上げるためにも、資格取得をおすすめします。

なお、自身の資格やスキルを活かすためには、企業選びも大切です。数ある企業の中から1つに決めるのは大変なこともあるでしょう。そういった場合は、転職エージェントの活用をおすすめします。

フロントエンジニアの特徴や年収、必要なスキル、将来性は?

<center>[エンジニア転職を成功させるため<br/>ぜひ*『マイナビIT エージェント』*をご活用ください！](https://mynavi-agent.jp/it/?utm_source=and-engineer&utm_medium=content-text&utm_campaign=acv12)</center>

## HTMLの資格を取得するメリット3つ

HTMLの資格を持っていなくてもHTMLを使うことはできるため、誰でもHTMLを活用したWebデザインを行えます。しかし、**資格取得により作業品質が対外的に保証されることもあるため、業務としてHTMLを使う場合は資格取得のメリットが大きいと言えるでしょう。**

資格を持っていることで、業務品質の信頼度を上げることが期待できます。このことは、転職や就職の手助けになるでしょう。

*資格を持っていれば、その範囲の知識・スキルは十分に身に付いている、という客観的な証明になります。*自身の業務品質を第三者に向けて保証することができるので、実務未経験者にとってもキャリア形成における有効な手段です。

HTMLの試験対策として*参考書や過去問を使った勉強をする過程で、知識を体系的に理解することができます。*経験則やその都度調べていた疑問点などを、整理して理解するとともに、あまり触れてこなかった部分についても網羅的に知識を得ることができます。

そのため、知識やスキルの穴が少なくなり、高度なコンテンツ作成を安定的に実施できるようになるでしょう。

HTML・CSSとは何か？使い方やできること、独学方法を解説！

### 勉強のモチベーションを維持しやすい

*資格取得という目標を設けることで、日々の勉強のモチベーションを高めることが期待できます。*モチベーションや学習のスピードを落とすことなく取り組むことで、効率的に知識・スキルが身に付きます。

業務に必要な知識やスキルは常に向上させていく努力をするべきですが、日々の業務をこなす中でそのモチベーションを保つのはなかなか難しいものです。資格試験は受験日が年に1回または数回のものが多く、期日があることで勉強の中弛みを予防できるメリットもあります。

資格取得は転職や就職だけでなく、キャリアアップ・年収アップにも繋がります。フロントエンジニアの平均年収を例に挙げながら、考えてみましょう。

フロントエンドエンジニアの年収は「マイナビエージェント職業別年収ランキング/職種図鑑」での平均年収は385万円（※2024年3月執筆時点）、経済産業省2017年発表の「IT関連産業の給与等に関する実態調査結果」から近い職種のエンジニア/プログラマを参考にすると、平均年収592万円と分かりました。

国税庁2020年発表の民間給与実態統計調査における民間企業平均年収は433万円なので、フロントエンドエンジニアは一般平均年収よりやや低いか、場合によってはやや高くなることが分かります。

より高い年収を目指すには、スキルを磨いて自身の市場価値を高める方法や、Webディレクターやプロデューサーへとキャリアアップするなどの方法があります。*その足掛かりとして、スキルアップや客観的なスキル証明に繋がる資格が役立つのです。*

【参考】：[マイナビエージェント職業別年収ランキング/職種図鑑](https://mynavi-agent.jp/helpful/income/category/creative_05.html?utm_source=and-engineer&utm_medium=content-text&utm_campaign=acv12)
※【平均年収 調査対象者】2015年から2016年の間でマイナビエージェントに登録いただいた方
【参考】：[IT関連産業における給与水準の実態① ~ 職種別（P7）](https://warp.da.ndl.go.jp/info:ndljp/pid/11623215/www.meti.go.jp/press/2017/08/20170821001/20170821001-1.pdf)
【参考】：[民間給与実態統計調査-国税庁](https://www.nta.go.jp/publication/statistics/kokuzeicho/minkan2020/pdf/002.pdf?_fsi=AZhJ8QDV&_fsi=AZhJ8QDV)

HTMLに関する資格でおすすめするものを3つ紹介します。「HTML5プロフェッショナル認定試験」、「ウェブデザイン技能検定」、「Webクリエイター能力認定試験」の3つです。各資格にはそれぞれ特徴がありますので、以降で詳しく解説します。

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

HTML5プロフェッショナル認定試験とは、エルピーアイジャパン（LPI-Japan）によって実施されている資格です。エルピーアイジャパンは、LinuC（Linux認定）やOSS-DB（オープンソースDB認定）といった認定も展開しています。

試験は全国各地のテストセンター（ピアソンVUE）で随時実施されています。合格点は非公表ですが、公式サイトには7割程度の正答率で合格すると記載されています。

**認定の優位性有効期限は5年間となっており、認定から5年以内の再認定または上位レベルの取得が求められます。**再認定しない場合はステータスがACTIVEからINACTIVEに変更されます。INACTIVEとなると、持っているスキルが最新のシステム開発に対応していないと見なされます。

なお、*資格の名称は「HTML5」ですが、廃止されたHTML5に代わって最新のHTML Living Standardに対応しているため問題ありません。*

HTML5プロフェッショナル認定試験は、レベルに応じて以下の2つの試験区分が用意されています。受験料はともに16,500円（税込）です。

### レベル1（初級・中級レベル）

HTML5を使ってWebコンテンツを作成できるレベルで、HTML5・CSS3を対象としています。ITSSレベル2に相当します。

### レベル2（中級・上級レベル）

動的コンテンツやシステム間連携アプリケーションを開発できるレベルで、レベル1に加えてJavaScriptやマルチメディア・通信・パフォーマンスの要素が追加されます。

ITSSレベル3に相当しており、レベル1に合格している（かつACTIVEである）ことがレベル2の認定条件になっています。

【参考】：[HTML5プロフェッショナル認定試験](https://html5exam.jp/)
【参考】：[FAQ-HTML5プロフェッショナル認定試験の合格点](https://html5exam.jp/faq/)

ウェブデザイン技能検定は、国家検定制度としてインターネットスキル認定普及協会（特定非営利活動法人）により運営されています。**試験合格により名称独占である「ウェブデザイン技能士」を、名刺・ホームページ等へ表示することができます。**

検定は1～3級に分かれており、2級と3級の試験は大都市を中心に年間4回（5月・8月・11月・2月）の試験日が設けられています。1級は学科（11月）・実技（2月）がそれぞれ年1回実施されています。100点満点のうち70点以上が合格です。

ただし、*実技では試験要項にある各作業分類で、配点の60％以上正解する必要があります。*受験資格と受験手数料（非課税）は以下の通りです。

「ウェブの作成や運営に関する業務に従事している者及び従事しようとしている者」が受験可能です。受験手数料は、学科が6,000円で、実技が8,000円または3,000円（25歳以下の在職者）です。

3級合格者、2年以上の実務経験を有する者、または所定の教育を受けた者・所定の実務経験を有する者が受験可能です。受験手数料は、学科が7,000円で、実技が16,000円または7,000円（25歳以下の在職者）です。

1級は学科試験と実技試験で受験資格が分かれています。学科試験は、2級合格後2年の実務経験を有する者、7年以上の実務経験を有する者、または所定の教育を受けた後に所定年数の実務経験を有する者が受験可能です。

そして、1級の学科試験に合格した者のみ実技試験を受けられます。受験手数料は、学科が 8,000円で、実技が 25,000円です。

【参考】：[ウェブデザイン技能検定](https://www.webdesign.gr.jp/)

独学でWebデザインを学ぶ方法とその注意点について徹底解説！

Webデザイン用語を徹底解説！Webデザイナーを目指す方は必見

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

Webクリエイター能力認定試験は、サーティファイが運営している資格認定です。全国各地のパソコンスクールで随時実施されています。レベルは、スタンダード・エキスパートの2つがあります。

合格ラインは、スタンダードで「実技問題の得点において得点率65％以上」、エキスパートで「知識問題と実技問題の合計得点において得点率65％以上」となっています。また、**受験資格に学歴や年齢などの制限がないため、最初からエキスパートを受験することも可能です。**

### スタンダード（初級レベル）

HTML5・CSSを中心とした実技問題が出題され、モデル学習時間は24時間とされています。受験料は5,900円（税込）です。

### エキスパート（初級・中級レベル）

HTML5・CSS・JavaScriptを中心とした実技問題並びに知識問題が出題され、モデル学習時間は38時間とされています。受験料は7,500円（税込）です。

【参考】：[Webクリエイター能力認定試験](https://www.sikaku.gr.jp/web/wc/)

マークアップ言語の記事（3ページ目）