HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのlang属性とは？使い方と言語コードの指定方法を解説

HTMLのlang属性は、そのHTML要素の内容がどの言語で書かれているかを定義するための属性です。lang属性はグローバル属性に分類されるため、すべてのHTML要素に対して自由に指定することができます。

検索エンジン最適化（SEO）やスクリーンリーダーによる音声読み上げの正確性向上にも役立つ重要な属性なので、適切な言語コードを設定しておきましょう。

基本構文

lang属性の基本的な記述方法は以下のとおりです。

<タグ名 lang="言語コード"></タグ名>

「言語コード」の部分には、ISO 639-1で規定されている言語コードを指定します。代表的な例としては、日本語ならja、英語ならenといった2文字のコードが使われます。

lang属性の使用例

それでは、実際にHTMLのlang属性を使ったサンプルコードを見てみましょう。

サンプルコード

<!DOCTYPE html>
<html>
<style>
    body {
        color: #000;
        height: 100vh;
        background-color: #8BC6EC;
        background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
        text-align: center;
    }
</style>
<body>
<h1>HTML lang Attribute Demo</h1>
<p lang="en">This is a paragraph element with some dummy text and lang attribute.</p>
</body>
</html>

出力結果

このコードを実行すると、段落要素（p要素）に対してlang="en"が指定され、その内容が英語であることがブラウザや支援技術に伝わります。

まとめ

  • lang属性は、要素内のコンテンツの言語を宣言するグローバル属性である。
  • 任意のHTML要素に指定でき、値にはISO言語コード（ja、enなど）を使用する。
  • SEOやアクセシビリティの観点からも、ページ全体および部分的な言語指定に活用できる。
  1. HTMLのwrap属性とは？textareaのテキスト折り返し設定を解説

    wrap属性とは HTMLのwrap属性は、<textarea>要素内のテキストを、フォーム送信時にどのように折り返すかを定義する属性です。画面上での見た目だけでなく、サーバーへ送信されるデータに改行コードを含めるかどうかを制御できる点が特徴です。 指定できる値 soft：画面上では自動的に折り返して表示されますが、送信されるテキストには改行コードが挿入されません（デフォルト値）。 hard：画面上の折り返し位置に基づいて、フォーム送信時に改行コードが挿入されます。この値を使用する場合はcols属性の指定が必須です。 構文 wrap属性の基本的な書き方は以下のとおりです。

  2. HTMLのdraggable属性とは？使い方とサンプルコードを解説

    HTMLのdraggable属性とはHTML DOMのdraggable属性は、要素がドラッグ可能かどうかを示す真偽値（boolean）を取得・設定するための属性です。この属性を活用することで、ドラッグ＆ドロップ操作に対応したインタラクティブなWebページを簡単に実装できます。注意：リンク（<a>タグ）や画像（<img>タグ）は、デフォルトでドラッグ可能に設定されています。draggable属性に指定できる値true … 要素をドラッグ可能にするfalse … 要素をドラッグ不可にするauto … ブラウザのデフォルト動作に従うHTML draggable属性の使用例以