Programming/HTML,CSS

Warning :: <html> element must have a lang attribute: The <html> element does not have a lang attribute

고고마코드 2022. 8. 10. 10:59
반응형

경고

<html> element must have a lang attribute: 
The <html> element does not have a lang attribute

웹 개발을 할 때 개발자도구를 열었더니 위와 같은 경고가 발생했습니다.


원인

html-lang-valid 규칙을 지키지 않았기 때문에 발생하는 경고입니다.

웹 페이지의 언어를 지정해야 한다는 규칙입니다.

웹 페이지의 언어를 지정하지 않으면 screen reader는 사용자가 설정한 기본 언어로 가정합니다.

screen reader는 언어의 특성에 따라 서로 다른 사운드 라이브러리를 사용합니다.

만약 문서에서 읽을 언어가 올바르게 지정되어 있지 않다면 screen reader가 다른 언어로 문서를 읽으므로 혼란스러운 부분이 생길 수 있습니다.

이러한 부분으로 인해 경고가 나오는 것입니다.


해결

해결방법은 lang 을 지정해주면 됩니다.

HTML

<!DOCTYPE html>
<html lang="en">
  <!--document head and body-->
</html>

Jade

doctype html
html(lang="en")
    head
        ...

저는 Jade 템플릿 엔진을 사용하면서 발견한 경고라 Jade도 함께 남깁니다!

특정 부분에 lang 추가

<!DOCTYPE html>
<html lang="en">
  <bod>
      ...
    <div lang="ko"></div>
    ...
  </body>
</html>

웹 페이지 내에서 특정 부분만 언어가 다르게 나타난다면 특정 부분의 태그에 lang을 추가할 수도 있습니다.


참고 자료

  1. webhint
    Axe: Language | webhint documentation
  1. Deque University
    element must have a valid value for the lang attribute Axe Rules | Deque University | Deque Systems
반응형

'Programming > HTML,CSS' 카테고리의 다른 글

CSS: em, px, pt, percent 변환 및 공식  (0) 2022.02.12