모양보다 의미를 나타내기
제목 요소는 단순히 글자를 크게 보이는 장식이 아니라 문서의 구획을 나타낸다. 링크는 다른 자원이나 문서 위치로 이동하는 관계를 표현한다. 적절한 요소는 브라우저와 보조 기술이 문서를 해석하는 데 도움이 된다.
같은 시각적 결과를 만들 수 있어도 어떤 요소를 사용했는지에 따라 동작과 접근성이 달라진다. 링크처럼 보이는 글자와 실제 href를 가진 링크는 같지 않다.
소스와 DOM
브라우저는 HTML 소스를 파싱해 DOM이라는 문서 구조를 만든다. 잘못된 중첩을 복구하는 규칙이 있어 소스의 문자 순서와 실제 생성된 구조가 완전히 같지 않을 수 있다.
자바스크립트는 이 구조를 읽거나 변경할 수 있다. 처음 받은 HTML과 화면에 보이는 최종 문서를 구별하면 렌더링 및 크롤링 문제를 이해하는 데 도움이 된다.
스타일과 동작의 연결
CSS는 요소의 배치와 색, 글꼴 등을 지정하고 자바스크립트는 상호작용과 데이터 처리를 담당할 수 있다. HTML은 이런 기능이 연결될 기반 구조를 제공한다.
세 기술의 역할이 완전히 겹치지 않는다고 모든 기능을 한 가지 기술에만 고정할 수 있는 것은 아니다. 기본 양식과 펼침 요소처럼 HTML 자체가 제공하는 동작도 있다.
텍스트를 안전하게 넣기
사용자 입력을 HTML 코드로 그대로 해석시키면 의도하지 않은 요소나 스크립트가 만들어질 수 있다. 일반 텍스트를 표시할 때는 문맥에 맞는 이스케이프가 필요하다.
서식 있는 내용을 허용하는 편집기는 사용할 요소와 속성을 제한하는 정화 처리가 필요하다. 화면에서 편집이 잘된다는 사실만으로 저장된 HTML이 안전하다고 결론 내릴 수는 없다.