Web制作の勉強を始めると、まず出てくるのが「HTML」という言葉。
私も最初は、
「HTMLって何の略？」
「そもそも何をするものなの？」
というレベルからのスタートでした。
今回は、Web制作初心者の方に向けて、HTMLとは何なのか、どんな役割があるのか、基本的なタグにはどんなものがあるのかを、私自身の学習経験も交えながら紹介します。
「HTMLって結局何をするもの？」
そんな疑問を持っている方の参考になればうれしいです。
HTMLとは？
HTMLは、**「HyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ）」**の略です。
簡単にいうと、Webページの骨組みや構造を作るための言語です。
たとえば、Webページの中には、
- ここは見出し
- ここは文章
- ここは画像
- ここはリンク
- ここは箇条書き
といった、さまざまな要素があります。
HTMLでは、それぞれの要素を「タグ」と呼ばれる目印を使って記述します。
つまりHTMLは、Webページの中身がどんな構造になっているのかをコンピューターに伝える役割を持っています。
私も最初は、HTMLってただ英語のコードを打ち込むものだと思っていました（笑）。でも、実際には『これは見出し』『これは文章』と、Webページの構造を伝えているんですね。
HTML・CSS・JavaScriptの違い
Web制作では、HTMLだけでなく「CSS」や「JavaScript」という言葉もよく出てきます。
それぞれの役割を簡単に分けると、次のようになります。
HTML：Webページの構造や内容を作る
CSS：色・文字・レイアウトなど見た目を整える
JavaScript：クリックなどに応じた動きや機能をつける
イメージとしては、
HTML＝骨組み
CSS＝見た目
JavaScript＝動き
と考えると分かりやすいです。
HTML → Webページの骨組み
CSS → Webページのデザイン
JavaScript → Webページに動きをつける
HTMLの役割を家づくりに例えると？
私は3人の子どもを育てながら、家事や育児の合間にWeb制作の勉強をしています。
忙しい毎日の中で新しいことを覚えるとき、私は身近なものに例えて理解するようにしています。
HTMLを理解するときにイメージしやすかったのが、家づくりでした。
家を建てるとき、いきなり家具を置いたり、壁紙を貼ったりはしませんよね。
まずは柱や壁など、家の骨組みを作るところから始まります。
Webページも同じです。
まずHTMLで「何がどこにあるのか」という構造を作り、その上からCSSで色や大きさ、レイアウトなどを整えていきます。
そしてJavaScriptを使うことで、クリックしたときの動きなど、Webページにさまざまな機能を追加できます。
こう考えると、それぞれの役割がかなり分かりやすくなりました。
HTMLの基本構造
では、実際のHTMLはどのように書くのでしょうか？
HTMLは「タグ」と呼ばれる目印を使って、文章や要素に意味を持たせていきます。
まずは、HTMLの基本的な形を見てみましょう。
<!DOCTYPE html>
<html>
<head>
<title>ページのタイトル</title>
</head>
<body>
<h1>見出し</h1>
<p>ここに文章が入ります。</p>
</body>
</html>
最初からすべてを完璧に理解する必要はありません。
まずは、それぞれの役割をざっくり覚えておけば大丈夫です。
<!DOCTYPE html>とは？
これは、このファイルがHTML5の文書であることをブラウザに伝えるための宣言です。
<html>とは？
HTML文書全体を囲む、一番外側の枠のようなものです。
<head>とは？
ページのタイトルや文字コードなど、Webページに関する情報を記述する場所です。
ここに書いた内容は、基本的にそのまま画面に表示されるものではありません。
<body>とは？
ブラウザで実際に表示されるWebページの内容を記述する場所です。
と覚えておけばOKです。
HTMLでよく使う基本タグ
HTMLにはたくさんのタグがあります。
最初からすべて覚えようとすると大変なので、初心者のうちは、まずよく使う基本タグから覚えていけば十分です。
| タグ | 役割 |
|---|---|
<h1>〜<h6> | 見出し |
<p> | 段落 |
<a> | リンク |
<img> | 画像 |
<ul> | 箇条書きリスト |
<li> | リストの項目 |
たとえば、見出しと文章なら次のように書きます。
<h1>HTMLを勉強しよう</h1>
<p>HTMLはWebページの構造を作るための言語です。</p>
このように、タグを使うことで「ここは見出し」「ここは文章」という意味をHTMLに伝えることができます。
HTMLには本当にたくさんのタグがあります。私も最初から全部覚えようとして、『これは無理かも……』と思いました（笑）。今は、使う → 調べる → また使う、を繰り返しながら少しずつ覚えています。
HTML初心者がつまずきやすい「画像の表示」
私自身、HTMLを勉強していて最初につまずいたのが、画像がうまく表示されない問題でした。
画像を表示するときは、imgタグを使います。
<img src="images/photo.jpg">
ここで重要になるのが、srcに指定する画像ファイルのパスです。
最初のころの私は、コードだけを見て、
「これで合っているはずなのに、なんで画像が出てこないの？」
と悩んでいました。
【ここにCocoonの吹き出し】
コードは合っているはずなのに、なんで画像が表示されないの？
かなり長い時間悩みました……。
原因は、HTMLファイルと画像ファイルがどのフォルダに入っているのかを、ちゃんと意識できていなかったことでした。
HTMLの「パス」とは？
たとえば、次のようなフォルダ構成だったとします。
project/
├── index.html
└── images/
└── photo.jpg
この場合、index.htmlとphoto.jpgは同じフォルダにはありません。
photo.jpgは、index.htmlから見てimagesフォルダの中にあります。
そのため、画像を表示するときは、
<img src="images/photo.jpg">
と指定します。
一方、次のように書いてしまうと、
<img src="photo.jpg">
ブラウザはindex.htmlと同じ場所にあるphoto.jpgを探してしまいます。
実際には画像がimagesフォルダの中にあるため、画像が表示されません。
画像が表示されないときは、次の4つを確認してみましょう。
このとき初めて
『コードだけじゃなくて、ファイルが実際にどこにあるのかも考えないといけないんだ！』と気づきました。
この経験は、その後のHTML学習でもかなり役立っています。
3児ママがHTMLを実際に学んで感じたこと
正直なところ、子育てをしながらまとまった学習時間を確保するのは簡単ではありません。
私の場合は、家事の合間や子どもが寝たあとの数十分など、ちょっとした時間を使って少しずつコードに触れるようにしてきました。
そして、100日チャレンジという形で毎日少しずつHTMLやCSSを学ぶ中で感じたのが、
HTMLは「完璧に覚えてから使う」ものではない
ということです。
今日は30分勉強するぞ！
と思っていても、子どものことや家事をしていたら、気づけば10分しかできなかった……なんて日もあります。
でも最近は、
「10分しかできなかった」
ではなく、
「10分でもできた！」
と思うようにしています。
少しずつでも続けていれば、ちゃんと前に進めると実感しています。
HTMLは「手を動かしながら覚える」のがおすすめ
HTMLをこれから勉強する方に私がおすすめしたいのは、最初からすべてを暗記しようとしないことです。
まずは、
- HTMLファイルを作る
- 見出しを書いてみる
- 文章を書いてみる
- 画像を表示してみる
- リンクを作ってみる
- ブラウザで確認する
というように、実際に手を動かしてみること。
うまく表示されなかったり、エラーが出たりすることもあります。
私自身、画像が表示されないだけでかなり時間を使った経験があります。
でも、そうやって試行錯誤したことのほうが、あとから振り返ると記憶に残っています。
分からない＝向いていない
ではないんだな、と最近は思っています。
コードを書いて、失敗して、調べて、また試してみる。
その繰り返しが、少しずつできることを増やしてくれるんだと思います。
まとめ｜HTMLはWeb制作の土台
今回は、HTMLとは何なのか、基本構造やよく使うタグ、初心者がつまずきやすいポイントについて紹介しました。
HTMLは、Webページの構造や内容を作るための言語です。
CSSがデザイン、JavaScriptが動きを担当すると考えると、それぞれの役割もイメージしやすくなります。
そして、HTMLを学ぶときに大切なのは、最初から完璧を目指すことではありません。
分からないことがあっても、実際にコードを書いて、ブラウザで確認してみる。
「なぜ表示されないんだろう？」と試行錯誤する。
その繰り返しが、少しずつHTMLの理解につながっていくのだと思います。
この記事のポイント
私も3児の子育てをしながら、100日チャレンジを通して毎日少しずつWeb制作の勉強を続けています。
これからHTMLを勉強する方も、まずは小さなページを一つ作るところから始めてみてください。
完璧じゃなくても大丈夫。
まずは「自分でWebページを作ってみる」。
それが、HTMLを理解する第一歩だと思います。
一緒に少しずつ頑張っていきましょう！
コメント