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

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

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

「プログラミング言語の他にHTMLやCSSを学ぶ意味があるのか？」という悩みを持つ初級エンジニアの方がいます。フロントエンドエンジニアなら、HTML/CSSは必須言語といえますが、バックエンドエンジニアやサーバーエンジニアにはあまり関係が無さそうに思えます。

しかし、プロジェクトリーダーやプロジェクトマネージャーを任された時に、*HTML/CSSの知識やスキルがあると、その分メンバーからの尊敬や信頼を得られる*でしょう。この記事では、**入門ガイドとしてHTML初心者の方を対象に、HTML/CSSを学ぶ意味や効果的な学び方について解説**します。

HTMLを知らないエンジニアはいないと思いますが、HTMLは「Hyper Text Markup Language」の略です。**HTMLはプログラミング言語ではありませんが、Webページを作るときに必須となるマークアップ言語の1つ**です。

 HTMLと一言で呼んでも、実際には「HTML4」「XHTML」「HTML5」の3種類があります。すべて覚える必要はありません。ここでは「HTML5」を対象に解説します。

CSSは「Cascading Style Sheets」の略で、*文字サイズや文字の色、余白、装飾などのレイアウトでの見栄えを決めるスタイルシート言語*です。HTMLだけでもWebページは作成できますが、殺風景で味気ないページになるでしょう。

そこで、*見栄えの良いページを作成するには、HTMLとCSSをセットで学ぶ必要があります。*

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

HTML/CSSはやさしい言語です。*少し学べばすぐに結果が確認できるため、挫折しにくい*のが特徴です。しかも、学習人口が圧倒的に多いため、壁にぶつかってもすぐに解決できます。また、あらかじめ特に準備するものがないため、すぐに始められます。

**HTML/CSSはITエンジニアの初めの一歩、エンジニアの一般常識**と考えて、できれば多くの人に学んでほしい言語です。

### HTML/CSSの学習は電子ブックよりも紙の本がおすすめ

最近はスマホやタブレットにダウンロードして読むタイプの電子書籍（電子ブック）が増えてきましたが、**勉強目的なら紙の本の方が良い**でしょう。

電子ブックの場合は、図が見にくい・一度に表示できる量に限りがあり複数のページにまたがって読む必要がある・コード表記のレイアウトが崩れていることがあるといった使い勝手にデメリットがあります。また、勉強の達成感も得にくいでしょう。

一方、*紙の本は1ページ内にまとまった情報が記載されている*ため、複数ページにまたがって確認する必要がありません。また図や表なども見やすく、実際にコードを入力しながら学習する場合も使いやすいです。

また、電子ブックは数ページ程度しか試し読みできないことが多く、購入したあとに「自分には合っていなかった」と感じることもあります。しかし、紙の本は購入する前にある程度試し読みできるため、購入後に後悔することも少ないでしょう。

HTML/CSSの学習を始めて苦手な部分や難しいポイントに差し掛かっても、**最低でも1ヵ月は学習を続けましょう。**比較的簡単だと言われるHTML/CSSですが、人によっては学習の途中で挫折することもあります。

しかし、わからないところはとばしたり、簡単なところからやり直したりしながら1ヵ月は学習を継続してください。本での独学は時間がかかるのが一般的です。学習スケジュールを立て、計画的に学習を進めることが大切です。

未経験者がHTML・CSSを最短で習得できる独学方法を解説！

**本を読みながら実際にコードを書くと、より知識が定着しやすいのでおすすめ**です。HTML/CSSの学習本の中にはサンプルコードや演習問題がついているものがあり、本を読みながらコードを書くとより効率的に学習できます。

また、コードを書くことでインプットだけではなくアウトプットも同時にできるため、学習の成果や進み具合が目に見えてやる気にもつながるでしょう。

ある程度HTML/CSSが理解できたら、**自分の好きなWebサイトを模写するのもおすすめ**です。Webサイトを模写することで、本で学んだ知識がどの程度身についているのかがわかります。また、わからないところや苦手なところを再認識できるため、足りない知識を補うこともできます。

