이 글은 TOAST UI FE Guide를 참고하여 재구성한 글입니다.
HTML은 페이지의 기본 골격을 구성하며 서비스 성능 및 접근성과 밀접하게 연관되어 있다.
HTML을 어떻게 작성해야 모든 브라우저가 콘텐츠를 손실 없이 동일하게 표현할 수 있을까?
1. HTML 문서 형식을 명확하게 지정 (웹 호환성)
브라우저의 일관된 렌더링을 위해 상단에 DOCTYPE을 명시해야 한다.
브라우저는 선언된 DOCTYPE에 맞춰 문법을 검사한다.
HTML5인 경우 아래와 같이 선언
<!DOCTYPE html>
<html>
<head>
</head>
</html>2. html 태그에 적절한 lang 속성 지정 (웹 접근성)
최상위 태그에는 lang 속성을 주어 문서의 기본 언어를 지정한다. 스크린 리더는 lang을 통해 언어를 인식하여 자동으로 음성을 변환하거나 해당 언어에 적합한 발음을 제공한다.
스크린 리더란?
- 컴퓨터의 화면 낭독 소프트웨어
- 학습장애, 인지장애인, 노인, 다문화가족 등의 웹 접근성을 지원
ex ) img 태그의 alt 속성, input 태그의 alt 속성(type이 image인 경우)
3. meta 태그에 적절한 charset 속성 지정
메타태그 charset을 사용하여 문자 인코딩 방식을 지정하면, 브라우저나 개발 도구는 해당 문서의 인코딩을 빠르고 정확하게 인식한다. 문자 인코딩은 유니코드 기반으로 하위 호환이 뛰어나 가장 널리 쓰이는 UTF-8을 권장한다.
<html lang="ko">
<meta charset="UTF-8">
</head>
4. 불필요한 태그 작성 피하기
HTML 문서의 크기가 작을수록 네트워크를 통해 전송되는 데이터 양은 줄어든다.
HTML 문서의 깊이가 얕을수록 브라우저가 렌더링할 때 사용하는 렌더 트리가 가벼워지므로,
렌더링 속도가 빨라진다.
5. 목적에 맞는 HTML 태그 사용
제목을 나타낼 경우 h 태그, 문단을 나타낼 경우 p 태그, 링크를 나타낼 경우 a 태그 등을 사용한다.
또한, HTML5에서 추가된 <header>, <nav>, <article> 등 시멘틱 태그를 사용하여 문서를 작성하면 접근성, 재사용성, 검색엔진 최적화(Search Engine Optimization) 등에 도움이 된다.
프론트엔드 개발자를 꿈꾸는