トップ > プログラミング > Webサイト制作の第一歩、HTMLとは何か？初心者向けに徹底解説！

Webサイト制作の第一歩、HTMLとは何か？初心者向けに徹底解説！

プログラミング IT

Webサイトを作ってみたいけど、何から始めたらいいかわからない…そんな風に思っていませんか？Webサイト制作の世界へようこそ！その記念すべき第一歩は、HTMLを理解することから始まります。

このブログでは、Webサイトの骨格を作る「HTML」とは一体何なのか、その仕組みから基本的な書き方まで、初心者の方にも分かりやすく解説していきます。

HTMLって何？

HTMLとは、HyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略で、Webページを作成するために使われる最も基本的な言語です。

「言語」と聞くと難しく感じるかもしれませんが、プログラミング言語のように複雑なロジックを組むものではなく、「マークアップ言語」という種類に分類されます。マークアップとは、文章の各部分が「見出し」なのか、「段落」なのか、「画像」なのか、といった「意味」や「役割」をコンピューターが理解できるように、タグと呼ばれる目印を付けていく作業のことです。

HTMLの基本的な構造

HTMLファイルは、基本的に決まった構造で書かれます。まずは、この基本構造を「おまじない」だと思って覚えてしまいましょう。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>ページのタイトル</title>
  </head>
  <body>
    <h1>こんにちは、世界！</h1>
    <p>これは私の最初のWebページです。</p>
  </body>
</html>

それぞれの部分には、次のような意味があります。

  • <!DOCTYPE html>: この文書がHTML5という最新のルールで書かれていることを宣言する部分です。
  • <html>: 全てのHTML要素を囲む、一番外側のタグです。
  • <head>: Webページそのものの設定情報（メタデータ）を記述する部分です。ここに書いた内容は、通常Webページ上には表示されません。
    • <meta charset="UTF-8">: 文字コードを指定します。日本語の文字化けを防ぐために重要です。
    • <title>: ブラウザのタブに表示されるページのタイトルを記述します。
  • <body>: 実際にWebページに表示される内容（見出し、文章、画像など）を記述する部分です。

よく使うHTMLタグを使ってみよう！

HTMLでは、様々なタグを使ってコンテンツに意味付けをしていきます。ここでは、Webページ作成で頻繁に使われる基本的なタグをいくつか紹介します。

見出し (<h1>〜<h6>)

<h1>から<h6>までの見出しタグは、文章のタイトルやセクションの区切りに使います。<h1>が最も大きな見出しで、数字が大きくなるにつれて見出しのレベルは小さくなります。

<h1>一番大きな見出し</h1>
<h2>二番目に大きな見出し</h2>
<h3>三番目に大きな見出し</h3>

段落 (<p>)

<p>タグは、文章の段落（Paragraph）を表します。文章のまとまりをこのタグで囲みます。

<p>これは段落です。文章のまとまりをこのタグで囲みます。</p>
<p>新しい段落を作るには、もう一度pタグを使います。</p>

リンク (<a>)

<a>タグ（アンカータグ）は、他のページへのリンクを作成します。href属性に行き先のURLを指定するのがポイントです。

<a href="https://www.google.com">Googleへのリンク</a>

画像 (<img>)

<img>タグ（イメージタグ）は、Webページに画像を埋め込むために使います。src属性に画像の場所（パスやURL）を指定します。

<img src="cat.jpg" alt="かわいい猫の画像">

HTMLの歴史：どうやって進化してきたの？

今では当たり前に使われているHTMLですが、実は長い歴史の中で進化を続けてきました。

  • 1990年代初頭: ティム・バーナーズ＝リー氏によって、HTMLの原型が考案されました。当時は、研究者間で論文を共有するためのシンプルなものでした。
  • 1995年 (HTML 2.0): Webが一般に広まり始め、フォーム機能などが追加されました。
  • 1999年 (HTML 4.01): 現在のWeb制作の基礎となるバージョンで、見た目の調整はCSSに任せるという考え方が標準になりました。
  • 2014年 (HTML5): 動画や音声の埋め込みが簡単になったり、Webページの構造をより意味的に記述できるようになったりと、大幅に機能が強化されました。現在、Web制作の標準となっているバージョンです。

HTMLとCSS、JavaScriptの関係

Webサイトは、多くの場合HTML、CSS、JavaScriptという3つの言語を組み合わせて作られています。それぞれの役割を家に例えると、分かりやすいかもしれません。

  • HTML: 家の骨組みや構造（柱、壁、屋根など）
  • CSS: 家の見た目やデザイン（壁紙の色、家具の配置、装飾など）
  • JavaScript: 家に動きや機能を追加するもの（自動ドア、照明のON/OFF、インターホンなど）

HTMLでWebページの基本的な構造を作り、CSSで文字の色や大きさ、レイアウトといったデザインを整え、JavaScriptでスライドショーやポップアップウィンドウなどの動的な機能を追加する、というように、それぞれが異なる役割を担っています。

まとめ

今回は、Webサイト制作の基礎であるHTMLについて解説しました。タグを使って文章に意味付けをしていく、という基本的な考え方を理解できれば、Webページがどのような仕組みで表示されているのかが見えてくるはずです。

まずは、この記事で紹介した基本的なタグを使って、簡単な自己紹介ページなどを作ってみてはいかがでしょうか。実際に手を動かしてみることが、上達への一番の近道です。