htmlおさらい

目次

1. タグおさらい

   • セマンティック系
     header/main/footer/nav/section/article/aside
   • meta属性
   • form系
   • その他
     span/strong/small/details/summary

2. セマンティックhtml

3. アクセシビリティ

4. SEO

5. サイト内移動

タグおさらい

セマンティック系

header：導入・前置き

html

<header> </header>

【使いどころ】

ページやセクション、記事の導入部分

【内容】

見出し（h1～h6）、ロゴ、ナビゲーションなど

【注意点】

• ページ内に複数存在してもOK。
• 基本的に見出し（h1～h6）を含むこと。
• headerの中に直接header要素を入れない（セクション等で包めばOK）

main：ページの主役コンテンツ

html

<main> </main>

【使いどころ】

ページ内の最も重要なメインコンテンツ

【内容】

ページ固有

【注意点】

• ページ共有要素（ナビ・サイドバーなど）は入れない
• header/footer/nav/asideの中に入れない
• ページ内での複数使用不可

footer：補足・締め

html

<footer> </footer>

【使いどころ】

ページやセクション等の補足情報・締め

【内容】

著作権/著者情報/関連リンク等

【注意点】

• 複数使用可
• レイアウト目的ではなく、意味で使う
• footer の中には main や header は入れない

nav:移動

html

<nav> </nav>

【使い所】

ナビゲーション（移動手段）
ページ内・サイト内の主要なリンク

【内容】

• グローバルナビ（ヘッダーメニュー）
• フッターナビ
• ページ内目次
• サイドメニュー等

【注意点】

全てのリンクをnavに入れない、移動が主目的でないものはNG
※判断フロー

• リンクの集合？
• ユーザーの目的は移動？
• ここがないと迷子になる？

→YESが多数ならnavにするべき

section：見出し付きの章

html

<section> </section>

【使い所】
意味的な「章」・「区切り」

【内容】

• 同じテーマのまとまり
• 見出し（h1～h6）とセットで使う

【注意点】

• 見た目目的だけでは使わない
• 見出しが無ければdivが適切な可能性

article：独立コンテンツ

html

<article> </article>

【使い所】

一覧の各アイテムブログ記事/ニュース/商品カード/SNSの投稿/コメント等

【内容】

それ単体で完結する独立したコンテンツ・切り出しても意味が通じる
単体でSNSやRSSに流せる。

【注意点】

articleの中にsection→OK
sectionの中にarticle→OK（文脈次第）

aside：補足情報

html

<aside> </aside>

【使い所】

サイドバー/関連記事/注意書き/広告など

【内容】

その情報が無くても本文が成立すればaside

【注意点】

本文から少し外れた情報

footerと違う点
footer：記事のメタ情報が主
aside ：内容理解の補足が主

form系

form

html

<form action="/submit" method="post">
    <label for="name">電話番号</label>
    <input id="name" name="name" type="text">

    <button type="submit">
</form>

ユーザー入力を送信単位として定義する意味的コンテナ。
ひとまとまりで送信したいform系要素たちを<form>要素で囲みます。
送信トリガーは<button type="submit">。

【使いどころ】
ログイン/検索/問い合わせ/登録/購入など

【主な属性】
action：送信先URL
method：HTTPリクエスト（get: 取得, post: 送信）

【注意点】

• <form>要素同士でのネストは禁止。※ページ内複数はOK
• <button>要素のtype属性の初期値は submit

label：入力項目名

html

<label for="name">なまえ</label>
<input id="name" name="name" type="text">

フォームコントロール（input等）に説明（名前）を定義する要素。
入力欄の意味・用途を明示する。これにより読み上げ対象に。（重要アクセシビリティ）
また、関連付けられたフォームコントロールの操作代理としての機能もある。

【フォームコントロールとの関連付け】
label要素のfor属性と、フォームコントロールのidを一意にすることで、
互いを関連付けすることができる。

【属性】
for：紐づけたいフォームコントロールのidを指定

【クリック領域】
<label>要素は、入力要素の代理クリック領域になる。
たとえば、文字をクリックしてもチェックONになったり。

input

html

<input type="text">

ユーザー入力を受け取るための単一入力部品。
終了タグを持たない空要素。

【主なタイプ】

type	役割	挙動
text	一行テキスト入力	改行不可
email	メアド入力	簡易バリデーション
password	パスワード入力	文字はマスク表示
number	数値入力	数値のみ入力可（マイナス等含）
checkbox	複数選択	同一nameで複数送信可
radio	単一選択	同一nameの中で一つだけ選択可
submit	送信ボタン	クリックでform送信
file	ファイル選択	OSファイル選択ダイアログ
hidden	ユーザに見せない送信値	非表示

