HTML 코드 검사기

실제 사용 예시

정적 HTML 페이지를 배포하기 전에 전체 코드를 붙여넣어 닫히지 않은 태그, 중복 ID, 이미지 alt 누락, 사용하지 않는 CSS 선택자를 확인합니다. 화면에서는 정상처럼 보여도 검색 엔진, 접근성 도구, 브라우저별 렌더링에서 문제가 될 수 있는 항목을 미리 찾는 용도입니다.

HTML 코드 검사기란?

HTML 코드를 작성하다 보면 태그를 닫지 않거나, ID를 중복 사용하거나, 이미지에 alt 속성을 빠뜨리는 실수가 자주 발생합니다. 브라우저는 이러한 오류를 자동으로 복구해 렌더링하기 때문에 화면에서는 정상으로 보이지만, SEO 점수 저하, 접근성 문제, 예상치 못한 레이아웃 깨짐의 원인이 됩니다.

이 도구는 HTML 코드를 입력하면 브라우저 내부에서 즉시 분석하여 문제를 찾아줍니다. 서버로 코드가 전송되지 않으므로 내부 코드도 안전하게 검사할 수 있습니다.

감지하는 오류 유형

오류 (Error) — 수정하지 않으면 브라우저마다 다르게 렌더링될 수 있는 문제입니다. 미닫힌 태그, 태그 불일치, 중복 ID가 여기에 해당합니다.

경고 (Warning) — 동작은 하지만 표준이나 접근성 측면에서 개선이 필요한 코드입니다. alt 없는 이미지, href 없는 링크, lang 없는 HTML 문서, deprecated 태그(font, center, marquee 등), style 태그 내 사용하지 않는 CSS 선택자가 포함됩니다.

알림 (Info) — 즉각적 문제는 없지만 코드 품질 개선을 고려할 수 있는 항목입니다. 내용이 없는 빈 요소, type 없는 input/button, doctype 또는 viewport 누락 등이 해당됩니다.

사용하지 않는 CSS 선택자 감지

HTML 내 <style> 태그에 정의된 CSS 규칙 중 실제로 일치하는 요소가 없는 선택자를 찾아줍니다. 예를 들어 .btn-old 클래스가 CSS에는 정의되어 있지만 HTML 어디에도 사용되지 않는다면 경고로 표시됩니다. @media, @supports, @container 내부의 단순 선택자도 함께 검사합니다. 단, :hover, :nth-child 같은 가상 선택자는 정적 분석의 한계로 기본 선택자로 단순화하여 검사합니다.

한계

이 도구는 W3C 전체 명세를 구현하는 완전한 검증기가 아닙니다. 실무에서 자주 발생하는 오류를 빠르게 찾는 용도로 설계되었습니다. 공식 W3C 유효성 검사는 validator.w3.org를 이용하세요.

자주 묻는 질문