HTMLの言語指定の方法を現役エンジニアが解説【初心者向け】

初心者向けにHTMLの言語指定の方法について解説しています。サイトにおける言語設定の効果と、lang属性による言語指定の書き方について説明します。主な言語コードについても頭に入れておきましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

HTMLの言語指定の方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

 

そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まるでしょう。

 

なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。

 

田島悠介

今回は、HTMLに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

言語指定の方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

HTMLの言語指定とは

HTMLの言語指定とは、サイトのコーディングに対してサイト全体が何の言語を使って書かれているかを表します。

例えば、HTMLファイルに対して、emmettなどのコーディングに便利なプラグインツールを利用する場合には、たいていlang属性が英語となっており、英語のサイトを作る前提のHTMLファイルが作成されていると判断できるでしょう。

この場合、lang属性を英語から日本語にして、日本語のサイトに変換します。

hreflang属性によってサイトを多言語で表示できるようにしている場合には、何の言語を使って書かれているサイトなのかを表すことが可能です。

 

HTMLの言語設定の効果

lang属性により言語設定をすることでサイト全体で使われている言語が分かり、ブラウザによってはフォントを変更する機能が搭載されているものも多くあります。

また、日本語のサイト内に英語版などを用意している場合には、hreflang属性で言語を指定しましょう。

その場合、サイトが英語のページとして認識され、英語版のサイトが表示できるようになります。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

htmlタグで日本語、その他の言語を指定する方法

言語コードは日本語はja、英語はen、中国語はzh、韓国語はko、フランス語はfr、ロシア語はruとなっており、それぞれの属性に記述していきます。

それぞれの言語コードを属性に指定するだけで言語の設定が可能です。

 

実際に書いてみよう

サイト全体の言語を英語とする場合はhtmlタグに記述しましょう。

<html lang=”en”

 

英語のページを用意している場合はheadタグ内に記述してください。

<link rel="alternate" hreflang="en" href="(英語サイトのURL)">

 

執筆してくれたメンター

木村勇土

TechAcademyの現役メンター。

現在は行政書士事務所を運営しており、お客様にはプログラマーやフリーランサーも多い。

WordPressを中心とした自社のWebサイトの修正などを行なっている。

 

大石ゆかり

HTMLの言語指定の方法がよく分かったので良かったです!

田島悠介

ゆかりちゃん、これからも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは初心者でも、最短4週間でオリジナルWebサイトを公開できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、参加してみてください。