실행 가능한 HTML 문서: lang 속성

Q: html lang 속성에는 무엇을 넣어야 하나요?

BCP 47 표준의 언어 코드예요. 한국어는 ko, 영어는 en, 스페인어는 es, 프랑스어는 fr, 일본어는 ja예요. 지역이 중요할 때만 en-US, en-GB, pt-BR처럼 지역을 붙이세요.

Q: lang="en"과 lang="en-US" 중 무엇을 써야 하나요?

둘 다 올바라요. 대부분의 영어 페이지에는 en이면 충분해요. 철자, 날짜, 일부 단어의 발음처럼 지역별 차이가 중요할 때 en-US나 en-GB를 쓰세요.

Q: lang 속성이 SEO에 영향을 주나요?

Google은 텍스트 자체에서 언어를 감지하고 lang 속성에 의존하지 않는다고 밝혔어요. 그래도 올바르게 설정하세요. 다른 검색 엔진, 번역 도구, 스크린 리더가 사용해요. 페이지의 번역본끼리 연결하려면 hreflang 링크를 쓰세요.

Q: 다른 언어로 된 텍스트는 어떻게 표시하나요?

그 텍스트를 감싸는 요소에 lang을 추가하세요. bon appétit 처럼요. 스크린 리더가 그 구절의 발음을 바꾸고, CSS는 :lang(fr)로 꾸밀 수 있어요.

Q: lang과 hreflang은 무엇이 다른가요?

lang은 요소의 콘텐츠가 어떤 언어인지 말해요. hreflang은 링크에 쓰고, 링크된 페이지가 어떤 언어인지 말해요. 사이트가 검색 엔진에 페이지의 다른 언어 버전을 알려 주는 방법이에요.

페이지 언어 설정하기

<html> 요소에 페이지가 쓰인 언어의 코드를 lang 속성으로 주세요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>lang</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <p>Hello! This page is in English.</p>
  <p id="out" style="color: #6b7280;"></p>
  <script>
    document.getElementById('out').textContent =
      'Page language: ' + document.documentElement.lang +
      '. Your browser language: ' + navigator.language + '.';
  </script>
</body>
</html>

이 속성은 이 문단의 모양을 바꾸지는 않지만, 페이지를 다루는 방식을 바꿔요. 스크린 리더는 영어 음성으로 읽고, 브라우저는 번역을 제안할지 정할 때 이걸 쓰고, 맞춤법 검사기는 영어 사전을 고를 수 있어요. 이 속성이 없으면 도구들이 추측해야 하고, 다른 언어로 설정된 스크린 리더는 영어 텍스트를 엉뚱한 발음으로 읽을 수 있어요. 한국어 페이지라면 lang="ko"를 쓰세요.

언어 코드

값은 BCP 47 표준의 언어 태그예요. 대부분 두 글자 언어 코드이고, 뒤에 지역이나 문자 체계가 붙을 수 있어요.

코드	언어
`en`	영어
`en-US`, `en-GB`	미국 영어, 영국 영어
`es`, `es-MX`	스페인어, 멕시코 스페인어
`pt-BR`	브라질 포르투갈어
`fr`, `de`, `it`	프랑스어, 독일어, 이탈리아어
`ar`, `he`	아랍어, 히브리어(오른쪽에서 왼쪽, 아래 참고)
`ja`, `ko`	일본어, 한국어
`zh-Hans`, `zh-Hant`	간체 중국어, 번체 중국어

코드는 대소문자를 구분하지 않지만, 관례상 언어는 소문자, 지역은 대문자로 써요. 지역별 차이가 중요할 때만 지역을 붙이세요. en만으로도 완전하고 올바른 값이에요.

lang이 바꾸는, 눈에 보이는 것

