HTMLとは！？｜基礎知識を分かりやすく解説

HTMLはWebサイトの「骨組み」や「器」です

ども。Dadです。

Webサイトを作る時に必ず出てくる「HTML」という言葉。今回は、HTMLの定義やタグの基本構造、そして代表的なタグの役割まで、Web制作の基本をわかりやすく解説します。

HTML（HyperText Markup Language）とは、Webページに表示される文字や画像に「これは見出しですよ」「これは文章ですよ」という役割を与えるための言語です。

DIYに例えるなら、「棚の枠組み」を作ったり、箱に「材料入れ」というラベルを貼ったりする作業に似ています。ブラウザという大工さんは、このHTMLという設計図を読んで、正しい場所に文字や画像を配置してくれるのです。

コンピューターは、ただ文字が並んでいるだけでは、どこが重要なタイトルで、どこが本文なのかを判断できません。そこで、特定の記号（タグ）で囲むことで、役割を明確にします。

基本的には、「始まりタグ」と「終わりタグ」で中身を挟むのがルールです。

始まりタグは <html>、終わりタグは </html> となり、スラッシュ（/）で「ここで終わり」を意味します。

<html>（ここからHTMLです）

</html>（ここでHTMLは終わりです）

このように、中身を「タグという器」に入れることで、初めてWebページとしての構造が成り立ちます。

HTMLには数多くのタグがありますが、ここでは特によく使う代表的なタグを紹介します。

タグ	役割	説明
<div>	汎用コンテナ	複数の要素をまとめる箱として使います。
<section>	セクション	意味的なまとまり（区切り）に使います。
<h1>〜<h6>	見出し	数字が大きくなるほど小さな見出しになります。SEOで重要です。
<p>	段落	文章のまとまりを示します。
<a>	リンク	クリックで別ページへ移動します。
<img>	画像	画像を表示します（終了タグなし）。
<ul>	順序なしリスト	箇条書きに使用。
<ol>	順序ありリスト	番号付きリストに使用。
<li>	リスト項目	リスト内の要素。
<header>	ヘッダー	ページ上部の領域。
<footer>	フッター	ページ下部の領域。
<nav>	ナビゲーション	メニュー領域。
<article>	記事	独立したコンテンツ。
<aside>	補足	サイド情報。
<main>	メイン	主要コンテンツ。
<span>	インライン	部分装飾。
<strong>	強調	重要テキスト。
<br>	改行	改行用。

これらのタグを組み合わせることで、Webページの骨組みが完成します。

HTMLはWebサイトの「骨組み」を作る言語で、タグを使って文章の構造を定義します。

基本的なタグを覚えれば、シンプルなWebページは作れるようになります。まずは代表的なタグから触ってみて、少しずつ慣れていきましょう。

ではまた。

「オーガニック×農×工作＝持続可能な暮らし」をテーマにお送りする
無料メルマガ講座『モアグリ通信』の詳しいご案内はこちら

いますぐ読んでみたい方はこちら

MoreGreenでは、みなさまからの活動支援を受け付けています。