SEMANTIC TAG (시멘틱태그) 란??
✔️ "의미가 있는 태그"라는 뜻이다. 즉, HTML tag들 중에서도 나름의 의미가 있는 태그들을 말한다.
📌 시멘틱 태그를 사용 해야 하는 이유
1. SEO ( Search engine optimization )
검색을 최적화하기 위해서 우리가 제목, 부제목, 시멘틱 태그를 잘 활용한다면, 검색엔진이 검색을 수행할 때 HTML내의 태그를 분석할 수 있다. 예를 들자면 검색엔진의 검색로봇에서는 <article> 태그가 사용된 콘텐츠를 재배포할 수 있는 콘텐츠로 인식한다. 반대로 <section> 태그로 묶은 콘텐츠는 재 배포를 금지하는 콘텐츠로 인식한다.
2. 웹 접근성
웹 브라우저가 HTML만 보고도 상단(header), 본문(main), 하단(footer), 사이드(aside) 어느 영역인지 쉽게 알 수 있다. 웹페이지를 시각적이 아니라, 음성으로 읽어주는 "스크린리더"를 이용하거나 또는 키보드만을 이용해서 내가 만든 웹사이트를 이용하는 경우, 적절한 시멘틱 태그로 잘 만들어진 웹사이트라면 스크린리더이든, 키보드만을 사용해서 동작하든 문제없이 동작할 수 있다. 즉, 장애인이나 고령자분들이 웹 사이트에서 제공하는 정보를 비장애인과 동등하게 접근하고 이용 할 수 있도록 보장하는 웹 접근성을 준수할 수 있다.
3. 유지보수성
가독성과 유지보수가 쉬워진다. 만약 모든 태그들을 div로 만들었다고 가정한다면, HTML 문서가 길어질 경우 어디가 어느 부분인지, 어떤 영역인지 한눈에 파악하기가 힘들어진다. 하지만 시맨틱 태그를 활용하면 유지보수를 할 때나 다른 작업자가 코드를 파악하기가 보다 쉬워진다.
📌 시멘틱 태그의 종류
1. header : 제목, 웹사이트를 나타내는 로고, 검색 폼, 작성자 이름 등의 요소도 포함할 수 있다.
2. nav : <nav> 태그는 내비게이션 표현을 위한 태그로써 동일한 사이트 안의 문서나 다른 사이트의 문서로 연결하는 링크들의 모음을 나타낸다. header 안에 여러가지 메뉴들이 모여있을 때, div 대신 nav 태그를 사용한다.
3. footer : 일반적으로 웹 문서 끝자락에 들어가는 태그로 보통 저작권 정보나 저작권 표기와 같은 내용이 들어가는 부분이다. <footer> 태그 안에 <section>, <article> 등 다른 레이아웃 태그들을 모두 사용할 수 있고 이런 태그들을 활용하여 푸터 안에 다양한 정보들을 넣을 수 있다.
4. main : <main> 태그는 해당 페이지의 메인 콘텐츠를 나타낼 때 사용하며 반드시 한 번만 사용된다. <main> 태그 내의 콘텐츠는 해당 문서의 중심이 되는 주제나 확장되는 콘텐츠로 구성되어야 하며, 문서 전반에 걸쳐 반복되는 내용을 포함해서는 안 된다.
5. aside : main 안에서도 페이지의 컨텐츠와 직접적인 상관이 없는 내용들은 여기에 집어넣는다. ex) 광고, 페이지와 연관된 다른 링크들 등
6. article : 한마디로 정의하자면 태그를 적용한 부분을 떼어 내 독립적으로 배포하거나 재사용하더라도 완전히 하나의 콘텐츠가 된다면 <article> 태그를 사용할 수 있다.
7. section : 콘텐츠의 영역. 즉 여러 가지 콘텐츠들을 그룹으로 묶어주는 역할을 담당합니다. 문맥 흐름 중에서 콘텐츠를 주제별로 묶을 때 사용하며, 그 안에는 섹션 제목을 나타내는 <h1> ~ <h6> 태그들이 함께 사용된다.
sectionvsarticle
article와 달리section은 재배포 할 수 없는 콘텐츠로 인식된다. 포인트만 요약하자면
❗️ main 내에 있는 내용들과 전혀 상관없이 독립적으로 정보를 나타낼 때 사용되는 것이<article>태그인 것이다.
📌 그 외 목적이나 적용이 비슷한 태그 비교정리
1. i vs em
1. <i> : 책의 제목, 인용구, 그냥 시각적으로만 이텔릭체로 나타내고 싶을 때 사용한다.
2. <em> : 문장에서 정말 강조하고 싶은 부분이 있을 때, 사용한다.
2. button vs a
1. <button> : 사용자의 특정한 액션을 위해 사용한다. (ex. 홈버튼)
2. <a> : 어디론가 링크를 타고 이동하는 게 목적일 때.
3. figure vs img
<figure> : <img> 태그와 달리 설명을 넣을 때 주로 사용하며, <figurecaption> 태그를 함께 사용한다. <div>에 비해 <figure>을 사용하면 이미지 사용 여부를 직관적으로 알 수 있다.
ex)
<figure>
<img src= "images/001.jpg">
<figurecaption>
내용~~~~~~~~설명~~~~~
</figurecaption>
</figure>
💡 발췌
https://velog.io/@gil0127/Semantic-Tag-%EC%A0%95%EB%A6%AC
