/*HTML*/
<p><strong>HTMLは、ウェブページやアプリの画面レイアウトに使われる言語です。</strong></p>
<p>主にCSSと一緒に使用されます。そのため「HTML&CSS」と<ruby>一括<rt>ひとくく</rt></ruby>りにされています。</p>
<ul>
<li>HTML：ウェブページやアプリの画面レイアウト</li>
<li>CSS：ウェブページやアプリ画面装飾・デザイン</li>
</ul>
HTMLは、ウェブページやアプリの画面レイアウトに使われるマークアップ言語です。
主にCSSと一緒に使用されます。そのため「HTML&CSS」と一括りにされています。
- HTML：ウェブページやアプリの画面レイアウト
- CSS：ウェブページやアプリの画面装飾・デザイン
上のコードは、この文章に使用しているHTMLです。簡単に言うと、ウェブページの中身ということです。
HTMLとは
HTMLは「Hyper Text Markup Language」の略です。意味は「リンクし合うことができるハイパーテキスト、且つマークアップで記述する言語」となります。
HTMLの学習において英語や数学の知識は必要ありません。<タグ>～</タグ>の種類を覚えていくだけです。しかも、タグの種類はそれほど多くはありません。
プログラミングスクールのほとんどのコースでは、HTML&CSSがカリキュラムに含まれています。それは、プログラムの処理結果をウェブ画面に出力するケースが多いためです。出力プログラムのなかにHTMLを記述するため、プログラミング言語を学習する際にはHTMLもセットで学習する必要性が出てくるわけです。
もちろん、HTML&CSSだけを学習することにも意義はあります。
- ウェブデザイナーを目指したい
- ホームページを作りたい
- ブログを運営したい
このような目的なら、HTML&CSSのスキルだけでも十分です。
この記事では、HTMLの特徴について解説します。
-
-
プログラミング言語の特徴【できること・得意分野を解説】
HTMLの特徴
- マークアップ言語
- タグで構造を記述
- ウェブページの正体（中身）
HTMLは、マークアップ言語という言語です。そのため、学習においても単純にタグを覚えていくことで習得できます。
HTMLの用途で身近なのはウェブページです。このページもHTMLで構成されています。
パソコンのウェブブラウザでGoogleChromeをお使いの方は、F12を押してみると、表示中のウェブページを構成するHTML（ページの中身）を見ることができます。
プログラミング言語との違い
| HTML | プログラミング言語 | |
|---|---|---|
| 難しさ | 初心者にも簡単。 | 初心者には難しい。 |
| 記述 | ウェブやアプリの画面レイアウトを記述。 | 処理・制御の手続きや関数を記述。 |
| 制御構造 | 制御構文を持たない。 | 繰り返しや条件分岐など制御構造を持つ。 |
| 学習方法 | タグを覚えていく。英語・数学の知識は不要。 | 構文やロジックを理解していく。数学の知識が必要。 |
HTMLは、ウェブ開発で画面レイアウトに使うマークアップ言語です。プログラミング言語のような制御構文を持ちません。
ウェブページの開発では、レイアウトにHTMLが、装飾やデザインにCSS（カスケーディングスタイルシート）が使われます。そのため、HTMLとCSSをセットで「HTML&CSS」として呼ばれています。
プログラミング未経験者の場合は、プログラミング学習に入る前にHTMLを学ぶことで、コーディングに慣れることができます。
HTMLとCSSの関係性
HTMLとCSSは、ウェブページのレイアウトとデザインの関係性を持っています。
このページも、HTMLでレイアウトして、CSSでデザインしています。
HTMLの記述にはタグという表記が使われます。タグで表記した文字や範囲をCSSで装飾していくことでウェブページが作られていきます。
未経験者の場合はHTML&CSSから学習を始めると、ウェブページを作る楽しさのなかでコーディングに慣れていくことができます。
HTML&CSSの学習に順序はなく、同時に学習していくことになります。
HTMLの難易度
HTMLは、ほかの言語と比べるまでもなく、もっとも易しい言語です。その理由は次のとおりです。
- マークアップ言語であるため、記述の仕方が簡単。
- 制御構文を持たないため、タグを覚えていくだけ。
- 英語や数学の知識は要らない。
- HTMLで記述した結果を、ウェブブラウザで目でチェックできる。
私のプログラミング（マークアップ含め）経験においても、1ヵ月程度の学習時間で習得できた言語です。
HTMLの学習方法
HTMLは独学でも学習を始めやすいです。
言語の未経験者にとってHTMLが学びやすい理由は次のとおりです。
- タグ構造だから単純：タグを使って構造を記述するだけなので理解しやすい。
- 学習方法がウェブページ：ウェブページを作成しながら学習していける。
- 環境構築がいらない：パソコンさえあれば学習を始められる。
HTMLはタグという表記方法で記述します。タグは単純で理解しやすく、コーディングの基本を学ぶことができます。
また、HTMLはウェブページを作成しながら学習するので、身近で、学習の目的を見出しやすいです。パソコンを持っていれば今すぐに学習を始められます。
プログラミング未経験者でも始めやすいので、自分がプログラミングやコーディングに向いているかどうかの判断材料にもなります。
独学で学習する場合は、参考書を1冊手元に置いておくと学習順序や計画を立てやすいです。
パソコンスキルに不安がある方は、プログラミングスクールを利用するのが良いでしょう。
テックアカデミー HTML/CSSトレーニング
は、HTML&CSSを2週間で学習できるコースです。未経験者におすすめです。
HTMLで挫折してしまう人もいる
これは、このページのHTMLです。
HTMLの学習が、このような大量のHTMLを解読しながら学んでいくものだと勘違いすると、HTMLで挫折してしまいます。
私がこのページを作るときに自分で書いたのは、実は白字の部分だけです。あとの<p>とか<span>とかのHTMLタグは、ワードプレスが自動的に付与してくれています。
未経験者のなかには、マークアップ言語やプログラミング言語が「英語で書かれている」と思っている人も多いのですが、そのせいで学習方法を間違えてしまいます。
英語学習と混同してHTMLをリーディングしようとする人がいますが、それは意味がありません。解読するのではなく、HTMLタグを手で打ちながらウェブページを作り上げていくのが、HTMLの正しい学び方です。
自分がコーディングに向いているかどうか不安な場合は、プログラミングスクールの無料体験を利用することで判断できます。
プログラミングスクールの多くは受講希望者にカウンセリングを実施しています。しかし、無料体験できるスクールは意外と少ないです。
TechAcademy
はオンライン無料体験を実施しています。HTMLに興味がある方はぜひ利用して体験してみると良いでしょう。
よく使われるHTMLタグ
| 表示 | HTMLタグ |
|---|---|
| 見出し | <h2>～</h2> <h3>～</h3> |
| 段落 | <p>～</p> |
| リンク | <a href="https://...">～</a> |
| 画像 | <img src="https://..."> |
| 箇条書き リスト |
<ul> <li>～</li> <li>～</li> </ul> |
| 番号付き リスト |
<ol> <li>～</li> <li>～</li> </ol> |
| 表 | <table> <tr><th>～</th></tr> <tr><td>～</td></tr> </table> |
| 範囲 | <span>～</span> |
| ブロック | <div>～</div> |
ウェブページをレイアウトするときに頻繁に使うHTMLタグです。
実はこのページを作るときも、このくらいのHTMLタグしか使っていません。
あとは、CSSで色付けしたりデザインを整えていくと、見栄えするページになっていきます。
-
-
プログラミングの始め方・独学の勉強法【おまけ：今すぐウェブページを作ってみよう】
まとめ
- HTMLはプログラミング言語ではなく、「HyperTextMarkupLanguage」というマークアップ言語。
- プログラミング未経験者の場合は、本格的なプログラミング学習の前にHTMLを学ぶことでコーディングスキルが身につく。
- 言語の未経験者の場合はHTML&CSSから学習を始めると、ウェブページを作る楽しさのなかで身につけていくことができる。
- プログラミング未経験者でもとっつきやすいので、自分がプログラミングやコーディングに向いているかどうかの判断材料になる。
- パソコンスキルに不安がある方は、プログラミングスクールを利用するのが良い。
テックアカデミー HTML/CSSトレーニング
は、HTML&CSSを2週間で学習できるコースで、未経験者におすすめ。