*HTMLリダイレクトとは、特定のWebページへのアクセスを、別のページへ自動的に転送する機能を指します。*Webサイトのドメインが変更された場合や、ページの構成が変更された際に、ユーザに移転や変更を知らせるために利用されます。

この記事では、HTMLリダイレクトについて知りたい方のために、3つのリダイレクトの方法や書き方のサンプル、注意点などを解説します。

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

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

**HTMLリダイレクトは、Webサイトの運営や管理において、ユーザの利便性の向上や、適切なリンクを維持するために重要な役割を果たします。**

サイトのURLを変更した場合、古いURLにアクセスしたユーザを新しいURLに自動的に転送することで、ユーザがサイトにアクセスできなくなることを防ぐことができます。

URL正規化にもリダイレクトが有効です。例えば、ホームページのURLが「example.com」の場合に、「www.example.com」へのアクセスも「example.com」に転送します。

また、サイトのセキュリティを向上させるためにHTTPSを導入した場合、「http:\/\/」へのアクセスを「https:\/\/」に移動させるためにも使用されます。

*代表的なリダイレクトの方法として、 .htaccessファイルを利用したHTTPリダイレクト、HTML文書内のmetaタグを使用したリダイレクト、JavaScriptを用いたリダイレクトがあります。*

JavaScriptを用いたリダイレクトは、厳密にはHTMLリダイレクトには属さない、スクリプトを用いたリダイレクト方法ですが、この記事ではあわせて紹介していきます。

中でも、 .htaccessファイルを用いたリダイレクトが一般的に使われます。しかし、サーバによって .htaccessファイルを設置できない場合や、条件に応じたリダイレクトを行いたい場合は、metaタグやJavaScriptを用いたリダイレクトも使われます。

それぞれに特徴がありますので、これらのリダイレクト方式を適切に使い分けることで、Webサイト運営時やURLの変更時に、スムーズな移行が可能です。

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

ここでは、 .htaccessファイルによるリダイレクトについて解説します。書き方や .haccessファイル設置の際の注意点、301リダイレクトと302リダイレクトの違いを押さえておきましょう。

.htaccessファイルは、Apacheで構築されたWebサーバで利用できる設定ファイルです。*.htaccessファイルにコードを記述することで、HTTPリダイレクトを設定することができます。*

まず、ドメインを含むリダイレクトで、Webサイト全体を転送する場合には、 .htaccessファイルに以下のコードを記述します。

```
RewriteEngine On
RewriteCond %{http_host} ^リダイレクト前ドメインのURL
RewriteRule ^(.*)$ リダイレクト先ドメインのURL$1 [R=301,L]
```

同一ドメイン内で、特定のフォルダーに来たアクセスを別のフォルダーにリダイレクトすることもできます。その場合は、以下のように記述します。

```
RewriteEngine on
RewriteRule ^リダイレクト前フォルダー名(.*)$ リダイレクト先フォルダー名$1 [R=301,L]
```

*.htaccessによるリダイレクトを行う場合、 .htaccessファイルをWebサーバ上の適切な場所に配置する必要があります。*

.htaccessファイルとは、「.htaccess」と名付けられたファイルを意味します。作業者の環境によっては、「.」から始まる「.htaccess」という名前のファイルが見えなくなっている場合があります。

そのため、事前にパソコン側とFTPソフトで設定を行い、 .htaccessファイルが見えるように設定する必要があります。

.htaccessファイル設置の手順としては、まずメモ帳などのテキストエディターで、リダイレクトのコードを記載した文書を保存します。名前は「htaccess.txt」など、仮で付けておきます。

その後、FTPソフトを使ってこの .htaccessファイルをWebサーバにアップロードし、ファイル名を「.htaccess」に変更することで、設定内容が反映されます。

なお、.htaccessファイルは、リダイレクトだけでなくBasic認証やキャッシュ設定なども行える重要なファイルのため、既存の .htaccessファイルがサーバ上にある場合もあります。

その場合は、そこにリダイレクト用のコードを追記します。コードを編集する際には、必要のない部分まで変更してしまわないよう、十分注意しましょう。

### 301リダイレクトと302リダイレクト

*.htaccessでリダイレクトをする場合、301リダイレクトと302リダイレクトのどちらにするかを意識する必要があります。*どちらを使用するかは、状況によって異なります。

