검사기로 틀린 HTML 찾기

HTML·CSS 목차글을 담는 태그레슨 13 / 93

W3C 검사기(validator)는 HTML을 표준 규칙에 견주어, 틀린 곳을 줄 번호와 메시지로 알려 주는 도구입니다. HTML은 틀려도 브라우저가 오류 없이 고쳐 그리므로, 이 과목에서 '오류 메시지'를 볼 수 있는 곳은 검사기뿐입니다. 메시지는 Error부터 읽고, 그 줄로 가서 고친 뒤 다시 검사합니다.

이 단원에서 엇갈린 태그 · 목록 안 글 · 문단 안 목록을 보았습니다. 모두 화면은 그럴듯하게 그려지는데 나무는 고쳐 지어진 틀림이라, 눈으로는 놓치기 쉽습니다. 웹 개발을 처음 배우는 수업을 살핀 연구에서도, 검사기가 잡은 틀림은 거의 다 고쳐졌고 남은 틀림은 대부분 검사하지 않은 코드에 있었습니다. 이 레슨에서는 검사기에 문서를 넣는 법, 메시지를 읽는 차례, 고친 뒤 통과를 확인하는 법을 봅니다. 검사기는 인터넷에 연결되어 있어야 쓸 수 있습니다.

코드

… 7줄 접음
8 <h1>김치볶음밥</h1>
9 김치 김치
10</body>
11</html>

검사기

errors & warnings only

메시지 목록

Info4줄Trailing slash on void elements has no effect …Info 1개 접음
Error9줄End tag “p” seen, but there were open elements.
Error9줄Unclosed element “strong”.
Error10줄End tag for “body” seen, but there were unclosed elements.

Document checking completed.Document checking completed. No errors or warnings to show.

6단계 중 1단계. 문서를 통째로 검사기에 넣습니다. 파일을 올리거나 코드를 붙여 넣습니다.

1검사기에 문서를 넣는다

검사기 주소는 https://validator.w3.org/nu/⁠입니다. 첫 화면의 'Check by'에서 문서를 넣는 길 셋 가운데 하나를 고릅니다.

Check by	넣는 것	쓰는 때
address	웹 주소	인터넷에 올린 페이지
file upload	내 컴퓨터의 파일	`hello.html` 같은 내 파일
text input	붙여 넣은 코드	코드만 있을 때, 폰에서

내 컴퓨터의 파일은 웹 주소가 없어 address로는 넣을 수 없습니다. 파일을 올리거나(file upload), 편집기에서 코드를 모두 복사해 붙여 넣습니다(text input). 붙여 넣는 칸이 있어 폰에서도 됩니다. text input 칸에는 견본 코드가 미리 들어 있습니다. 칸의 글을 모두 지운 뒤 붙여 넣습니다. 견본 뒤에 이어 붙이면 내 코드에 없는 Error가 나옵니다. 문서는 <!DOCTYPE html>부터 </html>까지 통째로 넣습니다. body 안 몇 줄만 넣으면 검사기는 문서 뼈대가 없다는 Error('Start tag seen without seeing a doctype first.' 등)를 함께 냅니다.

2Error부터 읽는다 — Info는 접어 둔다

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8" />
  <title>김치볶음밥</title>
</head>
<body>
  <h1>김치볶음밥</h1>
  <p><strong>김치</p>
</body>
</html>

결과 화면탭: 김치볶음밥

검사기Error 3개

Info4줄Trailing slash on void elements has no effect and interacts badly with unquoted attribute values.
Error9줄End tag “p” seen, but there were open elements.
Error9줄Unclosed element “strong”.
Error10줄End tag for “body” seen, but there were unclosed elements.

검사기 칸은 검사기가 낸 메시지를 줄마다 하나씩 옮긴 것입니다 — 종류, 줄 번호, 메시지 원문 차례입니다. 검사기 화면에서는 자리가 'From line 9, column 16; to line 9, column 19'처럼 틀린 곳이 시작하고 끝나는 줄(line)과 칸(column)으로 나오고, 따옴표 안의 요소 이름은 테두리 상자로 보입니다. 검사기 칸에는 줄 번호만 옮기고, 여러 줄에 걸친 곳은 '10~12줄'처럼 옮깁니다. 메시지의 종류는 셋입니다.

종류	뜻	할 일
Error	표준 규칙에 어긋난 곳	먼저 읽고 고친다
Warning	틀리지는 않았지만 살펴볼 곳	Error 다음에 본다
Info	알아 두면 좋은 알림	오류가 아니다 — 접어 둔다

