SYNCERのロゴ
アイキャッチ画像

lang属性 - 要素の言語

lang属性は、要素の言語を表す属性です。省略した場合、存在するなら一番近い祖先要素の属性値が適用されます。

概要

DOM Interface
HTMLElement.lang
仕様書
https://html.spec.whatwg.org/multipage/dom.html#the-lang-and-xml:lang-attributes

言語コードを表す文字列。BCP47で定められた形式の言語コード(IETF言語タグ)で指定すること。下記にいくつかの例を示す。

ja
日本語。
de
ドイツ語。
en-US
アメリカ英語。
<p lang="en-US">SYNCER</p>

説明

lang属性は、要素の言語についてユーザーエージェントにヒントを与えます。値には言語コードを指定します。親要素のlang属性は子要素に継承されます。よって、最上位(ルート)の要素であるhtml要素に指定すれば、ドキュメント全体の言語を知らせることができます。下記は、ドキュメント全体が日本語(ja)であることを指定した例です。

<!DOCTYPE html>
<html lang="ja">
	<head>...</head>
	<body>...</body>
<html>

html要素に指定したlang属性がそのドキュメントの主言語です。コンテンツ内で主言語と違う言語を用いる場合は、その要素にlang属性を指定しましょう。下記は、主言語が日本語のドキュメント内で、英語(en-US)を用いる例です。ユーザーエージェントは、このp要素だけが英語で書かれていると解釈します。

<!DOCTYPE html>
<html lang="ja">
	<head>...</head>
	<body>
		<p>「これはペンだ」を英語で言うと、次のようになります。</p>
		<p lang="en-US">This id a pen.</p>
	</body>
<html>

デモ

lang属性のデモです。人間が見る分には特に見た目の変化などはありません。

<!-- このコードは編集できます。 -->

<p>「これはペンだ」を英語で言うと、次のようになります。</p>
<p lang="en-US">This id a pen.</p>

サポート状況

クリックすると、バージョンごとの対応状況を確認できます。

ChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年9月23日 (土)
コンテンツを公開しました。