【name属性】
フォーム送信データのキー名。
nameが未定義のinput要素は送信できない。

ブラウザはname=valueのペアを作って送信する

username=tanaka

【value属性】

• 送信される値
• フォームデータの初期値
• チェックボックス系inputの選択肢（項目名はname）
• submitの表示テキスト

html

<!-- 送信される値/フォームデータの初期値 -->
<input name="age" value="20">

<!-- 選択系inputの選択肢 -->
<input type="radio" name="gender" value="male">
<input type="radio" name="gender" value="female">

<!-- submitの表示テキスト -->
<input type="submit" value="送信">

【placeholder属性】

• 入力ヒント
• 入力前だけ表示され、入力後は消える
• 送信されない

html

<input type="email" placeholder="[e-mail]">

【フォーム制御系属性】

html

<!-- 入力必須・未入力だと送信できない -->
<input type="text" required>

<!-- 操作・フォーカス不可・送信されない・現在使えない機能などに使用 -->
<input type="text" disabled>

<!-- 編集不可・フォーカス可・送信される・確認画面等に使用 -->
<input type="text" readonly>

textarea

html

<!-- ※value属性は使わず、タグの中身に初期値を書く -->
<textarea id="message" name="message">初期値</textarea>

複数行の入力を受け取るためのフォームコントロール。
長文入力によく使われる。終了タグ必須。

【サイズ指定属性】
rows属性：ブロック方向の表示サイズ
cols属性：インライン方向の表示サイズ
※文字数制限を設けるものではない。

select / option

html

<select name="prefeture">
    <option value="">選択してください</option>
    <option value="tokyo">東京</option>
    <option value="osaka">大阪</option>
</select>

select：プルダウン式UIを作る要素。フォーム送信時に選択された値を送信。
optionselectの中の選択肢。value実際に実際に送信される値を定義。

【required】
valueを空にしておくとrequiredが効く。

html

<select name="age">
    <option value="">選択してください</option>
</select>

【複数選択】
multipleで複数選択可になる。

html

<select name="hobby" multiple>

nameは配列的に扱われる

hobby=music&hobby=game&...

【初期選択状態】
ページを読み込んだ直後、すでに選ばれている状態

html

<option value="" selected>

【初期値を選択不可にしたい場合】
disabled + selected

html

<option value="" disabled selected>選択してください</option>

button

html

<button> </button>

ユーザー操作により、フォーム送信・処理実行・JSイベントなどを
実行するためのトリガー。
実務では、input要素のbuttonではなく、こちらの
button要素を用いることが多い。

【メリット】
中にhtmlを書ける。

html

<button type="submit">
    <span>送信</span>
</button>

【type】
type属性を省略すると、自動でsubmitになる。

type	役割	挙動
submit	フォームを送信する	formのactionへ送信
reset	入力を初期状態に戻す	form内を初期化
button	JS処理専用	何もしない

fieldset / legend

html

<fieldset>
    <legend>配送先情報</fieldset>
</fieldset>

<fieldset>

• 関連するフォームコントロールの集合を表す要素
• 枠線で囲まれる(cssで変更可)
• 別送信にはならない
• アクセシビリティ上重要
• disabledを付けると、中の入力を一括で無効化

【form要素との違い】

要素	役割
form	送信単位（データをまとめて送るコンテナ）
fieldset	意味的なグループ分け（送信単位ではない）

<legend>

• fieldsetの見出し / 説明
• fieldsetの最初の子要素としてのみ配置
• 中身は質問文か主題（～選択してください / 配送先住所等）

metaタグ

metaタグとは

ページの設定情報（メタデータ）をブラウザや検索エンジンに伝えるためのタグ。

【役割】
ページの説明書。読み手はブラウザ/検索エンジン/SNS。
基本的に head 要素内に記述し、画面には表示されない。

※なぜhead内に書くのか
→head要素は「ページをどう扱うかを決める場所」だから。

【語源】
metaの意味：超越した/高次の/～についての
→IT・HTMLの文脈ではほぼ、**「そのものについての情報」**という意味で使われる。

最低限覚える主要なmeta属性

① charset（文字コード指定）

html

<meta charset="UTF-8">

• ほぼ必須・headのなるべく先頭に書く
• 文字化け防止

② name + content（ページ説明等）

html

<meta name="description" content="ページの説明文">