4번 줄의 Info는 <meta charset="utf-8" />⁠의 />에 대한 알림입니다. />의 /는 브라우저가 버리는 표시라, 빈 요소를 />로 끝내는 이 과목의 꼴에서는 빈 요소마다 이 Info가 나옵니다. Info를 감추려면 검사기 첫 화면 'Show' 줄의 'errors & warnings only'를 켜고 검사합니다. 결과 페이지의 'Message Filtering' 단추를 누르면 나오는 'Hide all info messages'로도 감출 수 있습니다.

3그 줄로 가서 고치고, 다시 검사한다

첫 Error는 '9번 줄에서 를 만났는데, 아직 닫지 않은 요소가 있다'는 뜻입니다. 둘째 Error가 그 요소가 strong이라고 알려 줍니다. 9번 줄로 가서, 나중에 연 strong을  앞에서 먼저 닫습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8" />
  <title>김치볶음밥</title>
</head>
<body>
  <h1>김치볶음밥</h1>
  <p><strong>김치</strong></p>
</body>
</html>

결과 화면탭: 김치볶음밥

검사기Error 0개

Info4줄Trailing slash on void elements has no effect and interacts badly with unquoted attribute values.

9번 줄 하나를 고치자 Error 셋이 모두 사라졌습니다. 10번 줄의 Error도 9번 줄의 strong이 닫히지 않아 생긴 것이었습니다. 이처럼 틀린 곳 하나가 Error를 여럿 낼 수 있어, 맨 위 Error 하나를 고치고 다시 검사하는 차례가 빠릅니다. Error가 없으면 메시지 목록 아래 초록 띠에 'Document checking completed. No errors or warnings to show.'가 뜹니다. Info는 목록에 남아 있어도 통과입니다.

이 단원에서 만난 틀림을 검사기는 이렇게 알려 줍니다.

메시지 원문	뜻	고칠 곳
End tag “p” seen, but there were open elements.	`</p>`를 만났는데 아직 닫지 않은 요소가 있다	그 줄의 닫는 차례
Unclosed element “strong”.	`strong`을 닫지 않았다	닫는 태그 넣기
Text not allowed in element “ul” in this context.	`ul` 바로 안에 글이 있다	글을 `li`로 감싸기
No “p” element in scope but a “p” end tag seen.	닫을 `p`가 없는데 `</p>`가 있다	문단 안의 목록 꺼내기
End tag “br”.	`br`의 닫는 태그가 있다	`</br>`를 `<br />`로
An “img” element must have an “alt” attribute …	`img`에 `alt`가 없다	`alt` 넣기

예제

조리 시간과 재료를 쓴 문서입니다. 검사기에 넣으면 Error가 몇 개, 몇 번 줄에 나올지 먼저 적어 본 뒤 펴 보세요.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8" />
  <title>김치볶음밥</title>
</head>
<body>
  <p>조리 15분</br>2인분</p>
  <ul>
    <li>밥 2공기</li>
    김치 1컵
  </ul>
</body>
</html>

결과 화면 보기

결과 화면탭: 김치볶음밥

검사기Error 2개

Error8줄End tag “br”.
Error10~12줄Text not allowed in element “ul” in this context.

Error 둘입니다. 이 칸은 'errors & warnings only'를 켠 꼴이라 Info를 옮기지 않았습니다. 예상과 다르면 그곳이 배울 곳입니다.

8번 줄: br는 빈 요소라 닫는 태그가 없습니다. 브라우저는 를  로 읽어 화면은 멀쩡하지만, 검사기는 틀린 태그로 잡습니다.
10~12번 줄: '김치 1컵'이 li 밖, ul 바로 안에 있습니다. 검사기는 그 글이 걸친 줄 — 10번 줄 </li> 바로 뒤부터 12번 줄 </ul> 앞까지 — 을 가리킵니다. 줄바꿈과 들여쓰기도 글이라 '김치 1컵' 앞뒤의 줄바꿈까지 한 덩어리 글입니다.
결과 화면에서는 두 틀림이 거의 드러나지 않습니다. 그래서 검사기로 확인합니다.

자주 틀리는 곳

틀린 생각: Info도 오류라서, />의 /를 지워야 한다.

메시지 목록에 Info가 줄줄이 뜨면 모두 고쳐야 할 것 같습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8" />
  <title>김치볶음밥</title>
