마크업 오류 방지

무엇을 요구하나요?

HTML을 문법에 맞게 작성해, 브라우저와 보조기기가 페이지 구조를 같은 방식으로 이해하게 해야 합니다. 주로 확인하는 오류는 네 가지입니다.

오류	예
요소를 열고 닫지 않음	<div>를 열고 </div>를 빠뜨림
요소의 중첩 오류	<b><i>글자</b></i>
중복 속성	<img alt="로고" alt="회사 로고">
중복 id	한 페이지에 id="name"이 두 개

브라우저는 잘못된 HTML을 알아서 고쳐서 보여주기 때문에 화면으로는 문제가 보이지 않습니다. 하지만 브라우저마다 고치는 방식이 다를 수 있고, 특히 중복 id는 레이블 연결, 건너뛰기 링크, aria 참조를 엉뚱한 요소에 연결합니다.

자주 틀리는 예

1. 중복 id

서식이나 카드 목록을 복사해서 만들 때 가장 많이 생깁니다.

<label for="phone">집 전화</label><input id="phone">
<label for="phone">휴대폰</label><input id="phone">

<label for="phone-home">집 전화</label><input id="phone-home">
<label for="phone-mobile">휴대폰</label><input id="phone-mobile">

2. 태그 중첩 오류

<b><i>중요</b></i>
<a href="/a"><div>카드</a></div>

<b><i>중요</i></b>
<a href="/a"><div>카드</div></a>

3. p 안에 div 같은 블록 요소

<p> 안에 <div>, <ul>, <table> 등이 오면 브라우저가 <p>를 그 자리에서 닫아 버리고, 뒤의 </p>는 짝 없는 닫는 태그가 됩니다.

<p>약관을 확인하세요 <div class="badge">필수</div></p>

<p>약관을 확인하세요 <span class="badge">필수</span></p>

4. 빈 요소처럼 닫은 일반 요소

XML·JSX 습관으로 <div/>, <span/>처럼 쓰면 HTML에서는 닫힌 것으로 처리되지 않아 뒤의 내용이 모두 그 안으로 들어갑니다.

<div class="icon"/>
<p>본문</p>

<div class="icon"></div>
<p>본문</p>

확인하는 방법

1. 확장 프로그램 페이지 검사결과에서 마크업 오류 검사를 누르면 읽을 수 있는 원본 HTML에서 위 오류를 줄 번호와 함께 찾아줍니다. 코드를 실행하지 않고 태그를 하나씩 읽으며 열고 닫기를 추적합니다.
2. 실제 페이지는 브라우저가 이미 고친 상태라 개발자 도구로는 오류가 보이지 않습니다. “페이지 소스 보기”의 원본 HTML을 복사해 검사하세요. 크롬 확장 프로그램의 “마크업 오류 검사”도 원본 HTML을 다시 받아 검사합니다.
3. 템플릿·컴포넌트로 만든 페이지는 렌더링된 결과 HTML을 검사해야 합니다. 같은 컴포넌트가 여러 번 쓰이며 id가 중복되는 경우가 많습니다.