演習課題「言語を指定してみよう」
現在、ブラウザでは、日本語の引用符の表現でJapanと表示されています。
これをドイツ語の引用符の表現にするためdivタグにlang属性を指定して表示を変更して下さい。
ただし、ドイツ語の言語タグはdeを使用してください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです!
#02:言語の種類(lang)
このチャプターでは、言語の種類を表すlang属性について学習します。
lang属性はタグ付けされた要素の言語を指定するグローバル属性です。
言語を指定することで、その言語に合わせたフォントレンダリングや引用符、日付ピッカーなどの要素の変化が行われます。
また、Google Chromeでは、lang属性に記載された言語情報を元に日本語に翻訳しますか?などのメッセージが表示されるそうです。
lang属性は文書全体をタグ付けするために、よくhtml要素で指定されます。
また、属性値として記述する言語の種類は、BCP47で標準化された言語タグで示す必要があり、指定できるのは自然言語のみとなります。
MDN web docs
https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/lang
RFC Editor
https://www.rfc-editor.org/info/bcp47
今回、qタグではなくdivタグにlang属性を指定しましたが、これはqタグの仕様によるものです。
qタグが、qタグ自体の言語ではなく、その周囲の言語の引用符を使用するためです。
そのため、今回のようにlang属性を指定して、qタグごとに引用符を変更したい場合は、qタグの祖先要素にlang属性を指定する必要があります。
MDN web docs
https://developer.mozilla.org/en-US/docs/Web/CSS/quotes#auto_quotes
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <div lang="en">
        <q>Japan</q><br>
    </div>
    <div lang="it">
        <q>Japan</q><br>
    </div>
    <div lang="ja">
        <q>Japan</q>
    </div>
</body>
</html>