lang의 효과는 대부분 소프트웨어를 위한 거지만, 몇 가지는 화면에 나타나요. <q> 요소의 따옴표와 대소문자 규칙이 언어를 따라가요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Visible effects</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; font-size: 18px; }
    td { padding: 4px 12px; border-bottom: 1px solid #e5e7eb; }
    .up { text-transform: uppercase; }
  </style>
</head>
<body>
  <table>
    <tr><td>English</td><td lang="en"><q>quote</q></td><td lang="en" class="up">istanbul</td></tr>
    <tr><td>French</td><td lang="fr"><q>quote</q></td><td lang="fr" class="up">istanbul</td></tr>
    <tr><td>German</td><td lang="de"><q>quote</q></td><td lang="de" class="up">istanbul</td></tr>
    <tr><td>Japanese</td><td lang="ja"><q>quote</q></td><td lang="ja" class="up">istanbul</td></tr>
    <tr><td>Turkish</td><td lang="tr"><q>quote</q></td><td lang="tr" class="up">istanbul</td></tr>
  </table>
</body>
</html>

행마다 따옴표 모양이 달라요. 마지막 열에서 같은 text-transform: uppercase가 영어에서는 "ISTANBUL"을, 터키어에서는 "İSTANBUL"을 만들어요. 터키어는 대문자 i에도 점을 유지하거든요. 터키어 행의 lang을 en으로 바꾸면 점이 사라져요. 자동 하이픈 처리(CSS의 hyphens: auto)도 lang에 따라 달라요. 브라우저가 어디서 단어를 끊을 수 있는지 알려면 언어를 알아야 하니까요.

다른 언어로 된 구절 표시하기

lang은 <html>뿐 아니라 어떤 요소에서든 동작해요. 한 언어로 된 페이지가 다른 언어의 구절을 인용할 때는 그 구절을 감싸고 따로 코드를 주세요. CSS는 :lang() 선택자로 언어를 대상으로 삼을 수 있어요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Mixed languages</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    :lang(fr), :lang(es) { font-style: italic; color: #2563eb; }
  </style>
</head>
<body>
  <p>The chef said <span lang="fr">bon appétit</span> and left.</p>
  <p>Our team motto is <span lang="es">poco a poco</span>: little by little.</p>
</body>
</html>

스크린 리더는 "bon appétit"에서 프랑스어 발음으로 바꾸고, 그 뒤에는 영어로 돌아와요. :lang(fr)은 fr-CA와 다른 모든 프랑스어 변형에도 일치하고, 조상에게서 언어를 물려받은 요소에도 일치해요. [lang="fr"] 같은 속성 선택자는 그런 요소를 놓쳐요.

오른쪽에서 왼쪽으로 쓰는 언어: dir

아랍어, 히브리어, 페르시아어, 우르두어는 오른쪽에서 왼쪽으로 써요. lang은 언어의 이름을 정하고, dir 속성은 방향을 정해요. 전체가 아랍어인 페이지는 <html>에 둘 다 써요.

<html lang="ar" dir="rtl">

왼쪽에서 오른쪽으로 쓰는 페이지 안의 짧은 오른쪽에서 왼쪽 구절에는 감싸는 요소에 둘 다 쓰세요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>dir</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    blockquote { border-inline-start: 4px solid #16a34a; margin: 12px 0; padding-inline-start: 12px; }
  </style>
</head>
<body>
  <p>The Arabic word for hello is <span lang="ar" dir="rtl">مرحبا</span>.</p>
  <blockquote lang="ar" dir="rtl">مرحبا بكم في الموقع</blockquote>
</body>
</html>

border-inline-start가 방향을 따르기 때문에 blockquote가 오른쪽에 맞춰지고 초록색 막대도 오른쪽으로 옮겨가요. margin-left 대신 margin-inline-start 같은 논리 속성을 쓰면 레이아웃이 양방향 모두에서 올바르게 유지돼요.

lang과 hreflang 차이

lang은 요소의 콘텐츠를 설명해요. hreflang은 링크에 쓰고 링크가 가리키는 페이지를 설명해요. 번역본이 있는 사이트는 <head>에 모든 버전을 나열해서, 검색 엔진이 각 독자를 알맞은 버전으로 보낼 수 있게 해요.

<link rel="alternate" hreflang="en" href="https://example.com/">
<link rel="alternate" hreflang="de" href="https://example.com/de/">
<link rel="alternate" hreflang="x-default" href="https://example.com/">

각 번역 페이지도 <html>에 자기 lang을 설정해요. 독일어 페이지에는 lang="de"예요.

자주 하는 실수

lang을 빼먹음. 많은 템플릿이 잊어요. 모든 페이지에서 doctype 옆에 설정하세요.
번역 페이지에 lang="en"을 그대로 복사함. 영어로 표시된 독일어 페이지는 영어 발음으로 읽혀요. 콘텐츠에 맞추세요.
국가 코드를 언어로 씀. lang="jp"와 lang="gr"은 일본어와 그리스어가 아니에요. 코드는 ja와 el이에요. 한국어도 kr이 아니라 ko예요.
lang으로 방향을 정하려 함. lang="ar"만으로는 텍스트가 오른쪽에서 왼쪽으로 흐르지 않아요. dir="rtl"을 추가하세요.
lang="en_US"로 씀. 구분자는 하이픈이에요. en-US처럼요.

자주 묻는 질문

HTML에서 lang 속성은 무슨 일을 하나요?

요소 콘텐츠의 언어를 선언해요. 스크린 리더는 이걸로 알맞은 음성과 발음을 고르고, 브라우저는 번역을 제안하고 따옴표를 고르고 하이픈 처리를 하는 데 쓰고, 일부 맞춤법 검사기는 사전을 고르는 데 써요.

html lang 속성에는 무엇을 넣어야 하나요?

BCP 47 표준의 언어 코드예요. 한국어는 ko, 영어는 en, 스페인어는 es, 프랑스어는 fr, 일본어는 ja예요. 지역이 중요할 때만 en-US, en-GB, pt-BR처럼 지역을 붙이세요.

lang="en"과 lang="en-US" 중 무엇을 써야 하나요?

둘 다 올바라요. 대부분의 영어 페이지에는 en이면 충분해요. 철자, 날짜, 일부 단어의 발음처럼 지역별 차이가 중요할 때 en-US나 en-GB를 쓰세요.

lang 속성이 SEO에 영향을 주나요?

Google은 텍스트 자체에서 언어를 감지하고 lang 속성에 의존하지 않는다고 밝혔어요. 그래도 올바르게 설정하세요. 다른 검색 엔진, 번역 도구, 스크린 리더가 사용해요. 페이지의 번역본끼리 연결하려면 hreflang 링크를 쓰세요.

다른 언어로 된 텍스트는 어떻게 표시하나요?

그 텍스트를 감싸는 요소에 lang을 추가하세요. <span lang="fr">bon appétit</span>처럼요. 스크린 리더가 그 구절의 발음을 바꾸고, CSS는 :lang(fr)로 꾸밀 수 있어요.

lang과 hreflang은 무엇이 다른가요?

lang은 요소의 콘텐츠가 어떤 언어인지 말해요. hreflang은 링크에 쓰고, 링크된 페이지가 어떤 언어인지 말해요. 사이트가 검색 엔진에 페이지의 다른 언어 버전을 알려 주는 방법이에요.

HTML lang 속성: 언어 코드와 lang이 바꾸는 것