「HTMLって何？」
「Web制作を勉強し始めたけど、HTMLがよく分からない……」
Web制作を学び始めると、最初に出てくるのがHTMLです。
HTMLはWebページを作るために欠かせないものですが、初心者のうちは、
「HTMLって何をするもの？」
「プログラミングとは違うの？」
「CSSとは何が違うの？」
と疑問に思うことも多いですよね。
この記事では、HTMLとは何なのか、どんな役割があるのかを、Web制作初心者の方にもできるだけ分かりやすく解説します。
難しい言葉はできるだけ使わず、まずは「HTMLは何をするものなのか」をざっくり理解していきましょう。
この記事で分かること
この記事を読むと、次のことが分かります。
- HTMLとは何か
- HTMLがWebページで果たしている役割
- タグとは何か
- よく使うHTMLの基本タグ
- HTMLファイルの基本的な構造
- HTMLとCSSの違い
HTMLを勉強し始めたばかりの方は、最初からすべて理解しなくても大丈夫です！この記事では、まず「HTMLの全体像」をつかむことを目標にしていきましょう。
HTMLとは？Webページの骨組みを作る言語
結論から言うと、HTMLとは、Webページの構造や内容を作るための言語です。
HTMLは「HyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ）」の略ですが、初心者のうちは無理に覚える必要はありません。
まずは、
HTML＝Webページの中身や骨組みを作るもの
と覚えておけばOKです。
Webページには、例えば、
- 見出し
- 文章
- 画像
- リンク
- ボタン
- 箇条書き
- 表
など、さまざまな要素があります。
HTMLでは、それぞれに対して、
「ここは見出し」
「ここは文章」
「ここは画像」
というように意味を持たせながら、Webページを作っていきます。
家に例えると、HTMLは家の骨組みのようなものです。
「どこに何があるのか」という基本的な構造をHTMLで作ります。
HTMLはタグを使って内容に意味づけをする
HTMLの一番大切な考え方は、タグを使って内容に意味づけをすることです。
例えば、次のコードを見てみましょう。
<p>こんにちは</p>
この<p>は、文章や段落を表すタグです。
つまり、
「こんにちは」
という文字に対して、
「これは文章です」
とHTMLで意味を伝えています。
開始タグと終了タグ
HTMLのタグには、基本的に開始タグと終了タグがあります。
<p>文章</p>
それぞれ、
<p>：開始タグ</p>：終了タグ
です。
開始タグと終了タグで囲むことで、
「この部分は段落です」
という意味になります。
最初はタグがたくさん出てきて難しく感じるかもしれません。
でも、「タグで囲んで意味をつける」と考えると、HTMLの基本がかなり分かりやすくなりますよ！
タグが変わると、文字の役割も変わる
同じ「こんにちは」という文字でも、使うタグによって意味が変わります。
例えば、
<h1>こんにちは</h1>
<h1>タグは、大きな見出しを表すタグです。
そのため、
「こんにちは」という文字がページの大見出しである
という意味になります。
HTMLでは、文字そのものに意味があるというより、
どのタグで囲まれているかによって、その内容の役割が決まる
と考えると分かりやすいです。
例えば、
<h1>：大きな見出し<p>：文章<a>：リンク
というように、それぞれ役割があります。
よく使うHTMLの基本タグ
HTMLにはたくさんのタグがあります。
ただ、最初からすべて覚える必要はありません。
まずは、よく使う基本タグから覚えていきましょう。
| タグ | 役割 |
|---|---|
<h1>〜<h6> | 見出し |
<p> | 段落・文章 |
<a> | リンク |
<img> | 画像 |
<ul>・<li> | 箇条書き |
<table> | 表 |
<form> | 入力フォーム |
これらのタグを組み合わせることで、Webページを作っていきます。
例えば、
見出し
↓
文章
↓
画像
↓
リンク
というように、必要な要素をHTMLで配置します。
初心者のうちは「全部のタグを覚えなきゃ！」と思わなくて大丈夫です。
実際によく使うタグから、少しずつ覚えていけばOKですよ！
HTMLファイルには基本となる型がある
HTMLを書くときは、基本となる形があります。
実際のHTMLファイルは、次のような構造になっています。
<!DOCTYPE html>
<html>
<head>
<title>ページのタイトル</title>
</head>
<body>
<p>ここに表示したい内容を書く</p>
</body>
</html>
最初は「記号が多くて難しそう」と感じるかもしれません。
でも、それぞれに役割があります。
| 部分 | 役割 |
|---|---|
<!DOCTYPE html> | このファイルがHTML5であることを宣言 |
<html> | Webページ全体を囲む |
<head> | ページに関する情報を書く |
<body> | 実際に画面に表示される内容を書く |
実際に画面に表示される内容はbodyの中に書く
初心者の方がまず覚えておきたいのが、<body>です。
Webページに表示したい、
- 見出し
- 文章
- 画像
- リンク
などは、基本的に<body>の中に書いていきます。
例えば、
<body>
<h1>Web制作を始めました</h1>
<p>HTMLの勉強をしています。</p>
</body>
このように書くと、ブラウザには、
「Web制作を始めました」
という見出しと、
「HTMLの勉強をしています。」
という文章が表示されます。
HTMLの基本の型を覚えたら、あとは<body>の中に「見出し」「文章」「画像」などを追加していくイメージです！
HTMLだけではWebページの見た目は整わない
HTMLで作れるのは、Webページの構造や内容です。
例えば、
「ここは見出し」
「ここは文章」
「ここは画像」
といったように、ページの骨組みを作ります。
しかしHTMLだけでは、
- 文字の色を変える
- 文字を大きくする
- 背景色をつける
- 余白をつける
- 要素を横並びにする
といった、細かいデザインを整えることはできません。
そこで登場するのが、CSSです。
HTMLとCSSの役割の違い
Web制作では、HTMLとCSSをセットで使うことが多いです。
それぞれを家に例えると、
HTML＝家の骨組み
CSS＝壁紙や家具などのデザイン
というイメージです。
HTMLでWebページの構造を作り、CSSで、
- 色
- 文字の大きさ
- 余白
- 配置
などを整えていきます。
HTMLとCSSはセットで考えると理解しやすいですよ！「HTMLで作る → CSSで見た目を整える」という流れを覚えておきましょう。
HTMLとCSSの違いについて詳しく知りたい方は、こちらの記事もおすすめです。
▶ HTMLとCSSの違いって？初心者向けにざっくり解説
HTMLとCSSの違いとは？初心者向けに役割をわかりやすく解説
HTMLを勉強するときは「タグの意味」を意識しよう
HTMLを勉強し始めると、
「タグを全部覚えなきゃ！」
と思ってしまうかもしれません。
でも、最初からすべてのタグを覚える必要はありません。
HTMLで大切なのは、
「この内容は何を表しているのか？」
を考えることです。
例えば、
「これは見出しだからhタグ」
「これは文章だからpタグ」
「これはリンクだからaタグ」
「これは画像だからimgタグ」
というように、内容の役割に合わせてタグを使います。
この考え方を意識すると、HTMLの理解がぐっと進みます。
HTML初心者は、まず基本タグから覚えよう
HTMLにはたくさんのタグがあります。
そのため、最初からすべてを覚えようとすると大変です。
初心者の方は、まず次のタグから覚えるのがおすすめです。
<h1>〜<h6>：見出し<p>：文章<a>：リンク<img>：画像<div>：要素をまとめる<ul>・<li>：リスト
このあたりの基本タグを使えるようになるだけでも、簡単なWebページを作れるようになります。
おすすめの勉強方法は、「見るだけ」ではなく実際に書いてみることです！
コードを書いてブラウザで確認すると、「このタグを書くとこうなる」という感覚が少しずつ身についていきます。
まとめ｜HTMLはWebページの構造を作るための言語
最後に、HTMLについて簡単にまとめます。
- HTMLはWebページの構造や内容を作るための言語
- タグを使って文章やコンテンツに意味づけをする
- 見出し・文章・画像・リンクなどをHTMLで配置する
- HTMLファイルには基本となる型がある
- 実際に画面に表示される内容は
<body>の中に書く - Webページの見た目を整えるのはCSSの役割
HTMLは、Web制作を学ぶうえで最初の基本となる部分です。
最初はタグや記号がたくさん出てきて、「難しそう」と感じるかもしれません。
でも、最初からすべてを覚える必要はありません。
まずは、
HTMLはWebページの骨組みを作るもの
タグを使って内容に意味をつけるもの
という2つを理解できれば十分です。
基本タグを実際に使いながら、少しずつHTMLに慣れていきましょう！
次に読みたい記事
HTMLの基本が分かったら、次はHTMLとCSSの違いについて理解するのがおすすめです。
▶ HTMLとCSSの違いって？初心者向けにざっくり解説
コメント