**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などのプログラミング言語とは、明確に区別されています。

PHPでできることを解説！機械学習やスマホアプリ開発はできる？

JavaScriptでできることとは？代表的なものから特徴まで詳しく紹介！

## HTMLを勉強するのにおすすめな本5選

*HTMLを勉強するのにおすすめの本*を5つ紹介します。これらの本は、これからHTMLを勉強する方に特におすすめです。どの本を購入すべきかわからない場合はこの中から選んでみてください。

### スラスラわかるHTML&CSSのきほん

こちらは、ベストセラーにもなっているHTMLの本です。HTMLとCSSの基礎について丁寧に解説しており、スラスラ理解できる1冊です。書籍内にはソースコードも多く掲載されており、詳細な解説が特徴です。**自分が書いたコードの意味を、一行一行理解しながら進めていける**でしょう。

*[スラスラわかるHTML&CSSのきほん](https://www.sbcr.jp/product/4797393156/) *

### いきなりできます！最新ホームページ作り&HTML超入門

本書は、*ホームページ作りについて解説が網羅されている1冊*です。HTMLの書き方だけでなく、画像の扱い方やサーバにファイルをアップロードする方法まで、詳しく解説されています。さらに、Twitterボタンの設置方法など細かいところも抜けなく説明がされているため、本書でホームページ作りの基礎が身につくでしょう。
なお、本書は**Windows対応となっており、Macには対応していないので要注意**です。

*[いきなりできます！最新ホームページ作り&HTML超入門](https://www.sbcr.jp/product/4797382235/) *

### いちばんやさしい HTML&CSS 入門教室

本書は、HTMLとCSSの使い方について*ステップ・バイ・ステップで学ぶことが可能*です。また、現在のトレンドを意識し、**スマホ向けサイトの作り方を重点解説**しているのもポイントでしょう。最終的には、レスポンシブデザインの制作ができるようになります。現場で役立つスキルを身に着けたい方に、おすすめの1冊です。

*[いちばんやさしい HTML&CSS 入門教室](http://www.sotechsha.co.jp/pc/html/1213.htm) *

### 1冊ですべて身につくHTML&CSSとWebデザイン入門講座

本書は、*書店員がオススメする「CPU大賞」の1位に選ばれている1冊*です。最新技術にも対応しており、**レスポンシブ・Flexbox・CSSグリッドも学べます**。コードの書き方だけでなく、デザインのことも同時に勉強することが可能なため、まさに1冊ですべてを身につけられる本と言えるでしょう。

*[1冊ですべて身につくHTML&CSSとWebデザイン入門講座](https://www.sbcr.jp/product/4797398892/) *

### いちばんよくわかる HTML5＆CSS3 きちんと入門

本書は、*やや上級者向けの本です*。HTMLやCSSの実践的なテクニックについて詳しく解説されてあり、多くのサンプルコードが掲載されているため、手を動かしながら学ぶことができます。本書を読み込むことで、無駄のないHTMLコードを書けるようになるでしょう。**ある程度HTMLとCSSを学んだ方に、おすすめの1冊**です。

*[いちばんよくわかる HTML5＆CSS3 きちんと入門](https://www.sbcr.jp/product/4797388541/) *

続いて、*HTML本の選び方について解説*します。書店に行くと多くの種類のHTML本が並んでいます。その中から自分に合った本を探すコツをまとめました。

基本的に技術書系は電子書籍より、*紙の本を選択するのがおすすめ*です。理由として、電子書籍だと見開きにしにくく、サンプルコードが途中で途切れてしまうこともあるためです。また、**紙媒体の方が調べたことをメモしやすい**など、メリットが多くあります。

HTMLの本は、*なるべく出版日が最新のものを選択*しましょう。HTMLやCSSはこれまで何度もバージョンアップされており、新機能が追加されてきています。**出版日が古い書籍だと新機能についての解説がありません**。書籍を購入する場合は、出版日を必ず確認するようにしましょう。

### CSSも解説しているものを選ぶ

HTMLだけでなく、*CSSも十分に解説されている本が良い*でしょう。なぜなら、HTMLを使う場合は必ずCSSも一緒に使うことになるためです。Webデザイナーやマークアップエンジニアは、**HTMLとCSSを上手く使い分けるスキル**が求められます。

### ホームページの作り方まで解説しているものを選ぶ

*ホームページの作り方まで解説されている本だと、より良い*でしょう。レンタルサーバーの使い方・ドメインの取得方法・FTPソフトの使い方・ファイルのアップロード方法について、総合的に解説している本がおすすめです。**HTMLの文法は分かるけれど、サイト作成でつまずいているという方は多い**です。ホームページの作り方に関しても、十分なページ数を割いて解説されているか確認しましょう。

最後に、*HTMLを勉強するコツ*についてまとめました。HTMLを効率的にマスターするにはどうすべきかまとめてあります。これからHTMLの勉強を始める方は、ぜひ参考にしてください。

まずは、*学習スケジュールを立てることが肝心*です。1週間後、1ヶ月後に、学習をどこまで進める予定か紙に書き出してみましょう。本格的なWebサイトを作れるまでは、長期的な学習が必要です。学習スケジュールを立てないと**現時点で学習が何%程度進んだのか分からず、学習意欲が衰退してしまい、途中で挫折してしまう可能性があります**。学習スケジュールはしっかり立て、机の前などに張り出すのが良いでしょう。

### 実際に手を動かしながら学習する

HTMLの勉強は、*実際に手を動かしながら学習*しましょう。HTMLの本にはサンプルコードが掲載されているものが多いため、サンプルコードを模写し、**自分のブラウザで表示させてみてください**。コードの実行結果を確認することで、HTMLについて分かることが増えたという実感が湧き、勉強意欲が出てきます。

何冊も本を購入する勉強方法は、あまりおすすめできません。まずは、*1冊を完璧にこなすことが大切*です。HTMLの優良な本には、1冊に基礎がほとんど詰まっているため、1冊を完璧にするだけでも十分に基礎は固まります。その反面、**複数の本をこなそうとすると学習が散漫になってしまいがち**です。他の本にチャレンジするのは、1冊目を完璧に理解してからでも遅くはありません。

## HTMLの勉強は本がおすすめ！手順に基づいて効率的に勉強を進めよう

本記事では、*HTMLを勉強する場合のおすすめの本*について解説しました。どういった本を購入するのが良いのか、お分かり頂けたかと思います。HTMLだけを学んでも実務に活かすのは難しいため、**CSSやホームページの作成方法まで総合的に学べる本を探すのが良い**でしょう。また、なるべく出版日が新しい本だとHTMLの最新バージョンに対応しているため、おすすめです。本記事がHTMLをこれから学ぶ方にとって、有意義なものとなれば幸いです。

本記事では、HTMLを勉強できるおすすめの本を解説します。HTMLは長きに渡って使われているIT言語のため、書籍も多く販売されています。そのため、どの本を選択すべきか分からない人も多いでしょう。今回はおすすめのHTML本を5つ厳選しました。

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

CSSやホームページの作成方法まで、総合的にHTMLを学べる本を探すのが良い

なるべく出版日が新しい本がおすすめ

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

始めに、*HTMLエディタとは何か*について解説します。**HTMLエディタは何に使われるものなのか**、メモ帳や統合開発環境との違いはなにか、についてまとめました。

### HTMLエディタはテキストを編集するためのソフト

HTMLエディタは、*テキストを編集するためのソフト*のことです。HTMLのソースコードを記述し、HTMLファイルとして保存することができます。多くのHTMLエディタは、HTMLだけでなく、他のプログラミング言語の記述も可能です。HTMLエディタにはさまざまな種類があり、**中にはインストール不要なものやオンラインで使えるものもあります**。

### HTMLエディタとメモ帳の違い

Windowsのパソコンには、最初からメモ帳ソフトがインストールされています。また、Macにもテキストエディットというメモ帳と類似したソフトがあります。これらのソフトでも、HTMLコードの記述は一応可能ですが、*HTMLエディタを使う方がおすすめ*です。なぜならHTMLエディタには、タグの入力サポートやエラー表示など、コードの記述を効率化できるさまざまな機能が備わっているからです。**プログラマーやWebデザイナーのほとんどが、メモ帳ではなくHTMLエディタを使っています**。

### エディタと統合開発環境の違い

エディタとよく似たものに、「統合開発環境」があります。統合開発環境とは、開発作業を効率的に行うための開発環境を指します。たとえば、Eclipseなどです。統合開発環境とエディタは厳密には区別されていないですが、*一般的に開発に関する機能が豊富なものを統合開発環境と呼ぶことが多い*です。

HTMLのコードを書く際に統合開発環境を使う人もいますが、機能が豊富な分、動作が遅く、**ある程度パソコンのスペックが高くないとスムーズに編集できない**可能性があります。そのため、初心者には統合開発環境よりもHTMLエディタがおすすめです。

## 初心者におすすめのHTMLエディタ5選

ここでは、*初心者におすすめのHTMLエディタを5つ厳選*しました。これらのエディタは使いやすいと評価が高いものばかりです。エディタ選びに迷ったら、**これら5つから選ぶのが良いでしょう**。

サクラエディタは、*日本人が開発したHTMLエディタ*です。エディタ上の表記は全て日本語なので、初心者でも使いやすいでしょう。マニュアルなども日本語なので、分からない箇所が調べやすいのも特徴です。また、機能面も豊富であり、コードの強調や検索機能など**HTML編集に必要な機能は一通り揃っています**。

[サクラエディタ](https://sakura-editor.github.io/)

Atomは、GitHubを作った会社が開発したHTMLエディタです。Atomは利用者が多く、ネット上に使い方を解説したサイトが多いため、*分からない所を調べやすいのがメリット*でしょう。また、Atomはプラグインが多く、機能を追加したり便利に活用したりすることが可能です。**エディタ上の表記がデフォルトで英語になっています**が、プラグインを使うことで日本語に変換できます。

Visual Studio Codeは、**マイクロソフト社が開発したHTMLエディタ**です。Windows・Macの両方で使えて、*初心者から上級者まで人気の高いHTMLエディタ*です。HTML以外にも、さまざまなプログラミング言語に対応しています。

[Visual Studio Code](https://azure.microsoft.com/ja-jp/products/visual-studio-code/)

Notepad++は、Windows専用のHTMLエディタです。*Windowsを使っている人が使いやすいように設計*されています。メモ帳と同じような感覚で使えるので、初心者にもおすすめでしょう**。また、プラグインも豊富なため、自分好みにカスタマイズすることが可能**です。

[Notepad++](https://forest.watch.impress.co.jp/library/software/notepadplusp/)

Online HTML EDITORは、*オンラインで使えるHTMLエディタ*です。インストール不要で、手軽にコードを記述して実行結果を確認することができます。インストールが不要なので、**パソコンの容量を圧迫することなく使える点がメリット**でしょう。本格的な開発には活用できませんが、コードにミスがないか素速く確認したいときにおすすめです。

[Online HTML EDITOR](http://asomin.net/htmleditor/)

HTMLエディタにはさまざまな機能が備わっています。ここでは、*具体的にどういった機能が備わっている*のかまとめました。これらの機能を活用することで、**ソースコードの記述がスムーズに行える**でしょう。

HTMLエディタの多くには、記述サポートがついています。記述サポートとは、*その文字から始まるタグを表示してくれる機能*のことです。たとえば、「a」とタイプした場合、aから始まるタグが表示されます。この機能により入力にかかる手間を省くことができますし、**スペルミスも防げる**でしょう。開発スピードを上げるには欠かせない機能です。

HTMLエディタは、**タグごとに色付けをしてくれます**。タグごとの色が付いていると、ソースコード全体が見やすくなり、記述ミスを防ぐことができるでしょう。HTMLのソースコードは、*1文字でも間違っていると正しく動作することができません*。そのため、こういった表記ミスを防ぐ機能があるかどうかは重要です。

HTMLエディタの多くには、プレビュー機能が備わっています。HTMLコードの実行結果を確認する場合、通常はブラウザを開かないといけません。しかし、何回もブラウザをリロードして確認するのは大変です。*HTMLエディタのプレビュー機能を使えば、実行結果を素速く確認する*ことができます。**ショートカットキーを押すだけですぐに実行結果を確認できる**ので、開発スピードがアップするでしょう。

HTMLエディタの多くには、エラーメッセージ機能が揃わっています。エラーメッセージ機能とは、HTMLのソースコードに記述ミスがあると*「ここは間違っています」と教えてくれる機能*のことです。エラーメッセージ機能のおかげで、デバック作業効率が一気に上がります。**特に初心者はスペルミスをすることが多い**ため、欠かせない機能と言えるでしょう。

## HTMLエディタを選ぶときのポイント

最後に、*HTMLエディタを選ぶ際のポイントを紹介*します。HTMLエディタにはさまざまな種類があり、中には上級者向けのものもあります。**上級者向けのエディタは機能が多すぎて使いにくい場合も**あります。そこで、初心者でも使いやすいエディタを選ぶコツを解説します。

### ネットに情報が多く掲載されているか

HTMLエディタによってはネット上に情報が少なかったり、**英語の情報ばかりだったりすることがあります**。情報が少ないと、エディタが思うように動かない場合、調べて解決するのが難しくなるでしょう。そのため、なるべく*ネットに情報が多く掲載されているHTMLエディタを選ぶ*のがポイントです。たとえば、サクラエディタは日本人が開発したHTMLエディタのため、日本語の情報が多く掲載されています。

HTMLエディタによっては、**一部のOSにしか対応していないものもあります**。たとえば、Notepad++などは、Windowsでしか使うことができません。*公式サイトのダウンロードページを確認すれば、どのOSで使えるのかは分かります*。自分が使っているOSに対応しているか必ず確認しましょう。

### 拡張機能を使わなくても機能が充実しているか

HTMLエディタの中には、拡張機能（プラグイン）を使わないと機能がそこまで多くないものもあります。初心者は、できるだけ*拡張機能を使わなくても良いHTMLエディタ*を使いましょう。**拡張機能のインストールは初心者には少しハードルが高く**、どの拡張機能を使えば良いか調べるのも大変です。

## 自分に向いているHTMLエディタを選んで作業効率を上げよう！

本記事では、*おすすめのHTMLエディタを解説*しました。どういったHTMLエディタを選ぶと良いのか、お分かり頂けたかと思います。HTMLエディタはなるべく軽くて使いやすいものを選びましょう。**本記事を参考に、自分に向いているHTMLエディタを探してみてください**。

今回はHTMLエディタを紹介します。HTMLエディタにはさまざまな種類があり、どれを使うべきか分からない方も多いのではないでしょうか。そこで、初心者におすすめのHTMLエディタを5つ厳選しました。HTMLエディタ選びに迷っている方は、ぜひ参考にしてください。

HTMLエディタはテキストを編集するためのソフト

メモ帳と違いHTMLエディタは開発がスムーズになる機能が豊富にある

初心者は日本語の情報が多く使いやすいHTMLエディタを選ぶのがおすすめ

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

- [HTML・CSSとは何か？使い方やできること、独学方法を解説！](https://and-engineer.com/articles/YUbmNRAAACUAyIm5)

- [HTML5とは？特徴や変更点・関連用語・対応ブラウザを解説！](https://and-engineer.com/articles/YTsTCBAAACIAk0be)

まず始めに、*HTMLとは何か*について初心者の方でも分かりやすいように解説します。HTMLは何をするためのものなのか、どういった場面で使われるのかみていきましょう。

### HTMLはWebサイトを作成するための言語

*HTMLはWebサイトを作成するための言語*です。Webページ上に表示される文章・写真・リンクなどの情報は、HTMLによって作成されています。HTMLによって「この文章を表示する」「画像を挿入する」などを具体的に表現することが可能です。

また、HTMLでWebページの構造を書き表したファイルを「HTMLファイル」と呼び、**HTMLファイルをサーバにアップロードすることで、Webページをネット上に公開することが可能**です。

### HTMLはタグを使ってWebページの構造を表す

**HTMLでは「タグ」というものを使って、Webページの構造を表します**。タグとは文章や画像をどのように表示するか、コンピュータに指示を出すためのものです。たとえば、``````というタグがHTMLにはあります。特定の文章にこれを使用してタグ付けすることにより、その文章を太字にして表示することができます。このように、*タグを使うことでコンピュータに表示方法の指示を出すことが可能*です。

ここでは、*HTMLでできることの一覧*をまとめました。Webアプリケーション開発において、HTMLがどのように活躍するのか解説しています。これからHTMLを勉強する方は、HTMLでできることを予め抑えておくと良いでしょう。

まずできることが、*Webページ上に記載された文章の作成*です。コンテンツの文章、ヘッダーやフッターに記載されている文章などは、全てHTMLによって作成されています。また、**Webページのタイトルやその他のメタ情報など、表には出ない文章もHTMLで作成可能**です。

HTMLを使うことで、*Webページをデザインする*ことも可能です。たとえば、Webページを2分割し、それぞれ別内容のコンテンツを表示させることができます。さらに、Webページの文章を太字にしたり、文字色を変えたりといった調整も可能です。

ただし、こういったデザイン調整は**HTMLではなくCSSが使われることもあります**。CSSは、Webページのデザイン調整を専門に担当する言語です。HTMLだけでもデザイン調整は可能ですが、CSSを使った方が調整にかかる時間を減らすことができます。そのため、HTMLを習得する場合、CSSも合わせて習得しておくと良いでしょう。多くのHTMLの書籍には、CSSの使い方も合わせて記載されていることが多いです。

HTMLはWebアプリ開発以外でも活躍します。たとえば、HTMLをメールで使用することができ、**メールの文章の色を付けたり、画像や動画をメール上に埋め込んだりする**ことができます。こういったデザイン調整を行うことで、より多くの情報を視覚的に伝えることが可能です。普段の業務でHTMLメールを使うことは少ないかもしれませんが、ユーザーにメール配信を行う場合などで活用できます。

## HTMLだけではできないこと一覧

続いて、*HTMLだけではできないこと*を解説します。HTMLだけではどうしても限界があり、JavaScriptなど他のプログラミング言語の力を借りないと難しいことも多くあります。

HTMLだけでは動的なWebページを作成することはできません。動的なWebページとは、*ページを開く度に表示内容が変更されているページ*のことです。具体的には掲示板やSNSなどが挙げられ、掲示板はページを開く度に書き込み内容が変更されています。

動的なWebページを作成する場合、Webページ上の変更されるデータを別途作らないといけません。データの作成はブラウザではなく、Webページを管理するサーバ上で行われます。サーバでプログラムが動いてデータ作成を行い、そのデータをブラウザに渡しているのです。

**サーバで動かせるプログラミング言語には、PHP・Python・Rubyなどがあります**。動的なWebページを作るなら、これらの言語の知識が必要です。

### アニメーションがあるWebページ

*Webページにスライドショーなどのアニメーションをつける*のも、HTML単体では難しいです。Webページにアニメーションをつける場合は、JavaScriptという言語を使います。そのため、Webページ制作の業務に就く場合、**HTMLだけではなくJavaScriptの知識も必要**です。JavaScriptはHTMLよりも難易度が高く、習得に時間がかかるため、HTMLの勉強に時間を取られすぎないよう注意が必要です。

### ユーザーが入力できるWebページ

お問い合わせフォームなど、*ユーザーに入力させるページもHTMLだけでは作成できません*。お問い合わせフォームは、入力された内容に問題がないかチェックする必要があります。入力内容のチェックはJavaScriptによって行われ、**HTMLだけでは入力内容のチェックはできません。**

続いて、*HTMLの代表的なタグを解説*します。HTMLのタグを活用して、Webページの見た目を整えます。HTMLはタグの使い方さえ覚えてしまえば、ほとんど使いこなせてしまいます。今回は、*初心者が最低限覚えたいHTMLタグをまとめました*。HTML初心者の方は、まずはこちらのタグをマスターしてください。

Webページに大きな文字で見出しが書かれているのを見たことがあるでしょう。*見出しはHTMLのh2タグを使うことでつけることが可能*です。たとえば、

と記述することで「タイトル」という見出しを作ることができます。また、**見出しの中に小さい見出しを作りたい場合はh3タグ**を使います。さらに小さい見出しを作りたいなら、h4、h5、h6タグも用意されています。

HTMLには文字のレイアウトを変更できるタグが多くあります。たとえば、*bタグを使うことで太字にすることが可能*です。また**iタグを使えば文字を斜体にできたり、uタグを使えば文字に下線を引いたり**できます。これらのタグはWebページ制作だけでなく、HTMLメールを作成する場合にも使えるでしょう。具体的には次のように書きます。

~~~ 
太字
斜体
下線
~~~

Webページ上に箇条書きを用意するためのタグもあります。*箇条書きを作る場合は、ulタグを使います*。ulタグは先頭に記号を付ける箇条書きを作成できます。さらに、olタグを使うことで、先頭に数字がつく箇条書きも可能です。また、**それぞれの箇条書きはliタグで囲う**必要があります。具体的には次のように書きます。
~~~ 
<ul>
<li>箇条書き1</li>
<li>箇条書き2</li>
<li>箇条書き3</li>
</ul>
~~~

Webページ上にリンクをつけて、*他のWebページに飛ばしたい場合はaタグを使います*。具体的には、次のように書く必要があります。

~~~ 
<a href="https://www.google.com/">Google</a>
~~~

こうすることで、Googleのページに飛ばす**リンクを作成できます。**

最後に、*HTMLを学習する方法をまとめました*。HTMLの習得は容易ではあるものの、タグの数が多く、覚えるのに時間を要します。また、Webアプリ開発を行う場合、HTMLだけでなくCSSやJavaScriptもマスターしないといけません。そのため、*なるべく効率的な方法でHTMLを素速く習得しましょう。*今回は、時間がない方でもHTMLを習得できる方法を解説します。

書籍を購入するのは、一般的な学習方法と言えます。*HTMLの書籍はWeb制作初心者向けのものが多く*、Webサイトの仕組みから丁寧に解説しているものが多いです。こういった書籍を1冊マスターすることで、Webサイト制作者としての基礎知識を身につけられます。

おすすめは**「1冊ですべて身につくHTML & CSSとWebデザイン入門講座」**です。本書は、HTMLやCSSの基礎を体系的に学べる本です。また、レスポンシブ対応やFlexbox・CSSグリッドのレイアウトなど、最近流行中の技術についても解説されており、中級者以上にもおすすめできます。

[1冊ですべて身につくHTML & CSSとWebデザイン入門講座](https://www.sbcr.jp/product/4797398892/)

2つ目の方法は、学習サイトを活用することです。*Progateやドットインストールなどのサイトなら、HTMLを手軽に学ぶことが可能*です。学習サイトは、月額1,000円程度で利用できるため、**プログラミングスクールに入会するよりもリーズナブル**でしょう。Progateやドットインストールは教材が分かりやすいのに加え、練習問題が多く掲載されているためおすすめです。

## HTMLでWebページの作成が可能！動的なページを作るなら他の言語も習得しよう

本記事では、*HTMLでできることについてまとめました*。HTMLを使うことで何ができるのか、お分かり頂けたかと思います。HTMLを使うことで、静的なWebページを作成することが可能です。ただし、入力フォームを作ったりアニメーションを作ったりするなどの動的なWebページは、HTMLだけでは作成することができません。

**Webアプリケーション開発に携わりたい場合、HTMLの知識だけでは不十分**なため、CSSやJavaScriptのスキルも抑えておくと良いでしょう。HTMLの勉強はなるべく時間をかけず、効率的に行いましょう。本記事がHTMLをこれから学ぶ方にとって、有意義なものとなれば幸いです。

今回はHTMLでできることについて解説します。HTMLはWebアプリ開発で使われる言語の1つですが、具体的にWebアプリのどの部分の開発ができるか、ご存知ない方は多いでしょう。本記事ではHTMLでできること・できないことをまとめました。

HTMLはWebページの文章の作成やデザイン調整ができる

HTMLだけでは動的なWebページの作成はできない

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

HTMLのdivタグとは？読み方・目的・使い方などを解説！ 

HTMLタグとは？HTMLタグ一覧など初心者向けに解説！ 

この記事ではHTMLの勉強法について解説しますが、その前にHTMLを学ぶ必要性や目的について確認しておきましょう。学ぶには明確な目的が必要です。「何となく」「後学のために」といった軽い気持ちで学んでも身に付きません。
学ぶ以上は、「*HTMLを学んで何をしたいのか*」「*自らの人生設計にどう役立てるのか*」を明らかにすることが先決です。

### エンジニアにHTMLの知識が必要な理由

*Webサイトは基本的にHTMLで作られています*。「ブログを作ったことはあるけれど、HTMLは使わなかった」という方は多いです。最近はCMSと呼ばれる、テキスト入力やWord操作の感覚でWebサイトの作成や更新ができるツールが増えました。
誰もが知っているWordPressではHTMLの知識が皆無でもWebページを作れますが、WordPressのアウトプットはHTMLです。つまり、Webページを作るだけなら、HTMLの知識は無くとも困ることはありませんが、次の理由から*ITエンジニアにとってHTMLは必要不可欠の知識*と分かります。

**1.Webページの最終調整にはHTMLスキルが求められる**

WordPressの操作で、シンプルなWebページは作れますが、特徴的なWebページを作るのに限界があります。仮にWordPressで作成できても、最終的な*Webページの微調整・動き・色合い整など、デリケートな調整はHTMLで直接記述することがあります*。

**2.HTMLの知識があると具体的な指示を出せる**

システムエンジニアがWebプログラマーやWebデザイナーに開発の指示・修正・微調整の指示を出す際に、*HTMLを知っているか否かによって、指示の具体性が大きく変わります*。

**3.フルスタックエンジニアへの近道**

複数の領域のスキルを持ち、オールラウンドに活躍できるエンジニアをフルスタックエンジニアと称しますが、*HTMLのスキルを持ったエンジニアは、フルスタックエンジニアを目指せる可能性*があります。
例えば、*フロントエンド開発の領域ではHTML・CSS・JavaScriptの3つを習得していれば、ほぼ独力でフロントエンド開発を担えます*。
さらにPHPやPythonなどの言語スキルを身に付け、*フロントエンド開発に加えてバックエンド開発を担えると、フルスタックエンジニアとして活躍の機会*が広がるでしょう。

HTMLは"Hyper Text Markup Language"の略語です。Languageは言語と訳されることが多いため、プログラム言語の一種と思いがちですが、プログラム言語ではありません。

HTMLのLanguageは言語の意味ではなく、文法やルールの意味合いです。*HTMLはプログラミング言語ではなく、マークアップ言語なのです*。

私たちが日常利用しているWebページは、視覚的に分かりやすくタイトル・文字・画像などが配置されています。一方、コンピューター側からWebページを見てみると、単なるコードの羅列です。
実は**HTMLがコンピューターと人間を取り持ち、翻訳者の役割を果たしています。**
HTMLがコンピューターに対して、Webページに表示する文字・画像のサイズ・配置を教え、その指示を受けたコンピューターが人間の視覚に訴えるページを作成します。
次に、HTMLのHyper Text （ハイパーテキスト）について確認しておきましょう。

### ハイパーテキスト（HyperText）とは

「HyperText」のHyperは直訳すると「超」です。「HyperText」はテキストを超越するテキストという意味になります。では、何が「超」なのでしょうか？

Webページには「ハイパーリンク」というものが頻繁に登場します。このハイパーリンクには、元の語句から直接、関連文章や説明文書を呼び出す機能があります。
このように*語句や文章を「関連づける」ことをハイパーリンク*と呼び、**ハイパーリンク機能を持っている文書を「ハイパーテキスト」と呼んでいます**。この「ハイパーテキスト」から成り立っているのがHTMLの特徴の1つです。

HTMLがハイパーテキストで構成されていることは理解できました。ではマークアップ"Markup"とは何を意味するのでしょうか？

「タグ（Tag）」と呼ばれる記号によって文章を囲い、**「マークアップ（Markup）」は文章に「目印をつけて」意味を持たせること**です。

*「タグ」（Tag）とはWebページ上での表示のさせ方を指定する「命令文」*であり、テキストをその意味ごとに"&lt;&gt;"で囲みます。

この**タグをコンピューターが読み取り、人に分かりやすい表示に変えてくれる**という仕組みです。

たとえば、見出しであれば階層の上から&lt;h1&gt;~&lt;h6&gt;を用います。大見出しの場合は&lt;h1&gt;大見出しの文言&lt;/h1&gt;と記述します。

本文であれば、段落を表す&lt;p&gt;本文&lt;/p&gt;を用います。

他、*画像は&lt;img&gt;タグを用います。&lt;img src="画像ファイル名"/&gt;の様に記述*します。

Webページの作成において、HTMLと切ってもきれない関係にあるのがCSSで、CSSは"Cascading Style Sheets"の略語です。
CSSは化粧に近いものと考えてください。**HTMLだけで作られたWebページに見栄えよく化粧を施したり、動きを付ける役目**を持ちます。HTMLを学習する際には、ぜひCSSも学びましょう。

HTMLが主にWebページの作成に使われていることは理解できましたが、実はHTMLはWebページ以外にも活用されています。ここでは、*HTMLが利用されている主な3つの領域*について紹介していきます。

世界中のWebサイトのほとんどがHTMLによって開発されています。それを確認する方法があります。

HTMLで記述されているソースコードを確認するには、*Windowsパソコンなら「Ctrl+U」、Macの場合は「⌘+Option+U」を同時に押すことでソースコードが現れます。*

**Webサイトの裏側はすべてHTMLで記述されている**のです。

普段利用している*EメールでもHTMLが使われているケースが増えています*。特に多いのは、広告メールです。メールを開くと、あたかもWebページのように画像やアニメーションが見られるメールを受け取ったことがあるでしょう。
ビジネスメールではテキストメールが主流ですが、**メルマガや登録サイトのお知らせメールなども「HTMLメール」が大半**です。

HTMLはOSに制限されない点が強みです。iOSやAndroidOSに関わらず、HTMLは共通の言語です。スマホアプリの開発では、iOSはObjective-CやSwiftなどを利用し、Androidは主にJavaを使います。iOSとAndroidの双方に対応できるスマホアプリを開発する場合は、基本的に二重開発を余儀なくされます。

しかし、**JavaScriptと、HTML（HTML5）を使うことで、iOSとAndoroid兼用のスマホアプリの開発が可能**です。
このようなアプリを*ハイブリッドアプリと言い、開発コストの低減が図れる*ことから注目を浴びましたが、動作面やパフォーマンス面の弱点があり、必ずしもスタンダードにはなっていません。

ここまででHTMLの概略は理解できたでしょうか。ここからは*HTMLの勉強法について紹介*していきます。何から勉強を始めるのか迷うところですね。

スクールに通う、オンラインスクールを受講するといった方法も選択肢としてはありますが、本格的にスクールに通う場合は、数十万円の受講料が必要です。オンラインスクールも有料のスクールは数万円程度かかります。
しかしHTMLやCSSは、さほど難易度は高くないため、独学が可能です。以上の理由から、ここでは独学をおすすめします。

### 難易度や習得に必要な勉強時間

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