시멘틱 마크업(Semantic Markup)란?
시멘틱 마크업이란 HTML 요소가 의미(의도)를 가지도록 구성하는 것을 의미한다. 즉, 단순히 디자인이나 레이아웃을 위한 마크업이 아니라, 콘텐츠의 의미를 명확하게 전달할 수 있도록 HTML 태그를 사용하는 것을 말한다.
시멘틱 마크업 요소
<header> : 머리말 (로고, 사이트 소개, 내비게이션 포함 가능)
<nav> : 내비게이션 (메뉴)
<main> : 문서의 주요 콘텐츠
<section> : 주제별 콘텐츠 구분
<article> : 독립적인 콘텐츠 (블로그 글, 뉴스 기사 등)
<aside> : 부가 정보 (사이드바, 광고 등)
<footer> : 바닥글 (저작권, 연락처 등)
해당 내용을 HTML로 구현해봤다.
<h1>카페 W를 가까이에서 경험해보세요.</h1>
<h2>고객님과 가장 가까이 있는 매장을 찾아보세요!</h2>
<p>차별화된 커피 경험을 누릴 수 있는 <strong>리저브 매장</strong></p>
<p>
다양한 방법으로 편리하게 즐길 수 있는 드라이브 <strong>스루 매장</strong>
</p>
<p>
함께해서 더 따뜻할수 있는 지역사회 소통 공간 <strong>커뮤니티 매장</strong>
</p>
간단한 내용이지만 시멘틱한 관점에서 보면 부족해 보인다.
우선 콘텐츠 내용을 살펴 보자 첫번째 문장과 두번째 문장이 한 문단으로 묶여있고 나머지문단으로 나눠져있다.
첫문장은 제목으로 적절한가? 그보다는 제목을 뒷받침하는 느낌이다.
<section>
<h2>카페 W를 가까이에서 경험해보세요.</h2>
<h3>고객님과 가장 가까이 있는 매장을 찾아보세요!</h3>
</section>
<section>
<p>차별화된 커피 경험을 누릴 수 있는 <strong>리저브 매장</strong></p>
<p>다양한 방법으로 편리하게 즐길 수 있는 드라이브 <strong>스루 매장</strong></p>
<p>함께해서 더 따뜻할수 있는 지역사회 소통 공간 <strong>커뮤니티 매장</strong></p>
</section>
일단 먼저 생각나는대로 시멘틱하게 변경해봤다. AI에게 평가를 요청했는데 시멘틱 하지만 몇가지 개선할 점이 있다고 한다.
첫번쨰 섹션에 <header>를 통해 구체적인 의미를 부여 할 수 있다고 한다. 그리고 두번쨰 섹션의 각 문장에 <article>로 구체성을 줄 수 있다고 하는데 두번째 섹션은 첫번째 문단을 뒷받침하는 내용으로 생각되기 때문에 쓸 필요는 없어 보인다.
<main>
<header>
<h2>카페 W를 가까이에서 경험해보세요.</h2>
<h3>고객님과 가장 가까이 있는 매장을 찾아보세요!</h3>
</header>
<section>
<p>차별화된 커피 경험을 누릴 수 있는 <strong>리저브 매장</strong></p>
<p>다양한 방법으로 편리하게 즐길 수 있는 드라이브 <strong>스루 매장</strong></p>
<p>함께해서 더 따뜻할수 있는 지역사회 소통 공간 <strong>커뮤니티 매장</strong></p>
</section>
</main>
다음은 첫번째 문단을 <header>로 교체하고 <main>으로 전체를 감싸 해당 컨텐츠가 주요 컨텐츠임을 강조했다.
AI 평가에서도 괜찮은 구조라고 했다.
<main aria-label="카페 W 소개">
<header>
<h2>카페 W를 가까이에서 경험해보세요.</h2>
<h3>고객님과 가장 가까이 있는 매장을 찾아보세요!</h3>
</header>
<section>
<p>차별화된 커피 경험을 누릴 수 있는 <strong>리저브 매장</strong></p>
<p>다양한 방법으로 편리하게 즐길 수 있는 드라이브 <strong>스루 매장</strong></p>
<p>함께해서 더 따뜻할수 있는 지역사회 소통 공간 <strong>커뮤니티 매장</strong></p>
</section>
</main>
최종적으로 이렇게 수정해봤다. <main>의 속성에 aria-label을 추가해서 웹접근성을 높였다.
aria-label은 HTML 모든 요소에 삽입 가능한 속성이다. 기능은 화면에 현재 요소를 설명할 텍스트가 없을때 그것을 대체하는 역할을 한다.
해당 컨텐츠에는 h1요소가 없기 때문에 웹접근성을 필요로 하는 사람에게는 해당 컨텐츠가 어떤 역할을 하는지 모르기 때문에 그것을 대체하기 위해 넣어봤다.
웹개발을 공부하면서 이전에는 구현하기 급급해서 시멘틱하게 HTML을 만드는것에 대해 생각해 본적이 없었다.
이번에 웹표준과 웹접근성에 대해 생각하면서 HTML을 만들어보려하니 웹페이지에서 보여질 요소들과 각 구역들의 상관관계를 한번 더 고민 할 수 있었다.