원문 캡처 · blog.master.dev
원문 캡처 · blog.master.dev

<div>와 <span>은 의미 없는 범용 컨테이너로 유용하지만, 콘텐츠의 역할에 맞는 HTML 요소를 쓰면 구조와 접근성을 더 잘 표현할 수 있다. 이 글은 결과 알림, 항목 묶음, 사용자 조작부, 처리용 값, 설명이 필요한 시각 자료에 쓸 수 있는 다섯 요소를 소개한다.

<output>은 계산 결과뿐 아니라 동적으로 바뀌는 메시지에도 쓸 수 있다. 기본적으로 ARIA 라이브 영역(ARIA live region이므로, 화면 낭독기가 내부 콘텐츠의 변경을 자동으로 알린다. 기본 알림 방식은 polite다. 계산기·변환기 결과, 입력 오류, 실시간 점수, 사용자 동작 확인 메시지, 카운트다운 등이 활용 사례다.

html
<div id="slider">   <label for="slider-control">Pick a recharge amount</label>   <input type="range" id="slider-control" min="10" max="50" value="10" step="10">   <output>Minimum recharge &euro;10</output> </div>
javascript
const OUTPUT = document.querySelector('output'); document.getElementById('slider-control').addEventListener('input', (e) => {   OUTPUT.innerHTML = `The recharge amount is &euro;${e.target.value}`; });

<ul>은 전통적인 목록뿐 아니라 비슷한 항목의 묶음에도 쓸 수 있다. 사진 갤러리, 뉴스 모음, 공지 게시판, 캐러셀, 티커, 타임라인, 메뉴와 제품 그리드처럼 항목을 모아 보여주는 UI에 적합하다. 글은 이 요소가 구조를 제공하고 항목을 순서에 따라 탐색하고 읽을 수 있게 한다고 설명한다.

html
<ul>   <li> <img src="image-1.jpg" alt="snoopy roasting a marshmallow"> </li>   <li> <img src="image-2.jpg" alt="snoopy in a sleeping bag"> </li>   <li> <img src="image-3.jpg" alt="snoopy in a raft"> </li>   <li> <img src="image-4.jpg" alt="snoopy near a campfire"> </li> </ul>
css
ul {   margin: 0;   padding: 0;   columns: 2;   list-style: none; }

<fieldset>은 <form> 안의 입력 요소를 묶는 데만 한정되지 않는다. <legend>로 묶인 컨트롤을 설명할 수 있고, 폼 제출 여부와 관계없이 사용자 조작 요소를 그룹화하는 데 쓸 수 있다. 필요하면 컨테이너에 disabled 속성을 적용해 안의 컨트롤을 모두 비활성화할 수도 있다. 설정, 탭 같은 인터랙티브 UI, 아코디언, 동작 영역 등이 활용 예다.

html
<fieldset>   <legend>Access the Marauder's Map</legend>   <p id="spellMsg">I solemnly swear that I'm up to no good</p>   <button id="openMapBtn" aria-describedby="spellMsg">Show map</button> </fieldset>
css
fieldset {   width: 350px;   border: double 2px #2bc25e; }

<data>는 사람이 읽을 텍스트와 프로그램이 처리할 값을 함께 둘 수 있다. 예를 들어 상품명은 화면에 표시하고 바코드나 상품 코드는 value에 넣을 수 있다. 주식 가격처럼 화면의 텍스트가 바뀌더라도 식별자를 유지하거나, 계산할 숫자 값을 연결하는 데도 쓸 수 있다.

html
<p> The <data value="Pigment Liner 308">Staedtler pen</data> is the ultimate tool for precise, long-lasting lines. This fineliner is perfect for writing, sketching, and technical drawing. </p>
javascript
document.querySelector('data').addEventListener('pointerenter',   e=>document.querySelector('output').textContent = `Get the ${e.target.value}!`,    { once: true } );

<figure>는 사진과 일러스트뿐 아니라 표·차트·그래프 같은 시각 자료를 담을 수 있다. 설명이 필요한 콘텐츠에는 <figcaption>을 함께 사용해 캡션을 의미 있게 묶을 수 있다. 글은 이런 마크업이 접근성에 도움이 되며 검색엔진 최적화와 신디케이션에도 유용하다고 설명한다. 다이어그램, 인터랙티브 콘텐츠, 슬라이드쇼, 설명이 붙은 도식 지침 등도 활용 사례로 든다.

html
<figure>   <iframe src="/video-url" title="video title"></iframe>    <figcaption>     <strong>Chalk of Champions</strong>     <p>Great Big Story tells the story of ...</p>     <ul>       <li><span>Director:</span> Jackie Omanoff</li>            </ul>   </figcaption> </figure>

HTML 요소를 고를 때는 단순히 콘텐츠를 감쌀 태그를 찾기보다, 내용의 역할과 필요한 접근성 정보를 표현하는 요소가 있는지 살펴보라는 것이 글의 요지다.