HTML 코드 검증 가이드

브라우저가 조용히 복구하는 HTML 오류를 배포 전에 찾는 실무 점검 기준

HTML 검증이 필요한 이유

브라우저는 잘못 작성된 HTML도 가능한 한 화면에 표시하려고 자동 복구합니다. 그래서 화면이 정상처럼 보이더라도 DOM 구조는 의도와 다르게 만들어질 수 있습니다. 이 차이는 SEO, 접근성, CSS 선택자 적용, JavaScript 이벤트 위임에서 문제를 일으킵니다.

HTML 검증은 완전한 표준 명세 검사가 아니더라도 실무에서 자주 발생하는 오류를 빠르게 찾는 과정입니다. 특히 템플릿 조각, CMS 입력값, 정적 사이트 빌드 결과를 배포하기 전에 점검하면 레이아웃 깨짐을 줄일 수 있습니다.

가장 먼저 확인할 문법 오류

미닫힌 태그는 가장 흔한 오류입니다. <div>, <section>, <p>처럼 컨테이너 역할을 하는 태그가 닫히지 않으면 이후 모든 요소가 잘못된 부모 아래로 들어갈 수 있습니다.

<section>
  <h2>제목</h2>
  <p>문단
</section>

위 예시에서 <p>는 브라우저가 자동으로 닫을 수 있지만, 실제 의도와 다르게 DOM이 정리될 수 있습니다. 자동 복구에 의존하지 말고 명시적으로 닫는 습관이 안전합니다.

태그 중첩 오류도 중요합니다. 나중에 연 태그를 먼저 닫아야 하며, <a> 안에 또 다른 상호작용 요소를 넣는 패턴은 접근성 문제로 이어질 수 있습니다.

ID와 필수 속성

중복 ID는 JavaScript와 CSS 모두에 영향을 줍니다. document.getElementById()는 보통 첫 번째 요소만 반환하므로, 같은 ID가 반복되면 스크립트가 예측하기 어려워집니다. 반복 요소에는 ID 대신 class를 사용하세요.

이미지 alt는 접근성의 기본입니다. 의미 있는 이미지는 내용을 설명하고, 장식 이미지는 alt=""로 보조기기가 무시할 수 있게 해야 합니다.

링크 href가 없는 <a>는 링크가 아닙니다. 클릭 동작만 필요하다면 <button type="button">을 사용하는 것이 의미와 키보드 접근성 측면에서 더 정확합니다.

문서 기본 구조

전체 HTML 문서라면 <!DOCTYPE html>, <html lang="ko">, <meta charset="UTF-8">, viewport meta, <title>을 확인해야 합니다. 이 요소들은 렌더링 모드, 언어 판별, 모바일 표시, 검색 결과 품질에 영향을 줍니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>페이지 제목</title>
</head>

미사용 CSS 선택자 점검

HTML 내부의 <style> 블록에서 실제 요소와 매칭되지 않는 선택자는 오래된 마크업의 흔적일 가능성이 큽니다. 미사용 CSS는 당장 오류를 만들지는 않지만 유지보수 비용을 높이고, 의도하지 않은 재사용으로 나중에 스타일 충돌을 만들 수 있습니다.

단, 정적 분석은 JavaScript가 나중에 추가하는 클래스, 사용자 상태에 따라 붙는 클래스, 외부 스타일시트를 완벽히 알 수 없습니다. 따라서 미사용 CSS 경고는 삭제 후보로 보고, 실제 런타임 사용 여부를 확인한 뒤 정리해야 합니다.

배포 전 체크리스트

  • 닫히지 않은 태그와 잘못된 중첩이 없는지 확인합니다.
  • ID가 페이지 안에서 한 번만 사용되는지 확인합니다.
  • img alt, a href, button type 같은 기본 속성을 확인합니다.
  • 전체 문서라면 doctype, lang, viewport, title을 확인합니다.
  • 사용하지 않는 CSS 선택자는 삭제 후보로 분류합니다.
  • 최종 배포 전에는 HTML 코드 검사기와 공식 W3C Validator를 함께 사용합니다.

광고 영역