HTMLはWebサイトの「骨組み」や「器」です
ども。Dadです。
Webサイトを作る時に必ず出てくる「HTML」という言葉。今回は、HTMLの定義やタグの基本構造、そして代表的なタグの役割まで、Web制作の基本をわかりやすく解説します。
HTML（HyperText Markup Language）とは、Webページに表示される文字や画像に「これは見出しですよ」「これは文章ですよ」という役割を与えるための言語です。
DIYに例えるなら、「棚の枠組み」を作ったり、箱に「材料入れ」というラベルを貼ったりする作業に似ています。ブラウザという大工さんは、このHTMLという設計図を読んで、正しい場所に文字や画像を配置してくれるのです。
なぜ「タグ」で囲む必要があるのか
コンピューターは、ただ文字が並んでいるだけでは、どこが重要なタイトルで、どこが本文なのかを判断できません。そこで、特定の記号（タグ）で囲むことで、役割を明確にします。
基本的には、「始まりタグ」と「終わりタグ」で中身を挟むのがルールです。
始まりタグは <html>、終わりタグは </html> となり、スラッシュ（/）で「ここで終わり」を意味します。
<html>（ここからHTMLです）
</html>（ここでHTMLは終わりです）
このように、中身を「タグという器」に入れることで、初めてWebページとしての構造が成り立ちます。
代表的なHTMLタグ
HTMLには数多くのタグがありますが、ここでは特によく使う代表的なタグを紹介します。
| タグ | 役割 | 説明 |
|---|---|---|
| <div> | 汎用コンテナ | 複数の要素をまとめる箱として使います。 |
| <section> | セクション | 意味的なまとまり（区切り）に使います。 |
| <h1>〜<h6> | 見出し | 数字が大きくなるほど小さな見出しになります。SEOで重要です。 |
| <p> | 段落 | 文章のまとまり（パラグラフ）を示します。 |
| <a> | リンク | クリックすると別ページへ移動するリンクを作ります。 |
| <img> | 画像 | 画像を表示します。終わりタグ（</img>）はありません。 |
| <ul> | 順序なしリスト | 箇条書きのリストを作る時に使います。 |
| <ol> | 順序ありリスト | 番号付きのリストを作る時に使います。 |
| <li> | リスト項目 | リスト内の各項目を表します。ulやolの中で使います。 |
| <header> | ヘッダー | ページ上部のロゴやメニューを配置する部分です。 |
| <footer> | フッター | ページ下部の著作権表示などを配置する部分です。 |
| <nav> | ナビゲーション | 主要なメニュー（案内板）を表すタグです。 |
| <article> | 記事コンテンツ | ブログ記事など、それ自体で独立した内容を表します。 |
| <aside> | 補足情報 | サイドバーや、本筋とは別の補足情報に使います。 |
| <main> | メインコンテンツ | ページの主要な中身を表します。1ページに1つだけ使います。 |
| <span> | インライン汎用 | 文章の一部を囲って、部分的にスタイルを変える時に使います。 |
| <strong> | 重要テキスト | 重要な言葉を強調します。通常は太字で表示されます。 |
| <br> | 改行 | 文章を途中で改行させます。終わりタグはありません。 |
これらのタグを組み合わせることで、Webページの骨組みが完成します。
まとめ
HTMLはWebサイトの「骨組み」を作る言語で、タグを使って文章の構造を定義します。
基本的なタグを覚えれば、シンプルなWebページは作れるようになります。まずは代表的なタグから触ってみて、少しずつ慣れていきましょう。
ではまた。
