개요

HTML은 HyperText Markup Language의 줄임말로, 문서의 구조를 표현하는 마크업 언어이다. 제목, 문단, 목록, 링크, 이미지, 표, 양식 같은 요소를 태그로 표시해 브라우저가 문서를 이해하고 보여 줄 수 있게 한다.

HTML은 프로그래밍 언어라기보다 문서의 의미와 구조를 표시하는 언어에 가깝다. CSS가 모양을 담당하고 JavaScript가 동작을 담당한다면, HTML은 페이지의 뼈대와 의미를 맡는다.

구조와 의미

HTML에서 중요한 것은 태그를 단순히 화면 모양을 만들기 위해 쓰는 것이 아니라, 콘텐츠의 의미에 맞게 쓰는 것이다.

  • h1~h6: 제목과 하위 제목
  • p: 문단
  • ul, ol, li: 목록
  • a: 링크
  • button: 버튼
  • label, input: 입력 양식
  • table, th, td: 표 데이터

의미에 맞는 HTML은 검색엔진, 브라우저, 자동화 도구뿐 아니라 화면 읽기 프로그램 같은 보조기술에도 중요한 단서를 제공한다.

접근성 관점

웹 접근성에서 HTML은 출발점이다. 버튼처럼 보이는 요소를 실제 button으로 만들고, 제목 구조를 순서대로 쓰며, 이미지에 적절한 대체 텍스트를 제공하면 많은 접근성 문제가 줄어든다.

반대로 모든 것을 divspan으로만 만들고 JavaScript로 동작을 흉내 내면, 키보드 조작과 보조기술 호환성이 깨지기 쉽다. 접근 가능한 웹은 화려한 효과보다 먼저 올바른 HTML 구조에서 시작한다.

함께 볼 개념