HTML 디버깅

HTML를 작성하면서 디버깅이 필요할까라는 의문이 들지만, html 코드에도 오류는 발생할 수 있으므로 html 오류를 찾고 수정하는 디버깅을 살펴본다. 사실 html은 디버깅이라기보다는 유효성 검사라고 표현하는게 맞는 듯 싶다. 더불어 이 부분은 W3C HTML 유효성 사이트를 활용해 HTML 에러 및 오류를 체크할 수 있다는 정도만 알아도 충분하다.

HTML 유효성 검사

CONTENTS

디버깅 Debugging

HTML은 프로그래밍 언어인 자바스크립트와 달리 태그업으로 분류하므로 디버깅을 한다는 것은 조금 지나친 표현이다. 일반적으로 프로그래밍 언어는 오류를 찾는데 어려운 부분이 많으므로, 이때 오류를 찾고 수정하는 것을 디버깅이라고 표현하는 게 정설이다.

일반적인 프로그래밍 언어에서 오류가 발생하는 이유는 크게 2가지로 분류한다.

하나는 문법 오류(Syntax error)로 대부분 코드 맞춤법이 틀렸을 때 발생하는데, 이때 원하는 프로그램이 실행하지 않으므로 비교적 오류를 찾고 수정하기 쉬운 디버깅에 속한다.

다른 하나는 논리 에러(Logic errors)로 코드 문법에는 틀린 게 없음으로 프로그램이 동작은 한다. 그런데 의도한 프로그램 동작이 아니라 의도하지 동작을 프로그램이 보여준다. 이때 프로그램이 동작하므로 오류 메시지가 나올 리 없다. 그렇다보니 문법 오류보다 디버깅이 어려울 수 밖에 없다.

프로그래밍 언어에서 문법 오류가 발생하면 프로그램이 실행하지 않는다. 하지만 html에서 문법 오류가 나더라도 페이지에 계속 표시되는 특징이 있다.

W3C가 권장하는 HTML 사용법

위에서 언급했듯이 HTML은 디버깅이라는 표현보다는 유효성 검사라는 표현이 맞다. 이는 CSS에도 동일하게 적용한다. HTML은 문법 오류가 발생해도 브라우저에 보여지는데는 상관이 없다. 문법 오류를 발생한 코드만 빼고 나머지 전부를 보여주기 때문이다. 이에 반해 프로그래밍 언어는 문법 오류가 발생한 지점에서 즉시 프로그램 전체가 동작하지 않는다. 이러한 이유로 제대로 브라우저에 HTML을 표현하고 있지만, 그 안에 오류를 포함하고 있을 가능성이 있다. 또한 오류까지는 아니더라고 W3C에서 권장하는 HTML 사용방법을 준수하지 않는 사례가 많다.

HTML 유효성 검사는 HTML 코드 자체의 오류도 검사하지만, 이 보다는 W3C 권장사항에 맞게 HTML를 작성했는지를 확인하는 용도로 사용한다고 봐도 무방하다. 실제로 웹디자인기능사 자격증 시험에서는 이 부분을 평가 요소로써 중요하게 다룬다.

HTML Validation 사이트

웹 표준을 담당하는 W3C에서는 자체적으로 유효성을 검사라는 사이트를 운영하고 있다. 이 HTML 유효성 사이트에 접속한 후에 유효성 검사를 할 url를 입력하거나 파일을 업로드하면 자동으로 유효성 검사를 진행한다. 때론 일부 의심 가는 코드를 직접 사이트에 입력해 유효성 검사를 진행할 수도 있다.

W3C Validation 사이트 바로가기

다음은 MDN에서 제공한 샘플 코드를 직접 코드를 입력해 유효성 검사를 진행한 사례이다.

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">

 <title>HTML debugging examples</title>


  </head>

  <body>
    <h1>HTML debugging examples</h1>

    <p>What causes errors in HTML?

    <ul>
      <li>Unclosed elements: If an element is <strong>not closed properly, then its effect can spread to areas you didn't intend

      <li>Badly nested elements: Nesting elements properly is also very important for code behaving correctly. <strong>strong <em>strong emphasised?</strong> what is this?</em>

      <li>Unclosed attributes: Another common source of HTML problems. Let's look at an example: <a href="https://www.mozilla.org/>link to Mozilla homepage</a>
    </ul>
  </body>
</html>