웹 페이지의 구조를 잡을 때 사용하는 '시맨틱 태그'에 대해서 배워보겠습니다.
[ Contents ]
1. 시맨틱 태그란?
시맨틱 태그(Semantic Tag): 문서의 구조와 의미를 전달하는 태그
시맨틱 태그는 웹 페이지 상에 노출되지 않습니다. 그저 HTML 문서상으로만, 해당 부분이 어떤 내용인지를 알려주는 주석에 가깝습니다. 그렇다면 굳이 왜 시맨틱 태그를 사용할까요?
그 이유는 '웹 3.0 시맨틱 웹'이 등장했기 때문입니다. 시맨틱 웹은 '웹 문서를 구조화해서 의미 있는 내용이 탐색 가능한 웹'을 뜻합니다. 여기서 탐색하는 주체는 '크롤링 봇'입니다. 정보의 홍수에서, 검색에 적합한 페이지를 찾기 위해서는 까다로운 검증이 필요합니다. 거기다가 해당 내용이 목차인지, 인용문인지, 본문인지 모르면 더 어렵습니다.
크롤링 봇이 원활하게 페이지를 이해하고 색인할 수 있도록, 우리는 시맨틱 태그를 사용해서 문서의 구조를 알려줍니다. 그러면, 크롤링 봇이 잘 인식해서 검색의 상위 랭크로 해당 페이지를 등록합니다. 검색엔진은 좋은 글을 잘 인식해서 좋고, 작성자는 방문자 수가 많아져서 좋습니다. 즉, 상부상조하는 시스템인 거죠.
한편, 시맨틱 태그는 '구역'을 나누는 역할도 합니다. 시맨틱 태그에도 CSS를 적용할 수 있으며, 마치 div나 span같이 사용하기도 합니다.
2. 시맨틱 태그의 종류와 예시
<body>
<header>- 머릿글</header>
<nav>- 목차</nav>
<section>
- 본문
<header> == 제목 및 머리말</header>
<article>== 독립 주제</article>
<aside>== 보조 내용</aside>
<footer>== 꼬리말</footer>
- 본문 끝
</section>
<footer>- 저자 및 저작권 정보</footer>
</body>
1) header
- 전체 페이지나 본문의 머리말
- 페이지의 제목이나 서론
2) nav
- navigation
- 메뉴나 목차 (페이지 내 하이퍼링크를 모아둔 곳)
3) section
- 문서의 본문, 본론
- 다양한 주제가 있을 경우, 여러 section으로 나누어서 사용 가능
ex) <section> chapter1 </section> <secton> chapter2 </section> ...
4) article
- 본문과 관련된 보조 자료들을 담는 영역
- 독립적인 콘텐츠 (보조 기사, 글, 댓글 등)
5) aside
- 본문에서 벗어난 내용
- 관련 글, 인용문, 광고 등으로 주로 페이지의 오른쪽이나 왼쪽에 배치
6) footer
- 페이지의 꼬리말: 저자나 저작권 정보, 회사 정보
- 본문의 꼬리말
'Web' 카테고리의 다른 글
| [CSS] 캐스케이딩(계단형) 스타일 시트란? CSS의 구성요소와 장점 (0) | 2022.04.29 |
|---|---|
| [HTML] 블록 태그와 인라인 태그의 종류와 차이점 (feat. div와 span) (0) | 2022.04.28 |
| [HTML] 하이퍼링크 태그 <a> (새 탭으로 열기, 페이지 내 이동) (0) | 2022.04.26 |
| [HTML] 띄어쓰기, 줄바꿈 하는 방법 (feat, pre태그 / 유니코드 특수문자 삽입) (0) | 2022.04.25 |
| [HTML] HTML의 기본 태그: 제목(h), 문단(p), 리스트(ol, ul, dl, li) (0) | 2022.04.24 |
댓글