HTML 강좌 / HTML 오류 찾기와 문서 검사하기

HTML 문서 검사는 태그를 잘못 닫았거나 속성을 틀리게 쓴 것처럼 브라우저가 화면에 표시해 주지 않는 문제를 찾는 데 도움이 됩니다. 검사 결과를 고친 뒤에는 실제 브라우저에서도 내용과 조작이 예상대로 작동하는지 다시 확인해야 합니다.

검사 전에 파일과 화면 확인하기

먼저 HTML 파일을 저장하고 브라우저에서 열어 보세요. 제목, 문단, 링크, 이미지와 양식이 빠짐없이 보이는지 확인합니다. 화면이 보인다는 사실만으로 HTML이 올바르다는 뜻은 아닙니다. 브라우저가 잘못된 구조를 복구해서 보여 줄 수도 있기 때문입니다.

Nu HTML Checker로 문서 검사하기

Nu HTML Checker에서 공개 URL, 업로드한 파일 또는 직접 붙여 넣은 HTML을 검사할 수 있습니다. 아직 공개하지 않은 글이나 로컬 파일은 파일 업로드 또는 직접 입력 방식을 사용하세요. 비밀번호나 개인 정보가 들어 있는 원본 파일을 외부 검사 서비스에 올리지 않도록 주의합니다.

1. 검사할 HTML 파일의 최신 내용을 저장합니다.
2. 검사 서비스에서 파일 업로드나 직접 입력 방식을 선택하고 검사합니다.
3. 오류의 위치와 메시지를 읽고 해당 줄뿐 아니라 앞뒤의 시작·종료 태그도 확인합니다.
4. 파일을 고친 뒤 다시 검사하여 새 오류가 생기지 않았는지 확인합니다.

예를 들어 같은 id를 여러 곳에 사용하거나 열지 않은 요소의 종료 태그를 적으면 구조와 연결 관계가 어긋날 수 있습니다. 오류가 많이 나오면 위쪽의 첫 오류부터 고쳐 보세요. 하나의 잘못된 태그가 뒤따르는 여러 메시지를 만들기도 합니다. li처럼 종료 태그를 생략할 수 있는 요소도 있으므로, 태그가 짧아 보인다는 이유만으로 오류라고 단정하지는 마세요.

다음처럼 두 입력칸에 같은 id를 주면 두 번째 레이블이 어느 필드와 연결되는지 불분명해집니다.

<label for="email">이메일</label>
<input id="email" name="email" type="email">
<label for="email">확인용 이메일</label>
<input id="email" name="email_check" type="email">

두 번째 필드의 id를 email-check로 바꾸고 두 번째 레이블의 for도 같은 값으로 수정하세요. 그런 다음 검사 도구로 중복 ID 오류가 사라졌는지 확인하고, 브라우저에서 각 레이블을 눌러 서로 다른 입력칸에 초점이 가는지 시험합니다.

검사 메시지에는 오류가 발견된 줄과 실제 원인이 있는 줄이 다를 수 있습니다. 예를 들어 닫지 않은 따옴표는 다음 태그에서 문제로 나타날 수 있으므로 표시된 위치의 앞부분도 살펴보세요. 오류를 고친 뒤 파일을 저장하고 같은 파일을 다시 업로드해야 이전 버전을 반복해서 검사하는 실수를 피할 수 있습니다.

검사 결과만으로 충분하지 않은 이유

문법 검사는 링크가 독자에게 적절한 페이지로 연결되는지, alt가 이미지의 정보를 제대로 전달하는지, 양식 제출 후 서버가 올바르게 처리하는지까지 보장하지 않습니다. 검사 후에는 링크를 직접 열고, 키보드로 이동하고, 모바일 너비에서도 읽을 수 있는지 확인하세요.

외부 이미지나 동영상이 보이지 않으면 HTML 구문뿐 아니라 파일 경로, 서버 응답, 재생 형식도 확인해야 합니다. 검사 도구는 문제를 찾는 출발점이지 게시 전 최종 판단을 대신하지 않습니다.

검사 대상도 구별해야 합니다. 파일 업로드는 업로드한 HTML 문서 자체를, URL 검사는 서버가 실제로 제공하는 결과를 검사합니다. 워드프레스처럼 테마가 본문을 감싸는 사이트에서는 원고 조각만 검사한 결과와 공개 페이지 전체를 검사한 결과가 다를 수 있습니다. 원고를 검토할 때는 수정할 수 있는 범위를 파악하고, 테마·플러그인에서 생긴 문제를 본문 코드의 오류와 혼동하지 마세요.