들어가기 전에

마크업 언어의 요소는 열고 닫음, 중첩 관계 및 속성 선언에 오류가 없어야 합니다.

오류가 없도록 마크업 문서를 구성하면 웹 브라우저나 보조 기술이 작동을 멈추지 않고 콘텐츠를 명확히 전달할 수 있으며,

콘텐츠의 일부 기능이 누락되는 것을 방지할 수 있습니다.

마크업 오류에 대한 사례들을 살펴보도록 하겠습니다.

핵심키워드

• 태그의 열고 닫음
• 태그의 중첩
• 중복 속성 제공
• id 중복 제공

학습하기 

요소의 열고 닫음

오류 사례)

<ol>
    <li>첫 번째 목록</li>
    <li>두 번째 목록</li>
    <li>세 번째 목록</li>

<ul>
    <li>첫 번째 목록</li>
    <li>두 번째 목록</li>
    <li>세 번째 목록</li>
</ul>

요소의 열고 닫음이 일치해야 합니다.

현재 예시에서는 ol 태그가 열려만 있고 닫혀 있지는 않아 오류입니다.

마크업 언어로 작성된 콘텐츠는 표준에서 특별히 정한 경우를 제외하고는 시작 요소와 끝나는 요소가 정의되어야 합니다.

img 요소와 같이 단일 태그가 아닌 열고 닫힘이 존재하는 태그의 경우 열고 닫음이 일치해야 합니다.

준수 사례)

<ol>
    <li>첫 번째 목록</li>
    <li>두 번째 목록</li>
    <li>세 번째 목록</li>
</ol>
<ul>
    <li>첫 번째 목록</li>
    <li>두 번째 목록</li>
    <li>세 번째 목록</li>
</ul>

요소의 중첩

오류 사례)

<a href="…"><span>바로가기</a></span>

요소가 중첩된 경우 오류인데요,

이와 같이 a 태그가 열리고 span 태그가 열렸으면 span 태그를 먼저 닫고 a 태그를 닫아야 합니다.

즉, 시작 요소와 끝나는 요소의 나열 순서는 포함 관계가 어긋나지 않아야 합니다.

준수 사례)

<a href="…"><span>바로가기</span></a>

중복된 속성 사용

오류 사례)

<img src="apple.jpg" alt="" class="img_box" class="img_01">

이와 같이 img 요소에 class 속성이 중복된 경우 오류이며, 하나의 요소 안에서 속성을 중복하여 선언하지 않아야 합니다.

준수 사례)

<img src="apple.jpg" alt="" class="img_box img_01" >

id 속성 값 중복

오류 사례)

<div id="main_menu" class="lnb">
…
</div>

<ul id="main_menu" class="menu">
    <li>로그인</li>
    <li>회원가입</li>
</ul>

하나의 마크업 문서에 같은 id 값을 중복하여 선언하면 오류입니다.

페이지 내 id 값이 중복 선언되지 않도록 제공해야 합니다.

레이블과 매칭된 서식의 id가 중복된 경우는 21번 레이블 제공에도 영향을 미칩니다.

준수 사례)

<div id="main_menu_left" class="lnb">
…
</div>

<ul id="main_menu" class="menu">
    <li>로그인</li>
    <li>회원가입</li>
</ul>