HTMLファイルとHTMLタグの基本を解説 – 図解で分かる!Webにまつわる基礎講座 vol.2

アルパカ
こんにちは、エンジニアブロガーのアルパカ(@engineeraru)です

Webサイト制作やフロントエンドに興味を持った初学者向けに、図解を使って分かりやすい解説をしています👍

※前回の記事はこちら→「そもそもWebサイトって何?サイトが表示される仕組みを解説 」

連載第2回目の今回はWebサイトの屋台骨ともいえる「HTML」について語ります。

  • HTMLファイルの中身はどうなっているのか?
  • HTMLタグとは何か?どう使うのか?
  • HTMLに関する用語

など、基本的な内容が中心です。

アルパカ
「HTML」は専門的で難しそうだな…と思う方は是非読んでみてください!

HTMLファイルとは?

まずHTMLファイルについてのおさらいです。

このHTMLファイルの目的は2つあります。

  1. ページを読んだ人に「文章」を伝える
  2. Webブラウザに「ページの構造」を伝える

簡単に言うと、Webページの骨組み(骨格)みたいなものだと考えればOKです。

引用元:そもそもWebサイトって何?サイトが表示される仕組みを解説 – 図解で分かる!Webにまつわる基礎講座 vol.1

ということで、Webページを作る上では欠かせないのがHTMLファイルでしたね。

では、HTMLファイルの中身はどうなっているか?
ざっくり言うと「HTMLタグで囲まれた文章」が集まっています。

アルパカ
この「HTMLタグ」がHTMLを理解する上で最も大切です!

 

HTMLタグとは何か?

HTMLタグとはそもそも何?

そもそも「タグ(tag)」とは「ものを分別する時の札」のことです。
旅行の際に、スーツケースに「ネームタグ」をつけて、自分の物を見失わないようにしますよね。

そんな感じで「これは○○だよ!」と人に伝えるために使います。

 

一方で「HTMLタグ」とは「テキストを分類するための書き方」のこと。
「これは○○という役割の文章だよ!」とコンピュータ(ブラウザ)に伝えるために使います。

例えば

  • HTMLタグ「h1」を使う→「これは見出しのテキストだよ!」という意味
  • HTMLタグ「b」を使う→「これは太字のテキストだよ!」という意味
  • HTMLタグ「u」を使う→「これは下線付きのテキストだよ!」という意味

だとコンピュータに伝えることができます。

※厳密には文章以外にも使えますが、一旦考えないようにしましょう

 

HTMLタグの使い方は?

HTMLタグを使うときは、文章を開始タグ終了タグで囲みます。

こんなイメージですね↓

<p> 文章 </p>

 

開始タグ、終了タグについては以下の通り。

  • 開始タグ→<>(山カッコ)を付ける
  • 終了タグ→<>(山カッコ)と /(スラッシュ)を付ける

非常にシンプルなルールで書けることがわかりますね。

 

HTMLタグって何個あるの?

HTMLタグは何個あるのでしょうか?
結論から言うと、だいたい「100個くらい」です。

それぞれ様々な意味を持っていて、用途ごとに使い分ける必要があります。

 

このHTMLタグは、わざわざ覚える必要はありません。
というのも、コーディング(プログラミング)は学校のテストと違って、カンニング(グーグルで検索)がOKだから。

もちろん、よく使うものは自然と覚えることになります。
しかし、基本的には「必要に応じて、意味や使い方を調べる」ことが大切です。

アルパカ
ざっくりと理解したら、あとは調べつつ実践するのが一番早いですよ!

 

なぜわざわざHTMLタグを使うの?

なぜわざわざ「HTMLタグ」を使うのでしょうか?
簡単に言うと、コンピュータは理解力がないからです。

人間は、ちょっとくらい「曖昧な指示」をされても、勝手に解釈して処理ができます。
しかし、コンピュータは「曖昧な指示」が大の苦手…というか、出来ません。

そのため、常に「ルールに基づいた、決まった頼み方」をする必要があります。

 

コンピュータがHTMLファイルを処理する場合、まずファイルの拡張子が「.html」なのでHTMLファイルだと理解します。

