HTML入門 - 文字化けは読む規則のずれ
head に3つの申し送りを足す
lang・charset・title を1つずつ足し、言語、本文の読み方、タブの名前のどこが変わるか追ってください。
- lang は、このページが日本語だと読み上げや翻訳へ伝える
- charset は、日本語をどの規則で読めばよいかブラウザへ伝える
- title は、画面の本文ではなくブラウザのタブ名になる
1 / 4
HTML入門 - 文字化けは読む規則のずれ
3つを書き足した完成形
前回は空だった head に meta と title を入れ、html の開始タグには lang を足します。body の中身は変えません。
この5行を前回の雛形へ書き足せば、これから育てるページの土台が完成します。
lang は html の開始タグ、meta と title は head の内側です。3つとも画面本文を増やす行ではありません。
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>山田 太郎のプロフィール</title>
</head>2 / 4
考えてみよう外しても進めます
画面の「山田 太郎」はそのままで、ブラウザのタブだけを「プロフィール」に変えたい。どれを書きますか。
選ぶと、この枚の中で答えと理由を確かめられます。
3 / 4
HTML入門 - 文字化けは読む規則のずれ
3つの役割と置き場所
同じ設定の仲間でも、langだけはhtmlの開始タグに書きます。metaとtitleはhead、画面に見せるh1はbodyです。
採点では、lang、文字コードの指定、タブに出るページ名の3点を確認します。
| 書く場所 | 効く先 |
|---|---|
| <html lang="ja"> | ページ全体の言語。読み上げと翻訳が使う |
| <meta charset="UTF-8"> | headの中。ブラウザが文字を読む規則になる |
| <title>...</title> | headの中。タブと検索結果へページ名を渡す |
| <h1>山田 太郎</h1> | bodyの中。読む人が画面で見る見出しになる |
4 / 4