• name：メタ情報のカテゴリを指定する
• content：nameで指定した情報の中身を記述　
  ※記述ルールはnameの値によって変わる
• discription：説明＝ページの説明文

説明文の書き方

• ページ内容を要約して書く
• 80～120文字程度
• あくまで「自然な文章として」
  ※ハッシュタグのようにキーワードを詰め込まない。
• ページ毎に必ず内容を変える
• 記号、改行はしない

description基本テンプレ

【対象】向けに、【内容】を【視点】で解説します。
【得られること】がわかります。

③ viewport（スマホ対応）

html

<meta name="viewport" content="width=device-width, initial-scale=1.0">

レスポンシブ対応に必須。これがないとスマホ表示が壊れる。

• viewport：CSSが参照する表示領域
• width=device-width：viewportの幅を端末に合わせる
• initial-scale=1.0：等倍指定

OGP(SNS連携)

html

    <!-- SNSでシェアされた時のタイトル -->
    <meta property="og:title" content="ページタイトル">

    <!-- ページの説明文。description流用されがち -->
    <meta property="og:description" content="ページの説明">

    <!-- SNSカードのサムネ -->
    <meta property="og:image" content="https://example.com/ogp.jpg">

    <!-- 正規URL -->
    <meta property="og:url" content="https://example.com/">

    <!-- ページの種類 -->
    <!-- website:サイトとしてのページ　article:ブログ記事・ニュース等 -->
    <meta property="og:type" content="website">

property(和：性質) = ページが持つ性質を定義する属性

最低限の実務テンプレ

html

<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="wdth=device-width, initial-scale=1.0">
    <meta name="description" content="ページの説明文">
    
    <!-- OGP -->
    <meta property="og:title" content="ページタイトル">
    <meta property="og:description" content="ページの説明">
    <meta property="og:image" content="https://example.com/ogp.jpg">
    <meta property="og:url" content="https://example.com/">
    <meta property="og:type" content="website">
    
    <title>ページタイトル</title>
</head>

その他

span

css

<span> </span>

【意味】

意味を持たないインライン要素。
スタイル・JS適応のための箱。

【使い所】

• 一部にのみCSS・JSを適応したい
• 他に意味を表すタグが存在しない時 ≒ インライン版div

【注意点】

• 意味を持たせたい場面では使わない
• 見出し/強調/重要表現の代替はNG

strong：重要性が高い情報

css

<strong> </strong>

【意味】

内容の重要性が高いことを示す

【使い所】

警告・注意/見逃してほしくない情報/文脈上の強い強調

【注意点】

• 太文字目的で使わない
• 見出しの代用にしない
• 多用しすぎない

small：注釈・付帯情報

css

<small> </small>

【意味】

補足情報・注釈・付帯情報

【使い所】

注意書き/免責文/税込/条件/補足情報/コピーライト表記

【注意点】

重要情報には使わない
文字を小さくする目的だけで使わない。

details：詳細情報

css

<datails> </datails>

【役割】

ユーザーが開閉できる詳細情報ブロック

【使い所】

FAQ /補足説明/展開して読む情報
JSなしで展開可

【注意点】

常に表示すべき情報には適応しない。

summary：datailsの見出し兼トグル

css

<summary> </summary>

【重要】

• 必ずdatails直下であること
• 単体では使えない

セマンティックhtml

セマンティックとは

セマンティック（semantic）：意味の、意味論の
IT分野では「コンピューターが情報やデータの意味を理解し、
処理できるようにする技術」を指す。

セマンティックHTMLの本質

目的：人と機械の両方が内容を正しく理解できるようにすること。
手段：情報の意味や役割を設計し、それを適切なHTMLタグで表現する

習得するにあたって必要なもの

• 技術的なもの：各HTMLタグの意味・基本ルール
• 思考的なもの：判断・設計の仕方

以上の二つがある

意識すること　

• 「divで書きたくなったら、意味のあるタグがないか考える」
• これは何の情報か？を先に考える

基本ルール

※タグの解説は既にしているので省略

①タグは見た目ではなく意味で選ぶ

意味・役割が説明できる

②意味を先に考える

「これは何の情報？役割は？」→ ⭕️
「ここなんのタグにしようかな？」→ ❌

③単体で成立するものはarticle

• 単体でSNSに流せる
• URLを持てる
• 一覧に切り出せる

④見出し付きのテーマのまとまりはsection

• 内容の区切り
• 見出しは（h2〜h6）
• 見出しがないならsectionを疑う

⑤意味がない箱はdiv

レイアウト・グルーピング・スタイリング目的だけならdivが妥当

