이번 편의 결과물: 세 페이지를 Nu HTML Checker에 돌려 나온 오류를 모두 고쳐 0건으로 만든다. · 다루는 개념: Nu HTML Checker 사용법, 콘텐츠 모델 위반, 필수 속성 누락 교정, 파싱 오류 복구
이 편에서 만드는 파일
web-practice/portfolio/
├ index.html ~ (검증 오류 수정)
├ projects.html ~ (검증 오류 수정)
└ contact.html ~ (검증 오류 수정)개념 정리
Nu HTML Checker 사용법
validator.w3.org/nu는 HTML Living Standard 기준으로 문서를 검사하는 W3C의 현행 검증기다. 세 가지 방법으로 검사할 수 있다.
| 방법 | 상황 |
|---|---|
| 파일 업로드 | 로컬 파일(index.html 등)을 그대로 올릴 때 |
| 텍스트 붙여넣기 | 코드 일부만 빠르게 확인하고 싶을 때 |
| URL 입력 | 이미 배포된 페이지를 검사할 때 |
이 과목은 로컬 파일만 있으므로 파일 업로드 방식을 쓴다.
오류 메시지 읽는 법
검사 결과는 “Line 12, Column 8: Error: 메시지” 형식으로 나온다. 줄·컬럼 번호를 보고 에디터에서 바로 그 위치로 이동한다. 메시지 종류는 두 가지다.
Error: 표준 위반. 반드시 고쳐야 한다.Warning: 위반은 아니지만 권장하지 않는 패턴. 이 과목에서는 경고도 최대한 없앤다.
콘텐츠 모델 위반이 곧 “오류”가 되는 이유
02편에서 소개한 콘텐츠 모델(이 요소 안에 무엇이 들어갈 수 있는가)을 어기면 검증기가 정확히 그 규칙 이름으로 오류를 낸다. 예를 들어 p는 phrasing content만 담을 수 있어 그 안에 div(sectioning이 아닌 flow content)를 넣으면 검증기가 즉시 잡아낸다.
실습
1. 세 파일을 업로드해 첫 검사 실행
validator.w3.org/nu를 열고 “File Upload”를 선택해 index.html을 올린다. 같은 방식으로 projects.html·contact.html도 각각 검사한다.
2. 콘텐츠 모델 위반 고치기
index.html의 “소개” 문단 하나가 실수로 이렇게 되어 있다고 하자.
<!-- 수정 전: p 안에 div -->
<p>
저는 3년째 프론트엔드를 공부하고 만들고 있습니다.
<div>누가 봐도 쓸 수 있는가를 먼저 생각합니다.</div>
</p>검증기는 다음처럼 알려준다.
Error: Element div not allowed as child of element p in this context.div는 p 안에 들어갈 수 없다. 강조가 필요하면 인라인 요소인 strong으로 바꾼다.
<!-- 수정 후 -->
<p>
저는 3년째 프론트엔드를 공부하고 만들고 있습니다.
<strong>누가 봐도 쓸 수 있는가</strong>를 먼저 생각합니다.
</p>3. 필수 속성 누락 고치기
이미지에 alt가 빠지면 다음 오류가 난다.
Error: An img element must have an alt attribute, except under certain conditions.06편에서 채운 alt가 편집 중 실수로 지워진 경우 그대로 다시 채운다. 장식용 이미지라면 빈 문자열 alt=""도 유효한 값이다(정보가 없다는 뜻을 명시).
4. 레이블 연결 끊김 고치기
contact.html의 label이 실수로 for 속성 값과 입력의 id가 어긋나 있으면 다음 경고가 뜬다.
Warning: Element label not associated with a form control.for와 id를 같은 문자열로 맞춘다.
<!-- 수정 전: contact-mail과 contact-email 불일치 -->
<label for="contact-mail">이메일</label>
<input type="email" id="contact-email" name="email" required /><!-- 수정 후 -->
<label for="contact-email">이메일</label>
<input type="email" id="contact-email" name="email" required />5. 재검사
세 파일을 다시 업로드해 오류·경고가 모두 사라졌는지 확인한다.
6. 확인
index.html·projects.html·contact.html세 파일 모두 Nu HTML Checker 결과가 “Document checking completed. No errors or warnings to show.”로 끝난다- 고친 부분을 에디터에서 다시 열어 의도한 태그로 남아 있는지 확인한다
직접 해보기
projects.html의 프로젝트 카드 하나에서 ul의 자식으로 li가 아닌 p를 하나 넣어 보고 검증기가 어떤 메시지를 내는지 확인해 보자.
정답 보기
Error: Element p not allowed as child of element ul in this context.가 뜬다. ul은 li만 자식으로 받는 콘텐츠 모델이기 때문이다. p를 li 안으로 옮기거나 li로 바꿔야 한다.
자주 하는 실수
| 증상 | 원인 | 고치는 법 |
|---|---|---|
| ”틀려도 브라우저에는 멀쩡히 뜬다” | 브라우저는 문법 오류를 스스로 복구해 화면을 만든다(파싱 오류 복구). 검증기와 브라우저 렌더링은 별개 기준이다 | 브라우저에서 뜨는 것과 표준 준수는 다르다. 검증기 결과를 기준으로 삼는다 |
| 같은 오류가 세 파일에서 반복된다 | 헤더·푸터를 복사-붙여넣기하면서 실수도 함께 복제됨 | 공통 영역을 고칠 때는 세 파일 모두 같은 수정을 적용했는지 확인한다 |
| 경고를 무시하고 넘어간다 | ”Error가 아니니 괜찮다”고 판단 | 이 과목의 완료 기준은 오류 0건이지만, 경고도 대부분 실제 접근성·구조 문제이므로 함께 고친다 |