HTML初心者は何から始める？最初に覚えておきたい5つの基本を3児ママが実体験で解説

HTML初心者はなにから始めればいいの？
①HTMLの基本構造を理解する
②よく使うタグの意味を覚える
③リストタグ(ul・ol・li)で箇条書きを作る
④画像を表示するimgタグとalt属性
⑤リンクの貼り方(href・相対パス・絶対パス)を覚える
HTML初心者はこの5つから始めればOK

HTML初心者はなにから始めればいいの？

独学でウェブ制作を学び始めたとき、私も同じ疑問にぶつかりました。

3人の子育てをしながら、家事や送り迎えの合間のスキマ時間でコツコツ勉強してきた実体験をもとに、今日は最初に覚えておきたい5つの基本を紹介します。

現在、私は100日チャレンジという形で毎日ウェブ制作の学習を続けているのですが、こうして「初心者だった頃、何につまずいたか」を改めて言葉にしてみると、自分の中の知識が整理されて、思いがけず良い振り返りになりました。

学んだことをアウトプットする作業そのものが、理解を深める勉強になっているなと実感しています。

これからHTMLを学ぶ方の「何から手をつければいいかわからない」というモヤモヤが、少しでもスッキリしたら嬉しいです。

①HTMLの基本構造を理解する

HTML初心者がまず知っておきたいのが、ページ全体の「骨組み」です。

<!DOCTYPE html>
<html>
<head>
   <title>ページタイトル</title>
</head>
<body>
  ここに表示される内容
</body>
</html>

正直、最初にこのコードを見たときは「呪文みたい・・・」と思いました。でも意味は意外とシンプルです。

・<!DOCTYPE html>：HTML5で書いていますよという宣言

・<head>：ページの設定情報(タイトルなど)を書く場所

・<body>：実際に画面に表示される内容を書く場所

子供の寝かしつけ後に、この構造だけをノートに書き写して覚えた夜を今でも覚えています。ここさえ押さえれば、あとのタグは「bodyの中に書く部品」だと理解できるので、グッと気持ちが楽になります。

②よく使うタグの意味を覚える

基本構造の次は、実際によく使うタグです。最初から全て覚えようとせず、この3つだけで十分です。

・<h1>～<h6>:見出し(数字が小さいほど大きい見出し)

・<p>：段落(文章のまとまり)

・<a>：リンク

私も最初は「h1とpの違いってなに？」というレベルからのスタートでした。ですが、ブログ記事を書くように「大見出しh1→小見出しh2→本文p」という順番を意識すると、自然と使い分けができるようになります。

③リストタグ(ul・ol・li)で箇条書きを作る

メニューや手順など、箇条書きを作るときに使うのがリストタグです。

・<ul>:順番のないリスト(・のマーク)

・<ol>:順番のあるリスト(1.2.3…)

・<li>:リストの各項目

この記事の「①②③」のような番号付きリストも、実はこのタグの仕組みそのものです。育児中は「見た目より、まず動くものを作る」ことを優先していたので、リストタグは早い段階で使えるようになって助かった機能のひとつでした。

④画像を表示するimgタグとalt属性

ブログやサイトに画像を入れるときに使うのが<img>タグです。

<img src="画像のURL" alt=画像の説明>

ここで初心者がつまずきやすいのが alt属性です。私も最初は「別になくても画像映るし…」と省略していました。ですがalt属性は、画像が表示されないときの代替テキストであると同時に、検索エンジンが画像の内容を理解する手がかりにもなります。SEOの観点からも、必ず入れる習慣をつけておきたいポイントです。

⑤リンクの貼り方(href・相対パス・絶対パス)を覚える

最後は、ページ同氏をつなぐリンクです。

<a href="リンク先URL">リンクテキスト</a>

ここでのつまずきポイントが「相対パス」と「絶対パス」の違いです。
• 絶対パス：https://example.com/page.html のように完全なURLを書く
• 相対パス：page.html のように今いる場所からの位置関係で書く
同じサイト内のページ同士をリンクさせるときは相対パス、外部サイトへのリンクは絶対パスというざっくりの使い分けを覚えるだけでも、最初のうちは十分です。