2021年も引き続きブログ好調です。読者に感謝。

「HTMLとは?」を基礎からわかりやすく解説【初心者向けの勉強法も】

【超初心者向け】HTMLとは!?【基礎からわかりやすく解説】

プログラミングを勉強したいな。

HTML、CSS、JavaScript、PHP、、、。

いっぱいあるけど、とりあえずイチバン簡単そうなHTMLから勉強してみよう。

だれか、初心者の僕にわかりやすく解説してくれないかな…?

 

こんなお悩みを解決する記事です。

HTML(エイチ・ティー・エム・エル)はプログラミングの最も基本であり、ウェブデザインの全体像を知るために必要不可欠なプログラミング言語です。

これからウェブサイトを作ってみたいという人はもちろん、WordPressのブログをカスタマイズしてみたいという人にとっても、HTMLの基礎知識は必要不可欠なので、本記事を参考に仕組みと役割をしっかり理解しておきましょう。

超初心者でもHTMLの基礎がわかるよう、ていねいに解説するので、最後まで読んでいただければ幸いです。

 

前談:HTMLはプログラミング言語じゃないってホント?

HTMLがプログラミング言語だって?

冗談言わないでくれよ。

HTMLはプログラミング言語なんかじゃないさ。

HTMLなんか勉強しないで、PHPとかPhythonとか勉強しなよ。

 

プログラミングに詳しい人のなかには、このようなことを言う人もいます。

僕の個人的見解ですが、この主張は半分正しくて、半分間違いです。

というのも、プログラミング言語の定義は”動作処理が行われるもの”でして、HTMLは動作処理をしてくれる言語じゃないからです。

とはいえ、今後より深いプログラミングの知識を学んでいくにあたって、HTMLを勉強しなくて良いというのは絶対的に間違っています。

このあたりも、本記事の中で詳しく解説しますね。

 

スポンサードサーチ

【HTMLとは】初心者向けに基礎を徹底解説

HTMLとは超初心者向け基礎の基礎

まずは、HTMLの基礎知識を理解しましょう。

この章では、下記の点について深堀り解説します。

 

  1. HTMLの基礎知識【HTMLとは】
  2. HTMLでできること
  3. HTMLでできないこと
  4. HTMLがプログラミング言語じゃないと言われる理由
  5. HTMLを勉強したほうが良い理由

 

最初から全てを理解しようとしなくてもOKです。

わからないところがあっても、ゆっくりと、マイペースで読み進めてみてください。

 

1. HTMLの基礎知識【HTMLとは】

HTML(エイチ・ティー・エム・エル)の正式名称は、Hyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)と言いまして、プログラミング言語の中でも、比較的簡単にマスターできる言語のひとつです。

世界中に存在するウェブサイトのほとんどがHTMLを基盤に作られていまして、ブログやウェブサイトを運営していくには最低限の知識を持っておかなくてはならない言語になります。

 

HTMLって何のためにあるの?

HTMLは、コンピューターが理解できるように文字や写真を表示させる役割を担っています。

たとえば、「これは見出しです」「ここにはこういう写真を挿入します」「ここからここまでが一つの記事です」みたいな指示を、コンピューターにわかりやすく伝えるためにHTMLという言語を使って構成するイメージです。

 

具体例を挙げてみます。

 

今日のニュース

今朝、僕は学校に遅刻しそうになったので、パンをくわえながら走って学校に向かっていました。
交差点で女の子とぶつかり口論になりそうでしたが、遅刻してはいけないのでとりあえずその場を立ち去りました。
学校に着くと、その女の子が僕の隣の席に座ってました。
なんと!その女の子は、今日から僕の学校にやってきた転校生だったんです!!

 

こんな感じの文章をブログに掲載したいとき、文字だけを書いても、コンピューターはどこが見出しで、どこが本文なのかを理解してくれません。

そのため、ただの文章を書いただけでは、味気ない見た目になってしまいます。

 

html基礎_ただの文章を書いただけでは味気ない見た目になってしまう

 

そこで、HTMLを使って、「ここが見出しで、ここが本文だよ。」というのを指定してあげる必要があります。

詳しい書き方は省略しますが、上記の文章をHTMLを使って書くと、こんな感じの見た目に仕上げることができます。

 

html基礎_HTMLを使って書くと見た目が整う

 

かなり読みやすくなったと思います。

 

このように、見出しを作ったり、文章を改行したりして、ページの体裁を整えることができるようになるのがHTMLの特徴です。

この行為を専門用語で”マークアップ”と呼ぶので、HTMLは文章をマークアップするための言語という意味で、『マークアップ言語』と呼ばれたりします。

 

HTMLを確認する方法:簡単です

先ほど、世界中にあるほとんどのウェブサイトがHTMLを骨組みにして作られているとお伝えしました。

実際に、どんなHTMLの構図で、どんなサイトが作られているのかを調べる簡単な方法があるので、あわせて紹介しておきます。

 

  1. 適当なサイトで右クリック
  2. ページのソースを表示するをクリック

 

