HTML
시맨틱 태그
개발자가되고싶은자
2022. 2. 3. 17:57
시맨틱 태그
시맨틱 태그 (samentic tag)란 인터넷의 발전으로 방대한 웹문서가 생기면서, 제작기 일관적이지 않게 생성된 문서 구조는 웹문서에서 원하는 정보를 찾기가 점점 힘들어지게 만드는 원이었습니다.<div>태그의 기능과 마찬가지고 block element이면서 사이트의 구조(레이아웃) 설계하기 위한 태그, HTML의 구조를 설계하는데 있어 태그에 의미를 부여 함으로써 사이트의 구조를 파악하기 용이할 수 있도록 도와주기 위해 만들어진 태그입니다.
시맨틱 태그를 사용하면 좋은점(장점)
- 1. SEO 최적화에 유리. (SEO: Search Engine Optimization)
- 2. 웹 접근성에 효율적
- 2. 웹 접근성에 효율적
종류
| section | section 태그는 주제별 그룹의 콘텝츠 콘텐츠 섹션을 나타낼 때 사용 |
| header | header 태그는 머리글, 제목, 헤더 |
| nav | nav태그는 네이게이션, 목차, 리스트 등 다른 페이지로의 이동을 위한 링크 공간을 위주로 표현 |
| article | article기사, 블로그 등 텍스트 위주의 페이지를 구성할 때 주로 사용. |
| footer | address태그는 콘텐츠 작성자나 사이트 소유자의 정보등을 부가적으로 담는 기능. |
| address | hgroup태그는 제목과 관련된 부제목을 묶는 태그. |
| hgroup | main태그는 이름처럼 문서 <body>의 중신 주제, 주요 내용 또는 응용 프래그램의 중심 기능과 직접 관련되거나 확장되는 콘텐츠를 나타냄. |
| main | details태그는 주변 문맥에서의 표시된 구정의 관련성 또는 중요성으로 인해 참조 또는 표기 목적으로 표시되거나 강조된 텍스트를 나타냄. |
| details | figure태그는 이미지, 다이어그램, 사진 등 독립적인 컨텐츠 정의시 사용. |
| figure | figcaption태그는 figure 요소의 설명 캡션정의 |
| figcaption | mark태그는 현재 맥락에 관련이 깊거나 중요한 부분 강조. |
| mark | time태그는 시간의 특정 지점 또는 구간, datetime과 같은 속성을 이용해 알림같은 기능 구현. |
| time | summary태그는 datails요소에 대한 요약, 캡션 또는 범례를 지정함. |