프로그래밍 공부하기

lang Tag 본문

Web/[JS] FrontEnd

lang Tag

ihl 2021. 7. 30. 15:39

1. Lang

<html lang="ko">
  <p lang="en-GB">This paragraph is defined as British English.</p>
  <p lang="fr">Ce paragraphe est défini en français.</p>
  <p lang="ko">이 단락은 한국어로 정의됩니다.</p>
</html>

  lang은 모든 HTML 요소에 사용될 수 있는 전역특성(Global Attribute)이다. 위와 같이 HTML요소의 컨텐츠가 어떤 언어로 쓰여졌는지 표시하는 것이다. lang 특성의 값이 빈 문자열이거나 특성자체가 없는 경우 기본값인 '알 수 없음(Unknown)'이 된다.

 

2. Use

  lang 태그를 사용해야할까? 한국형 웹 콘텐츠 접근성 지침(관련페이지, 관련문서)에는 웹 서비스는 서비스에서 주로 사용되는 언어를 사용해야한다고 명시되어있다. 이는 소스코드 최상단에 위치하는 html 태그에 lang 속성을 사용하여 정의하며, 속성값은 ISO 639-1에서 지정한 두 글자로 된 언어 코드를 사용함으로써 준수할 수 있다.

 

  lang 태그를 사용해야하는 이유는 무엇일까? 가장 큰 이유는 많은 사람들에게 웹 접근성을 제공하기 위함이다. 전맹시각장애인이나, 저시력자, 노인 등은 컴퓨터를 사용할 때 컴퓨터 화면 낭독 소프트웨어인 스크린 리더를 사용한다. lang 태그는 스크린 리더가 웹 서비스 화면을 인식할 때 어떤 언어의 컨텐츠인지 정보를 제공하여 자동으로 음성을 변환하거나, 해당 언어에 적합한 발음을 제공할 수 있도록 돕는다.

 

See the Pen Language by ImHyeLim1209 (@imhyelim1209) on CodePen.

 

  lang attribute에 따른 스타일 지정을 위해서 사용될 수도 있다. 한 페이지에 여러 언어가 있다면 언어별로 글꼴이나 줄간격 등을 다르게 두기 위해 위와 같이 사용할 수 있다. (https://www.w3.org/International/questions/qa-css-lang)

 

  맞춤법 검사와 번역에도 사용될 수 있다. 컨텐츠의 언어에 따라 맞춤법 검사기의 언어가 아닌 컨텐츠를 무시하거나 자동 번역 소프트웨어의 번역 대상을 지정하기 위한 용도로 사용될 수 있다.

 

  검색엔진(SEO)에도 lang 태그가 사용될 수 있다. 그러나 최근 구글의 경우 lang 태그를 무시하고 자동으로 문서의 언어를 감지하며, Bing의 경우 head의 meta 정보인 content-language 를 사용한다고 한다(관련글).

 

3. content-language

<head>
  <meta http-equiv="content-language" content="en-us">
</head>

  lang attribute와 유사하게 head의 메타데이터로 content-language를 표시할 수 있다. content-language는 페이지의 컨텐츠와 가장 관련성이 높은 언어와 국가를 나타내는 메타 태그이다. content-language가 en-us라는 것은 이 문서가 영어 사용자를 위해 만들어졌음을 의미하지만, 이 문서가 영어임을 의미하는 것은 아니며, 일부는 다른 언어로 사용되었을 수도 있기 때문에 lang 태그와는 의미상 차이가 있다. content-language가 없다면 모든 언어의 청중을 위해 만들어진 내용이라고 간주된다.

 

4. hreflang

<head>
  <link rel="alternate" href="http://example.com/" hreflang="en" />
  <link rel="alternate" href="http://example.il/" hreflang="he-IL" />
  <link rel="alternate" href="http://example.nz/" hreflang="en-NZ" />
</head>


  lang과 유사하게 hreflang이라는 attribute도 있다. hreflang은 브라우저에 연결된 웹 페이지의 언어를 알려준다. 같은 페이지가 언어별로 다양한 버전이 존재할 때 사용될 수 있으며, lang태그와 함께 사용될 수 있다. 구글에서는 현재 페이지의 버전을 알리기 위한(SEO)  방법 중 하나로hreflang을 사용하는 것을 가이드라인으로 제공하고 있다.(https://developers.google.com/search/docs/advanced/crawling/localized-versions?hl=ko)

 

 

 

SEO와 lang: https://www.woorank.com/en/edu/seo-guides/best-practices-for-language-declaration

왜 lang속성을 쓸까: https://www.w3.org/International/questions/qa-lang-why.en

content-language: https://developer.mozilla.org/ko/docs/Web/HTTP/Headers/Content-Language
lang_vs_hreflang: https://webmasters.stackexchange.com/questions/105998/what-is-the-difference-between-html-lang-tag-and-html-hreflang-tag

google SEO version guide: https://developers.google.com/search/docs/advanced/crawling/localized-versions?hl=ko

언어 코드: https://www.w3schools.com/tags/ref_language_codes.asp

'Web > [JS] FrontEnd' 카테고리의 다른 글

브라우저 작동 원리1 - 브라우저 구조  (0) 2021.10.15
Attribute vs Property  (0) 2021.07.30
Intersection Observer  (0) 2021.07.16
Props Drilling  (0) 2021.06.14
webpack  (0) 2021.05.19
'Web/[JS] FrontEnd' Related Articles more
Comments