lang 속성의 정의 및 사용법

lang 속성은
요소 콘텐츠와 텍스트가 포함된 모든 요소 속성에 대한 기본 언어(language)를 지정합니다.
이 속성을 사용하면 스크린 리더나 브라우저, 검색 엔진 등에 사용해야 하는 언어 정보를 제공합니다.

  • lang 속성의 값은 자손 요소에 상속됩니다.
  • lang 속성의 기본 값은 unknown(알 수 없음)이므로 항상 이 속성을 적절한 값으로 지정하는 것이 좋습니다.
  • 속성 값이 빈 문자열(lang="")인 경우 언어는 unknown(알 수 없음)으로 설정됩니다.

lang 속성을 사용하면 다음과 같은 이점이 있습니다.

  • 스크린 리더가 웹페이지의 언어를 인식하고, 해당 언어에 맞는 음성을 제공할 수 있습니다.
  • 크롬 브라우저에 있는 자동 번역 기능을 사용할 때, 웹페이지의 언어를 자동으로 감지하여 번역할 수 있습니다.
  • 검색 엔진이 웹페이지의 언어를 인식하고, 해당 언어로 검색 결과를 제공할 수 있습니다.

예제

lang 속성의 사용 예제들를 살펴보겠습니다.

페이지의 기본 언어 지정

페이지 텍스트의 기본 언어를 지정하려면 항상 루트 요소인 <html> 태그에 lang 속성을 사용하세요.

HTML 
<html lang="ko">

<html> 태그는 문서의 최상위 태그이므로, <head>나 <body> 태그 등으로부터 상속의 영향을 받지 않습니다.

페이지에 다른 언어로 된 콘텐츠가 포함되어 있는 경우

페이지에 다른 언어로 된 내용이 포함되어 있으면 해당 내용을 둘러싼 요소에 lang 속성을 추가합니다.

HTML 
<p>제목은 "<span lang="fr">Le Bon Usage</span>"입니다.</p>
HTML <span> 태그

이를 통해 원하는 콘텐츠에만 다른 언어를 지정할 수 있습니다.

주의할 점

lang 속성을 사용할 때에는 몇 가지 주의할 점이 있습니다.

텍스트가 포함된 속성에도 적용됨

lang 속성은 요소의 콘텐츠뿐만 아니라, 모든 요소 속성에 대한 기본 언어를 지정합니다.

아래와 같은 예의 경우, lang 속성은 콘텐츠뿐만 아니라 title 속성 텍스트도 스페인어로 표시된다는 것을 나타낼 것입니다.
이것은 명백히 잘못된 것입니다.

HTML 나쁜 코드. 복사하지 마세요! 
<a lang="es" title="스페인어" href="qa-html-language-declarations.es">Español</a>

대신, 다른 언어로 된 텍스트를 포함하는 속성을 다른 요소로 이동하세요. 다음 예제처럼, <a> 태그는 <html> 태그의 lang="ko" 설정을 상속받습니다.

HTML 
<a title="스페인어" href="qa-html-language-declarations.es">
    <span lang="es">Español</span>
</a>

콘텐츠 주변에 적절한 마크업이 없는 경우

만약 특정 콘텐츠의 언어를 지정하고자 하지만 그 주변에 마크업이 없다면, 해당 콘텐츠를 감싸는 <span>, <bdi>, 또는 <div>와 같은 HTML 태그를 사용할 수 있습니다. 이렇게 하면 해당 콘텐츠의 언어를 명시적으로 지정할 수 있습니다.

HTML 
<p>이 내용은 중국어로 <span lang="zh-Hans">中国科学院文献情报中心</span>라고 말합니다.</p>

lang 속성 값

모든 사용자 에이전트(브라우저)가 어떤 언어를 의미하는지 인식하도록 하려면 lang 속성 값을 지정할 때 표준 접근 방식을 따라야 합니다. 또한 철자와 발음 측면에서 크게 차이가 나는 미국 영어와 영국 영어의 차이와 같이 언어 간의 방언 차이를 표준 방식으로 참조하는 방법을 고려해야 합니다.

lang 속성 값은 Tags for Identifying Languages (BCP47)이라는 사양에 설명되어 있는 "language tags(언어 태그)"의 값입니다.

이 태그는 다음과 같은 형식을 갖습니다.

HTML lang 속성 값 형식 예제 
<!-- 언어 태그만 사용하는 경우 -->
<p lang="ko">안녕하세요!</p> <!-- 필수사항 -->

<!-- 언어 태그와 지역 하위태그 사용하는 경우 -->
<p lang="en-US">Hello!</p> <!-- 선택사항 -->

<!-- 언어 태그와 활자 하위태그 사용하는 경우 -->
<p lang="ja-Kana">こんにちは</p> <!-- 선택사항 -->
형식

언어 태그(Language subtag)

필수사항입니다.
두 글자로 구성된 언어 코드. 예를 들어, 영어는 en, 스페인어는 es로 표현됩니다.

이 언어 코드는 ISO 639-1로 그 목록이 정리되어 있습니다.

지역 하위태그(Region subtag)

선택사항입니다.
언어 태그 안에서 특정 지역의 방언을 정의하며, 국가 코드와 일치하는 전체 대문자의 두 글자이거나, 국가 외 지역과 일치하는 세 글자 숫자로 구성됩니다.

예를 들어, en-US는 '미국에서 사용하는 영어'이라는 의미입니다. 그리고, es-013은 '중앙 아메리카에서 사용하는 스페인어'라는 의미입니다.

이 지역 하위태그 코드는 Language subtag lookup에서 찾아볼 수 있습니다.

활자 하위 태그(Script subtag)

선택사항입니다.
언어의 문자 체계를 나타내며 항상 네 글자이고, 첫 글자는 대문자입니다.

예를 들어, ja-Kana는 일본어의 가나 글자(kana characters)롤 작성되었음을 나타내는 값입니다.

lang="ko-KR"

웹페이지의 콘텐츠가 한국에서 사용되는 한국어로 작성된 경우를 의미합니다.

ko-KR은 한국의 지역적인 한국어를 나타내고 ko는 어떤 지역에 특정하지 않은 일반적인 한국어를 나타내게 됩니다. 선택은 상황에 따라 다릅니다. 만약 특정한 지역 또는 지역 특성을 강조하고자 한다면 ko-KR을 사용하는 것이 좋을 수 있습니다. 그러나 단순히 일반적인 한국어를 나타내려면 ko만 사용해도 충분합니다.

브라우저 호환성

lang 속성의 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
lang 1 12 1 4

caniuse.com에서 더 자세한 정보를 확인해 보세요.

명세서

lang 속성의 명세서 사양
명세서 사양
lang HTML Standard
#attr-lang

참고문헌

같이 보기