-
시멘틱 HTML, 제대로 써보기 🩶 & ARIA (Accessible Rich Internet Applications)기타 2025. 4. 28. 00:06
웹 페이지를 만들 때, <div> 태그만 써도 보이긴 잘 보이긴 한다.
하지만 그게 끝이라면, 우리가 굳이 HTML5를 배워야 할 이유도 없다.
시멘틱 HTML은 의미 있는 마크업을 통해 사람과 기계 모두에게 친절한 웹을 만드는 방법이다.이것을 어째서 지켜야 할까??
간단히 말해 접근성, SEO, 그리고 유지보수성 때문이다.
- 시각 장애인을 위한 스크린 리더가 내용을 올바르게 해석할 수 있다 (헤더, 내비게이션, 본문과 같은 페이지 구조를 잘 알 수 있다)
- 구글이나 네이버 같은 검색 엔진이 구조를 이해하고 콘텐츠를 더 잘 인덱싱할 수 있다
- 협업 중인 개발자(혹은 미래의 나)가 코드를 보고 빠르게 파악할 수 있기 때문이다 (코드 가독성 향)
👉 <article>, <section>, <header>, <footer> 등을 잘 활용하는 것은 SEO 최적화의 기본이라고 한다 🌠
그럼 실제로 시멘틱 태그만을 엄격하게 사용한 구조를 예제 코드로 확인해보자 😀
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>시멘틱 HTML 태그 예제 | 웹 접근성 가이드</title> <!-- SEO --> <meta name="description" content="시멘틱 HTML 태그를 엄격하게 사용한 예제와 해설. 웹 접근성과 SEO를 고려한 마크업 가이드입니다."> <meta name="author" content="홍길동"> <meta name="keywords" content="시멘틱 HTML, 웹 접근성, SEO, Open Graph, HTML5, 마크업 예제"> <!-- Open Graph --> <meta property="og:type" content="article"> <meta property="og:title" content="시멘틱 HTML 태그 예제 | 웹 접근성 가이드"> <meta property="og:description" content="시멘틱 태그를 활용한 고품질 마크업 예제와 설명. 웹 표준을 준수한 접근성 마크업 가이드입니다."> <meta property="og:url" content="https://example.com/posts/semantic-html-guide"> <meta property="og:image" content="https://example.com/assets/semantic-cover.png"> <meta property="og:site_name" content="홍길동의 웹 기술 블로그"> <meta property="article:author" content="https://example.com/about"> <!-- Twitter --> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="시멘틱 HTML 태그 예제 | 웹 접근성 가이드"> <meta name="twitter:description" content="웹 접근성과 SEO를 고려한 시멘틱 HTML 마크업 실전 예제!"> <meta name="twitter:image" content="https://example.com/assets/semantic-cover.png"> </head> <body> <header> <hgroup> <h1>웹 접근성과 시멘틱 마크업</h1> <h2>HTML 태그, 이제는 의미로 말하세요</h2> </hgroup> <p><abbr title="HyperText Markup Language">HTML</abbr> 태그를 제대로 쓰는 이유를 알려드립니다.</p> <nav> <ul> <li><a href="/">홈</a></li> <li><a href="/blog">블로그</a></li> <li><a href="/contact">문의</a></li> </ul> </nav> </header> <main> <article> <header> <hgroup> <h2>시멘틱 HTML 태그의 힘</h2> <h3>단순히 구조를 넘어서 의미까지 담다</h3> </hgroup> <p>작성일: <time datetime="2025-04-19">2025년 4월 19일</time></p> </header> <section> <h3>예제 코드</h3> <pre><code><article><h2>시멘틱 HTML</h2></article></code></pre> <p>위 코드는 <mark>의미 있는 콘텐츠 덩어리</mark>를 나타낼 때 사용하는 <code><article></code> 태그 예시입니다.</p> </section> <section> <h3>인용과 참고자료</h3> <blockquote cite="https://developer.mozilla.org/ko/docs/Web/HTML/Element"> 시멘틱 태그는 HTML 문서의 의미를 명확하게 만들어주는 요소입니다. </blockquote> <p>출처: <cite><a href="https://developer.mozilla.org/ko/docs/Web/HTML/Element">MDN Web Docs</a></cite></p> </section> <section> <h3>시각적 콘텐츠</h3> <figure> <img src="/images/semantic-example.png" alt="시멘틱 구조 다이어그램" /> <figcaption>시멘틱 HTML 구조 다이어그램</figcaption> </figure> </section> <section> <h3>자주 묻는 질문</h3> <details> <summary>시멘틱 태그를 쓰면 퍼포먼스도 좋아지나요?</summary> <p>직접적인 렌더링 퍼포먼스 향상은 없지만, SEO나 접근성 측면에서 간접적인 영향은 큽니다.</p> </details> </section> <footer> <p>태그 정리: <mark><article></mark>, <mark><section></mark>, <mark><hgroup></mark>, <mark><time></mark>, <mark><figure></mark>, <mark><blockquote></mark>, <mark><abbr></mark>, <mark><details></mark> 등</p> <p>작성자: <strong>홍길동</strong>, <a href="mailto:gildong@example.com">gildong@example.com</a></p> </footer> </article> </main> <aside> <h2>읽어볼만한 글</h2> <ul> <li><a href="/posts/html5-guide">HTML5 태그 완전정복</a></li> <li><a href="/posts/aria-guide">스크린 리더를 위한 ARIA 속성</a></li> </ul> </aside> <footer> <small>© 2025 홍길동의 웹 기술 블로그. All rights reserved.</small> </footer> </body> </html>주요 시멘틱 태그 요약
- <header>
문서나 섹션의 머리말로, 제목이나 소개, 내비게이션 등을 포함한다 - <nav>
주요 탐색 링크들을 모아둔 내비게이션 영역이다 - <main>
페이지의 핵심 콘텐츠를 담는 영역으로, 문서에서 유일해야 한다 - <footer>
작성자 정보, 저작권, 관련 링크 등 문서나 섹션의 마무리 정보를 담는다 - <article>
독립적으로 배포 가능한 콘텐츠 덩어리로, 블로그 글이나 뉴스 기사 등에 적합하다 - <section>
주제별로 콘텐츠를 나눌 때 사용하는 구획 태그로, 일반적으로 제목이 같이 온다 - <hgroup>
하나의 제목과 그 부제목들을 논리적으로 묶어주는 태그이다 - <time>
날짜나 시간을 기계가 읽을 수 있는 방식으로 표기할 때 사용한다 - <figure>
이미지, 도표, 코드 등과 그에 대한 설명을 묶는 시각 콘텐츠 전용 컨테이너이다 - <figcaption>
<figure> 안의 콘텐츠를 설명하는 캡션 역할을 한다 - <blockquote>
다른 출처에서 인용한 긴 문장을 담는 인용 태그이다 - <cite>
인용문의 출처나 참고자료의 제목을 명시할 때 사용한다 - <abbr>
줄임말(abbreviation)에 대한 전체 의미를 제공해준다 - <details>
접거나 펼칠 수 있는 콘텐츠를 만들 수 있으며, FAQ 등에 유용하다 - <summary>
<details> 태그의 요약 또는 제목 부분을 담당한다 - <mark>
텍스트 중 강조하거나 하이라이트할 부분을 시각적으로 표시할 때 사용한다
+ hgroup은 HTML5에서 공식적으로 다시 되살아난 태그지만,
현재 일부 스크린 리더나 브라우저에선 인식이 완벽하진 않아서 의미상으로만 사용하는 게 좋다.+ SEO와 공유를 위한 OG 태그도 확인할 수 있도록 추가했다.
- Open Graph 메타 태그를 사용하면, 페이지를 SNS에 공유할 때 썸네일 이미지와 설명 문구를 원하는 대로 제어할 수 있다
👉 검색 엔진 최적화(SEO)와 소셜 미디어 최적화(SMO)를 동시에 잡을 수 있다
😀 실제 작성한 코드
https://github.com/citron03/practice-next-15/commit/f791874268e5c1a0a7a65f0a94fa8415623fcb1a
feat: semantic tag example test · citron03/practice-next-15@f791874
+ 태그 정리: <article> , <section> , <hgroup> , <time> , <figure> , <blockquote> , <abbr> , <details> 등
github.com
+ 각 태그에 대한 자세한 내용은 mdn 문서를 참조할 수 있다.
https://developer.mozilla.org/ko/docs/Web/HTML/Reference/Elements/hgroup
<hgroup> - HTML: Hypertext Markup Language | MDN
HTML <hgroup> 요소는 문서 구획의 다단계 제목을 나타냅니다. 다수의 <h1>-<h6> 요소를 묶을 때 사용합니다.
developer.mozilla.org
🩶 ARIA (Accessible Rich Internet Applications)
ARIA는 접근성을 보완하는 역할을 하는 속성 모음이다
role, aria-label, aria-hidden, aria-expanded 같은 속성들이 이에 해당된다
Aria는 시맨틱 태그와 관계가 있다 🍕
- 시멘틱 태그는 기본적으로 ARIA 역할을 내장하고 있다
예를 들면 다음과 같다- <nav> 👉 role="navigation"
- <main> 👉 role="main"
- <button> 👉 role="button"
👉 즉, 시멘틱 태그만 잘 써도 굳이 ARIA를 안 써도 되는 경우가 많다
그렇다면, 언제 ARIA를 써야 할까?
시멘틱 태그가 부족하거나 대체할 수 없는 경우에 ARIA를 사용한다.
- <div role="navigation">처럼 div밖에 못 쓸 상황 (div는 아무런 의미가 없는 태그...)
- 커스텀 UI 컴포넌트(ex. 드롭다운, 토글, 모달)를 만들 때 의미가 불명확할 때
- 스크린 리더 사용자에게 숨겨진 정보를 제공하고 싶을 때 (예: aria-live, aria-describedby 등)
결론은, 시맨틱 태그를 사용할 수 있으면 사용하고, 그렇지 못한 상황에서는 aria 태그를 사용해준다.
시맨틱 태그나 Aria를 잘 쓰는 것은 웹 표준을 준수하는데도 중요하므로, 잘 챙기도록 하자.
🤣 참고자료
https://www.w3.org/WAI/ARIA/apg/
ARIA Authoring Practices Guide
Accessibility resources free online from the international standards organization: W3C Web Accessibility Initiative (WAI).
www.w3.org
https://www.wa.or.kr/board/view.asp?sn=161&page=1&search=&SearchString=&BoardID=0004&cate=
관련자료 > 자료실 : 한국웹접근성인증평가원 (읽기) > 한국형 웹 콘텐츠 접근성 지침 2.1
관련자료 > 자료실 > 관련자료 관련자료 게시판 상세보기 관련자료 게시판 상세보기로 제목, 작성자, 작성일, 조회수, 첨부파일, 내용으로 구성되어 있습니다. 한국형 웹 콘텐츠 접근성 지침 2.1
www.wa.or.kr
https://developer.mozilla.org/ko/docs/Web/Accessibility/ARIA
ARIA - 접근성 | MDN
접근가능한 리치 인터넷 어플리케이션(Accessible Rich Internet Applications, ARIA)은 장애를 가진 사용자가 웹 콘텐츠와 웹 어플리케이션(특히 JavaScript를 사용하여 개발한 경우)에 더 쉽게 접근할 수 있는
developer.mozilla.org
http://www.kwacc.or.kr/WAI/wcag21/
WCAG 2.1 Korean Translation Version
접근성 지침 실무그룹(Accessibility Guidelines Working Group: AG WG) 참여에 대한 추가 정보는 실무그룹 홈 페이지에서 찾을 수 있다. A.2 다른 이전에 적극적인 WCAG WG 참가자와 WCAG 2.0, WCAG 2.1 또는 지원 자
www.kwacc.or.kr
Open Graph protocol
The Open Graph protocol enables any web page to become a rich object in a social graph.
ogp.me
'기타' 카테고리의 다른 글
Tistory 블로그 구글 서치 엔진 연결하기 (robots.txt, sitemap, SEO) 😘 (7) 2025.06.28 HTML XPath 알아보기 - 기본 사용법, 주의사항, 활용 🎶 (0) 2025.05.09 프론트엔드 개발과 Mocking (axios-mock-adapter, Mock Service Worker) (0) 2024.05.25 웹 성능 최적화를 위한 Critical CSS with 예제 (0) 2024.05.01 Etag를 활용한 브라우저 리소스 캐싱 (0) 2024.04.15