📚 Study/HTML&CSS
[HTML] 시맨틱 태그(Semantic Tag)
0_ch4n
2022. 6. 5. 17:06
반응형
✔️ 시맨틱 태그란?
- '의미가 있는 태그' 를 말합니다.
- <div>, <span>처럼 의미가 없는 태그는 이름을 보고 내용을 유추하기 어렵지만 <header>, <footer>는 의미가 명확합니다
📌 장점
- 검색 엔진(SEO)이 컨텐츠를 페이지의 검색 순위에 영향을 미치는 중요한 키워드로 간주합니다.
- 시각 장애가 있는 사용자가 스크린 리더를 사용하여 페이지를 탐색하는데 도움이 되는 표지판으로 사용할 수 있습니다.
- 끝없는 <div>를 탐핵하는 것보다 훨씬 간단합니다.
- 채워질 데이터 유형을 명시하고 네이밍을 반영하므로 구조 파악이 쉬워지고 재사용성이 좋아집니다.
✔️ 시맨틱 태그의 종류
📌 <header>
- 페이지나 구획의 제목 역할을 하는 요소들을 두는데 사용합니다.
- 로고와 제목 검색창 등이 들어갑니다.
📌 <nav>
- 링크들을 포함하는 태그입니다.
- 주로 페이지의 매뉴들이나 색인 등에 사용됩니다.
📌 <footer>
- 페이지나 구획의 최하단에 보여지는 푸터에 사용됩니다.
- 페이지의 주인 연락처 및 저작권 정보 등이 들어갑니다.
📌 <main>
- 페이지의 주요 내용이 들어가는 곳입니다.
- 페이지에서 하나만 존재해야 합니다.
📌 <aside>
- 사이드바 등 주요 내용과 간접적으로 연결된 컨텐츠를 포함합니다.
📌 <section>
- 페이지의 컨텐츠를 일정 단위의 구획으로 나누는데 사용됩니다.
- 더 작은 단위의 컨테이너는 div를 사용합니다.
📌 <article>
- 페이지 내에서 재사용될 수 있거나 페이지로부터 독립적인, 즉 다른 페이지에서도 사용될 수 있는 컨텐츠에 사용합니다.
- 기사나 블로그 포스트, 댓글 등에 사용됩니다.
✔️ 그 외 의미 있는 태그
- <em> 과 <strong> 은 각각 강조성과 중요성을 갖고 있습니다.
- <h1 ~ h6> 은 제목에 사용됩니다.
- <p> 는 글의 단락에 사용됩니다.
- <li> 는 리스트의 텍스트를 나타냅니다.
- <a> 는 링크에 사용됩니다.
📄 참고
반응형