HTML lang 속성은 해당 HTML 요소의 콘텐츠가 어떤 언어로 작성되었는지 정의하는 속성입니다. lang 속성은 전역(Global) 속성에 해당하므로, 모든 HTML 요소에 자유롭게 적용할 수 있습니다.
lang 속성의 역할
lang 속성은 단순히 정보를 표시하는 것을 넘어 여러 중요한 기능을 수행합니다.
- 검색 엔진 최적화(SEO): 검색 엔진이 페이지의 언어를 파악하여 올바른 사용자에게 콘텐츠를 노출하는 데 도움을 줍니다.
- 스크린 리더 지원: 화면 낭독 프로그램이 올바른 발음과 언어 규칙으로 텍스트를 읽도록 합니다.
- 브라우저 지원: 브라우저가 하이픈 처리, 따옴표 스타일 등 언어별 타이포그래피 규칙을 적용할 수 있습니다.
- 번역 도구 활용: 번역 확장 프로그램이 특정 요소만 번역하거나 제외하도록 판단하는 기준이 됩니다.
문법(Syntax)
lang 속성의 기본 문법은 다음과 같습니다.
<tagname lang="value"></tagname>
여기서 value는 ISO 639-1 언어 코드를 의미합니다. 주요 언어 코드의 예는 다음과 같습니다.
ko— 한국어en— 영어ja— 일본어zh— 중국어fr— 프랑스어de— 독일어
사용 예시
<p lang="ko">한국어로 작성된 문단입니다.</p> <p lang="en">This paragraph is written in English.</p>
실전 예제(Example)
아래는 lang 속성을 실제로 적용한 완전한 HTML 문서 예제입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<style>
body {
color: #000;
height: 100vh;
background-color: #8BC6EC;
background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
text-align: center;
}
</style>
</head>
<body>
<h1>HTML lang 속성 데모</h1>
<p lang="en">This is a paragraph element with some dummy text and lang attribute.</p>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 그라데이션 배경 위에 제목과 영어 문단이 표시됩니다. 이 문단에는 lang="en" 속성이 지정되어 있으므로, 스크린 리더나 번역 도구가 해당 텍스트를 영어로 인식하게 됩니다.
정리
lang 속성은 웹 접근성과 SEO 측면에서 매우 중요한 전역 속성입니다. 일반적으로 <html> 태그에 페이지의 기본 언어를 지정하고, 본문 내 다른 언어로 작성된 부분에는 개별 요소에 lang 속성을 추가하는 방식으로 사용하는 것이 모범 사례입니다.