</head>
<body>
  <p>밥 2공기<br />김치 1컵</p>
</body>
</html>

결과 화면탭: 김치볶음밥

검사기Error 0개

Info4줄Trailing slash on void elements has no effect and interacts badly with unquoted attribute values.
Info8줄Trailing slash on void elements has no effect and interacts badly with unquoted attribute values.

Info 둘뿐이고 Error는 없어 통과입니다. 메시지는 '빈 요소 끝의 /는 아무 효과가 없다'는 알림입니다.

맞는 규칙: Info는 오류가 아닙니다. Error부터 읽고, Info는 'errors & warnings only'로 접어 둡니다. 빈 요소의 />는 이 과목의 꼴이라 지우지 않습니다 — 지워도 나무는 같습니다.

틀린 생각: 통과했는지는 검사기 결과 페이지 맨 위에 나온다.

결과 페이지 맨 위의 굵은 줄이 검사 결과를 알려 줄 것 같습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8" />
  <title>김치볶음밥</title>
</head>
<body>
  <h1>김치볶음밥</h1>
</body>
</html>

결과 화면탭: 김치볶음밥

검사기Error 0개

Info4줄Trailing slash on void elements has no effect and interacts badly with unquoted attribute values.

Info 하나뿐이고 Error는 없는 문서입니다. 검사기 결과 페이지 맨 위의 굵은 줄 'Showing results for …'는 무엇을 검사했는지 알리는 줄일 뿐이고, 통과 여부는 메시지 목록 아래 띠가 알립니다.

맞는 규칙: 통과 문구 'Document checking completed. No errors or warnings to show.'는 메시지 목록 아래 초록 띠에 뜹니다. Error가 남아 있으면 같은 자리 띠에 'Document checking completed.'만 뜹니다.

틀린 생각: 결과 화면이 멀쩡하면 HTML도 맞다.

브라우저가 바르게 그렸으니 코드에도 틀린 곳이 없다고 여기게 됩니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8" />
  <title>김치볶음밥</title>
</head>
<body>
  <p><strong>김치</p></strong>
</body>
</html>

결과 화면탭: 김치볶음밥

검사기Error 3개

Error8줄End tag “p” seen, but there were open elements.
Error8줄Unclosed element “strong”.
Error8줄No “strong” element in scope but a “strong” end tag seen.

 뒤에 글이 없어, 브라우저가 고쳐 지은 나무는 바른 코드와 같고 결과 화면도 같습니다. 그래도 닫는 차례가 엇갈린 코드라 검사기는 Error 셋을 냅니다.

맞는 규칙: 브라우저는 틀린 태그도 오류 없이 고쳐 그립니다(브라우저 규칙 2). 화면이 멀쩡해도 틀린 곳이 숨어 있을 수 있어, 다 쓴 HTML은 검사기에 넣어 Error 0을 확인합니다.

틀린 생각: 검사기를 통과하면 누구나 쓸 수 있는 페이지다.

검사기가 Error를 하나도 내지 않으면 더 볼 것이 없을 것 같습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8" />
  <title>김치볶음밥</title>
</head>
<body>
  <img
    src="images/kimchi.svg"
    alt="그림"
    width="280"
    height="210"
  />
</body>
</html>

결과 화면탭: 김치볶음밥

alt가 있어 Error도 Warning도 없습니다(Info만 둘). 하지만 '그림'이라는 글은 그림을 볼 수 없는 사람에게 무엇이 그려져 있는지 알려 주지 못합니다.

맞는 규칙: 검사기는 규칙에 맞는지를 볼 뿐, 글의 뜻이 알맞은지는 보지 않습니다. alt의 글이 그림을 설명하는지 같은 일은 사람이 살핍니다 — 7단원 '누구나 쓸 수 있는 HTML'에서 점검 목록으로 봅니다.

확인 문제

1. 예제 8번 줄의 를  로 고쳤습니다. 다시 검사하면 메시지 목록은 어떻게 될까요? ('errors & warnings only'를 켜지 않은 목록)

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8" />
  <title>김치볶음밥</title>
</head>
<body>
  <p>조리 15분<br />2인분</p>
  <ul>
    <li>밥 2공기</li>
    김치 1컵
  </ul>
</body>
</html>

결과 화면탭: 김치볶음밥

① Error 1개, Info 1개
② Error 1개, Info 2개
③ Error 0개, Info 2개

힌트

