## HTML、JavaScript、Javaのおさらい

*Web開発で挙げられる言語に、HTML・JavaScript・Javaがあります*が、これらの間にはどのような関係性があるのかご存知でしょうか。HTMLとJavaScriptに関しては、馴染みのある方もいらっしゃると思いますが、Javaはどうでしょうか。

この記事では、**HTMLをベースにJavaScriptやJavaをどのように連携させていくかを説明していきます**。関係性を見ていく前に、まずは上記3つの言語について基礎をおさらいしていきましょう。

HTMLとは、Webページを作成するために開発された言語です。*通常のプログラミング言語と異なり、文章構造や視覚表現を記述することのできるマークアップ言語*です。世の中のWebサイトのほとんどがこのHTMLで記述されており、視覚的かつ直感的にコードを書くことが可能となっています。2014年にリリースされたHTML5が今でも最新バージョンとなっており、動画や音声の埋め込みが容易になりました。

HTMLはWebページの土台とも言える役割を持ち、その中でJavaScriptを呼ぶことによって動的なコンテンツを実装することも可能です。**HTMLにとって、JavaScriptは単独では実現できない動きを実現できる拡張機能のようなものということができます**。

HTMLとは？今さら人に聞けないその概略や役割を解説！

JavaScriptは、オブジェクト指向なインタプリタ型のプログラミング言語です。コンパイルを不要とすることから、クライアント側のブラウザ上でプログラムを動作させることが可能です。主にWebサイト上に動きを付ける目的で利用されています。*記述内容が似ているもののJavaとは別物の言語であり、用途や目的も大きく異なります*。

JavaScriptの特長はブラウザ上で動作させることが可能な点であり、ブラウザ上のスクロールに合わせて画像をフェードアウトさせたり、画像のポップアップやマウスの動きに合わせた動作などを手軽に行うことができます。最近では、大規模なWeb開発はVueやReact、AngularといったJavaScriptのフレームワークがよく使われています。

JavaScriptとは？人気のJavaScriptを5分で学ぶ

Javaは、Java仮想マシン（JVM）と呼ばれる実行環境で動作するプログラミング言語です。オペレーティングシステムやハードウェアに依存しないことから、高い汎用性を持っており、*Web開発だけでなくシステム開発やアプリケーション開発にも利用されます*。幅広い機能を提供できることから、習得難易度もHTMLやJavaScriptよりも高くなっています。

Web開発でJavaを採用することで、HTMLでは実現できなかった複雑なWebアプリケーションを設計することが可能です。例えば、業務システム・オンラインストレージなどのWebサービス・ショッピングサイトの開発にも利用されています。

Javaとは？人気プログラミング言語Javaの将来性やメリットについて解説

上記でそれぞれの言語の役割と関係性を説明してきました。ここからは、*Webページの土台とも言えるHTMLからどのようにして他の言語を動かすのかを説明していきます*。まずはJavaScriptを動かす方法を紹介します。方法としては2通りしかありません。

HTML上でJavaScriptを呼び出す最も一般的な方法は、**外部ファイルから呼び出す方法**です。具体的な記述方法は下記の通りです。

この記述により、test.jsという名前のJavaScriptプログラムを呼び出して実行することができます。

```<script type="text/javascript" src="test.js"></script>```

type="text/javascript"を追加する方法もありますが、これはHTML5より昔のバージョンでのみ必要であった記述です。HTML5では、記述無しは自動的にJavaScriptとして認識してくれることから不要となっています。

もう1つの方法として、**HTMLに直接JavaScriptを記述する方法**があります。これはインラインスクリプトと呼ばれ、あまり使用されてはいませんが、外部ファイルでJavaScriptを定義しなくともプログラムを動かすことが可能です。下記のような記述となります。

``` <script>  　
～JavaScriptのコードを記述～
</script>```

外部ファイルから呼び出すときと同様に、HTML5ではtype="text/javascript"は省略することができます。

次にHTML上でJavaを動かす方法を紹介していきます。多くの動的WebページはJavaScriptのみの使用で十分ではありますが、*高負荷でもパフォーマンスを発揮できる処理を実装したい時に活用できるでしょう*。

*サーブレットとは、Javaによって記述されたWebコンテンツを生成するためのプログラムです*。例えば、サーブレットによって記述に応じたHTMLを生成し、動的なWebページをブラウザ上に表示することができます。このサーブレットはTomcatなどのWebコンテナ上で実行することができます。Tomcatとはオープンソースソフトウェアであり、Webアプリケーションサーバーの1つです。

**HTMLでこのサーブレットを呼び出すことはJavaを呼び出すことと同義です**。HTML上で呼び出す方法としては、シンプルにhrefを使うことが挙げられます。

例えば、サーブレットのリンク先を/servlet/test/としてtest.javaがサーブレットの本体とすれば、

```<a href="/Servlet/test">サーブレットリンク先</a>```

という記述でサーブレットを呼び出すリンクをWebページ上に作ることができます。

