HTMLはWebページの骨格を作る言語です。
要素(タグ)にはそれぞれ役割があり、正しく使うことで意味のある構造を作ることができます。
この記事では、初心者がよく使う要素を整理し、HTML Living Standard に準拠した最新の使い方を解説します。
- 基本構造
・<html> → 文書のルート要素
・<head> → メタデータを含む部分
・<body> → コンテンツ本体 - セクション要素
・<header> / <footer> → セクションや文書の冒頭・末尾
・<article> → 独立した記事やコンテンツ
・<section> → 意味のあるまとまり
・<nav> → ナビゲーションリンク
・<aside> → 補足的な内容
・<main> → 文書の主要部分 - テキスト要素
・<p> → 段落
・<blockquote> → 引用
・<figure> / <figcaption> → 図やキャプション
・<ul> / <ol> / <li> → リスト
・<dl> / <dt> / <dd> → 定義リスト - インライン要素
・<a> → リンク
・<em> → 強調(意味的に重要)
・<strong> → 強い強調
・<i> → 専門用語や慣用句などの区別(※装飾目的は非推奨)
・<b> → キーワードなどの強調(※装飾目的は非推奨)
・<u> → 非テキスト的注釈(※装飾目的は非推奨)
・<s> → もはや正しくない/有効でない内容(※装飾目的は非推奨)
・<mark> → 強調表示
・<time> → 日付や時刻
・<code> / <kbd> / <samp> → コードや入力例 - フォーム要素
・<form> → 入力フォーム
・<input> / <textarea> / <select> → 入力欄
・<button> → ボタン
・<label> → 入力欄のラベル
・<fieldset> / <legend> → グループ化 - 現在は非推奨(廃止要素)
・<hgroup> → 見出しグループ化は非推奨
・<keygen> → 暗号鍵生成は仕様から削除
・<command> / <menuitem> → 非推奨(ブラウザ実装なし) - 新しい要素
・<dialog> → モーダルダイアログ
・<template> → 再利用可能なコンテンツ断片
・<slot> → Web Components の挿入ポイント
HTML要素は「意味を持たせる」ことが大切です。
廃止要素や装飾目的の使い方は避け、最新仕様に沿った使い方を心がけましょう。
初心者はまず「基本構造 → セクション → テキスト → フォーム」の流れで学び、必要に応じて新要素を取り入れると理解が深まります。