<html>
<head>
<meta charset="utf-8">
</head>
<body>
</body>
</html>HTML을 http://validator.w3.org 에 있는 입력 박스에 붙여 넣고 밑으로 내려서 오류를 확인해 보세요.
첫 번째 오류는 "no document type declaration; implying "<!DOCTYPE HTML SYSTEM>"입니다. 모든 웹 페이지는 doctype으로 시작함으로써 브라우저는 페이지가 이용하는 HTML의 버전이 무엇인지를 알 수 있는데 이 웹 페이지는 doctype을 누락했습니다. 그러므로 다음은 해당 오류를 제거합니다.
<!DOCTYPE html>
두 번째와 세 번째 오류는 첫 번째 오류와 관련되 있어서 추가된 doctype을 재제출하면 사라질 것입니다 마지막 오류는 "end tag for "HEAD" which is not finished"입니다. 그것이 <title> 태그가 필요한 이유입니다. 그러나 이 페이지에는 아무것도 없습니다. 이 줄을 추가함으로써 해당 오류를 제거합니다.
<title>A valid page</title>
위의 두 줄을 추가하면 이 웹 페이지는 유효한 HTML입니다.
<img>태그는 어떤 속성을 추가해야 할까요? http://validator.w3.org 에 HTML을 붙여넣어 확인해 보세요.<!DOCTYPE html>
<html>
<head>
<title>A scary picture</title>
<meta charset="utf-8">
</head>
<body>
<img src="https://www.kasandbox.org/programming-images/creatures/OhNoes.png">
</body>
</html>HTML을 http://validator.w3.org 에 있는 입력 박스에 붙여 넣고 밑으로 내려서 오류를 확인해 보세요.
유일한 오류는 다음과 같습니다. "An img element must have an alt attribute, except under certain conditions." alt 속성이 있어야 시각 장애인이 웹 사이트를 탐색할 때 스크린 리더가 이미지를 설명할 수 있고 스크린 리더는 해당 이미지를 정확하게 설명해야 합니다.
그러므로 이 속성은 이것을 유효한 HTML로 만듭니다.
alt="Oh noes guy"
<!DOCTYPE html>
<html>
<head>
<title>☹ ☹ ☹ ☹ ☹ ☹</title>
<meta charset="utf-8">
<style>
#heading {
color: blau;
}
</style>
</head>
<body>
<h1 id="heading">Oh Noes!</h1>
<h2 id="heading">...what's wrong with this page?</h2>
<h3>Is anything wrong?</h3>
</body>
</html>HTML을 http://validator.w3.org 에 있는 입력 박스에 붙여 넣고 밑으로 내려서 오류를 확인해 보세요.
유일한 오류는 다음과 같습니다. "Line 14, Column 25: Duplicate ID heading." 그 이유는 "heading" id를 갖는 두 개의 태그가 있기 때문이며 하나의 유일한 태그만이 웹페이지에 id를 가질 수 있습니다. 에러는 두 번째로 id를 보는 이 줄에서 일어납니다:
<h2 id="heading">...이 페이지에서 무엇이 잘못되었나요?</h2>
<h2 id="heading">...what's wrong with this page?</h2>
이것을 고치기 위해 다른 id를 선택하거나 대신 class를 사용합니다. 검사기에 따르면 이 페이지에 관해 유효하지 않은 유일한 것은 이것뿐입니다.
