HTMLとは？基本をわかりやすく解説！【初心者向け】

現代社会において、私たちの生活には欠かせないWEBサイト。

この、WEBサイトを構成する上で欠かせないのが、HTML（エイチティーエムエル）です。

本記事では、全く知識のない初心者の方にも理解できるように、HTMLの基本をわかりやすく解説していきます。

HTMLとは？

まずは、HTMLについてざっくり解説をします。

HTMLとは、Hyper Text Markup Language（ハイパーテキストマークアップランゲージ）の略で、コンピュータに対して文書構成を伝える為の言語です。

文書構成を伝える為の言語であることから、マークアップ言語と呼ばれています。
※HTMLは、プログラミング言語ではない点にご注意ください。

WEBサイトを作成する時には、HTMLやCSS、JavaScript等の言語を使用してファイルを書いていきます（コーディング作業）が、それぞれ役割が異なっています。

上記の表のように、様々な言語を使ってファイルを書いていく事によって、普段私たちが目にするWEBサイトが作られています。

HTMLについてざっくり説明するとこんな感じになります。次に、もっと理解を深めていただく為に、WEBサイトの構造について解説します。

WEBサイトの構造について

お悩みさん

文書構成を伝える？？どういう事？

では、イメージを持ってもらうために、普段目にしているWEBサイトと、WEBサイトの構造を比較してみましょう。

私たちは普段、左（スマホの場合は上）の画面を目にしますが、ファイルの構造を見てみると、右（スマホの場合は下）みたいに呪文のような文字列がたくさん並んでいるのが分かります。

HTMLは、WEBページに表示したい文章などを「<>」で挟まれたタグと呼ばれる特殊な文字列で囲んで書いていきます。

では、例を一つ挙げます。

今日の天気は、晴れです。

この文章を、HTMLで表すと下記のようになります。

<p>今日の天気は、<strong>晴れ</strong>です。</p>

今回の例文では、「<p>（段落を意味するタグ）」と「<strong>（重要を意味するタグ）」というタグが登場していますが、それぞれのタグには意味があり、適切に囲む事で、コンピュータに文書構成を伝える事ができます。
※タグの数は膨大で、それぞれの意味は、覚えるなり、調べたりして対応する必要があります。

ちなみにタグに、大文字、小文字の区別はありません。

<!-- 大文字バージョン -->
<P>今日の天気は、<STRONG>晴れ</STRONG>です。</P>

<!-- 混同バージョン -->
<p>今日の天気は、<strong>晴れ</STRONG>です。</P>

大文字で書いても、混同させても問題ありません。しかしながら、小文字を使うのが一般的です。

こんな感じで、HTMLを使ってコンピュータに文書構成を伝えています。

HTMLは、どこに書く？

お悩みさん

HTMLってどこに書くの？

HTMLは、「〇〇.html」というHTMLファイルを作成して記述していきます。HTMLファイルとは、HTMLのルールに沿って書かれているテキストファイルの事です。

ファイルを作成したら、一般的には、コーディング作業に特化したテキストエディタを使用して、HTMLを書いていきます。

※HTMLファイルの作成方法について知りたい方は、こちらの記事をご覧ください。
※テキストエディタについて知りたい方は、こちらの記事をご覧ください。

HTMLは難しい？

結論、難しくはないです。

HTMLは、文書構成を伝えるのが主な目的ですので、タグの意味・使い方が分かれば大した事はありません。

パッとみると、HTMLを書くのは相当に難易度が高いように見えると思いますが、それは、慣れていないだけで、普段からHTMLに触れていれば、自然と意味が分かるようになってきます。

HTMLを勉強する方へ

HTMLを勉強する際は、当ブログのような解説記事を参考にするのも、動画で勉強するのも人それぞれですが、初心者の方に是非手に取っていただきたい参考書がありますので、ご紹介しておきます。

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

書店でも、通販サイトでも「ずっと、一番売れているHTML本！」として紹介されていますが、これ以上ないぐらいコンパクトにまとめられた解説やサンプルの分かりやすさが評判の参考書です。

筆者も、HTMLの勉強を始めた頃手に取りましたが、この参考書を読む事で、HTMLの基本はしっかり抑えられました。

ご興味のある方は、是非手に取ってみてくださいね！

まとめ

今回は、HTMLの基本について解説しました。

HTMLという単語が出てきたら、「WEBサイトを構成している言語の一つで、文書構成を伝える為のものなんだな」と思ってください。