HTMLとは何かを解説

WEBサイトやホームページを作るときに必須なHTMLについて解説していきます。

簡単なチュートリアルも交えているので、手を動かしながら行うとイメージしやすいと思います。

モグモグさん

HTMLは小学校や中学校でも授業で学ぶよ！

HTMLとは何か
- HTMLを覗いてみよう
実際に作ってみよう
まとめ

HTMLとは何か

HTML(エイチティーエムエル)とは、Hyper Text Markup Languageの略で、ブラウザ上に文字や画像を表示するための言語です。

正確にはプログラミング言語というよりも、マークアップ言語と呼ばれます。WEBサイトを作成するために作成されました。

補足

ブラウザとは、ユーザーが検索したWEBサイトを表示するソフトのことです。

ブラウザの種類はたくさんあり、Googleが提供しているGoogle ChromeやMicroSoftが提供しているInternet Explorer、Microsoft Edgeなどがあります。

iPhoneを使っている人は馴染みのあるSafariもAppleが提供していて、ブラウザの一種です。

HTMLを覗いてみよう

それでは実際にHTMLはどういったものなのかをみてみましょう。

Google ChromeでGoogleのページを検索し、右クリックを押すとページのソースを表示という項目が表示されるので、それをクリックします。

すると、HTMLがこのように表示されます。

これがHTMLの一部です。

一見複雑なように見えますが、改行を加えたり、余計なものを除くとシンプルです。

実際に作ってみよう

それでは実際に簡単なHTMLを作成してみて、理解を深めていきましょう。

sample.htmlというファイルを作成し、下のHTMLコードをコピーして貼り付けをします。

<!DOCTYPE html>
<html>
  <head>
    <title>モグモグ</title>
    <meta charset="UTF-8">
  </head>
  <body>
    <h1>サンプルHTML</h1>
    <p>サンプル段落</p>
  </body>
</html>

貼り付けをし保存をしたら、sample.htmlを開いてみましょう。

ブラウザ上で文字が表示されることが確認できたと思います。

こちらをGoogleの時と同様にページのソースを表示を押すと、コピーしたHTMLが表示されています。

これだけでブラウザに表示することができます。

続いてsample.htmlの内容を説明します。

番号通り順番に説明していきます。

<!DOCTYPE html> ①
<html> ②
  <head>
    <title>モグモグ</title> ③
    <meta charset="UTF-8"> ④
  </head>
  <body> ⑤
    <h1>サンプルHTML</h1> ⑥
    <p>サンプル段落</p> ⑦
  </body>
</html>

① <!DOCTYPE html>

HTML5を利用するというのを宣言するために書きます。

HTMLはバージョンがあり、5 というのはバージョン5であるという意味です。(2020年5月現在)

ブラウザによってバージョンに対応しているかが分かれるのですが、バージョン5はほとんどのメジャーなブラウザで対応しているのでバージョン5を使うのが基本となっています。

② <html>

HTMLであることを表すタグで、基本的に<head> と <body> が中に入ります。

HTMLはこのようにタグを用いて、構造化していきます。(HTMLタグと呼びます)

タグは基本的に、<tagの名前></tagの名前> のように</> を用いて閉じるまでがセットです。

様々なHTMLタグがあるので、それらを定義することでHTMLが出来上がります。

③ <title>

ブラウザのタブやブックマークがされた際に表示されるサイトのタイトルです。

④ <meta charset="UTF-8">