HTMLの基本文法
HTMLは、まず「文法を全部覚える」のではなく、役割ごとに分解して読むと整理しやすいです。最初に、HTMLの基本形はこれだけです。
<タグ名 属性名="値">
中身
</タグ名>
それでは実際に代表的なタグを説明します
| タグ | 主な役割 |
|---|---|
<!doctype html> |
HTML5で書かれた文書であることを宣言する |
<html> |
HTML文書全体を囲む |
<head> |
ブラウザ向けの設定や情報を書く |
<body> |
実際に画面へ表示する内容を書く |
HTML5は、HTMLの第5世代として整備された仕様のこと。書かないと、ブラウザが古いWEBだと判断して、レイアウトが崩れるかも
HTMLは基本的に、タグを入れ子にして画面の構造を作ります。
<header>
<div>
<h1>UI</h1>
<p>説明文</p>
</div>
</header>
この「親子関係」を見ることが、HTMLを読むうえで最も重要です。
属性の設定もみてみましょう
| 記述 | 役割 |
|---|---|
charset="UTF-8" |
日本語などの文字化けを防ぐ |
viewport |
画面幅に合わせる |
title |
ブラウザのタブに表示する名前 |
link |
CSSファイルを読み込む |
script |
JavaScriptファイルを読み込む |
defer |
HTMLを読み終えてからJavaScriptを実行する |
body の中は、まず画面を大きな領域に分けて読みます。
body
├─ aside 左側のナビゲーション
├─ header 上部ヘッダー
└─ main メインコンテンツ
最初は細かいタグを見ずに、これだけ把握すれば十分です。
タグは役割ごとに整理する
レイアウト・領域を表すタグ
| タグ | 主な役割 | 使う場面 |
|---|---|---|
<aside> |
メイン内容を補足する領域 | サイドバー、関連情報、広告、注意事項など |
<header> |
ページや領域の先頭部分 | タイトル、ロゴ、説明、検索欄など |
<main> |
ページの中心となる内容 | そのページで最も重要なコンテンツ |
<section> |
内容を意味のある単位に分ける | 見出しごとの章、機能、カテゴリなど |
<nav> |
ナビゲーションをまとめる | メニュー、ページ内リンク、パンくずリストなど |
<div> |
特別な意味を持たない汎用的な領域 | レイアウト調整や複数要素のグループ化 |
div は便利ですが、意味がある場合は header や nav を使う方が構は明確。
文字を表すタグ
| タグ | 用途 |
|---|---|
h1〜h6
|
見出し |
p |
段落 |
strong |
重要な文字 |
span |
文章の一部分を囲む |
small |
補足的な小さい文字 |
time |
日付や時刻 |
div が全体の箱で、strong と span が中の文字要素です。
操作するタグ
| タグ | 主な役割 | 使う場面・例 |
|---|---|---|
<a> |
ページやURLへ移動するリンク | <a href="home.html">Homeへ移動</a> |
<button> |
画面内の処理を実行するボタン | <button type="button">DB更新</button> |
<input> |
ユーザーが値を入力する欄 | <input type="search"> |
<select> |
選択肢を表示する選択欄 | <select>...</select> |
<option> |
<select>内の各選択肢 |
<option>すべて</option> |
<label> |
入力欄の項目名や説明を表す | <label for="keyword">検索</label> |
<a>と<button>の違い |
<a>は移動、<button>は処理 |
移動なら<a>、JavaScript実行などは<button>
|
表を表すタグ
| タグ | 主な役割 | 使う場面・例 |
|---|---|---|
<table> |
表全体を囲む | 表形式のデータを表示するとき |
<thead> |
表の見出し部分をまとめる | 列名や項目名を配置する部分 |
<tbody> |
表のデータ部分をまとめる | 実際のデータを配置する部分 |
<tr> |
表の1行を表す | 見出し行やデータ行 |
<th> |
見出しセルを表す | <th>名前</th> |
<td> |
データセルを表す | <td>山田</td> |
表の中身を動的に変えたい場合は、空の表を用意しておき、JavaScriptの方で記載します。
外部ファイルとの連携
特に重要なのは、次の3つです。
class
id
data-*
class
<header class="topbar">
主にCSSから見た目を指定するために使います。
.topbar {
height: 60px;
}
同じクラスは複数の要素に付けられます。
<a class="side-link">Home</a>
<a class="side-link">WEB UI</a>
class = グループ名
グループ名はこう言ったサイトをみて、誰でも理解しやすい名称をつけることをお勧めします。
id
<button id="resetButton">
主にJavaScriptから特定の要素を探すために使います。
const resetButton = document.getElementById("resetButton");
同じページ内では、基本的に同じ id を複数使いません。
id = 個体識別番号
実用的な理解
<button
id="resetButton"
class="reset-button"
type="button"
>
リセット
</button>
分解すると、
id="resetButton"
→ JavaScriptがこのボタンを探すための名前（ユーザー指定）
class="reset-button"
→ CSSが見た目を指定するための名前（ユーザー指定）
type="button" （固定） ボタンは３パターンある
type |
押したときの動作 |
|---|---|
button |
何もしない。JavaScriptで動作を決める |
submit |
<form>の入力内容を送信する |
reset |
<form>の入力内容を最初の状態に戻す |
data-* 属性
次の部分です。data-modal は、HTML標準の意味を持たない、開発者が自由に定義できる属性です。JavaScriptでは次のように取得できます。
HTML
<button type="button" role="menuitem" data-modal="manual">
JavaScript
const modalType = button.dataset.modal;
HTML JavaScript
data-modal → dataset.modal
data-size → dataset.size
data-user-id → dataset.userId
です。
HTML
data-modal="manual"
data-modal="version"
によって、どのモーダルを開くか判定できます。
JavaScript
if (button.dataset.modal === "manual") {
// マニュアルを表示
}
if (button.dataset.modal === "version") {
// リリースノートを表示
}
hidden の意味
<div id="helpMenu" class="help-menu" hidden>
hidden が付いている要素は非表示になります。JavaScriptから次のように切り替えられます。
JavaScript
helpMenu.hidden = false; //表示
helpMenu.hidden = true; // 非表示
aria-* は補助情報
次のような記述です。
aria-label="画面切り替え"
aria-current="page"
aria-expanded="false"
aria-haspopup="menu"
aria-modal="true"
これは主に、スクリーンリーダーなどに要素の意味や状態を伝えるためのものです。
例えば、以下のようなHTMLは、画面上は ⌂ しか表示されません。しかし、スクリーンリーダーには「Home」という意味を伝えられます。
HTML
<a href="home.html" aria-label="Home">⌂</a>
こちらは逆に、装飾用の検索アイコンを読み上げ対象から除外しています。最初から全部覚える必要はありません。
<span aria-hidden="true">⌕</span>
aria-label 要素の説明
aria-hidden 読み上げから除外
aria-expanded 開閉状態
HTML・CSS・JavaScriptの役割分担
この3つを混同しないことが重要です。
HTML
画面に何があるかを定義します。
<button id="resetButton" class="reset-button">
DB更新
</button>
CSS
どう見えるかを定義します。
.reset-button {
border-radius: 6px;
padding: 8px 16px;
}
JavaScript
押したときに何が起こるかを定義します。
const resetButton = document.getElementById("resetButton");
resetButton.addEventListener("click", () => {
console.log("DB更新ボタンが押されました");
});
整理すると、
HTML 構造
CSS 見た目
JavaScript 動作
JavaScriptとの接続を見る
id を探します。
id="searchInput"
id="departmentFilter"
id="statusFilter"
id="resetButton"
id="tableHeader"
id="tableBody"
これらはJavaScriptから操作される可能性が高い要素です。
CSSとの接続を見る
class を探します。
class="topbar"
class="workspace"
class="toolbar"
class="table-card"
これらを style.css から検索すると、対応する見た目が分かります。