lang属性 - 要素の言語

公開日: 2017/02/21

lang属性は、要素の言語について、ユーザーエージェントにヒントを与えるための属性です。

説明

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

HTML

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

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

HTML

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

サンプルコード

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>【デモ】lang属性 - 要素の言語</title>
		<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Global_attribute/lang/">
		<style>
			body {
				background-color: #fff ;
			}
		</style>
	</head>
	<body>

<p>lang属性は、要素の言語について、ユーザーエージェントにヒントを与えるための要素です。</p>

<div lang="en">
	<p>This is an apple.</p>
	<p>This is a pen.</p>
</div>

	</body>
</html>

デモを開く

</head><body>までを含めて下さい。

<!DOCTYPE html> <html> <head> <base href="/828/"> <meta charset="utf-8"> <title>【デモ】lang属性 - 要素の言語</title> <link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Global_attribute/lang/"> </head> <body>

<p>lang属性は、要素の言語について、ユーザーエージェントにヒントを与えるための要素です。</p> <div lang="en"> <p>This is an apple.</p> <p>This is a pen.</p> </div>

</div> <script>...</script> </body> </html>

<style>

body { background-color: #fff ; }

</style>

</script>