마크업 언어의 요소는 열고 닫음, 중첩 관계 및 속성 선언에 오류가 없어야 한다. 오류가 없도록 마크업 문서를 구성하면 웹 브라우저나 보조 기술이 작동을 멈추지 않고 콘텐츠를 명확히 전달할 수 있으며, 콘텐츠의 일부 기능이 누락되는 것을 방지할 수 있다. 마크업 오류에 대한 사례들을 살펴보도록 하겠다.
요소의 열고 닫음
(오류 예시)
<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가 중복된 경우는 앞서 언급한 레이블 제공에도 영향을 미치게 된다.
(준수 예시)
<div id="main_menu_left" class="lnb">
…
</div>
<ul id="main_menu" class="menu">
<li>로그인</li>
<li>회원가입</li>
</ul>
[ 출처 ]
BoostCourse 웹 UI 개발 : https://www.boostcourse.org/web344/lecture/35128