CODE ATLAS / 文法辞典
HTMLの書き方
よく使う文法・タグ・操作を、短い例で。36項目から探せます。
36 / 36項目
ページの基本構造
まずは、ブラウザーに読んでもらう土台を作ります。
index.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>練習ページ</title>
</head>
<body>
<p>こんにちは</p>
</body>
</html>見出しと文章
文章にも役割を付けると、読みやすいページになります。
index.html
<h1>私のノート</h1>
<p>今日はHTMLを学びます。</p>リンクと画像
別のページへの入口や、写真を置く方法です。
index.html
<a href="https://developer.mozilla.org/ja/">MDNを開く</a>リスト
箇条書きと、順番のある手順を作ります。
index.html
<ul>
<li>りんご</li>
<li>みかん</li>
</ul>入力欄とボタン
訪問者から情報を受け取るための要素です。
index.html
<label for="name">名前</label>
<input id="name">
<button>決定</button>ページを区切る要素
内容に合わせて、ページの区画を決めます。
index.html
<main>
<h1>日記</h1>
<p>今日は晴れです。</p>
</main>CSS・JavaScriptをつなぐ
3つのファイルで、内容・見た目・動きを分けます。
index.html
<link rel="stylesheet" href="style.css">
<script src="app.js" defer></script>コメント
画面に表示しないメモ。
index.html
<!-- ここはメモです -->改行・区切り線
文中の改行はbr、話題の区切りはhr。
index.html
<p>大阪市<br>北区</p>
<hr>強調・補足
重要な言葉と補足を示す。
index.html
<strong>締切は明日</strong>
<em>必ず</em>確認する
<small>税込価格です</small>div・span
意味を付けずに内容をまとめる。
index.html
<div class="box">
<span class="name">海</span>です。
</div>引用
別の文章からの引用を示す。
index.html
<blockquote>継続は力なり。</blockquote>コードの表示
コードを文章として表示する。
index.html
<pre><code>print("こんにちは")</code></pre>特殊文字
HTMLの記号を文字として表示する。
index.html
<p><p>は段落です。&はアンパサンド。</p>説明リスト
用語と説明を並べる。
index.html
<dl>
<dt>HTML</dt>
<dd>文章の構造を表す</dd>
</dl>記事・補足の区画
独立した記事はarticle、補足はaside。
index.html
<article><h2>今日の日記</h2><p>晴れでした。</p></article>
<aside>関連記事</aside>日付と時刻
機械にも読み取れる日付を書く。
index.html
<time datetime="2026-10-05">10月5日</time>ページ内リンク
同じページの目印へ移動する。
index.html
<a href="#about">自己紹介へ</a>
<h2 id="about">自己紹介</h2>別タブ・ダウンロード
別タブで開く、またはファイルを保存する。
index.html
<a href="about.html" target="_blank" rel="noopener">別タブ</a>
<a href="notes.txt" download>保存</a>downloadは主に同じサイトのファイルに使います。
画像と説明文
画像の代わりになる説明とキャプション。
index.html
<figure>
<img src="cat.jpg" alt="眠る猫" width="300" loading="lazy">
<figcaption>わが家の猫</figcaption>
</figure>音声・動画
再生ボタン付きでメディアを置く。
index.html
<audio src="sound.mp3" controls></audio>
<video src="movie.mp4" controls width="300"></video>折りたたみ
押すと開く説明を作る。
index.html
<details>
<summary>詳しく見る</summary>
<p>補足の説明です。</p>
</details>フォームの送信先
送信先と送信方法を指定する。
index.html
<form action="/contact" method="post">
<input name="name">
<button type="submit">送信</button>
</form>/contactで入力を受け取るサーバー側の処理が必要です。
入力形式
入力内容に合ったtypeを選ぶ。
index.html
<input type="email" name="email">
<input type="password" name="password">
<input type="number" name="age" min="0">
<input type="date" name="date">初期値・必須・入力例
値や入力条件を指定する。
index.html
<input name="name" value="海" required maxlength="20" placeholder="名前">入力欄にはlabelも付けます。
チェックボックス
複数の候補から選べる。
index.html
<label><input type="checkbox" name="hobby" value="book">読書</label>ラジオボタン
同じnameの候補から一つ選ぶ。
index.html
<label><input type="radio" name="size" value="s">S</label>
<label><input type="radio" name="size" value="m">M</label>選択メニュー
候補をリストから選ぶ。
index.html
<label for="city">都市</label>
<select id="city" name="city">
<option value="osaka">大阪</option>
<option value="tokyo">東京</option>
</select>長い文章の入力
複数行の文章を入力する。
index.html
<label for="message">内容</label>
<textarea id="message" name="message" rows="4"></textarea>入力欄をまとめる
関連する入力欄に見出しを付ける。
index.html
<fieldset>
<legend>連絡先</legend>
<label>電話<input type="tel" name="tel"></label>
</fieldset>変更・操作を禁止する
readonlyは編集禁止、disabledは操作禁止。
index.html
<input value="大阪" readonly>
<button disabled>送信</button>disabledの入力値は通常フォーム送信に含まれません。
表
行はtr、見出しはth、値はtd。
index.html
<table>
<caption>価格表</caption>
<tr><th scope="col">商品</th><th scope="col">価格</th></tr>
<tr><td>ノート</td><td>200円</td></tr>
</table>表の区画・セル結合
見出しと本文を分け、列を結合する。
index.html
<table>
<thead><tr><th colspan="2">商品一覧</th></tr></thead>
<tbody><tr><td>ペン</td><td>100円</td></tr></tbody>
</table>スマホ表示・ページ説明
画面幅と検索向けの説明を設定する。
index.html
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="私の自己紹介ページ">id・class・data属性
目印、分類、自分で使う情報を付ける。
index.html
<p id="message" class="note" data-name="海">こんにちは</p>idは同じページで重複させません。
読み上げ用の名前
アイコンだけのボタンに名前を付ける。
index.html
<button aria-label="閉じる">×</button>