728x90
※ 시맨틱 태그 등장배경 ※
웹페이지의 구조를 잡기위해 div태그가 많이 사용되는데 무수히 많은 div 태그가 사용되어 id로 식별해줘야한다.
하지만 그것에도 한계가 있고.... 구분하기가 많이 힘들기 때문에 시맨틱태그라는 것을 써준다.
시맨택태그 -> 똑같이 div역할을 하긴 하지만 영역의 의미가 부가된 태그
html5에 적용되었으며, 앞으로 점차 사용 점유율이 늘어날 것으로 보인다
시맨틱(Semantic) 태그란?
<div>태그의 용도를 그대로 가져오면서 상세 카테고리별로 컴퓨터가 인지할 수 있게 목적별로 나눠 준 태그
종류
<header>
웹 문서에서 머리말 영역을 나타낼 때 사용
(제목, 제목 설명 등을 나타내는 요소 포함)
body 안에 여러번 사용 가능
<nav>
navigation, 탐색 링크 정의
웹 문서나 문서 내 다른 부분으로 이동하는 부분을 나타내고자 할 때 사용
<aside>
웹 문서의 광고 같이 부가적인 정보를 구분하기 위해 사용
<section>
비슷한 그룹이나 문서를 묶기 위해 사용
<article>
기사들, 블로그 게시물, 포럼 게시물들 등 각종 정보글들을 분류하는 태그
<footer>
문서나 section의 바닥글을 정의
웹 문서의 저자정보, 저작권 정보, 이용 조건 등을 나타내기 위해 사용
728x90
반응형
'웹 관련 > HTML & CSS' 카테고리의 다른 글
| [CSS] placeholder 주의할 점(feat.placeholder가 안먹힐 때) (0) | 2022.06.22 |
|---|---|
| [CSS] 부모 상속 무효화 :not() selector (0) | 2022.05.22 |
| [CSS] padding,margin 속성값 & padding 적용 차이 (0) | 2022.05.22 |
| [HTML] <div>와 <span> (feat.block & inline element 구분) (0) | 2022.04.24 |
| [HTML] 표(table) : <table> 태그와 구성요소들 (0) | 2022.04.24 |