たったこれだけです。

参考までに、僕のブログのHTMLを見てみましょう。

 

HTMLを確認する方法:簡単です

 

上記が、このブログのHTMLソースになります。

このように、特定の箇所を特定のHTMLでマークアップしながら書いていくことで、ウェブサイトが出来上がるんですね。

 

2. HTMLでできること

上記の通り、HTMLを使えば、”コンピューターが理解できるようにコンテンツの体裁を指定する”ことができるようになります。

HTMLを使って、コンピューターに指示を出せることはたくさんありますが、いくつかまとめてみます。

 

HTMLでできること【具体例】

  • 見出しが作れる
  • 本文を段落ごとに分けられる
  • 改行できる
  • 絵や写真を挿入できる
  • 表が作れる
  • ページのレイアウトを調整できる

 

これらの要素を組み合わせることで、ウェブサイトを作ったり、メルマガをデザインしたり、簡単なアプリを作れるようになります。

 

3. HTMLでできないこと

HTMLを使えば、ウェブサイトの骨組みを作れるようになりますが、HTMLだけではできないこともあります。

具体的には、①綺麗な装飾をする、②サイトに動きをつける、③アクションを起こす、などです。

 

このブログのトップページを参照してもらいたいのですが、HTMLだけでは、ページ上部にある3つの画像をスライド表示させたり、アイコンの上にマウスを乗せるとフワッと浮き上がるようなアクションをつけたりすることはできません。

また、お問い合わせフォームを作って自動メール送信機能をつけたりすることもできません。

 

”HTMLを使えば、サイトの骨組みは作れるけど、装飾はできない”というところは、あらかじめ認識しておきましょう。

> 参照:このブログのトップページ

 

4. HTMLがプログラミング言語じゃないと言われる理由

前談で紹介した”HTMLがプログラミング言語じゃない”と言われる理由には、上記の”HTMLではできないこと”が関係してきます。

というのも、プログラミング言語の定義として、”動作処理を行うことができるもの”という認識があるからです。

 

”動作処理”とは?

動作処理を理解するには、電卓が良い例だと思います。

電卓は計算を自動化することができるツールですよね。

「1 + 1 =」と入力すれば、「2」という数字が返ってくるように、計算という動作を自動で処理してくれます。

 

HTMLだけでは、この動作処理ができません。

あくまで、作り手の意図するようにコンピューターに指示を出し、その指示を受けたコンピューターが要素を認識して表示させているだけです。

 

これが理由で、一部の人から「HTMLはプログラミング言語じゃない」と言われてしまっているんですね。

 

5. HTMLを勉強したほうが良い理由

なるほどね。

じゃあ、やっぱり、骨組みしか作れないHTMLより、動作処理ができる他の言語を勉強したほうが良いんじゃないかな。

プログラミング見識者が言うことも間違ってないかも…。

 

ここまで読んで、そう感じた人もいるかもしれません。

たしかに、HTMLでできることは限られているのは紛れもない事実ですが、この段階でHTMLの勉強をスキップしてしまうのはやめておきましょう。

というのも、HTMLを勉強すると、その後のプログラミング習得スピードが格段に上がるからです。

何事も基礎がしっかりしていると成長が早いように、プログラミングもHTMLの知識有り・無しでは、成長速度が変わります。

今後、より深いプログラミングスキルを効率的に習得したいなら、HTML学習はマストですよ。

 

具体例:HTML学習をおすすめする理由

繰り返しになりますが、HTMLはプログラミングの基礎です。

僕が思うに、HTMLを学ぶことで得られるメリットは3つあります。

 

HTMLを学ぶメリット
  1. ウェブサイトの仕組みがわかる
  2. 自分でウェブサイトを作れるようになる
  3. その他のプログラミング言語を使って、どのようにサイト表示させたら良いのかがわかる

 

HTMLの知識を身につければ、かっこいいサイトを見つけたときに、そのサイトがどういう構成で作られているのかを理解することができるし、自分のブログに応用することもできます。

また、JavaScriptなどを使って、HTMLのサイトにアクションをつけることも可能になります。

 

スポンサードサーチ

【おすすめのHTML学習法】無料で学ぶことも可能です

HTMLのおすすめ勉強法って?

HTMLを学ぶ方法は下記の通り。

 

  1. プログラミングスクールに通う
  2. 本で勉強する
  3. ネットで独学

 

それぞれのメリットとおすすめの学習法を解説するので、HTMLの勉強を頑張ってみようかなと思っている人は参考にどうぞ。

 

1. プログラミングスクールに通う

最短で学習可能な方法が”プログラミングスクールに通う”です。

独学で学ぼうとすると、つまずいたときに自分一人ではどうにもならなかったり、自分の成長レベルが把握できなかったりしがちですが、教室に通えば、プロのエンジニア講師と二人三脚で学習を進めることができます。

 

世の中にはたくさんのプログラミング教室がありますが、ここではそれぞれの目的にあったおすすめのプログラミング教室を紹介します。

