これから学ぶ!HTMLとは何か?を初心者の為に詳しく解説!



これから学ぶ!HTMLとは何か?を初心者の為に詳しく解説!

この記事では、これからプログラミングを勉強していきたい人にむけて、HTMLの基本を詳しく解説していきます。HTMLはプログラミングを学びたい人が最初に押さえておきたい、習得が比較的しやすい言語です。

現在、エンジニアの需要に供給が追いついていない状況が続いています。そんな中で、これから求められるエンジニアとして働きたいと考えている人は、HTMLを理解することがその第一歩となるでしょう。

目次
  1. HTMLとは?
  2. HTMLの「タグ」とは?
  3. HTMLタグの使用例
  4. リンクを挿入する方法:aタグ
  5. 見出しを挿入する方法:hタグ
  6. 画像を挿入する方法:imgタグ
  7. 超・基本のHTMLタグ
  8. pタグ
  9. liタグ
  10. imgタグ
  11. aタグ
  12. hタグ
  13. まとめ

HTMLとは?

image HTMLを簡潔に説明してしまうと「Webページを作るための基本的なマークアップ言語の一つ」と言うことができます。

マークアップ言語とは、テキストの一部を「タグ」ではさむことで構造やデザインなどを記述していくもののことです。タグについては後述します。

image

この暗号のような文字たちは、実はあなたが見ているこのTech2GOをHTMLなどのコードにしたものなんです。

で、この長いコードをブラウザ(ChromeやFirefox、Safariのようなインターネットを見るためのアプリケーション)で読み込むと、いつも見ているようなきれいなページになります。

image

よく見かけるタイプのWebサイトの他には、テキストメールであったり、WordPressなどを使ったブログサイトにもHTMLが使われています。

世界中にあるWebサイトがHTMLを使って構築されていると言っても過言ではありません。普段見ているあのサイトも、そのサイトも、きっとHTMLが使われていることでしょう。

HTMLの「タグ」とは?


image さて、ここからはHTMLのタグについて説明していきます。

簡単に言ってしまえば、タグとは「人間の書いた文章に与える効果を、機械が理解するためのしるし」のようなものです。

実際、マークアップは「しるしを付けること」を意味しているので、HTMLがマークアップ言語たるゆえんがタグと言うこともできます。

とはいえ、概念はざっくりと理解しておけば大丈夫でしょう。実際コードを書くうえでは、「タグ=< >(山かっこ)で囲んだ中身」くらいの認識があれば特に問題はありません。

HTMLタグの使用例

image タグに関する大まかな概念を理解したところで、実際の使用例を見ていきましょう。

リンクを挿入する方法:aタグ

HTMLでCode部はこちら」というリンクを表現したいとします。

そんなときにはaタグ(リンクタグ)と呼ばれるHTMLタグを以下のように使用します。 :html <a href="https://blog.codecamp.jp/“>Code部はこちら</a>

すると、<a>(開始タグ)と</a>(終了タグ)ではさんだ「Code部はこちら」というテキストをユーザーがクリックすることで、href=“”で指定した「https://blog.codecamp.jp/(コード部のトップページ)」に移動することができるようになります。

見出しを挿入する方法:hタグ

見出しとは、新聞や雑誌、Webサイトの記事などで、記事の内容が一言でわかるようにつけられた小タイトルのようなものです。

ふだん何気なく見ている新聞や雑誌、Web記事で本文よりも文字が大きなところがありますよね。あれが見出しです。

この項のタイトル「見出しを挿入する方法:hタグ」も実は見出しタグを使用しています。

HTMLで見出しを作りたいときには、hタグ(見出しタグ)を用います。見出しタグは数字によって文字の大きさが分かれており、最大のものがh1、最小のものがh6です。

aタグなどと同じように、 <h1>(開始タグ)と</h1>(終了タグ)で見出しのテキストをはさみます。すると、文章の文字よりもサイズが大きな見出しテキストができあがります。

画像を挿入する方法:imgタグ

HTMLでブラウザに画像を表示したいとします。そのとき使うのがimgタグ(画像タグ)と呼ばれるHTMLタグです。

<img src=“(挿入したい画像のリンク)” />

と記述することによって、任意の場所に画像を挿入することができます。

Code部のとある記事で例を示すと、以下のとおり。

image

お気づきかもしれませんが、imgタグには終了タグがありません。

超・基本のHTMLタグ

image ここからはHTMLを書くさいに使う頻度の多い、基本のタグを紹介していきます。これからHTMLを学ぶさいに何度も登場するタグばかりなので、これを機会に覚えてしまいましょう。

pタグ

段落を表現したいときに使用するのが、こちらのpタグです。

<p>テキストをpタグではさむと</p>
<p>段落ができます。</p>

上記のようにテキストを<p>と</p>ではさむことで、以下のような段落ができあがります。

テキストをpタグではさむと

段落ができます。

liタグ

箇条書きなどを表現したいときに使用するのが、こちらのliタグです。

1から順に数え上げるさいには、<li>と</li>とではさんだテキストを、さらに<ol>と</ol>ではさみます。

以下のように書くと…

<ol>
 <li>りんご</li>
 <li>ごりら</li>
 <li>らっぱ</li>
</ol>

こんなふうになります。

1.りんご

2.ごりら

3.らっぱ

数字ではなく点(・)で箇条書きを表現したい場合には、olタグの代わりにulタグを用います。

imgタグ

画像を挿入したいさいに用いられるのが、imgタグです。 :html <img src=“(挿入したい画像のリンク)” /> と記述することによって、任意の場所に画像を挿入することができます。

aタグ

リンクなどを挿入したいときに使うのがaタグです。

<a href=“(挿入したいリンク)”>(リンクを挿入したいテキスト)</a>

と記述することで、任意のテキストにリンクを挿入することができます。

hタグ

見出しを挿入するさいには、hタグを使用します。

<h1~h6>(見出しテキスト)</h1~h6>

と記述して、任意のテキストを見出しとして表示させることが可能です。 見出しの大きさは数字で調整します。もっとも大きな見出しを表現できるのがh1タグで、数字が大きくなるごとにだんだんと文字は小さくなっていきます。

まとめ

image HTMLの基礎的なことをご紹介しました。これから本格的にHTMLを学んでいくにあたって、今回ご紹介したことはどれもベースとなるものばかりです。

はじめは難しく感じるかもしれませんが、根気強く書き続けることで確実に上達します。

プログラミングをこれから始めてみたい人はCodeCampの無料体験を受けてみてはいかがでしょうか?

黒田剛司
この記事を書いた人
黒田剛司
\ 無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp