HTML要素一覧:初心者のための最新ガイド

更新日:

投稿日:

カテゴリー:

HTMLはWebページの骨格を作る言語です。
要素(タグ)にはそれぞれ役割があり、正しく使うことで意味のある構造を作ることができます。
この記事では、初心者がよく使う要素を整理し、HTML Living Standard に準拠した最新の使い方を解説します。

  1. 基本構造
    ・<html> → 文書のルート要素
    ・<head> → メタデータを含む部分
    ・<body> → コンテンツ本体
  2. セクション要素
    ・<header> / <footer> → セクションや文書の冒頭・末尾
    ・<article> → 独立した記事やコンテンツ
    ・<section> → 意味のあるまとまり
    ・<nav> → ナビゲーションリンク
    ・<aside> → 補足的な内容
    ・<main> → 文書の主要部分
  3. テキスト要素
    ・<p> → 段落
    ・<blockquote> → 引用
    ・<figure> / <figcaption> → 図やキャプション
    ・<ul> / <ol> / <li> → リスト
    ・<dl> / <dt> / <dd> → 定義リスト
  4. インライン要素
    ・<a> → リンク
    ・<em> → 強調(意味的に重要)
    ・<strong> → 強い強調
    ・<i> → 専門用語や慣用句などの区別(※装飾目的は非推奨)
    ・<b> → キーワードなどの強調(※装飾目的は非推奨)
    ・<u> → 非テキスト的注釈(※装飾目的は非推奨)
    ・<s> → もはや正しくない/有効でない内容(※装飾目的は非推奨)
    ・<mark> → 強調表示
    ・<time> → 日付や時刻
    ・<code> / <kbd> / <samp> → コードや入力例
  5. フォーム要素
    ・<form> → 入力フォーム
    ・<input> / <textarea> / <select> → 入力欄
    ・<button> → ボタン
    ・<label> → 入力欄のラベル
    ・<fieldset> / <legend> → グループ化
  6. 現在は非推奨(廃止要素)
    ・<hgroup> → 見出しグループ化は非推奨
    ・<keygen> → 暗号鍵生成は仕様から削除
    ・<command> / <menuitem> → 非推奨(ブラウザ実装なし)
  7. 新しい要素
    ・<dialog> → モーダルダイアログ
    ・<template> → 再利用可能なコンテンツ断片
    ・<slot> → Web Components の挿入ポイント

HTML要素は「意味を持たせる」ことが大切です。
廃止要素や装飾目的の使い方は避け、最新仕様に沿った使い方を心がけましょう。
初心者はまず「基本構造 → セクション → テキスト → フォーム」の流れで学び、必要に応じて新要素を取り入れると理解が深まります。