시맨틱 태그란?
- 프로그래밍에서 시맨틱은 코드의 의미를 나타낸다.
- HTML의 시맨택 태그는 태그만 보고도 역할이나 위치를 알 수 있도록 만든 태그이다. 예를 들어, <h1>은 페이지에서 최상위 제목인 텍스트를 의미한다.
- HTML은 채워질 데이터를 나타내야 하고, 보이는 것은 CSS의 역할이다.
시맨틱 태그의 이점
- 검색 엔진 최적화(SEO): 검색 엔진이 웹 사이트 크롤링 시 시맨틱 마크업을 통해 정확한 구조를 분석해 페이지의 검색 랭킹에 영향을 줄 수 있다.
- 시각 장애가 있는 사용자가 스크린 리더로 페이지를 탐색할 때 시맨틱 마크업을 이용할 수 있다.
- HTML 문서의 가독성과 유지보수가 쉬워진다.
시맨틱 태그 종류
| 시맨틱 태그 | 설명 |
| <header> | 제목, 로고, 검색 폼, 작성자 이름 등이 요소를 포함하는 페이지 영역. |
| <nav> | 현재 페이지 내, 또는 다른 페이지로의 링크를 포함하는 영역. 메뉴, 목차, 색인 등. |
| <main> | 메인 콘텐츠 영역. 문서 내에서 반드시 한 번만 사용. |
| <section> | 문서 요약에 해당 구획이 논리적으로 나타나야하는 경우 사용. 단순 스타일링 목적으로 사용 X. |
| <article> | 다른 페이지에서 재사용 가능한 영역. |
| <aside> | 대체적으로 옆에 위치하는 보조 콘텐츠. |
| <footer> | 회사 정보, 저작권, 연락처 등을 포함하는 하단 바닥글. |
<header>
문서나 특정 섹션의 헤더를 정의할 때 사용한다.
- 일반적으로 <body> 상단에 위치해 웹 사이트의 제목이나 네비게이션이 존재하는 영역에 사용된다. 하지만, <article>이나 <section>에서 해당 영역에 대한 특정 헤더를 정의할 수도 있다.
- 제목(<h1>~<h6>)을 감싸기 위한 요소이지만, 필수는 아니다.
- 페이지 제목(h1), 레시피 제목, 기사 제목(h2, h3) 등을 포함
<nav>
다른 영역이나 페이지로 이동하는 메뉴 버튼이나 링크, 탭을 포함하는 영역이다.
- <nav> 요소는 주요 탐색 링크들을 위한 요소이고, 문서의 모든 링크가 <nav> 요소 안에 있을 필요는 없다. 사이트 하단에 위치한 링크는 <footer>로 충분하다.
- 내용을 이해하기 쉽도록 nav 요소 내부에는 <ul>을 사용하는 것이 좋다.
- 스크린 리더에서 콘텐츠의 초기 렌더링을 제외할지 결정할 때 <nav> 요소를 사용한다.
<section>과 <article>
<section>과 <article>은 이전에도 몇 번 본 적 있지만 헷갈리는 태그들이어서 좀 더 자료를 찾아보았다. <section>은 문서에서 관련 있는 내용들을 구역으로 나눌 때, <article>은 독립적으로 존재할 수 있는 블로그 포스트, 기사, 상품 카드의 경우 사용한다고 이해했다.
하지만 이 글을 작성하면서 <section>을 버리고 HTML5 <article> 써야 하는 이유를 읽고, 두 태그에 대해 조금 더 생각해보게 되었다.
글의 내용은 다음과 같다.
- <article>은 단지 신문이나 블로그 기사로 여기지 말고, 옷 한 벌이라고 생각하면 된다. 예를 들어, 바지는 다른 옷들과 다양하게 입을 수 있지만, 바지만 입고 외출할 수는 없다. 홈페이지로 예를 들면, 유튜브 홈페이지의 경우 <main> 태그 안에 동영상을 <article> 태그에 나열할 수 있을 것이고, 아마존의 경우 상품 정보를 <article> 태그에 나열하는 식이 될 것이다. 즉, <article>은 다른 형식으로 추출해 제공할 수 있는 독자적인 콘텐츠이다.
- <section>은 웹 브라우저가 HTML5 문서의 목차를 정할 수 있도록, 제목 + 내용을 담기 위한 보편적 용도의 컨테이너로 만들어졌다. 문서에서 목차를 인식하는 알고리즘은 제목 태그를 h1 하나만 써도 같은 HTML 요소가 얼마나 중첩되었는지에 따라 올바른 깊이의 제목이 되도록 조정한다.
<h1>최근 작성된 글</h1>
<article>
<h1>내가 작성한 글</h1>
<p>Lorem Ipsum Trondant Fnord</p>
<article>
<h1>인용된 글</h1>
<p>Magnum solero paddle pop</p>
</article>
</article>이 경우, <h1>이 여러 개이지만, <article>에 중첩된 각각의 h1이 마치 <h1>→ <h2> → <h3>가 된 것처럼 글자 크기가 달라진다. 그러나 이는 겉모습만 바뀌는 것이고, 개발자 도구로 살펴보면 헤딩의 깊이는 여전히 <h1>이다. 즉, 이 목차 인식 기능을 구현해 놓은 웹 브라우저가 없기 때문에 <section> 태그는 무시하고, <h1>부터 <h6>까지의 태그를 사용해 제목을 표시해야 이를 수행할 수 있다.
추가적으로,
- <section>은 특정 영역이 시작하고 끝나는 지점을 스크린 리더 사용자가 알아챌 수 있도록 할 때 aria-labelledby 또는 aria-label과 함께 사용한다.
- <section>에 접근 가능한 이름을 지정해주면 role은 "region"이 되는데, 만약 지정하지 않으면 브라우저와 보조 기술은 region을 사용자에게 노출하지 않는다!). 그런 목적이 아니라면 그냥 다른 태그를 쓰자.
<!-- aria-labelledby -->
<section aria-labelledby="menus">
<h2 id="menus">Website menus</h2>
<!-- Website Menus here -->
</section>
<!-- aria-label -->
<section aria-label="website menus">
<!-- Website Menus here -->
</section>- <article> vs. <section> : 올바른 태그를 선택하는 방법에 따르면 <section>은 특정 주제로 그룹화 할 수 있는 콘텐츠를 의미한다. 예를 들어, 챕터나 탭 페이지들이 이에 해당한다.
- <article>은 웹 접근성을 위해 반드시 제목(h1~h6)를 포함시켜 요소를 식별해야 한다.
결론적으로, <section>은 목차보다는 특정 주제를 그룹화하는 영역에 사용하고, <article>은 재배포 가능한 독립적 영역에 사용한다. 유의할 점은 모두 <h> 태그로 어떤 내용인지를 작성해 주고, <section>의 경우, 시각적으로 표시되는 설명이 있는 경우, aria-labelledby를, 그렇지 않은 경우 aria-label을 사용해 스크린 리더도 내용을 알 수 있도록 해야 한다.
<aside>
- 문서 주요 내용과 간접적으로 연관된 영역
- 블로그 양 옆 광고나 링크 같은 사이드 바를 표시할 때 사용
<footer>
- 문서나 특정 섹션의 푸터를 정의할 때 사용
- 섹션의 작성자, 저작권 정보, 관련 문서, 연락처, 사이트맵 등을 포함
- VoiceOver 스크린 리더는 푸터의 랜드마크 역할을 표현하지 않는 문제가 있어 role=”contentinfo”를 추가해야 한다.
<div>를 사용해 레이아웃을 구성하였을 때 시각적으로 화면을 렌더링하는 데 아무런 문제가 없어 보인다. 그렇다면 이런 시맨틱 태그들을 시간 들여가며 작성해야 할까? 이 글에 따르면 답은 그렇다이다. 이유는 다음과 같다.
- 브라우저는 HTML 구조에 따라 페이지를 읽고, <article>, <section>과 같은 HTML sectioning content를 우선적으로 읽는다. 따라서 최소한의 뷰가 구성될 때, 적절한 태그를 사용하지 않으면 이러한 내용이 무시될 수 있다.
- 이는 개발자가 콘텐츠를 보여주는 방식에 대해 적극적으로 생각하고, 페이지 제작 시 더 나은 방법을 알도록 한다. 콘텐츠를 그룹화하는 것은 시각적으로 스타일링하는 것보다 훨씬 더 큰 역할을 한다.
이번 프로젝트를 하면서도 웹 접근성에 대해 알고 있었지만 제대로 적용하지 못했는데, 이 기회를 통해 적용해볼 수 있었다. 이후 시맨틱 태그를 적용하면서 느낀 점도 포스팅할 예정이다. 웹의 창시자 팀 버너스 리는 "웹의 힘은 그것의 보편성에 있다. 장애에 구애 받지 않고 모든 사람이 접근 가능한 것이 웹의 필수 요소이다."라고 했다. 이러한 보편성의 가치에 대해 다시 한 번 생각해 볼 수 있는 계기였다.
REF
https://www.smashingmagazine.com/2022/07/article-section-elements-accessibility/