相談・カウンセリングは無料。

一度、コースの内容やカリキュラムなどを詳しく聞いてみると、自分に合った勉強法が見つかるはずです。

 

HTML学習におすすめ:プログラミングスクール

CODEGYM Monthly|コーチング主体のプログラミングスクール

1. プログラミングスクールに通う_CODEGYM Monthly|コーチング主体のプログラミングスクール

CODEGYM Monthly|コーチング主体のプログラミングスクールは、個別の目標達成に特化したプログラミング学習教室です。

講師の現役エンジニアと相談し目標を設定して、自分専用の学習ロードマップを組むことができます。

ジムに通う理由が人それぞれ違うように、プログラミングスクールに通う目的も本人次第です。

CODEGYMで個別のカリキュラムに沿って学習すれば、自分の目的に合わせた効果的な勉強が可能になるので、その点は特におすすめできます。

 

ブログ運営でSEOを理解するためにHTMLの基礎を学びたいよ。
オレもこの機会にウェブデザインを学んでみようかな。いまや小学生でも授業があるくらいだし。

営業職だけど、エンジニアと仕事をするなら最低限のプログラミング知識って必要だよな…。

 

こんな感じで、プログラミングを学ぶ理由は人それぞれですが、CODEGYMなら、どんな目的であれ自分に合わせて最短でHTMLを学ぶことが可能です。

 

料金も”学習した分だけ支払う”というサブスクリプション制なので、「途中で諦めてしまうかも…。そしたらお金の無駄になっちゃうかな…。」という不安も必要ありません。

”HTMLの右も左もわからないから自分も続けられるか不安”という人にはありがたい教室です。

> CODEGYM:無料個別相談はこちら

 

ポテパンキャンプ|Webエンジニア輩出No1プログラミングスクール

 

 

 

2. 本で勉強する

プログラミング教室に通わず、一人で始めてみたい人は本を買いましょう。

HTMLの知識はググれば出てくることもありますが、1冊でもいいので本を手元に置いておくと、必要なときに必要な情報だけ逆引きできたり、わからない部分を重点的に繰り返し読み返すことができます。

HTMLの学習におすすめの書籍を2つほど選びました。

 

HTML学習におすすめ:書籍で学ぶ

 本当によくわかるHTML&CSSの教科書

HTMLの基礎を初心者向けに解説している一冊。

内容もかなり優しく書かれているので、これからHTMLを勉強したい人にはおすすめの本です。

HTMLの知識が一切なくても大丈夫な内容でして、この本に書かれている内容に沿って進めればある程度のウェブサイトが作れるようになります。

 

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

初心者がHTML学習に必要な要素だけを凝縮した内容の一冊。

最初のうちは必要ない高度な内容は省かれつつ、ウェブサイトの仕組みから実際に作る過程がほど良くまとまっている本です。

サンプルコードもダウンロードできるので、自分でHTMLを書きつつ、サンプルと見比べながらどこが間違っているのかを実践的に学ぶことができると思います。

Amazonレビューもめちゃくちゃ良いです。

 

3. ネットで独学

3番目の学習方法はネットで独学です。

ネット学習のメリットはなんと言ってもコストゼロな点です。

ただし、壁にぶつかったとき、自分だけで乗り越えなくてはならないので、ある程度の覚悟も必要です。

独学におすすめのサイトを3つほど紹介するので、プログラミング教室に通う人も本で勉強する人も、ネットを使って予習復讐すれば、よりHTMLの知識が深まると思います。

HTML学習におすすめ:独学できるサイト3選

 

どのサイトも段階ごとに知識をつけていける仕組みになっていますが、ドットインストール、Progateは日本語にも対応しています。

個人的な見解ですが、海外サイトの方が情報量に優れていると思うので、「べつに英語でもいいよ」という人はLearn to Codeをどうぞ。

 

ちょっとだけ宣伝しておくと、僕のブログでもHTMLの基本的な書き方を初心者向けに解説しています。

下記の記事を参考に、まずは手を動かしてみると、自分に合った学習方法が見えてくるかもです。

> 参考記事:HTML入門の手引き:基本の書き方とタグの使い方【初心者向けに基礎知識をガッツリ解説】

 

スポンサードサーチ

HTMLはプログラミングの基礎【初心者こそ勉強すべき】

まとめ

本記事は以上です。

HTMLの基礎知識、できること・できないこと、おすすめの勉強法などを解説しました。

HTMLは、この先どんなプログラミング言語を勉強するうえでも骨格となる重要な基盤なので、プログラミング初心者こそ、ないがしろにせず学んでいきましょう。

記事の中で紹介したプログラミングスクールなら相談無料なので、ひとりでなんとかしようとせず、まずはプロの意見を聞いてみても良いと思います。

僕もTwitterのダイレクトメッセージで簡単な相談なら乗れるので、もしよろしければお気軽にお声がけくださいませ〜。

> アラサー男子 in L.A.のツイッター

おわり。