[HTML] 시맨틱 태그

1. 시맨틱 태그란?

- 웹사이트 내에세 영역별로 의미를 가지는 태그

- 시맨틱(semantic): '의미의', '의미론적인'

- 태그의 이름만 보아도 어떤 역할을 하는 영역인지를 알 수 있습니다.

- 시맨틱 태그의 반대, 즉 어떠한 의미나 역할이 없는 태그는 논시맨틱(non-semantic) 태그라고 합니다.

 

2. 시맨틱 태그의 종류

- 자주 쓰이는 시맨틱 태그는 다음과 같습니다.

2-1. <header>

- 제목, 로고 등 웹사이트의 소개하는 영역을 나타내는 태그

2-2. <nav>

- 현재 페이지  또는 다른 페이지로의 링크를 보여주는 영역을 나타내는 태그

- navigate: 길을 찾다, 탐색하다 -> 현재 또는 다른 페이지로 탐색하는 역할

- 단독으로 쓰일 수도 있고, 헤더나 사이드바 내부에 있을 수도 있습니다.

2-3. <main>

- 핵심이 되는 메인 컨텐츠가 들어가는 영역을 나타내는 태그

- 웹문서에서 한 번만 사용할 수 있습니다.

2-4. <article>

- 독립된 컨텐츠 개별 항목의 영역을 나타내는 태그

- 여러 개 사용할 수 있습니다.

2-5. <section>

- 컨텐츠 영역을 나타내는 태그

❓ <article>과 <section>의 차이

- <article>은 독립된 컨텐츠, <section>은 관련된 컨텐츠들을 묶는 역할이라고 할 수 있습니다.

2-6. <aside>

- 사이드바 영역을 나타내는 태그

- 필수적인 요소는 아니므로 필요한 경우에만 사용합니다.

2-7. <footer>

- 사이트 제작자, 저작권 정보, 관련 내용을 소개하는 영역을 나타내는 태그

- header와 마찬가지로 내부에 section, article, nav 등 다른 시맨틱 태그를 넣어 정보를 제공할 수 있습니다.

2-8. <h1> ~ <h6>

- 제목 영역을 나타내는 태그

- 가장 큰 제목인 <h1>부터 시작해 가장 작은 <h6>까지 있습니다.

- 일반 텍스트보다 글씨의 크기가 크며 두껍습니다.

- 제가 참고한 책에는 이 태그가 텍스트 컨텐츠를 나타내는 요소로 나와있는데(참고로 HTML의 태그들을 요소(element)라고도 합니다.) 공식 문서에서는 시맨틱 태그와 같은 카테고리에 포함되어 있었습니다. 맞다 틀리다의 문제 보다는 관점의 차이인 것 같습니다. 저는 시맨틱 태그에 분류해봤습니다.

 

💡 MDN 문서에 따르면, <hn> 태그를 무분별하게 사용하는 것을 지양합니다. 예를 들어 <hn> 태그를 단순히 글씨의 크기와 굵기 때문에 사용하지 않도록 합니다. 그리고 제목의 순차를 건너 뛰지 말고 반드시 <h1>, <h2>... 의 순서를 따르라고 권고합니다. 또한 페이지당 하나의 <h1> 태그(가장 큰 제목)를 사용하는 것이 모범적인 사용이라고 언급하고 있습니다. 이유는 스크린 리더(화면 낭독기)를 사용하는 시각장애인과 SEO(Search Engine Optimizaction, 검색 엔진 최적화)의 측면을 고려하기 때문이라고 합니다. (관련 내용은 <모던 자바스크립트 Deep Dive>를 집필한 이웅모 님의 블로그에서도 확인할 수 있습니다.)

 

🤔 HTML을 배우다보면 이러한 이유를 생각보다 자주 마주치곤 합니다. 앞에서 정리한 시맨틱 태그도 SEO를 위해, 즉 웹사이트가 검색 결과에 더 잘 보이도록 하기 위해 의미있는 데이터를 표시하는 것이고, 나중에 정리할 이미지를 나타내는 태그에 포함되는 속성인 'alt' 역시 스크린 리더 사용자에게 이미지를 설명하는 역할을 합니다. 그만큼 웹사이트가 무엇을 말하는지, 그리고 어떤 것을 포함하는지 명확하게 보여주는 것이 얼마나 중요한 일인지 생각해보게 되었습니다.

 

마지막으로, 스크린리더(화면낭독기)로 HTML 요소들이 어떻게 읽히는지 알아볼 수 있는 영상을 가지고와봤습니다. 주변에 시각장애인이 없을 뿐더러 화면 낭독기라는걸 본 적이 없기 때문에 HTML을 공부할 때도 '그렇구나~'하고 넘어갔었던 것 같습니다. 아래 영상을 보니 그동안 신경써보지 못했던 웹접근성이라는 개념에 대해 생각해볼 수 있었습니다.😊

https://www.youtube.com/watch?v=tKj3xsXy9KM 

---

<Do it! HTML+CSS+자바스크립트 웹 표준의 정석>을 읽고 정리한 내용입니다.