HTML - SHIROLAB

HTMLの基本をゆるりと学ぼう

「HTMLって何ですか？」「タグってどう使うのでしょう？」と疑問に思っている方に向けて、必要なところだけを分かりやすくまとめました！入門者向けに、HTMLの基本をサクッと解説いたします。

HTMLって何のこと？

HTMLとは「HyperText Markup Language」の略で、ウェブページの構造を作るための言語です。この言語があるおかげで、ページに文字や画像を配置したり、リンクを作ったりすることができます。イメージとしては、空っぽの部屋に家具を配置するための設計図のような役割を果たします。HTMLがその「部屋の骨組み」を作っている感じです。

ウェブサイトが表示される仕組みを少し深掘りすると、HTMLは「構造」を作り、CSSが「デザイン」を担当し、JavaScriptが「動き」を加えるという役割分担があります。つまり、HTMLはウェブ制作の土台とも言える存在なのです。

HTMLの基本構造

HTML文書は「要素」をタグで挟んで構成されます。要素は「開始タグ」と「終了タグ」で囲むのが基本です。例えば、こんな感じ:

<p>ここに文字</p>

この例では、が段落を表す開始タグで、が終了タグです。このように、タグで囲むことで、ブラウザに「これは段落です」と伝える役割を果たします。

ドキュメントツリーって？

HTMLの要素は「親子関係」や「兄弟関係」で繋がっており、それが全体の構造を形作っています。これを「ドキュメントツリー」と呼びます。イメージとしては、大きな家系図のようなもので、親要素から子要素が派生し、それぞれが役割を持ちながら繋がっている感じです。

例えば、以下のようなコードを見てみましょう:

<html>
  <head>
    <title>ページタイトル</title>
  </head>
  <body>
    <h1>見出し</h1>
    <p>段落1</p>
    <p>段落2</p>
  </body>
</html>

ここでは、<html>が最上位の親要素で、その中に<head>と<body>が含まれています。さらに、その中に<title>や<h1>、といった子要素が含まれています。このように、HTML文書は階層構造で整理されています。

DOCTYPE宣言

HTML文書が「HTML5」に基づいていることを宣言するタグです。

<!DOCTYPE html>

これをページの一番上に記述することで、ブラウザに「このページはHTML5の文法で書かれていますよ」と伝えます。

主要要素

html: HTML文書の最上位要素で、すべてのコードを包含します。
head: メタデータを含む部分。タイトルや文字コード、キーワードなどを記述します。

<head>…</head>

body: ユーザーに見せる内容を記述します。文字や画像、リンクなどをここに記述します。

<body>…</body>

HTMLの主要タグとは？

HTMLで一番使う基本的なタグをご紹介します！

h1: 文書の見出しを作ります。

<h1>ここに見出し</h1>

p: 文章の段落を書くのに便利なタグ。

<p>ここにテキスト</p>

style: 見た目をいじりたいときにCSSを書く場所。

<style>見た目をよくするCSS</style>

a: リンクを作成するタグ。

<a href="https://example.com">リンクテキスト</a>

img: 画像を表示するタグ。src属性で画像のURLを指定します。

<img src="image.jpg" alt="説明文">

HTMLを書くときのコツ

初心者の方がHTMLを書く際に気をつけるポイントをいくつかご紹介します。

インデントを揃える: コードを見やすくするために、子要素を親要素よりも少し右にずらして書きます。これにより、階層構造が一目でわかるようになります。
閉じタグを忘れない: 多くのHTML要素には終了タグが必要です。例えば、には必ず対応するが必要です。
意味のある名前を付ける: クラスやIDを使うときは、その内容がわかる名前を付けましょう。例えば、class="main-content"のように記述します。
ブラウザで確認する: コードを書いたら、実際にブラウザで表示して確認しましょう。意図した通りに表示されているかどうかを確認するのは重要です。

さらに学びたい人のためのリソース

これからスキルアップしたい方に向けて、おすすめの資料をご紹介します！

Mozilla Developer Network (MDN) Web Docs – HTMLのマスターガイド。
W3Schools – 入門者に最適なサイト。
HTML.com – HTMLの基本を書いている記事がたくさん！
CSS-Tricks – HTMLとCSSの活用方法が学べる実践的なサイト。
CodePen – 実際にコードを書いて試せるツール。

HTMLを覚えると、自分のアイデアをウェブに落とし込めるので、やってみる価値大ですよね。調べたことを実際に書きながら、楽しく学んでいきましょう！自分で作ったウェブページが思った通りに表示されると、本当に感動しますよ！