HTMLとは何か？超簡単に解説！成り立ちを知ればもっと簡単に理解できる。

2024.03.11

まずHTMLとは、HyperText Markup Languageの略です。(覚える必要はない)

Markup(マークアップ言語)とは、文章の構造や役割を示すための言語です。

簡単に言うと、この部分は文章ですよとか、この部分は画像ですよ、などとパソコンに伝えるための言語になります。

HTMLの歴史

ここで簡単に歴史を見てみましょう。

HTMLは、1989年にティム・バーナーズ・リー氏によって開発されました。当時は、Webページ上で文章を構造化するために使われていました。その後、CSSやJavaScriptなどの技術と組み合わせることで、より高度な表現が可能になり、現在では写真や動画の挿入、アニメーションの追加、インタラクティブな操作など、様々なことができるようになっています。

簡単に要約するともともとは文章だけをWEBページ上に表示するためのプログラミング言語でした。
当時のWebページは、今のようにデザイン性が高くはなく、写真や動画を挿入することもできませんでした。
今でいうとWordのように文章を横書き(英語なので)で表示することしかできませんでした。

そして現在、HTMLはCSSやJavaScriptなどの技術と組み合わせることで、より高度な表現が可能になりました。現在では、写真や動画の挿入、アニメーションの追加、インタラクティブな操作など、様々なことができるようになっています。

HTMLの役割

ではいよいよHTMLの役割をみていきましょう。
主な役割は以下のようなことです。

  • 文章の構造を定義する
    • 見出し、段落、リストなど
  • 文字装飾
    • 太字、斜体、色など
  • 画像や動画の埋め込み
  • リンクの作成
    • 他のページへのリンク、メールアドレスへのリンクなど

HTMLの例

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>HTMLの例</title>
</head>
<body>
  <h1>これは見出しです</h1>
  <p>これは段落です。段落は、<br>タグを使って改行できます。</p>
  <ul>
    <li>リスト項目1</li>
    <li>リスト項目2</li>
    <li>リスト項目3</li>
  </ul>
  <img src="image.jpg" alt="画像の説明">
  <a href="https://www.example.com">リンク</a>
</body>
</html>

まず最初に書かれているのが<!DOCTYPE html>という記述です。
こちらはHTMLを使いますよという宣言になります。正確にはバージョンを伝えるための物ですが、バージョンを明記して書くことは現在はほとんどありません。

つぎに見ていただきたいのが<>で囲まれた部分です。先ほどの<!DOCTYPE html>とは違って対になっているのが分かりますでしょうか？

たとえば<head>の部分ですがその少し下に</head>というように(スラッシュ)が含まれるタグが見つかりますでしょうか？
これらがまさにHTMLのタグと呼ばれるHTMLの基本になります。

プログラムはどう動いていくの？

まずプログラムの基本を知っていただきたいのですが、基本的にプログラムとは上から下へ処理が進んでいきます。

つまり<head>と書かれた部分から下へ処理が進み</head>と書かれた部分までがheadタグの中身なんだなって事が分かる様になっています。

イメージとしは箱の様なものです。<head></head>で一つの箱をつくり、その中に入れたいものを入れていきます。

こうやって<head>だけではなく<body>や<p>、<ul>など様々な箱を用意してプログラムを行っていきます。

そしてこれらの箱の名前、head、p、ulなどがパソコンへ箱の中身を説明するための名前になります。
これらの箱がたくさん積み重なって出来上がっているのが昨今のWEBページになります。

タグの役割

たとえば<p>と書かれたタグがあるのですが、こちらは文章を入れるためのタグになります。
（英語で「段落」を意味する”paragraph”（パラグラフ）の頭文字を取った、タグのことです。）

もちろんこのブログの文章もpタグで囲われています。

ほかにも文章をいれるタグはいくつかあり、例えば<h1>や<span>や<a>などその役割に応じていろんな種類があります。

最初はタグの役割がなにか分からず、難しく感じるかもしれませんが使用するタグは大体決まっているので何度か練習すればすぐに覚えられます。

余談ですが、タグには最初から様々なデザインがついていたりします。
例えばpタグには最初から上下に余白がついています。
これはなぜかというと、もともとHTMLが作成されたのは英語圏で英語の文章というのは上下に余白が必要になるからです。例えばhedgehogのようにhは上に突き抜けているし、gは下に突き抜けていますよね？日本語だと四角の枠の中に収まりますが、アルファベットというのは上下に突き抜ける文字もあるため上下に余白があるのが普通なのです。

まとめ

HTMLは、Webページの骨格を作るために使われる言語です。文章の構造を定義したり、文字装飾をしたり、画像や動画を埋め込んだり、リンクを作成したりすることができます。

現在ではHTMLとあわせてCSSと呼ばれるHTMLだけでは作れないようなデザインをプログラムするための言語も合わせて使うことがほとんどです。

HTMLやCSSは比較的学習しやすい言語なので、WebデザインやWeb開発に興味がある人は、ぜひ学習してみてください。

コメント