別の方法としては\<form>タグを使用してサーブレットへフォーム入力値を送信する例もあります。この場合、同じようにサーブレットのリンク先を/servlet/test/とすると、

```<form acrion="/Servlet/test" method="get">～フォーム内容～</form>```

となり、getメソッドを使うことでサーブレットへフォーム入力値がURLに付加されて送信されます。サーブレット側でフォーム入力値を受けるようなプログラムにすることもでき、フォーム入力値の処理を行うWebアプリケーションを作ることができます。

HTML上でJavaを呼ぶもう1つの方法として、*HTML内にJavaを埋め込むJSP*があります。この場合は、呼び出すというよりも前述したインラインスクリプトに近い形になります。JSPの記述例としては下記となっています。

```<%@ page contentType="text/html;charset=（文字コード名）" %>
<% out.print("テスト"); %>
現在時刻は<%= nowTime %>です```

1つ目の<%@ではHTMLでJSPを利用するための決まり事であり、ページの種別や使用する文字コードを決めています。

2つ目の<%がJavaの記述であるかどうかを決めている箇所であり、この中にコードを記述していく形になります。

3つ目の<%=ではHTMLの表示文字列の中にJavaによって得られた文字列を表示することが可能です。文字列を出力するメソッドを入力する手間が省けているため、簡潔な表現が可能です。ちなみに、上記例ではJavaの日付時刻データを管理するクラスにあるクラス変数を呼び出しています。

このように**JSPではHTML内においてもJavaの記述を最小限にすることができますので、簡潔なコードを記述することができます**。

## Webアプリケーション開発で活躍するJava

サーブレットやJSPがあるように、JavaはWebアプリケーション開発の分野で非常に活躍しています。そのため、近年、より進化した開発ツールが登場しています。

*JSF（JavaServer Faces）は、Java EEという企業向けのJava開発プラットフォームで提供されているフレームワークの1つです*。ユーザーインターフェースの作成に特化したコンポーネントベースのフレームワークとなっています。JSFでは、**JSPで欠点でもあるHTMLとJavaの混在によるコードの見辛さを改善する形となっており、デザインと処理を分けて実装したいというユーザーのための存在**と言えます。

JSFではJSPでのHTMLはXHTMLとなり、Javaで記述していた処理はJavaBeansで置き換えられることとなります。

Spring Bootは、Javaを使ったWebアプリケーション開発のためのフレームワークです。もともとSpring Frameworkというフレームワークがあり、機能の使い分けが困難であるという欠点を克服するために作られたものがSpring Bootとなっています。*XML設定を不要化、アノテーションによるコード削減、ひな形の生成機能などWebアプリケーションの開発を手軽に行えるような工夫がなされています*。

ここにThymeleafと呼ばれるHTMLに対応したテンプレートエンジンを組み合わせれば、**JSPで行っていたJavaの埋め込みを行わなくとも処理を記述することができ、HTMLエディタの互換性を保つことが可能です**。

## それぞれの役割を理解して使いこなそう

Web開発において、HTMLだけではできないことを行うためにJavaScriptやJavaと連携は必要不可欠です。Webサイトに関して言えば、たいていはJavaScriptのみで対応はできるでしょう。

しかし、*より高度なWebアプリケーションとの連携を考えるとJavaも必要になってきます*。本記事に書いたように連携の方法は様々です。目的に合った方法をとっていくとよいでしょう。

Web開発において最も普及しているHTMLは、それ自体では動的なページを作ることができません。そこで登場するのが、JavaScriptやJavaです。本記事ではHTML上でこの2つの言語を使いこなす方法を紹介していきます。

HTML上でJavaScriptを呼び出す方法としては、外部ファイルから呼び出す方法とHTML上に直書きする方法がある

HTML上でJavaを呼び出す方法としては、サーブレット格納先のリンクを用意したり、JSPでHTMLに直接記述したりする方法がある

JavaのWeb開発ツールは日々進化しており、最近ではJSFやThymeleafなどが使われている

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

フロントエンジニアにHTMLは必須の言語ですが、HTMLに慣れてくると、ついついミスを犯しがちです。基本的なHTMLコードは、基本的に開始タグと閉じタグがセットになっていなければなりませんが、うっかり閉じタグの記述を忘れると画面レイアウトが崩れる原因になることがあります。

こうした**コーディングミスを簡単に発見してくれるのが「HTMLエラーチェッカー」**です。一時的に、ChromeストアからHTMLエラーチェッカーがなくなっ たことがありましたが、現在は改良版がアップされていますので、問題なく利用できます。

HTMLの編集ソフトおすすめ5選！初心者向け【2021年版】

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

### HTMLエラーチェッカーの概要

HTMLエラーチェッカーはWebブラウザ、Chromeの拡張機能です。HTMLエラーチェッカーでは**Webのレイアウトの崩れ、表示不具合の原因であるHTML構文ミス（閉じタグの記述漏れ）を検出するツール**です。

### HTMLエラーチェッカーはHTMLの品質向上に必要