次に、HTMLファイル内の文章を読みこんで、「HTMLタグ」という目印を元に、文章をどう扱うかを理解しています。

アルパカ
ルールをしっかり守って書かないと、コンピュータに理解してもらえないということですね

 

HTMLタグの基本用語

HTMLタグに関する超基本用語は

  1. 開始タグ
  2. 終了タグ
  3. 要素

の3つ。
※開始タグと終了タグは先程説明しましたね

 

要素(element)とは「開始タグと終了タグ」で囲われたもの。

「要素」は日常でも使う普通の言葉ですが、HTMLの世界では上記の意味になるので、注意してください。

アルパカ
ちなみに、開始タグと終了タグで囲うものは「文章(テキスト)」以外のもあります。また次回説明しますね

 

HTMLタグと属性について

HTMLタグには「属性」を付けることも可能です。

属性とは、簡単に言うと、HTMLタグの補足情報のこと。

 

例えば、Webページのテキストをハイパーリンク(別ページに飛ぶ扱い)にする時には「aタグ」を使います。

以下のような書き方になりますね↓

<a> リンク先はこちら </a>

 

しかし、上記の書き方だと「リンク先がどこか?」がコンピュータにはわかりません。

そこで、補足情報として

  • 属性名:href
  • 属性値:リンク先のURL

を加えて書くことで、無事にリンク先に遷移するようになります↓

<a href=”https://tokyofreelance.jp/”> リンク先はこちら </a>

 

このように、属性を使うことで、HTMLタグを使うときに「補足情報」を追加することが出来ます。

書き方は、開始タグ内のタグ名の後に「属性名=”属性値”」です。

 

ちなみに、よく使われる属性の例は以下の通り。

  • id属性:様々なHTMLタグで使われる。要素に好きな「固有名」を付ける
  • class属性:様々なHTMLタグで使われる。要素に好きな「分類名」を付ける
  • src属性:imgタグ(画像を表示するタグ)で使われる。画像ファイルの置き場所を示す
  • href属性:aタグ(ハイパーリンク)で使われる。リンク先を示す
アルパカ
使っているうちに自然と覚えます!タグには属性が付けられるんだな~とだけ覚えておけば大丈夫ですよ

 

終了タグが不要なHTMLタグ

HTMLタグの中には、終了タグがいらないものがあります。

例えば、よく使う(頻出)タグの中で、終了タグがいらないものは、

  • br:改行に使うHTMLタグ
  • img:画像表示に使うHTMLタグ
  • hr:水平線を書くときに使うHTMLタグ
  • input:フォームなどを作るときに使うHTMLタグ

です。

 

例えば、imgタグ(画像表示に使う)は画像を表示するためだけのタグなので、明らかに「内側に囲うもの(テキスト)」がありませんよね。

そのため、

<img src=”画像のURL”></img>

と書かなくても、

<img src=”画像のURL”>

と書くだけで「画像を表示する」とコンピュータに伝えることが出来ます。

 

このように「終了タグがなくても意味が通じそうなものは、終了タグを省くことが出来る場合がある」とざっくり覚えて下さい。

※厳密には、終了タグをつけたら正常に動かないものと、終了タグが単に省略できるものがあるのですが、割愛します

 

まとめ

今回は、HTMLの基本についてのお話でした。

まとめると、

  • HTMLファイルとは、要素(HTMLタグで囲まれた文章)の集まり
  • HTMLタグで覚えるべき用語は「開始タグ」「終了タグ」「要素」「属性」
  • 開始タグと終了タグをセットで使うのが基本。終了タグが不要なHTMLタグも存在する

という感じ!

アルパカ
HTMLは非常にシンプルなルールで出来ているので、すぐに使えるようになりますよ~!

【Webスキル診断】“一生使えるスキル”を60秒で診断しよう!

「フリーランスになりたいけど、どんなスキルを身につければいいかわからない」という悩みを解決すべく、東京フリーランスでは【Webスキル診断】をLINEで無料実施中です! Web制作・Webデザイン・アプリ開発・動画編集など「自分に合った理想の働き方は何か」を見極めていただけます。

効率の良い勉強法カテゴリの最新記事