⑥見出し階層は理論順

• h1はページの主題を表している
• h1→h2→h3の順番を守る（見出し階層を飛ばさない）
• デザイン用に見出しを使わない

⑦mainはページに一つ

そのページの主役コンテンツ。header/footer/navは含まない。

⑧navは移動

主には　メインナビ/フッターナビ/パンくず　など。
リンクが並んでいても移動目的でなければnavではない。

⑨aとbuttonを使い分ける

ページ移動：a
処理・送信：button

⑩header/footer：導入/締め

ページ全体だけでなくsection/articleの中にも置ける。
※見た目の上下だけで判断しない。

⑪ARIAは最後の手段

まずHTMLのネイティブ要素で組み、足りない時だけARIAで補う。

⑫説明できないタグは使わない

なぜそのタグを選んだかを言葉にできないなら再考。

まとめ

【最重要】意味で考える
　　　　　↓
導入・締め　：header/footer
単体成立　　：article
見出し付き章：section
意味なし　　：div
主題　　　　：h1
見出し　　　：h2〜h6を順番で使う
主役　　　　：main
ページ移動　：a
処理・送信　：button

判断・設計

手順１：情報を分類する

この情報は何者なのかを決める。

• 主役・導入・締め
• 独立コンテンツ
• 章・カテゴリ
• 補足
• ナビ
• 操作

手順２：構造化する

• 親子関係
• 見出し階層
• 独立・従属
  をここで確定させる。

手順３：タグを当てはめる

ここでようやくタグを適応する。

最低限のアクセシビリティ

アクセシビリティとは

年齢・障害・環境等に関係なく、
誰もが情報やサービスにアクセスし、利用できること

エンジニアにとってのアクセシビリティ

HTML・CSS・JSを人にも機械にも理解できる形で書くということを意味することが多い。

a11yとは

アクセシビリティ（accessibility）の略
頭文字と末字の間が11文字あることから、業界ではa11yと略される。
意味自体は変わらない。

最低限のアクセシビリィ知識

セマンティックHTML
テキスト代替・ARIA
フォーム設計
キーボード操作

SEO

SEOとは

Search Engine Optimization：検索エンジン最適化
→Google等の検索結果で、自分のサイトやページを
上位に表示させるための考え方と施策。

SEOの分類

SEOには、主に2つの種類がある。

Webの基礎によるSEO

• テクニカルSEO

集客・順位を上げるためのSEO

• コンテンツSEO
• オンページSEO
• マーケティングSEO

テクニカルSEO

検索エンジンとユーザーが、「正しく・早く・安全に」
ページを利用できる状態を作ること。
→順位を上げる技術ではない。

テクニカルSEO、6つのカテゴリ

• セマンティックHTML
• meta情報・インデックス制御
• クロール・HTTP設計
• パフォーマンス（速度）
• モバイル・表示対応
• アクセシビリティ

理解の深度

今はこのくらい理解できていればいい

項目	理解レベル
セマンティック	なぜ必要か説明できる
meta	基本三種 + noindex
HTTP	ステータスの意味
速度	遅くなる理由がわかる
モバイル	viewport理解
アクセシビリティ	概念を知っている

超最低限のアクセシビリティ・SEO対策

• セマンティック
• 画像のalt
• フォームは全てラベル付け
• 日本語指定

※セマンティック・ラベル付けは省略

alt属性

【言葉の意味】
alt = alternative text（代替テキスト）の略。

【性質・役割】
「この画像が見えなかったら、なんと説明するか？」をテキストで書くもの。

【altの役割】

• 見えない人に画像の意味を伝える
• フォールバック（画像が壊れても情報が残る）
• 画像の内容を検索エンジンが理解できる（SEO）

【altを記述するかの判断】
Q. その画像がなくなると情報が減る？
YES : altを書く。
NO : alt="" （空にする）

【書き方】

html

<img src="" alt="内容（意味がなければ空にする）">

• ユーザーにとって必要な情報だけ書く。
• 意味のない画像(デザインの為だけ)は空にする → alt=""
• リンク・ボタン内の画像は「操作の意味」を記述
• すべての<img>タグにaltをつける

日本語指定

html

<html lang="ja">

【効果】

• スクリーンリーダーが日本語として読む
• 翻訳、音声入力の精度向上
• SEOの言語判定が安定

ページ内移動

移動先要素にidを付け、アンカーリンクで #id名 を指定する。

①移動先にidを付ける

<section id="section1">セクション1</section>

②リンクを作る

<a href="#section1">セクション１へ移動</section>