## HTML/CSSの入門本を選ぶポイント

*HTML/CSSの学習本を購入するにあたり、注意すべきポイント*を以下で説明します。スクールに通うより遥かに安い出費で済むとはいえ、**せっかく購入するからには自分に合った本を選びましょう。**

### 自分のレベルに合っていること

*学習本の購入では、自分のレベルに合っているというのが最低限の条件*です。どんなに外装が素晴らしく、どんなに人気があっても自分に合わなければ意味がありません。間違って上級者用の参考書を選んでしまうと、いきなり挫折します。

また初級や入門の表記がある本でも、実際にはレベルが高すぎて理解ができないといったことがあります。書店で手に取って試し読みするのがベストです。電子書籍の場合もネットで一部試し読みができるものもあるため、**まずは中身を見て自分のレベルに合っているかを確認**しましょう。

### HTMLとCSSを同時に学べること

Webページ作成の基本はHTMLですが、CSSが使われているケースが大半です。**HTMLとCSSはセットで学びたい言語ですので、両方を解説している本をおすすめ**します。

HTMLとCSSの両方に対応している本であれば、効果的に2つの言語をマスターできるような構成になっており、*別々に本を買って勉強するよりは遥かに効率的*です。

### 最新のバージョンに対応していること

よく中古の書籍を購入する人がいます。小説など、時代の変化に直接関係ないものであれば問題はありませんが、**学習本の場合、時代の変化の影響を受けやすいIT系では、本は最新バージョンであることがポイント**です。

2022年現在*HTMLの最新バージョンは「HTML Living Standard」、CSSは「CSS3」*です。これらに対応している学習本や参考書を選ぶようにしましょう。

*（注意：HTML5は2021年1月28日に廃止され、HTML Living Standardが標準規格になりました。内容は大きく変わりませんが、できるだけHTML Living Standardを対象としている本がおすすめです。）*

これは必須ポイントではありませんが、**用語の解説が詳しく書かれている本や、インデックスがしっかりしている本は辞典代わり**にもなります。学習が終わったあとも辞書として使えるため、長く使えることがメリットです。

## 【2022年最新】HTML/CSS入門書おすすめ15選

HTML/CSS関係の解説本、参考書は非常に豊富です。ここでは、**おすすめのHTML/CSS入門書15選を紹介**します。以降で紹介する入門書のおすすめポイントとしては、入門者向けであること、HTMLとCSSを同時に学べること、最新バージョンに対応していることなどです。また、書評や口コミも参考にしています。

ちなみに出版日が比較的古いものでも、最新のバージョンに対応し、改訂している本は紹介しています。

### 1.スラスラわかるHTML&CSSのきほん 第2版

特徴：**小規模なサンプルサイトの作成を通じて、HTML/CSSの基本が学べる入門書**

2013年に初版が発刊された*ロングセラーの人気本*です。2018年に今回おすすめの第2版が発売されました。HTML/CSSの基本について、可能な限りわかりやすく解説されてます。

図解が多く、誰もがミスしやすい箇所のサポートも親切です。ある程度、 HTML/CSS の知識がある方には物足りない内容かもしれませんが、*入門者にはぜひおすすめしたい1冊*です。