8번 줄을 고쳐 없어진 Error와 남은 Error를 나누고, />로 끝나는 빈 요소가 이제 몇 개인지 셉니다.

정답

② — Error 1개, Info 2개입니다.

검사기Error 1개

Info4줄Trailing slash on void elements has no effect and interacts badly with unquoted attribute values.
Info8줄Trailing slash on void elements has no effect and interacts badly with unquoted attribute values.
Error10~12줄Text not allowed in element “ul” in this context.

8번 줄의 Error는 사라졌지만, 고친  가 빈 요소 끝 /에 대한 Info를 하나 더 냅니다. '김치 1컵'의 Error(10~12줄)는 그대로입니다.
①은 고친  도 Info를 낸다는 것을 놓친 것입니다.
③은 고친 줄 하나로 Error가 모두 사라진다고 본 것입니다. 틀린 곳이 둘이면 Error도 따로 남습니다.

2. 검사기 메시지를 읽고 고치는 차례입니다. 기호를 차례대로 쓰세요.

㉠ 메시지가 가리키는 줄로 가서 고친다
㉡ 다시 검사해 목록 아래 띠의 통과 문구를 확인한다
㉢ 'errors & warnings only'를 켜고 검사한다
㉣ 맨 위 Error의 줄 번호와 원문을 읽는다

힌트

알림을 접어 두는 일이 가장 먼저고, 확인하는 일이 가장 나중입니다.

정답

㉢㉣㉠㉡

Info를 접어 둔 뒤(㉢) 맨 위 Error를 읽고(㉣) 그 줄을 고칩니다(㉠). 틀린 곳 하나가 Error를 여럿 내기도 하므로, 다시 검사해(㉡) 남은 Error가 있으면 ㉣부터 되풀이합니다.

3. 사진 동아리 준비물 목록입니다. 검사기가 아래 Error를 냈습니다. 몇 번 줄을 어떻게 고쳐야 할까요? 고친 줄을 쓰세요.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8" />
  <title>사진 동아리</title>
</head>
<body>
  <ul>
    <li>카메라</li>
    삼각대
  </ul>
</body>
</html>

결과 화면탭: 사진 동아리

검사기Error 1개

Error9~11줄Text not allowed in element “ul” in this context.

힌트

메시지는 ul 바로 안에 '무엇'이 있다고 말하나요? 9~11번 줄 가운데 태그 밖에 놓인 글을 찾습니다.

정답

10번 줄을 <li>삼각대</li>로 고칩니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8" />
  <title>사진 동아리</title>
</head>
<body>
  <ul>
    <li>카메라</li>
    <li>삼각대</li>
  </ul>
</body>
</html>

결과 화면탭: 사진 동아리

메시지는 ul 바로 안에 글이 있다는 뜻입니다. 검사기가 가리킨 9~11번 줄이 그 글이 걸친 곳입니다 — 9번 줄 </li> 바로 뒤에서 시작해 줄바꿈과 '삼각대'를 지나 11번 줄 </ul> 앞에서 끝납니다(브라우저 규칙 2 — 줄바꿈도 글).
흔한 오답은 범위의 첫 줄인 9번 줄 <li>카메라</li>를 고치려는 것입니다. 9번 줄의 태그는 맞습니다 — 범위 안에서 태그 밖에 놓인 글을 찾습니다.
고친 뒤 다시 검사하면 Error가 없습니다(4번 줄 Info 하나만 남음).

컴퓨터에서 해 보기(선택) — 점수에 들지 않습니다. 폰으로만 보고 있다면 건너뛰세요. 앞 레슨의 해 보기에서 일부러 틀리게 둔 곳(닫는 태그 · 제목 단계)이 hello.html에 남아 있으면, 먼저 검사기에서 file upload로 검사해 찾아 고칩니다. 맨 위 Error부터 하나씩 고치고 다시 검사합니다. Error가 없어지면 hello.html의 body에 그림 한 줄 <img src="a.svg" alt="김치" />⁠를 넣고 저장한 뒤, 다시 검사해 Error가 없는지 봅니다. 그다음 alt="김치"를 지우고 저장해 다시 검사합니다. 어떤 Error가 몇 번 줄에 나오는지, 결과 페이지 아래 띠의 글이 어떻게 바뀌는지 봅니다.

읽음으로 표시

끝까지 내려오면 저절로 표시됩니다. 이 기기에만 저장합니다.

HTML·CSS 목차로