こんにちは、grillon designです。
「HTMLを勉強したいけど、何から始めればいいの？」
HTMLを学び始めたとき、私もまさにこの疑問にぶつかりました。
HTMLの本や教材を開いてみても、知らないタグやコードがたくさん出てきて、
「結局、何から覚えればいいの……？」
と、最初はかなり戸惑いました。
3人の子育てをしながら、家事や送り迎えの合間のスキマ時間でWeb制作を勉強してきた私。
現在は「Web制作100日チャレンジ」として、毎日少しずつ学習を続けています。
今回は、そんな私が実際にHTMLを学び直す中で、
「まずはここを押さえておけば大丈夫」
と思った、HTML初心者が最初に覚えておきたい5つの基本を紹介します。
これからHTMLを独学で勉強する方の、
「何から手をつければいいか分からない」
というモヤモヤが、少しでもスッキリしたら嬉しいです。
HTML初心者が最初に覚えたい5つの基本
HTMLにはたくさんのタグがあります。
最初からすべて覚えようとすると、私のように、
「え、こんなにあるの……？」
と途方に暮れてしまいます。
でも、最初から全部覚える必要はありません。
まずは、
- HTMLの基本構造
- よく使うHTMLタグ
- リストタグ
- imgタグとalt属性
- リンクとパス
この5つから始めればOKです。
それでは、一つずつ見ていきます。
① HTMLの基本構造を理解する
HTML初心者がまず知っておきたいのが、Webページ全体の基本構造です。
まずは、この形を覚えてみます。
<!DOCTYPE html>
<html>
<head>
<title>ページタイトル</title>
</head>
<body>
ここに表示される内容
</body>
</html>
最初にこのコードを見たときの私の感想は、
「呪文みたい……」
でした（笑）。
でも、一つずつ意味を理解すると、意外とシンプルです。
<!DOCTYPE html>→ HTML5で書かれていることを宣言<html>→ HTML文書全体を囲む<head>→ ページに関する情報を記述する<title>→ ページのタイトルを指定する<body>→ ブラウザ上に表示する内容を記述する
つまり、
「ページ全体をhtmlで囲んで、その中にheadとbodyがある」
と考えると分かりやすいです。
私も子どもの寝かしつけが終わったあと、この基本構造をノートに書き写して覚えた夜がありました。
全部を一気に覚えようとするのではなく、まずは、
「ここがページの骨組みなんだ」
と理解する。
これだけでも、かなり気持ちがラクになります。
② よく使うHTMLタグの意味を覚える
基本構造が分かったら、次は実際に文章を書くためのタグです。
最初はすべて覚える必要はありません。
まずは、よく使うものから。
見出し：h1〜h6
<h1>〜<h6>は、文章の見出しを表すタグです。
数字が小さいほど上位の見出しになります。
たとえば、
- h1 → ページの主題
- h2 → 大きなセクション
- h3 → h2の中の小見出し
というように、文章の階層を作ります。
ブログ記事なら、
h1：記事タイトル
↓
h2：HTML初心者が覚えたいこと
↓
h3：HTMLの基本構造
というようなイメージです。
段落：p
<p>は文章の段落を表します。
ブログ本文など、まとまった文章を書くときによく使います。
リンク：a
<a>はリンクを作るためのタグです。
<a href="https://example.com">こちらをクリック</a>
「この文字をクリックすると、別のページに移動する」という仕組みを作れます。
最初は、
h＝見出し
p＝文章
a＝リンク
くらいから覚えておけば十分です。
「タグを全部暗記しないとWeb制作できないのかな？」
私も最初はそう思っていました。
でも実際には、使っているうちに少しずつ覚えていけば大丈夫です。
③ リストタグ（ul・ol・li）で箇条書きを作る
次に覚えておきたいのが、リストタグです。
ブログやWebサイトでは、箇条書きを使う場面が意外とたくさんあります。
使うのは主にこの3つ。
<ul>→ 順番のないリスト<ol>→ 順番のあるリスト<li>→ リストの各項目
たとえば、
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
と書くと、箇条書きのリストになります。
一方、
<ol>
<li>HTMLを学ぶ</li>
<li>CSSを学ぶ</li>
<li>実際に作ってみる</li>
</ol>
なら、順番のあるリストになります。
この記事のような「①②③」という説明も、考え方としてはリストと同じです。
育児をしながら勉強していると、限られた時間で情報を整理することも多いので、リストタグを使って情報を分かりやすくまとめられるようになると、とても便利でした。
④ imgタグとalt属性を理解する
ブログやWebサイトに画像を表示するときに使うのが、<img>タグです。
基本的には、
<img src="画像のURL" alt="画像の説明">
のように書きます。
ここで初心者がつまずきやすいのが、alt属性です。
私も最初は、
「altって何？画像は表示されてるし、なくてもいいんじゃない？」
と思っていました。
でも、alt属性にはきちんと役割があります。
alt属性には、画像の内容を説明する代替テキストを設定します。
何らかの理由で画像が表示できない場合に、その説明が代わりに表示されることがあります。
また、スクリーンリーダーなどを利用する人に画像の内容を伝えるためにも重要です。
さらに、検索エンジンが画像の内容を理解するための手がかりの一つにもなります。
つまり、
「画像が表示されればOK」ではなく、画像が何を表しているのかを適切に伝える
という意識が大切なんですね。
これを知ってから、画像を入れるときはalt属性もセットで考えるようになりました。
⑤ リンクの貼り方と「相対パス・絶対パス」を覚える
最後に覚えておきたいのが、リンクの作り方とパスです。
HTMLでは、<a>タグとhref属性を使ってリンクを作ります。
<a href="リンク先URL">リンクテキスト</a>
ここで初心者が少し混乱しやすいのが、
「相対パス」と「絶対パス」って何？」
というところ。
私も最初はここでつまずきました。
絶対パスとは？
絶対パスは、目的地までのURLを最初からすべて書く方法です。
https://example.com/page.html
Webサイトの住所を最初から全部書いているようなイメージです。
相対パスとは？
相対パスは、現在いるファイルを基準にして、リンク先までの位置関係を書く方法です。
page.html
たとえば同じフォルダ内にあるページへリンクするときなどに使います。
ざっくり覚えるなら、
絶対パス＝URLを全部書く
相対パス＝今いる場所からの位置関係で書く
でOKです。
最初から複雑なフォルダ構成まで覚える必要はありません。
まずは「パスには2種類ある」と知っておくだけでも十分です。
HTML初心者は「全部覚える」より「使ってみる」
ここまで、HTML初心者が最初に覚えておきたい5つを紹介しました。
もう一度まとめると、
① HTMLの基本構造
DOCTYPE・html・head・body
② よく使うHTMLタグ
h1〜h6・p・a
③ リストタグ
ul・ol・li
④ 画像タグ
img・alt
⑤ リンクとパス
href・相対パス・絶対パス
です。
でも、ここで一つ伝えたいことがあります。
これを全部暗記しなくても大丈夫です。
私自身、最初からスラスラHTMLを書けたわけではありません。
3人の子どものお世話をしながら、空いた時間に少しずつ勉強して、
「あれ、このタグなんだっけ？」
と調べながらコードを書いていました。
それでも、何度も使っているうちに少しずつ覚えていきました。
だから、これからHTMLを学ぶ方も、
「完璧に覚えてから次に進もう」
と思わなくて大丈夫です。
「分からない」を調べながら進むのも立派な勉強
Web制作を勉強していると、分からないことが次から次へと出てきます。
私も、
「このタグって何？」
「この属性は必要？」
「この書き方で合ってる？」
と、しょっちゅう調べています。
最初は「覚えられない自分はダメなのかな」と思ったこともありました。
でも、今は少し考え方が変わりました。
分からないことを調べて、自分で試して、また使ってみる。
これもWeb制作を学ぶ上で大切な経験なんだと思います。
子育てのスキマ時間でも、少しずつ前に進める
私の場合、まとまった勉強時間を毎日確保するのは難しいです。
子どもの予定があったり、家事があったり。
「今日は全然勉強できなかった……」
という日もあります。
それでも、
10分だけコードを書く。
一つだけタグを調べる。
昨日勉強したことを復習する。
そんな小さな積み重ねでも、続けていると少しずつ知識がつながってきます。
今回この記事を書きながら、
「初心者の頃、自分は何につまずいていたんだろう？」
と振り返ったことで、私自身の知識も整理されました。
学んだことを誰かに伝えるつもりで文章にする。
それだけでも、かなり良い復習になるんだなと実感しています。
まとめ｜HTML初心者は5つの基本から始めよう
HTMLを学び始めたばかりなら、最初からすべてのタグを覚える必要はありません。
まずは、
① HTMLの基本構造
② よく使うHTMLタグ
③ リストタグ
④ imgタグとalt属性
⑤ リンク・href・パス
この5つから始めてみましょう。
そして、覚えられなくても大丈夫。
「使いながら覚える」
くらいの気持ちで、実際にコードを書いてみることをおすすめします。
私自身も、まだまだ学びの途中です。
3人の子育てをしながら、スキマ時間で少しずつ。
100日チャレンジを通して、できることを一つずつ増やしていきたいと思っています。
この記事が、
「HTMLを勉強したいけど、何から始めればいいか分からない」
という方の、最初の一歩になれば嬉しいです。
これからも、学んだことをアウトプットしながら、自分自身の理解も深めていきたいと思います。
コメント