시맨틱 태그
의미를 부여한 태그
(<div> 태그에 의미를 부여했다!)
예시로는 <header>, <footer> 등이 있다. 이름만 봐도 상단과 하단이라는 것을 알 수 있다!
이러한 시맨틱 태그의 등장으로 태그만 보고서 의미를 이해할 수 있게 되었다.
시맨틱 태그를 사용해야 하는 이유
<div> 태그를 사용해도 똑같이 만들 수 있는데, 굳이 시맨틱 태그를 왜 사용해야 할까?
1. HTML 문서의 가독성과 유지보수가 쉬워짐
2. 웹 브라우저가 HTML만으로 상단, 하단, 본문 어느 영역인지 쉽게 확인이 가능함
3. 검색 엔진이 검색을 수행할 때, HTML 내 태그를 분석할 수 있음 -> 검색 엔진 최적화(SEO)에 도움이 됨!!
검색 엔진 최적화(SEO)
구글에 어떤 것을 검색을 하면
이렇게 여러 페이지가 노출되는데, 대부분의 사람들은 상위 노출된 페이지를 먼저 열람한다.
이때 검색엔진 결과 페이지에서 웹사이트 또는 웹페이지의 상위 노출도를 높이는 작업이 바로 SEO다!
-> 검색 엔진이 쉽게 이해할 수 있는 형태로 웹페이지를 구성하는 과정!!
시맨틱 태그가 검색 엔진 최적화(SEO)에 도움이 되는 이유?
시맨틱 태그를 사용하면 검색 엔진이 웹 페이지의 구조와 내용을 더 잘 이해할 수 있으며,
이는 검색 결과의 정확도를 높이는 데 기여함!
1. 문서 구조의 명확성
: 검색 엔진이 이러한 구조를 분석하여 페이지의 내용을 더 잘 이해하고, 검색 결과에 더 적절한 정보를 제공!
2. 의미 전달
: ex. <article> 태그 - 독립적인 콘텐츠 조각을 의미
<aside> 태그 - 부가적인 정보를 의미
검색 엔진은 이러한 의미를 파악하여 페이지의 내용을 더 정확히 이해하고, 관련성 높은 검색 결과를 제공!
3. 검색 엔진 봇의 이해도 증가
: 검색 엔진은 시맨틱 태그를 기반으로 페이지의 주요 주제를 이해하고, 사용자에게 유용한 정보를 제공하기 위해 페이지를 올바르게 색인화.
4. 검색 쿼리와의 연관성
: 시맨틱 태그의 사용으로 페이지의 내용을 더 명확히 정의 가능!
결과적으로 검색 엔진이 사용자의 검색 쿼리와 페이지의 내용을 더 잘 매칭할 수 있게 함.
따라서 시맨틱 태그를 통해 구조화된 데이터를 제공하는 것은 웹 페이지 SEO 전략의 핵심 요소 중 하나!!
시맨틱 태그의 종류
| <header>, <footer>, <main>, <aside> | - <aside>는 문서 내에 사이드바가 있는 경우 사용 |
| <nav>, <ul>, <ol>, <li> | - <nav>는 GNB 등 내비게이션 메뉴를 묶을 때 주로 사용 |
| <article>, <section> | - <article> : 독립적으로 보여줄 수 있는 문서나 글을 묶는 단위 - <section> : 문서 내에서 관련된 주제로 묶은 영역 단위 (ex. 이 글 전체 내용은 article, 시맨틱 태그의 종류 등은 section) |
| Headings: <h1>~<h6> | - 검색 엔진은 크기만으로 제목을 구분하기 힘들기에 Heading 태그로 구분해주어야 함 |
| HTML 서식 요소(<strong>, <em>, <ins>, <del>) | - 시각적 뿐만 아니라 의미적으로 정보도 전달 |
| <a>, <button> | - <a>는 페이지를 이동할 때, <button>은 어떤 행위를 할 때 사용 |
결론
시맨틱 태그는 웹 접근성과 SEO를 향상시키는 데 기여하고 웹 품질을 높임으로, 시맨틱 태그를 적극적으로 활용하자!
참고 자료
- 코딩팩토리, "[HTML] 시맨틱 태그(Semeantic Tag)란 무엇인가?, https://coding-factory.tistory.com/883
- [요즘 IT] 티그리스 디자인팀, "알아두면 쓸모 있는 '시맨틱 마크업' 개념 정리", https://yozm.wishket.com/magazine/detail/2495/
- F-Lab: 상위 1% 개발자들의 멘토링, "HTML 시맨틱 태그의 중요성과 사용 방법", https://f-lab.kr/insight/importance-of-semantic-tags
- [요즘 IT] 김아영, "검색엔진 최적화(SEO)란?", https://f-lab.kr/insight/importance-of-semantic-tags
'개발 > HTML&CSS' 카테고리의 다른 글
| [HTML/CSS] 인라인 요소와 블록 요소 (0) | 2024.08.31 |
|---|