301リダイレクトは、元のURLにアクセスしたユーザを新しいURLに永続的にリダイレクトします。ウェブサイトのURLを変更したときに、検索エンジンが新しいURLを認識できるようにするために使用します。

ホームページの引越しやドメイン変更などでリダイレクトを行いたい場合は、旧URLの評価を引き継ぐために301リダイレクトを行いましょう。

302リダイレクトは、元のURLが一時的に利用できない場合に、元のURLにアクセスしたユーザを新しいURLに一時的にリダイレクトするために使用します。それぞれの違いを理解して適切に設定し、使い分けることが重要です。

次に、metaタグによるリダイレクトの書き方や注意点を解説します。metaタグでは、リダイレクトまでの時間を指定できますが、ページごとにしかリダイレクトできません。

metaタグを用いたリダイレクトは、HTMLファイルの\<head\>タグ内に、\<meta\>タグを記述してページの自動再読み込みを利用する方法です。

*\<meta\>タグで「http-equiv属性」に "refresh" を指定し、ページ遷移までの秒数とリダイレクトURLを設定することで、指定したリダイレクト先URLにリダイレクトされます。*

例えば、以下のコードでは、ページを訪れた利用者にページが移転したことを表示した後、自動的にリダイレクトすることができます。

```
<!DOCTYPE html>
 <html>
  <head>
   <meta http-equiv="refresh" content="3;URL='リダイレクト先のURL'">
   <title>このページは移転しました</title>
  </head>
  <body>
   <p>このページは移転しました、3秒後に自動的に移動します。</p>
   <p>ブックマークの変更をお願いいたします。</p>
  </body>
 </html>
```

### リダイレクトさせる時間を指定できる

metaタグを使用したHTMLリダイレクトでは、1度ページを表示させてからリダイレクトするまでの時間を変えることができます。metaタグの「content属性」で秒数を指定します。

```
<meta http-equiv="refresh" content="秒数;URL=リダイレクト先URL">
```

これにより、ユーザがリダイレクトを意識しやすくなり、移行後のページへのアクセスやブックマークの変更がスムーズに行われる可能性が高まります。

0秒に設定すると即時リダイレクトされますが、それだとリダイレクト元のページの表示が見られないため、1〜3秒程度で設定するのが一般的でしょう。ユーザのストレスが少ないと考えられる適切な時間設定をホームページ作成者で調整することが可能です。

### 特定のページしかリダイレクトできない

metaタグによるリダイレクトは、\<meta\>タグを記述した特定のページのみを別のページにリダイレクトする方法です。

そのため、Webサイト内の全ページを一律に別のページにリダイレクトさせるには、全ページに同じmetaタグを記載する必要があり、ページ数が多いと作業が困難です。

*したがって、大規模なサイトの移行や一律にリダイレクトを行いたい場合には、  .htaccessファイルを利用するなど、他のリダイレクト方法を採用するほうが良いでしょう。*

次に、JavaScriptによるリダイレクト方法について説明します。JavaScriptを使用すると、特定の条件を満たす場合のみリダイレクトさせることができます。しかし、JavaScriptをオフにしているブラウザでは機能しません。

*JavaScriptによるリダイレクトとは、ブラウザのURLを別のURLに変更してページを再読み込みする方法です。*

具体的な手順としては、リダイレクト元のHTMLファイル内で、scriptタグを使用してJavaScriptを記述し、window.locationプロパティにリダイレクト先のURL文字列を設定します。

```
<script>
    // 3秒後に指定したURLにリダイレクトする関数
    function redirect() {
        window.location.href = 'リダイレクト先のURL';
    }
    // ページ読み込み後に3秒後にリダイレクトするように設定
    window.onload = function() {
        setTimeout(redirect, 3000); // 3000ミリ秒 = 3秒
    };
</script>
```

この例では、3秒後にリダイレクト先のURLに自動的にリダイレクトされます。リダイレクトの実行は、setTimeout関数を使用して遅延させることで、リダイレクト元のページが表示された後でリダイレクトされます。

### さまざま条件のリダイレクトが可能

JavaScriptによるリダイレクトでは、多様な条件に基づいたリダイレクトを実現可能です。アクセスしてきたデバイスの種類や画面幅を認識し、それに応じてリダイレクト先を切り替えることができます。

