목차
HTML을 처음 배울 때 우리는 <div>와 <span>을 자주 만나게 돼요. 마치 모든 레이아웃과 콘텐츠를 감쌀 수 있는 만능 태그처럼 보이기도 하죠. 하지만 이 태그들이 정말 "만능"일까요?
실제로 <div>, <span> 요소는 아무 의미도 갖지 않는 태그예요. 오직 스타일이나 스크립트를 적용하기 위한 컨테이너로 사용될 뿐, 콘텐츠의 의미를 전달하지 않아요. 만약 HTML 문서 안에 <div>, <span>이 너무 많이 사용되고 있는 거 같다면, 보다 적절한 의미를 담고 있는 태그를 사용하고 있지 않는 것일 수 있어요.
이번 글에서는 모든 HTML 요소들을 하나하나 설명하는 글은 아니에요. 대표적인 의미를 담은 HTML 요소들을 소개하고, 이 요소들이 실제 서비스에서 어떻게 활용되는지 예시 이미지와 함께 설명할게요.
의미를 담은 HTML 요소란 무엇일까?
의미를 담은 HTML 요소(Semantic HTML)은 단순히 페이지를 "보이게" 만드는 것이 아니라, 콘텐츠의 구조와 의미를 태그로 표현한 요소들을 말해요. 예를 들어 제목은 <h1>, 문단은 <p>, 목록은 <ul>과 <li>, 내비게이션은 <nav>로 작성하는 식이에요.
이와 같이 HTML 요소를 단순히 꾸미거나 레이아웃을 잡는 용도가 아닌, 콘텐츠의 역할과 의미를 표현하기 위해 의미를 담은 HTML 요소를 사용하는 것을 시멘틱 마크업(Semantic Markup)이라고 해요.
의미를 담은 HTML 요소를 사용하는 것이 왜 중요할까?
1. 접근성(Accessibility) 향상
스크린 리더 같은 보조 기술들은 HTML 요소의 의미(semantic)를 기반으로 페이지를 이해해요.
예를 들어
<nav>: “여긴 내비게이션 영역이구나!”<main>: “여기가 페이지의 핵심 콘텐츠야.”<h1>~<h6>: “여긴 제목이고, 구조가 이렇게 돼 있어.”
의미 있는 태그를 쓰면 시각 장애가 있는 사용자도 페이지를 더 쉽게 탐색할 수 있어요.
2. 검색 엔진 최적화(SEO)
구글, 네이버 같은 검색 엔진도 HTML의 구조와 의미를 이해하려고 해요.
제대로 된 의미론적 마크업을 사용하면 콘텐츠의 중요도와 위치를 더 잘 전달할 수 있고, 검색 결과에서 노출 우선순위가 높아질 수 있어요.
예를 들어, <article>이나 <section> 안에 <h1> 태그로 제목이 있고 <p>로 본문이 있으면, 검색 엔진이 그걸 하나의 독립 콘텐츠로 인식하게 돼요.
3. 코드 가독성 향상
의미가 있는 HTML 사용은 코드를 읽는 사람에게 더 읽기 쉽고 의미 있는 코드가 돼요.
<!-- 의미 없는 코드 -->
<div>
<div>회사 이름</div>
<div>회사 소개</div>
<div>회사 주소</div>
</div>
<!-- 의미 있는 코드 -->
<section>
<h1>회사 이름</h2>
<p>회사 소개<p>
<address>회사 주소</address>
</section>후자로 선언하는 방식이 구조적으로 명확하고 읽기 쉬워서 다른 개발자나 심지어 미래의 나 자신에게도 읽히기 쉽고 내용 파악이 빠른 코드가 돼요.
div와 span은 언제 쓸까요?
앞서 내용을 보다 보면 우리가 가장 많이 사용하는 <div>와 <span>은 언제, 어떻게 사용하는 것인지 궁금할 수 있어요. 서두에서 언급했듯이 이 두 요소는 의미 없는 레이아웃용 요소예요. 따라서 다른 의미 있는 HTML 요소를 사용할 수 없는 상황에서 마지막으로 선택할 수 있는 요소예요.
div, span을 대체할 만한 요소들
h1, h2, h3, h4, h5, p, ul, ol, li, dl, dt, dd, blockquote, pre, address, article, nav, section, hgroup, header, footer, main, figure, figcaption, details, summary, dialog, datalist …
주요 시맨틱 HTML 요소
자주 사용되는 의미를 담은 HTML 요소들을 실제 서비스에서의 활용 예시와 함께 소개해 드릴게요.
(이번 예시들은 당근마켓, 토스, 쿠팡, 구글 등 시맨틱 마크업이 잘 되어 있는 실제 서비스들을 참고했어요.)
header
도입부, 제목, 제목 그룹, 목차, 검색 기능, 로고 등을 포함하는 요소로 사용되어요.
footer
저자 정보, 저작권 표시, 연락처, 관련 문서 링크 등을 포함하는 영역을 나타내는 요소예요.
section
제목이 있는 주제별 콘텐츠 그룹 영역 요소로 사용되어요.
h1 ~ h6 요소를 포함하는 것을 강력하게 권장해요.
article
섹션 요소 중에서도 독립적으로 배포할 수 있는 완결된 콘텐츠를 담는 요소예요. 뉴스 기사, 블로그 본문, 사용자 댓글 등이 대표적인 예시죠.
nav
현재 사이트나 페이지의 주요 링크를 담고 있는 요소예요.
사이트나 페이지의 주요 탐색 경로가 아닌 빵부스러기 링크나 풋터의 약관, 저작권 고지와 같은 링크들은 nav 요소로 적절하지 않아요.
aside
페이지의 주요 내용과 직접적인 관련성이 적어 별도로 구분이 필요한 섹션이에요. 광고, 관련 기사, 부가 콘텐츠 등을 담을 수 있어요.
h1 ~ h6 요소를 포함하는 것을 강력하게 권장해요.
main
문서의 핵심 주제나 애플리케이션의 핵심 기능과 직접 관련된 콘텐츠 영역을 의미해요.
다만 사용할 때 몇 가지 지켜야 할 규칙이 있어요.
- 페이지마다 반복되지 않는 내용을 포함해야 하며, 하나의 페이지 안에서는 하나의
<main>요소만 사용할 수 있어요. <main>요소는<article>,<aside>,<nav>,<section>,<header>,<footer>등과 같은 섹셔닝 요소의 자식 요소로는 사용할 수 없으며, 오직<body>나<div>요소 안에서만 사용할 수 있어요.
dialog
사용자와 상호 작용하는 대화상자를 의미해요. open 속성을 추가하면 대화상자가 활성화되어 사용자가 상호 작용할 수 있어요.
figure
문서의 주요 흐름에서 참조되는 독립적인 콘텐츠(이미지, 도표, 코드 등)와 그에 대한 설명(figcaption)을 담는 요소예요. figcaption 요소는 figure의 시작이나 끝부분에 선택적으로 추가할 수 있어요.
mark
독자의 주의를 끌기 위한 하이라이트 표시로 사용해요. 사용자의 현재 관심사나 행동에 따라 강조하거나, 검색 결과에서 입력한 키워드를 표시할 때 활용하는 요소예요.
address
가까운 조상 요소인 <article>이나 <body>의 연락처 정보를 나타내는 요소예요. 단순한 우편 주소가 아닌 연락처 정보를 의미하며, 주로 <footer> 요소 안에서 사용돼요.
p 요소의 자손이 될 수는 없어요.
마무리
이번 글에서 소개한 시맨틱 요소 외에도 정말 다양한 의미를 담고 있는 HTML 요소들이 있어요. 이번 기회에 다른 시맨틱 요소들에는 어떤 것들이 있는지 찾아보면 좋겠어요.
가끔은 마크업 작업을 중요하지 않고, 별거 아닌 개발 작업이라고 생각하는 분들도 있어요. 그런데 그것은 마치 "건물은 어차피 외벽이랑 인테리어가 중요하지, 뼈대는 아무거나 세워도 되잖아?" 라고 말하는 것과 같아요. 하지만 실제로 건물의 내부 구조가 엉망이면 아무리 겉이 예뻐도 위험한 건물이 되는 것처럼, HTML 마크업이 엉망이면 웹 사이트는 사용자도, 검색엔진도, 스크린리더도 제대로 활용할 수 없게 돼요.
결국 마크업은 단순한 태그가 아니라 웹을 구성하는 설계도이자 골조예요. 눈에 잘 띄지는 않지만, 그 위에 모든 디자인과 기능이 올라가요. 그래서 마크업을 잘 짠다는 건, 기초공사를 정밀하게 해내는 건축가처럼 안정적이고 오래 가는 웹의 기반을 만드는 일이에요. 그러니 앞으로는 <div>와 <span>을 무분별하게 사용하기보다는, 콘텐츠의 의미를 먼저 파악하고 적절한 HTML 요소를 선택하여 개발하여 보세요.