SEMANTIC TAGS
semantic 사전적 의미는, '의미의', '의미론적인' 이다. 즉 태그에 의미를 부여함으로써 웹페이지의 구조를 파악하기 쉽도록 도와준다.
크게 3가지의 장점이 있다.
- 웹 접근성 개선
- SEO (Search Engine Optimization)
- 유지보수와 가독성
태그마다의 의미가 부여되기 때문에 웹의 접근이나 검색엔지에도 어떤 정보인지 파악하기 쉽다. 이전에는 div 태그에 구분하여 설계했으나 HTML5에서는 시맨틱 태그의 등장으로 직관적인 구조 설계가 가능하다.
주요 태그
header
로고와 제목 검색창 등에 노출될 수 있게 페이지나 구획의 제목 역할을 하는 요소들을 두는데 사용
nav
index, 페이지의 메뉴등에 사용되며 링크들을 포함하는 태그 (다른 페이지나 섹션으로 이동하는 내비게이션 링크.
웹 페이지에서 내부의 다른 영역이나 외부를 연결하는 링크 영역을 구분하는 데 사용
footer
최하단에 보여지는 푸터에 사용. 주로 하단 페이지에 들어가질만한 내용(사업자정보, 저작권 정보등)등이 들어 감
웹페이지 제일 하단에만 쓰는게 아니라 한 section에서도 사용 하기도 함. 즉 문서나 섹션의 바닥글 부분을 정의
main
페이지에서 하나만 존재해야하기에 주요 내용이 들어간다. 푸터 구역까지 포함
main 태그는 웹 페이지의 주요 내용을 지정할 때 사용하는 태그이기에, 문서에서 반복해서 등장하는 요소를 포함시키면 안된다. 아울러 main 태그를 article, aaside, footer, header, nav 태그의 하위에 포함할 수도 없다.
aside
사이드바 등 주요 내용과 간접적으로 연관된 컨텐츠등을 포함한다.nav를 쓰기도함
section
페이지의 컨텐츠를 일정 단위의 구획으로 나누는데 사용됩니다.
더 작은 단위의 컨테이너는 div를 사용
보통 section 태그는 내용의 제목을 나타내는 hn 태그 중 하나를 포함시킨다.
article
페이지 내에서 재사용될 수 있거나 페이지로부터 독립적인,
즉 다른 페이지에서도 사용될 수 있는 컨텐츠에 사용.
기사나 블로그 포스트, 댓글 등에 사용
section 태그는 웹 페이지 안에서 관련 있는 내용을 구분하고, article 태그는 어떤 웹 페이지에서든 독립적으로 사용될 수 있는 영역을 구분한다는 점에서 차이가 있다. 네이버에서는 로그인 영역이 article 태그로 구분하면 좋은 영역이다.
figure & figcaption
figure 태그는 독립된 콘텐츠를 설명하는 그림, 사진, 다이어그램 등을 정의. figcaption 태그는 그에 대한 설명을 제공.
<figure> <img src="image.jpg" alt="Description of image"> <figcaption>This is an image caption.</figcaption> </figure> 이미지에 긴 설명을 넣거나(img요소의 alt비움) 아스키 아트 등 다른 종류의 미디어에 설명을 붙일때 사용
+++ 08.06 (코딩자율학습 도서 참고)
공간 분할 태그
관련 있는 요소끼리 그룹 짓는 작업을 다른 영역과 분리한다는 의미로 공간 분할이라고 한다. 그래서 그룹짓기 작업을 수행하는 div와 span태그를 공간분할태그라고 한다.
div
div 태그는 블록요소와 인라인 요소를 그룹으로 묶을 때 사용. body안에 텍스트만 작성하면 코드가 복잡해지고 구분하기 어려워 div태그를 사용해 영역별로 그룹을 지으면 위처럼 구분하기 쉽다.
span
span 태그는 인라인 요소를 그룹으로 묶을 때 사용.
+++ 08.06
출처 : 코딩 자율학습 도서
시맨틱은 사전적으로 '의미론적'이라는 뜻이므로 시맨틱 웹은 '의미론적인 웹'정도로 직역할 수 있다. 시맨틱 태그를 이용하여 웹을 의미론적으로 설계한다고 볼수 있다.