HTMLは多少のミスは許容されてしまうため、案外ミスを見逃しがちですが、場合によっては表示の不具合でユーザに迷惑を掛け、商用サイトでは受注減や企業への信頼低下につながりかねないため、品質にはこだわるべきです。

**HTMLエラーチェッカーを利用することで、品質向上の一助となる**ため、コーディングを仕事とする方、フロントエンジニアはぜひ使うべきツールです。

### HTMLエラーチェッカーができること

HTMLエラーチェッカーと聞くと、全てのエラーを見つけてくれるように気がしますが、実はできることは以下の2点のみに限定されます。

*▪開始・終了タグの閉じミスの検知* 
*▪エラー件数・エラー箇所の報告*

それでも、HTML記述ミスで最も多いと言われるHTMLタグの閉じ忘れや閉じミスを検知してくれるのは大変ありがたい機能です。さらに、この**エラー検知が簡単に行えるため、コーディングミスの不安が解消し、生産性向上**にもつながります。

### HTMLエラーチェッカーを使う人

ここまで述べた通り、HTMLエラーチェッカーはHTMLコーディングにおけるミスの防止に有効ですが、他にサイト公開前チェックや納品前チェックでも使えます。そのため、コーディング担当者は当然ですが、**品質管理を行うWeb担当者やWebディレクターなど、Web制作に関わるすべての人に役立つツール**と言えます。

## HTMLエラーチェッカーを使ってみる

HTMLエラーチェッカーの概要や利用目的を理解したところで、**実際にHTMLエラーチェッカーを導入**してみましょう。

### Chromeの拡張機能として追加する

