女性向けエンジニアスクール
3秒でわかる
見出しや段落、リンクといったWebページの意味と構造をタグで示す言語。ブラウザや検索エンジン、読み上げソフトに文書の中身を伝えるために書きます。
30秒図解
もう少し詳しく
どういうものか
HTML は HyperText Markup Language の略で、文章のどこが見出しでどこが段落なのかをタグで示すための言語です。ページの題名
見た目は CSS、動きは JavaScript が担当します。この三つの役割分担が Web ページの土台になっています。
なぜ必要か
同じ「大きな文字」でも、 タグは「この範囲は何なのか」を示す付箋、と考えると選ぶ基準が見た目から意味に切り替わります。 で書いた見出しと、具体例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>ハレノヒ珈琲</title>
</head>
<body>
<header>
<h1>ハレノヒ珈琲</h1>
</header>
<main>
<h2>本日のおすすめ</h2>
<p>浅煎りのエチオピアを用意しています。</p>
<img src="/img/coffee.jpg" alt="カウンターに置かれた浅煎りのコーヒー" />
<ul>
<li>ホット 480円</li>
<li>アイス 520円</li>
</ul>
<a href="/menu">メニュー全体を見る</a>
</main>
</body>
</html>つまずきやすいところ
から へ飛ばす、あるいは文字を小さくしたいという理由で を選ぶ、といった使い方が崩れの原因になります。見出しの階層は文書の目次なので、大きさではなく前後関係で選びます。alt を空のまま放置するのもよくある指摘で、意味のある画像なら何が写っているかを書き、装飾目的の画像なら alt="" と明示して読み上げから外します。閉じタグの入れ子が交差した書き方も、ブラウザが勝手に補正してしまうため気づきにくく、レイアウト崩れの原因を追いにくくします。覚え方
次に学ぶ
セマンティックHTMLとは？知識のつながり
サイドバーと同じ推奨ルート・関連語を、まとめて確認できます。
LEARN BY DOING
この用語を、教材で使ってみる
直接関連する編と、その編を含むコースです。用語だけで終わらず、ブラウザ上で実際に手を動かせます。
この用語を扱うコース
