728x90
Semantic 태그..? <section>태그?
섹션과 관련된 태그(Section Related Tag)를 찾다보니 시멘틱태그인 경우가 많더라구요
일전에 포스팅한 시멘틱마크업에서는 시멘틱의 이라는 사전적인 정의를 내렸고 이번 포스팅에서는
그래서 시멘틱 태그를 정리 해보았습니다.
더보기
시멘틱태그을 해야 하는 이유?
1. SEO(Search Engine Optimize) - 검색엔진 최적화에 유리
2. 웹접근성 - 시각장애인들도 웹을 편리하게 접할 수있도록 도와줌
3. 유지보수 - 정리된 마크업은 코드 식별이 용이함
<h1> ~ <h6>
- 제목을 나타내며 숫자가 작을수록 크기가 커
- 주로 <header>태그 안에 사용을해 !
<header>
- 소개 및 탐색에 도움을 주는 콘텐츠를 나타넹
- 제목, 로고, 검색 폼, 작성자 이름 등의 요소도 포함할 수 있고 주로 상단에 위치해
- 텍스트, 인라인요소, 블록 레벨 요소를 포함할수없어 ! 아래 설명하는 요소들은 사용가능 !
<nav>
- HTML문서의 메인메뉴나 목차 등을 정의해 주는 태그야 !
- 주로 내비게이션 메뉴를 묶을때 사용하구 아래 2가지 태그와 사용해
See the Pen Untitled by getgrovy (@getgrovy) on CodePen.
<aside>
- 문서의 주요 내용과 간접적으로만 연관된 부분을 표현해
- 주로 사이드바 혹은 콜아웃 박스로 표현해
<section>
- 문서 내에서 관련 주제로 묶는 영역 단위라고 생각해
- 더 적합한 의미를 가진 요소가 없을 때 사용하기도해
<article>
- 문서 페이지 애플리케이션, 또는 사이트안에서 독립적으로 구분하거나 배포할수 있는 구획을 나타내
- 예제로 블로그 & 뉴스 & 잡지등이 있어
<footer>
- 일반적으로 구획의 작성자, 저작권 정보, 관련 정보 등을 담아
- 위치는 사이트 하단에 거의 있어