【参考】：[スラスラわかるHTML＆CSSのきほん 第2版](https://www.sbcr.jp/product/4797393156/)

### 2.デザインの学校 これからはじめる HTML & CSSの本

特徴：**Webデザインの基本を学ぶ初心者向けのHTML/CSS入門書**

*比較的ページ数が少なく、初心者に優しい丁寧な説明で、すらすら読み進められます。*わかりやすいことを最優先としており、取っ掛かりの入門書としておすすめです。しかし、簡単な内容のため初心者でもこれ1冊で十分とは言えません。

超入門という点ではおすすめの本です。分厚い本は苦手、飽きやすいという方はこの本でスタートを切るのも良いでしょう。

▪著者：千貫 りこ、ロクナナワークショップ（監修）

【参考】：[デザインの学校 これからはじめる HTML & CSSの本](https://gihyo.jp/book/2017/978-4-7741-8968-0)

### 3. これからWebをはじめる人のHTML&CSS、JavaScriptのきほんのきほん

特徴：**HTML/ CSS、JavaScript などの入門書として網羅性に富み、これ1冊で基本を学べる**

初心者にわかりやすく書かれている本で、HTML・CSS・JavaScriptについて幅広く学べます。しかし、より詳しく学びたい人にはやや物足りなさを感じるかもしれません。*Web開発の基本について広く浅く学びたい人におすすめ*です。

【参考】：[これからWebをはじめる人のHTML＆CSS、JavaScriptのきほんのきほん](https://book.mynavi.jp/ec/products/detail/id=65861)

### 4.世界一わかりやすい HTML5&CSS3コーディングとサイト制作の教科書

特徴：**Webサイト作成に必要な知識を凝縮した教科書**

全15章から構成されています。レッスン1の基礎知識から始まり、 HTML/CSSの使い方を中心としたレッスンが続き、後半のレッスン14と15ではWebサイトの公開方法が記載されています。タイトル通り教科書のイメージが強いですが、*しっかり基礎を学びたい初心者の方におすすめ*の本です。

▪著者：赤間 公太郎、狩野 咲、鈴木 清敬

【参考】：[世界一わかりやすい HTML5＆CSS3 コーディングとサイト制作の教科書](https://gihyo.jp/book/2019/978-4-297-10302-6)

### 5.いちばんやさしい HTML＆CSS 入門教室

特徴：**スマホ対応のサイト作りを題材とした新しいタイプのHTML/CSS入門書**

「いちばんやさしい」のタイトル通り、HTML/CSSに特化した入門書です。特徴は*スマホ向けサイトを題材としている*点で、他の教本とは一線を画しています。

題材はスマホサイト作成ですが、モバイル対応サイトを作りながら、パソコン表示の対応方法なども解説されています。また、*閲覧するユーザーのデバイスに合わせて自動的に表示が最適化される「レスポンシブデザイン」の制作を学べます。*入門でありながら、実践力を高めたい初心者におすすめの1冊です。

▪出版社：株式会社ソーテック社

【参考】：[いちばんやさしい HTML＆CSS 入門教室](http://www.sotechsha.co.jp/pc/html/1213.htm)

### 6.HTML＆CSSとWebデザインが1冊できちんと身につく本

特徴：**読むだけで各言語の知識とWebデザインの基礎が身につく**

HTMLやCSSのコーディング方法に加え、多くのWebサイトで使用されている4つのレイアウト手法についても学べます。*基礎知識の勉強にもなる上、実践的なテクニックも学ぶことができます。*そのため、実際にHTMLやCSSを使った仕事がしたい人にもおすすめです。

またサンプルサイトの見栄えも良いので、Webサイトを作りながら楽しく勉強できるのもポイントです。

HTMLとCSSに関する学習本を探す際、書籍が多すぎて選ぶのに困る方が少なくありません。この記事では、ITエンジニアを目指す方にHTML＆CSSに関する入門本の選び方と、おすすめの入門書を紹介します。Webページを自分で作りたい方もぜひ参考にしてください。

HTMLとCSSは言語としての機能や目的は異なるが、Web作成において必須の言語でセットで習得すべき

HTML/CSSの入門書を探すには、3つのポイントを押さえる必要がある

おすすめのHTML/CSSの入門書15選と、それぞれの特徴について理解する

HTML/CSSを費用をかけずに学べるおすすめの入門書15選！

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

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

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

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

### 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プロフェッショナル認定を取得することは大変おすすめ**です。知識・技術力の向上やアピールのために、ぜひ資格取得に挑戦してみませんか？

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

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

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

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

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

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

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

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

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

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

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

**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入門サイト（学習サイト）を活用する

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