マークアップ言語HTMLの特徴【プログラミング言語ではないからこそ学習しやすい】

/*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は、ウェブ開発で画面レイアウトに使うマークアップ言語です。プログラミング言語のような制御構文を持ちません。

ウェブページの開発では、レイアウトに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&CSSはあまり得意ではありません。このサイトのデザインがいまいちなのはそのせいです。ごめんなさい。
プログラミングの始め方・独学の勉強法【おまけ:今すぐウェブページを作ってみよう】

まとめ

  • HTMLはプログラミング言語ではなく、「HyperTextMarkupLanguageハイパーテキストマークアップランゲージ」というマークアップ言語。
  • プログラミング未経験者の場合は、本格的なプログラミング学習の前にHTMLを学ぶことでコーディングスキルが身に付く。
  • 言語の未経験者の場合はHTML&CSSから学習を始めると、ウェブページを作る楽しさのなかで身に付けていくことができる。
  • プログラミング未経験者でもとっつきやすいので、自分がプログラミングやコーディングに向いているかどうかの判断材料になる。
  • パソコンスキルに不安がある方は、プログラミングスクールを利用するのが良い。 テックアカデミー HTML&CSSトレーニング は、HTML&CSSを2週間で学習できるコースで、未経験者におすすめ。
  • この記事を書いた人

non

小学生のときにBASIC言語でプログラミングを覚え、社会に出てからはPythonを主力に通信業界で無線設計とGISシステム開発に携わること12年目。損害保険営業→自動車製造→運輸荷扱作業→建築現場作業→ネット通販企画→カーナビ品質管理→携帯無線設計SEと職を変えてきたジョブホッパーです。