*例えば、モバイル端末でアクセスしてきた場合のみ、モバイル端末向けサイトにリダイレクトすることができます。*

また、リダイレクト元のページを一定時間表示させた後に自動的にリダイレクトを行ったり、URLパラメータを用いて特定情報をリダイレクト先に引き渡したりすることも可能です。

JavaScriptでのリダイレクトでは、これらの条件を組み合わせて運用できるため、柔軟な運用ができます。

### ブラウザのJavaScriptがオフだと機能しない

JavaScriptによるリダイレクトは、ブラウザのJavaScriptが有効になっている場合にのみ機能します。

ユーザがブラウザの設定でJavaScriptを無効にしている場合にはリダイレクトが行われないため、リダイレクト先のページが表示されない場合には、ブラウザのJavaScript設定を確認してもらうよう促す必要があります。

## リダイレクト設定で気を付けたい点

ここでは、3つのリダイレクト設定の優先順位や、使い分け方を説明します。注意が必要なリダイレクトループについても解説します。

### 3つのリダイレクト方法の優先順位

.htaccessファイル、metaタグ、JavaScriptによるリダイレクト方式には、ホームページアクセスの処理の流れに沿った優先順位があります。

.htaccessファイルでのリダイレクトが最優先され、リダイレクト元のページの有無に関わらずリダイレクト先へ遷移します。.htaccessファイルでのリダイレクトが存在しない場合には、HTMLのmetaタグによるリダイレクトが実行されます。

それもない場合、JavaScriptが有効なブラウザでのみ、JavaScriptリダイレクトが実行されます。

*適切なリダイレクトを実現するには、各方式の優先順位を理解し、意図したリダイレクトが行われるよう構築する必要があります。*

### 3つのリダイレクト方法の使い分け方

.htaccessファイルにリダイレクトの設定を記述してアップロードするだけで実装でき、非常に簡単で手軽です。また、転送前のページが存在しなくても転送が可能であり、リンクによる評価も引き継げます。

**そのため、基本的には .htaccessを使用してリダイレクトを設定することが推奨されます。**

しかし、一部のサーバでは .htaccessファイルが使用できない場合があります。また、 .htaccessファイルはWebサーバの管理者権限が必要となるため、すべてのユーザが使用できるわけではありません。

このような場合は、metaタグでのリダイレクトを検討すると良いでしょう。ただし、metaタグでのリダイレクトは、リンクによる評価を引き継げないため、SEOの観点からはあまり推奨されません。

JavaScriptを使用してリダイレクトを設定する方法は、他の方法よりも複雑ですが、サーバ環境によっては有効な代替案となり、より柔軟な設定も可能です。

HTMLリダイレクトを設定する際、リダイレクトループに注意する必要があります。リダイレクトループとは、設定されたリダイレクトが既に通った経路を再び通ることで発生する現象です。この現象により、無限ループが発生し、最終的に目的のページにたどり着けなくなります。

例えば、「ページ1」に「ページ2」へのリダイレクト、「ページ2」に「ページ1」へのリダイレクトを設定することでリダイレクトが循環し、リダイレクトループが発生します。

サーバやブラウザがリダイレクトループを検知すると、エラーメッセージが表示されます。*リダイレクトループはユーザの使い勝手を損なうだけでなく、サーバにも大きな負荷をかける可能性があるため、避けることが重要です。*

HTMLリダイレクトは、Webページへのアクセスを別のページに自動転送する機能です。 .htaccessを使う方法が主ですが、HTMLメタタグ、JavaScriptを使う方法もあります。この記事では、これらのリダイレクトの種類と書き方、使い分けを解説します。

HTMLリダイレクトは、特定のWebページへのアクセスを別のページに自動的に転送する機能である

代表的なリダイレクト方法には、 .htaccessファイル、Hmetaタグ、JavaScriptを用いたリダイレクトがある

.htaccessファイルによるリダイレクトが最も優先されるが、サーバ環境によっては使えない場合がある

HTMLリダイレクトとは？種類と書き方、使い分けを解説

**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は登場以来文書（コンテンツ）の構造と見栄えを指定できました。その後、煩雑な言語仕様を整理するために文書構造を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では構文の簡略化がされており、多用途に活用が期待されています

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つがあります。

HTMLの記事（2ページ目）