Chromeの拡張機能追加は大変簡単です。**以下のHTMLエラーチェッカーのリンクを開き、『Chromeに追加』のボタンを押すだけ**です。『HTMLエラーチェッカーがChromeに追加されました』というメッセージが表示されれば完了です。
*【参考】：[HTMLエラーチェッカー（Chromeウェブストア）](https://Chrome.google.com/webstore/detail/html%E3%82%A8%E3%83%A9%E3%83%BC%E3%83%81%E3%82%A7%E3%83%83%E3%82%AB%E3%83%BC/ohdllebchmmponnofchalfkegpjojcaf?hl=ja)*

*《注意》*：ブラウザとしてChromeが前提ですので、HTMLエラーチェッカーを使う場合は、Chromeがインストールされている必要があります。新たにChromeをインストールされる方は以下のサイトを利用してください。
*【参考】：[Google Chrome をダウンロードしてインストールする（Google Chrome ヘルプ）](https://support.google.com/Chrome/answer/95346?hl=ja&co=GENIE.Platform%3DDesktop)*

### HTMLエラーチェッカーの使い方

前述のChromeの拡張機能としてHTMLエラーチェッカーが追加されると、Chrome画面の右上に、「拡張機能」のアイコンが追加されます。続いて、以下の手順でHTMLエラーチェッカーを利用します。

*1.Chromeを起動し、チェックをしたいWebページにアクセスする*
*2.Chrome画面の右上、「拡張機能」アイコンをクリックし、『HTMLエラーチェッカー』のアイコンを押す*
*3.Webページのエラーチェックが行われ、結果が表示される*

▪エラーが無い場合は、青色のポップアップで「タグはおそらく完璧です」と表示されます。
▪エラーが発見された場合は、赤色のポップアップで「〇個のタグが対応していません」という表示とともに、その下にエラー行とエラー内容が表示されます。

### 自動エラーチェック機能を使ってみる

HTMLエラーチェッカーには、オプションに「自動チェック機能」があります。
**自動チェック機能を設定しておくと、Webページを見るだけで自動的にエラーチェック**してくれます。

HTMLエラーチェッカーのアイコンを右クリックして表示される『拡張機能を管理』をクリックし、「拡張機能」の画面が開いたら『オプション』をクリックします。
次に「自動チェック機能を有効にする」ボタンを『ON』にします。

自分が担当しているWebページなど、常にチェックするページを指定したい場合は、その下にある
*「フィルタリング用のURLを設定」欄にページのURLを入力しておくと、指定したページだけが毎回チェックされる*ので、変更時などのチェック漏れを防げます。

*■オリジナルの警告ルールを設定する*

**HTMLエラーチェッカーは、独自のエラーチェックのルールの追加が可能**です。

例えば、担当しているWebサイトのSSL化を行った際に、httpのWebページが残っていないかなどのチェックが自動で行えます。

HTMLエラーチェッカーの設定画面下部の「フィルタリング用のキーワードを設定」入力欄に、http:// （チェックしたいサイトのドメイン）を記述しておくと、サイト内にhttpページが残っているとエラーが表示されます。

### ローカルファイルのチェックができない問題

HTMLエラーチェッカーには当初バグがあり、ローカルファイルのチェックで**「リロードしてください」と表示され、解析ができないという問題がありましたが、既にバグは解消**していますので、過去にHTMLエラーチェッカーをうまく使えなかった方は改めて試してみてください。

## オンラインHTMLエラーチェックサイトを活用

HTMLエラーチェッカーをChromeの拡張機能で利用する方法を説明しました。実際に試した方は、その便利さを実感されたことと思います。しかし、**HTMLエラーチェッカーはシンプルな反面、エラーチェック機能が限定**されています。

「開始・終了タグの閉じミスの検知 」機能だけあれば十分だという方は、そのままHTMLエラーチェッカーを活用してください。一方、*他の文法チェック機能が欲しいという方には、オンラインで利用できるHTMLエラーチェッカーサイトを1つご紹介*します。

*「Markup Validation Service」*はWeb技術の標準化を推進する、非営利団体「W3C（World Wide Web Consortium）」が無償で提供している**HTMLの文法チェッカーのオンラインサイト**です。

HTMLの仕様を決めているW3Cが提供しているだけあって、チェックの精度は高いと評判です。HTML5への対応などもあり、*おすすめのHTMLエラーチェックサイト*ですが、Webサービス版は時に処理が重たいのと、英文である点が弱点です。

ただ、Chromeの自動翻訳機能を使えば、多少翻訳ミスはあるものの、かなり使えるサービスです。

オンラインサービスと、オープンソースによるローカルで動作するツールの2種類がありますが、ここではオンライン環境で気軽に利用できるサービスを紹介します。

### Web版 W3C Markup Validatorの使い方

使い方は至って簡単で、下記のサイトにアクセスし、**「Address欄」にチェックしたいWebサイトのURLをペーストするだけ**です。実際に試して見ると分かりますが、大半のWebページは何らかのエラーや警告が表示されます。

エラーがあること自体は大きな問題ではありませんが、無視して良いエラーと、放置できないエラーがあるため、その見極めができるようになるとこのツールはさらに便利になります。

*【参考】：[W3C Markup Validation Service](https://validator.w3.org/)*

### Web版 M3C Markup Validatorの3つの機能

**Web版のW3C Markup Validatorにはチェック機能が3種類**あり、画面上部の3つのタブから以下の方法を選択できます。

*▪Validate by URI「URLで検証する」*
*▪Validate by File Upload「ファイルアップロードによる検証」*
*▪Validate by Direct Input「直接入力による検証」（HTMLソースを貼りつける）*

最も多く使うのはURLによる検証だと思いますが、まだWebサイトにアップできない作成中のHTMLファイルや、ソースコードのある部分だけをチェックしたい場合などには、タブを切り替えてそれぞれの機能を使い分けすると良いでしょう。

「CSS Validation Service」は、同じく**W3C提供のCSSの文法チェックサービス**です。使い方は「Markup Validator」とほぼ同じですので、「Markup Validator」を使える方は抵抗なく使えるでしょう。

*【参考】：[CSS Validation Service](https://jigsaw.w3.org/css-validator/validator.html.ja)*

## 高品質のHTMLを作成するスキルを身に付けよう

HTMLの文法エラーはチェックツールを利用すると、かなりのエラーメッセージが表示され、逆にエラーつぶしで余計な手間が掛かったという話もあります。実際のところ、エラーがあっても表示や動作に問題がないケースもあり、どこまで修正すれば良いのか悩ましいところです。

基本的には表示に影響がなく、互換性などで問題が発生していなければ、多少のエラーには目をつぶっても構わないでしょう。

しかし、HTMLを勉強中の方、初心者の方は、表示などに問題がなくともエラーチェックの結果は確認する癖をつけましょう。

第三者によってエラーチェックが行われ、エラーが多過ぎると、エンジニアとしてのスキルに疑問符が付きかねません。ここで紹介した**HTMLエラーチェッカーを活用し、高品質のHTMLを作成する癖**をつけておきましょう。

ウェブデザイナー必見！HTMLのおすすめ資格を比較解説します

HTMLでできることは少ない？できないことやタグも一覧でまとめた

HTML言語はコンパイル機能がなくバグ解消に苦労しがちです。その解消策として、Chromeの拡張機能、HTMLエラーチェッカーについて紹介します。併せてHTML文法チェックに適したオンラインのHTMLエラーチェックサイトも紹介しますので、ぜひ活用してください。

HTMLエラーチェッカーはChromeの拡張機能として利用でき、インストールや利用方法が非常に簡単である

HTMLの文法チェックを行うには、オンラインサービスのW3C Markup Validatorがおすすめである

高品質のHTML作成を心掛けると、第三者からの評価も上がるので、HTMLエラーチェッカーの利用を心掛けよう

HTMLエラーチェッカーは必須？ミスの予防＆品質向上に最適！

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

HTML5プロフェッショナル認定試験とは、**HTML5・CSS3・JavaScriptなどのWebコンテンツ制作やWebアプリケーション、動的なWebコンテンツの開発・設計の技術や知識**を測る試験のことです。また、主催するエルピーアイジャパン（LPI-Japan）は、他にもLinuCやOSS-DBなど知名度の高い資格の運営・認定を行っており、*IT業界においての認識率も非常に高い*のが特徴です。

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

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

HTML5プロフェッショナル認定試験レベル1は、**Webの基礎知識・HTML・CSS・レスポンシブWebデザイン・APIの基礎知識が出題範囲となり、幅広い知識が問われます。**また、このHTML5プロフェッショナル認定試験レベル1では、JavaScriptに関する知識はほぼ問われません。

基礎的で広範な知識が求められているため、Webデザイナーを目指している初心者から現役のエンジニアまで、取得する価値のある資格です。具体的な出題のうち、重要性が高く頻出なものは下記が挙げられます。

・*HTML5マークアップ*
ブラウザにコンテンツを表示させるために、HTMLの仕様に沿った書式でHTMLコードを記述できることが問われます。文書型宣言・言語コード・文字コード・HTMLで使用可能な文字参照等の記述方法の理解が必要です。

・*HTML*
HTMLの要素や属性を理解し、適切なHTMLタグを使用してコーディングできていることが問われます。セクション・書式方法・ルビ・挿入・削除・グルーピング等の理解が必要です。

・*CSSデザイン*
デザインをCSSを利用して実現する際に、どのような実現方法が適切か判断できるか、正しいコードを記述することが問われます。主にコンテンツのレイアウト・色・背景・罫線・テキスト・リスト・テーブル・アニメーション等の記述方法の理解が必要です。

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

レベル2では、主にJavaScriptの知識・アニメーション・各種APIの深い仕様理解・通信・デバイスアクセス・パフォーマンスとオフライン・セキュリティモデル、と広範な知識を求められますが、それと同時により深い知識を問われます。レベル1とは異なり、JavaScriptの文法やES6（ECMAScript2015）以降の文法について問われ、**プログラミング寄りの問題が重点的に出題されます。**

具体的な出題のうち、重要性が高く頻出なものは下記が挙げられます。

*・JavaScript文法*
最も重要性が高く、最優先で対策すべき事項です。JavaScriptの構文や様々な概念の理解や効率的なコーディングが問われます。JavaScriptと他言語との違いや、演算子・配列・制御文・関数・型やオブジェクト・プロパティ・スコープ等の理解が必要です。

*・EC6（ECMAScript2015）以降の新機能*
追加された機能や表記法を用いてコーディングができるかが問われます。ローカル変数と定数・アロー関数・Promiseと非同期関数・可変長引数/残余引数・クラス・テンプレートリテラル等の理解が必要です。

*・JavaScriptのイベントについて*
JavaScriptのページ読み込みや、ユーザ操作で発生するイベントやイベント処理を行うコードを記述することができるかが問われます。フォームイベント・キーボードイベント・マウスイベント・タッチイベント等の各種イベントの理解が必要です。

## HTML5プロフェッショナル認定取得のメリット

HTML5プロフェッショナル認定の資格を取得するメリットは、*大きく3つに大別できます。*前述の通り資格名にHTML5と名前がついていますが、HTMLに限らずJavaScriptやレスポンシブWebデザイン、各種APIの理解、グラフィクス等幅広いWeb関連の知識を求められるため、**幅広いWeb知識を有することを証明できます。**

エンジニアとして勤めていると自分が携わる業務範囲での知識は蓄積されますが、その業務から離れると1から学び始めることが多くあります。HTML5プロフェッショナル認定を取得することによって、*現時点で自分は何を知っていて何を知らないのかを知ること*ができ、またWebに関する知識を網羅的に習得できます。

そのため、**業務が変わっても順応できるスピードを早められるメリット**があります。

### 就職、転職活動に活かせる（初心者にもおすすめ）

新卒、もしくは転職でWeb系のプログラマーを目指しているのであれば、*HTML5プロフェッショナル認定を取得しておくことは非常におすすめ*です。新卒や未経験からの転職の場合、フリーランスで仕事を受けた経験等がない限り実績を見せることは難しいでしょう。

HTML5プロフェショナル認定を取得しておくと、実務経験はなくとも**ある程度の知識は保有していると判断される可能性が高いため**です。経験が浅ければ浅いほど、資格取得が有利に働きます。

就職や転職活動等にも言えることですが、副業開始当初は個人としての実績が浅いため、ポートフォリオに加えて、HTML5プロフェッショナル認定を取得していると**採用側から見てかなりポイントが高い**でしょう。Web系コーダー・プログラマー等の副業を考えている方で、なかなか採用されず困っている場合はぜひ挑戦してください。

## HTML5プロフェッショナル認定試験の勉強方法

HTML5プロフェッショナル認定試験を勉強する方法はプログラミングスクール等もありますが、*参考書で学習する*のが一般的です。レベル1・レベル2共に難易度は**ベンダー資格と比較してもそこまで高くなく、自己学習で十分に合格可能**です。おすすめの参考書を下記にご紹介しますので、ぜひ参考にしてください。

HTML5プロフェッショナル認定試験の参考書は、以下におすすめする2つの参考書を学習するだけで十分に合格することが可能です。（レベル2用の参考書も販売されているため読み替えてください）

*・[HTML教科書 HTML5プロフェッショナル認定試験 レベル1 スピードマスター問題集 Ver2.0対応](https://honto.jp/netstore/pd-book_28916635.html)*
時間のない方は**この参考書1冊でも十分合格できるほどの問題・情報量**で、本番の試験に近い問題を解いていくことができるため大変おすすめの本です。時間に余裕があれば、これを2〜3周すれば*大体合格できるレベルに達することができる*ので、ぜひ繰り返し問題を解いてみてください。

*・[HTML5プロフェッショナル認定試験 レベル1 対策テキスト＆問題集 Ver2.0対応版](https://honto.jp/ebook/pd-series_B-MBJ-23800-121461779-001-001.html)*
先述した問題集に加え、問題集で分からない箇所や周辺知識も学んで実務に活かしたい方は、テキストを使用することをおすすめします。図解や表形式で分かりやすくまとまっているため、理解が深まりやすいです。ただ、必須ではないため時間に余裕がある方は、ぜひこちらのテキストも活用してみてください。

## HTML5プロフェッショナル認定試験の受験方法

HTML5プロフェッショナル認定試験の受験方法には2パターンあり、自分の好きな試験会場を選択して受験するパターンと、**オンラインでの受験も可能です。**申し込みはどちらもHTML5プロフェッショナル認定試験の公式サイトより、Webもしくは電話で申し込むことができます。また申し込みの際には、*EDUCO-IDというアカウントを作成する必要があります*。

ちなみに、受験料は16,500円（税込）です。

申し込みの際に、全国にある試験センターの中から*希望の試験センターを選ぶ*ことができ、試験センターが決まるとその試験センターの空き日程を選択する、といった流れで申し込みが可能です。

試験センターによって会場の雰囲気や使用するPC等の違いはありますが、一般的に試験会場では教室のようなスペースに複数人間隔を開けて座れるようになっており、**各々自分のテストをPCで受験する**流れです。

近年では*一定の基準を満たせば、自宅や好きな場所でオンライン受験することが可能*になりました。一定の条件とは、静かで1人になれる場所・要件を満たすPC・Webカメラ・インターネット接続・本人確認書類をWebカメラで提示できること等があります。

いつもの自分が学習している環境で受験することができれば、**集中できて合格により近づけるかもしれません**。気になる方はオンライン受験も検討してみてください。

## Webの将来性を見据えてHTML5プロフェッショナル認定試験に挑戦しよう

Webは一層進化が進み、*昨今Web3.0も台頭してきました。*今後の将来性を見据えてWebの基礎知識の習得やWeb系の転職に備える場合にも、**HTML5プロフェッショナル認定を取得することは大変おすすめ**です。知識・技術力の向上やアピールのために、ぜひ資格取得に挑戦してみませんか？

近年ますます進化を見せるWeb関連技術により、基礎知識・技術力はプログラマーのみならず、幅広い職種のWebに携わる人々に求められるようになってきています。知識力・技術力の証明に是非、HTML5プロフェッショナル認定を取得してみませんか？

HTML5プロフェッショナル認定試験は、HTML・CSS・JavaScript・Webに関する幅広い知識を身につけることができる

HTML5プロフェッショナル認定試験を取得することで、Web系の知識の証明となり、転職や就職にも役に立つ

HTML5プロフェッショナル認定試験の勉強は、プログラミングスクール等に通わずとも独学で取得できる

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

**HTMLとは「Hyper Text Markup Language」の略称で、Webサイトの文書構造を記述するための言語のことです。**近年ではWordPressなどのCMSの登場により、プログラミング経験がないような初心者でもHTMLを理解できれば、Webサイトの簡単な装飾ができるようになります。ここでは、初心者向けにHTMLの概要や特徴について詳しく紹介します。

**HTMLとは、インターネット上のWebサイトの文書構造を表現するための言語であり、CSSやJavaScriptといった言語と一緒に使用されるのが一般的です。**CSSを使用すれば、Webサイトのスタイルを指定することができます。またJavaScriptを使用すれば、動的なWebサイトを作成することが可能です。CSSやJavaScriptを適用するためにも、HTMLはまず習得すべき必須な言語と言えるでしょう。

*HTMLのような文書を記述する言語は、一般的にマークアップ言語とも呼ばれます。*マークアップ言語では、文字や画像などにタグを使用してマーキングを行い、文書の骨組みを明確にできます。HTMLタグは、開始タグ「<タグ名>」と終了タグ「</タグ名>」でテキストを囲んで使用するのが一般的です。なお終了タグが不要なタグ要素もあるため、注意する必要があります。

**HTML5とはHTMLのバージョンが「5」であることを意味します。**HTML1が開発されたのは1993年であり、バージョンアップを重ね、1999年にHTML4が開発されました。これまではHTML4がWebサイトを作成するための言語として主に利用されてきました。*2014年にHTML5がリリースされ、HTML5が現在の最新バージョンです。*

しかし**2021年1月28日にHTML5は廃止され、「HTML Living Standard」が標準規格となっています。**現状ではHTML5と「HTML Living Standard」では大きな差異はありませんが、「HTML Living Standard」は日々アップデートされるため注意が必要です。

*HTML5はHTML4と比較して機能の豊富さが特徴です。*例えばHTML5はマルチデバイスに対応しており、スマホなどさまざまなデバイスに対応したWebサイトを比較的簡単に作成できます。また、複数のブラウザにも対応しているのも魅力です。他にもHTML5を使用すれば、3Dアニメーションの作成・音声や動画の埋め込み・フォームの入力チェックなどができます。

HTMLはWebサイトを作成するために必要な言語であることは理解できたでしょうか。ここではHTML入門ということで、HTMLの基礎コードを初心者向けに紹介します。

**HTMLではタグ「<>」を使用して、文章構成を表現します。**例えば、タイトルを付けたいときは「titleタグ」を使用します。開始タグと終了タグの間にテキストを記述すれば、Webサイトのタイトルを作成することが可能です。画像を挿入したいときには「imgタグ」を使用しますが、このタグには終了タグはありません。そのため*終了タグの不要なタグがあることを覚えておきましょう。*

**要素の細かい動きを設定するためには、属性や属性値を記述する必要があります。属性の記述方法は「<要素名 属性="属性値">」です。**開始タグの要素名の後ろには、半角のスペースを空けなければなりません。また属性の後ろにはイコール「=」を付け、属性値はダブルクォーテーション「"」で囲む必要があります。なお*属性値を囲む際にシングルクォーテーション「'」も使用できますが、一般的にはダブルクォーテーション「"」を使用します。*

ここからはサンプルとして、英語や日本語などの言語を指定する「lang」という属性を使用し、例を示します。なお「lang」という属性は「html要素」に使用することが多いです。

この記述により、*HTML内の言語は日本語という設定にすることができます。*属性名では「ja」を指定しており、「en」にすれば英語に設定可能です。

属性は複数指定することもできます。また**よく使用される属性には「id」「class」があります。**これらの属性は、CSSでデザインを定義するときに便利です。*「id」は同じWebサイトで属性名が重複してはならない*という特徴があります。一方*「class」は同じWebサイトで同じ属性名を何度でも使用することが可能です。*

HTMLの基礎コードについては理解できたでしょうか。他にも理解しなければならないHTMLの基礎は数多くあるため、実際にサンプルコードを読み、まずはコードの意味を1つひとつ理解するのがおすすめです。ここでは、よく使用されるHTMLのコードについて詳しく紹介します。

**見出しタグには「h1タグ」から「h6タグ」までの6種類があります。**大きい見出しを作成したいときには「h1タグ」を使用し、数字が大きくなるほど小さい見出しとなります。*見出しタグを上手く使用すれば、ユーザビリティやSEO効果の向上が期待できるでしょう。*見出しタグはテキストの見た目を設定するために使用するのではなく、Webサイトの階層構造をユーザーや検索エンジンにわかりやすく示すために使用する点に気を付けましょう。

**「imgタグ」は画像を挿入するために使用します。**これまでにも説明しましたが、「imgタグ」では終了タグが必要ありません。*「src」という属性を使用して、表示する画像ファイルを指定することができます。*また「alt」という属性を使用すれば、画像を表示できない場合に画像の代替テキストを表示することが可能です。さらに「width」「height」という属性を使用すれば、Webブラウザ上で表示する画像の幅や高さを指定することができます。

**「aタグ」はリンクを貼るために使用します。「href」という属性を使用して、リンク先を指定することが可能です。**リンク先には遷移させたいURLを入力します。また「aタグ」ではテキストだけではなく、画像を挟むこともでき、画像のリンクボタンを作成することが可能です。

**「pタグ」は段落を表現するために使用します。**「pタグ」は頻繁に使用される要素の1つです。「pタグ」の開始タグと終了タグで囲まれたテキストは1つの段落であることを示します。

HTMLのよく使用されるコードについては理解できたでしょうか。ここでは、HTMLの初心者向けの勉強方法について詳しく紹介します。

HTMLに関する本は数多くあり、超初心者向けから上級者向けまでさまざまな本があります。初心者の方は、HTMLの概要や基礎についてゼロから説明している本を選ぶのがおすすめです。*本を活用するメリットはネット環境がなくても勉強できるため、場所を問わず学習できる点です。*また簡単にメモを書いたり、付箋を貼ったりして自分なりにアレンジできます。さらに、費用がほとんどかからないのも魅力です。

一方本を活用するデメリットとして、実践的なスキルが身に付きづらい点が挙げられます。**HTMLに限らずプログラミング言語は、実際に手を動かして試行錯誤しながら学ぶことによってスキルが身に付きます。**そのため体系的な知識を習得できる本だけではなく、サンプルコードや練習問題の記載された本も購入するのがおすすめです。

### HTML入門サイト（学習サイト）を活用する

近年では、インターネット上でプログラミング言語を勉強できる学習サイトも数多くあります。例えば、「*Progate*」「*ドットインストール*」「*schoo*」「*Udemy*」などがあります。学習サイトはプログラミングスクールと比較するとサポートが少ないため、独学で勉強したい方向けです。また、プログラミングスクールよりも一般的に安い費用で利用できます。

*学習サイトを利用するメリットは、実際に手を動かしながらHTMLを学べる点です。*環境構築が不要な学習サイトであれば、すぐにHTMLのコーディングを始められます。ただし、将来的にWeb制作現場などで働きたいと考えている方は、環境構築から丁寧に解説されている学習サイトを選びましょう。

**HTML初心者の方は、本で体系的な知識をインプットし、学習サイトでアウトプットすると効率よく習得できます。**そのため本と学習サイトを併用してHTMLを学習するのはおすすめです。独学な苦手な方は、プログラミングスクールの受講を検討しましょう。

## 実際に手を動かしながらHTMLを学習しよう！

これまでに、HTMLの概要・基礎コード・コード一覧・勉強方法について初心者向けに解説しました。**HTMLとはWebサイトの文書構造を記述するための言語を指します。**なお、*現在のHTMLの標準規格は「HTML Living Standard」です。*

*HTMLでは開始タグ「<タグ名>」や終了タグ「</タグ名>」を使用して、文章構成を表現します。*ただし終了タグが不要なタグ要素もあるため、注意が必要です。また*属性を付ければ、要素の細かい動きを設定することができます。*例えば「imgタグ」を使用するときには、「src」という属性を使用して表示する画像ファイルの指定が可能です。

**HTMLを勉強するにあたって、本と学習サイトを併用するのがおすすめです。**特に、本はサンプルコードや練習問題が記載されているものを選びましょう。実際に手を動かしながら学習することで、HTMLの実践的なスキルを身に付けることができます。

HTMLとはWebサイトの文書構造を記述するための言語です。HTMLを勉強するにあたって、本と学習サイトを併用するのがおすすめです。当記事では、HTMLの概要・基礎コード・コード一覧・勉強方法について初心者向けに解説します。

現在のHTMLの標準規格は「HTML Living Standard」

HTMLの開始タグに属性を付ければ、要素の細かい動きを設定できる

HTMLを独学で学習する場合は、本と学習サイトを併用するのがおすすめ

HTML入門！初心者向けに基礎コード・文法一覧・勉強方法を解説！

- [HTMLを独学で勉強するには? エンジニアが学ぶべき理由や習得に必要な時間](https://and-engineer.com/articles/YXpquhUAACsAivlG)

- [HTMLでできることは少ない？できないことやタグも一覧でまとめた](https://and-engineer.com/articles/YV1ZtxAAACn9LtD9)

- [HTMLのdivタグとは？読み方・目的・使い方などを解説！](https://and-engineer.com/articles/YUmP1hAAACUA1NVs)

まずは、*HTMLとは何か*について解説します。HTMLが使われる場面やPHPなどのプログラミング言語との違いについて詳しくみていきましょう。

### HTMLはホームページの文書を作成するための言語

HTMLとは、*ホームページの文書を作成するための言語*のことです。ホームページの文書には見出しが表示されていたり、画像・表・リストなどが挿入されていたりします。**HTMLでは「タグ」というものを使って、このような文書を書き表すことが可能**で、HTMLのソースコードを書いたファイルを「HTMLファイル」と呼びます。HTMLファイルをブラウザで開くと、ブラウザがHTMLコードを読み取り、ホームページを作成します。

また、HTMLと並んで多く使用されるのが「CSS」で、**ホームページのデザインを整えるための言語**です。デザインはHTMLだけでも整えることは可能ですが、HTMLのみだとコードの中身が複雑になり、開発が困難になってしまいます。そこで、デザイン部分の処理はCSSを使って記述することでコード全体がまとまり、ホームページの修正を行う際も比較的容易になります。

CSSとは？初心者が覚えたい基礎知識から使用例まで解説！

HTMLを使う代表的な仕事は、*Webデザイナー*です。WebデザイナーはWebサイトのデザイン面を担当する仕事で、どういったデザインにするか考え、デザイン通りになるようにHTMLコードを記述していきます。

他にも、マークアップエンジニアという仕事もあります。マークアップエンジニアは、HTMLコードの記述のみに特化したエンジニアです。**HTMLやCSSについてより深く精通し、ハイレベルなコードを書ける必要がある**でしょう。

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

### HTMLとプログラミング言語の違い

HTMLは厳密には、*プログラミング言語ではありません*。プログラミング言語とは、コンピュータに処理を行わせるための言語のことです。たとえば、コンピューターに計算をさせたり、同じ処理を繰り返しさせたりします。

**HTMLは計算や繰り返し処理を記述することができない**ため、それらの処理が得意なPHPやJavaScriptなどのプログラミング言語とは、明確に区別されています。

HTMLの記事（3ページ目）