HTML 유효성 검사기 사용법 완벽 가이드 - W3C 검사부터 오류 해결까지 한번에 정리
화면이 이유 없이 깨지거나 SEO 점검에서 마크업 오류가 잡혔다면 HTML 유효성 검사기가 답입니다. W3C 검사기 사용법 3가지와 자주 나오는 오류 해결법을 정리했습니다.
분명 코드를 다 작성했는데 특정 브라우저에서만 화면이 깨지거나, 모바일에서 레이아웃이 어긋난 경험이 있으실 겁니다. 몇 시간을 들여다봐도 원인을 못 찾다가 알고 보니 닫히지 않은 태그 하나가 문제였던 경우도 흔합니다. 이런 시간 낭비를 줄여주는 도구가 바로 HTML 유효성 검사기입니다. 코드를 넣으면 웹 표준에 어긋난 부분을 줄 번호와 함께 짚어주기 때문에, 육안으로 찾기 어려운 오류를 몇 초 만에 확인할 수 있습니다.
HTML 유효성 검사기란 무엇인가
HTML 유효성 검사기는 작성한 HTML 문서가 W3C(월드와이드웹 컨소시엄) 표준 규격을 지키고 있는지 자동으로 점검하는 도구입니다. 맞춤법 검사기가 문장의 오탈자를 잡아주듯, 유효성 검사기는 마크업의 문법 오류를 잡아줍니다.
가장 널리 쓰이는 것은 W3C가 직접 운영하는 무료 검사기입니다. 별도 설치 없이 브라우저에서 바로 사용할 수 있습니다.
- W3C Markup Validation Service: validator.w3.org 에서 접속. 가장 공신력 있는 기본 검사기입니다.
- Nu Html Checker: validator.w3.org/nu 에서 접속. HTML5 문서 검사에 사용되는 최신 엔진입니다.
- W3C CSS 검사기: jigsaw.w3.org/css-validator 에서 CSS 파일도 같은 방식으로 검사할 수 있습니다.
W3C 검사기 사용 방법 3가지
W3C 검사기는 상황에 따라 세 가지 입력 방식을 지원합니다. 각 방식의 용도가 다르므로 구분해서 쓰면 편합니다.
1. URL로 검사하기 (Validate by URI)
이미 인터넷에 공개된 페이지라면 주소만 붙여넣으면 됩니다. 배포된 실서비스 상태를 그대로 점검할 수 있어 가장 정확합니다. 주소창에 validator.w3.org/nu/?doc=페이지주소 형태로 직접 입력해도 바로 결과가 나옵니다.
2. 파일 업로드로 검사하기 (Validate by File Upload)
아직 배포 전인 로컬 HTML 파일을 검사할 때 사용합니다. 파일을 선택해서 올리면 동일한 검사 결과를 받을 수 있습니다.
3. 코드 직접 붙여넣기 (Validate by Direct Input)
전체 파일이 아니라 특정 구간만 빠르게 확인하고 싶을 때 유용합니다. 다만 문서 일부만 붙여넣으면 DOCTYPE 누락 같은 오류가 함께 표시되므로, 가능하면 문서 전체를 넣는 것이 좋습니다.
자주 나오는 오류 메시지와 해결법
검사 결과는 빨간색 Error와 노란색 Warning으로 나뉩니다. 처음 검사를 돌리면 수십 개씩 나와서 당황할 수 있지만, 실제로는 몇 가지 유형이 반복되는 경우가 대부분입니다.
| 오류 메시지 | 원인 | 해결 방법 |
|---|---|---|
| Duplicate ID | 같은 id 값을 여러 요소에 사용 | id는 문서에서 한 번만, 반복 스타일은 class로 변경 |
| An img element must have an alt attribute | 이미지에 alt 속성 누락 | 모든 img 태그에 alt="설명" 추가 |
| Unclosed element | 여는 태그만 있고 닫는 태그 없음 | 표시된 줄 번호로 이동해 닫는 태그 추가 |
| Stray end tag | 짝 없는 닫는 태그가 존재 | 중복된 닫는 태그 삭제 |
| Obsolete attribute | HTML5에서 폐기된 속성 사용 | align, border 등은 CSS로 대체 |
오류 수가 많아 보여도 원인 하나가 연쇄 오류를 만드는 경우가 흔합니다. 예를 들어 div 태그 하나가 안 닫히면 그 뒤의 구조 오류가 줄줄이 표시됩니다. 그래서 위에서부터 순서대로 고치고 다시 검사하는 것이 정석입니다. 첫 오류 몇 개만 고쳐도 전체 오류가 절반 이하로 줄어드는 경우가 많습니다.
유효성 검사와 SEO의 진짜 관계
유효성 검사를 통과하면 검색 순위가 오른다는 이야기가 있는데, 정확히 짚고 넘어갈 필요가 있습니다. 구글은 HTML 유효성 자체를 직접적인 순위 요소로 사용하지 않는다고 여러 차례 밝혀왔습니다. 오류가 0개라고 해서 가산점이 붙는 것은 아닙니다.
유효성 검사는 점수를 따기 위한 시험이 아니라 건강검진에 가깝습니다. 통과 자체가 목적이 아니라, 크롤러와 브라우저가 내 페이지를 오해 없이 읽게 만드는 것이 목적입니다.
다만 간접적인 영향은 분명히 있습니다.
- 심각한 구조 오류는 검색엔진이 본문과 링크를 제대로 파싱하지 못하게 만들 수 있습니다.
- 깨진 마크업은 브라우저 렌더링 오류로 이어져 사용자 이탈을 늘립니다.
- title 중복, 메타 태그 오류, 구조화 데이터 문법 오류는 검색 결과 노출에 직접 영향을 줍니다.
즉 Warning 하나까지 전부 없앨 필요는 없지만, Error 등급의 구조 오류는 반드시 잡는 것이 SEO 관점에서도 안전합니다.
함께 쓰면 좋은 검사 도구
W3C 검사기 하나로 끝내기보다 목적별 도구를 조합하면 점검 품질이 올라갑니다.
- 브라우저 개발자 도구(F12): 콘솔 탭에서 실시간 오류를 확인할 수 있어 수정과 검증을 반복하기 좋습니다.
- Lighthouse: 크롬에 내장된 감사 도구로 접근성, 성능, SEO 항목을 함께 점수화해 줍니다.
- 에디터 확장 프로그램: VS Code의 HTMLHint 같은 확장을 쓰면 코드를 작성하는 순간에 오류를 표시해 줘서 검사기까지 갈 일 자체가 줄어듭니다.
이런 도구들의 공통점은 설치 부담 없이 브라우저에서 바로 쓸 수 있다는 점입니다. 나이 계산기처럼 한 가지 기능에 집중한 웹 도구들이 꾸준히 쓰이는 이유도 같습니다. 필요할 때 열어서 결과만 얻고 닫으면 되기 때문에, 자주 쓰는 검사 도구는 북마크바에 고정해 두는 것이 효율적입니다.
실전 점검 순서 정리
실무에서 권장하는 점검 순서는 다음과 같습니다.
- 1단계: 작성 단계에서 에디터 확장으로 실시간 오류 제거
- 2단계: 배포 전 W3C 검사기에 파일 업로드로 Error 0개 확인
- 3단계: 배포 후 URL 검사로 실서비스 상태 재확인
- 4단계: Lighthouse로 접근성과 SEO 항목까지 점검
오늘 바로 할 수 있는 액션은 두 가지입니다. 지금 운영 중인 사이트 주소를 validator.w3.org/nu 에 넣어 Error 개수를 확인해 보시고, 빨간색 오류가 있다면 맨 위의 오류부터 하나씩 수정한 뒤 재검사해 보세요. 페이지 하나만 정리해 봐도 반복되는 오류 패턴이 보이기 때문에, 나머지 페이지는 훨씬 빠르게 정리할 수 있습니다.
