前の記事では、Web制作を「家づくり」に例えて、HTMLが「骨組み」であることを解説しました。
今回はHTMLをどう書いていくのか、その基本的なルールと「これだけは外せない」5つのタグをご紹介します。

専門のソフトがなくても、ブラウザとテキストエディタ（メモ帳など）があれば、誰でも今すぐHTMLを書くことができます。まずは「習うより慣れろ」の精神で見ていきましょう！

1. HTMLの基本ルールは「囲むだけ」

HTMLの書き方はとてもシンプルです。表示したい内容を「タグ」と呼ばれる記号で挟むのが基本です。

<開始タグ> ここに内容 </終了タグ>

例えば、見出しを作りたいときは <h1>見出しの内容</h1> と書きます。この「タグ」によって、コンピューターはそのテキストがどんな役割なのかを理解します。

2. 最初に覚えたい「基本のタグ」5選

Web制作の現場で、毎日必ず使うタグを5つ厳選しました。これらを組み合わせるだけで、記事の原型ができあがります。

① 見出しを作る：<h1> 〜 <h6>

文章のタイトルや見出しに使います。数字が小さいほど重要な見出し（大きな見出し）になります。

② 段落を作る：<p>

「Paragraph（段落）」の略です。一般的な文章やテキストを表示するときは、このタグで囲みます。

③ リンクを貼る：<a>

他のページへ飛ばすためのリンクを作ります。href="URL" という属性をセットで使います。

④ 画像を出す：<img>

写真やイラストを表示します。このタグは例外的に「終了タグ」がいらないのが特徴です。

⑤ リストを作る：<ul> <li>

箇条書きにするときに使います。情報を整理して見せたいときに非常に役立ちます。

3. 実際に書いてみよう（サンプルコード）

以下のコードをコピーして、エディタに貼り付けてみてください。これがWebサイトの最小限の形です。

<h1>私の初めてのWebサイト</h1>
<p>今日はHTMLの勉強をしています。</p>
<ul>
  <li>HTMLを覚える</li>
  <li>CSSで色をつける</li>
  <li>WordPressで公開する</li>
</ul>

4. 現場のプロが教える「失敗しないコツ」

初心者が最初につまずきやすいポイントを2つお伝えします。

• 半角英数字で書く： タグの中に「全角スペース」が混じると、正しく表示されない原因になります。必ず半角で入力しましょう。
• タグを閉じ忘れない： </終了タグ> を忘れると、デザインが崩れることがあります。サンドイッチすることを常に意識しましょう。

まとめ：骨組みができれば、次はデザイン！

今回はHTMLの「基本のキ」を解説しました。タグを使って構造を作る感覚が掴めたでしょうか？

骨組みができたら、次はそれをカッコよく見せる「CSS（デザイン）」の出番です。
次回は、文字に色をつけたり、配置を整えたりする方法についてご紹介します。お楽しみに！

Gainet.bizでは、現場目線のWeb制作ナレッジを定期的に発信しています。
記事が参考になった方は、ぜひブックマークしてチェックしてください！

ハヤタク

株式会社ガイネット代表取締役　趣味は神社仏閣巡り　初めてホームページを作ったのは20年以上前。そこから2社ほどで修行し33歳でフリーランスに、色々あって今さら法人設立。WEBとデザインの何でも屋であり書家でありYouTuberです。