[FE] 📚 시맨틱 태그

📚 시맨틱 태그

 

📗 시맨틱 태그란?

 

이때 의미론적 태그를 뜻합니다. 시맨틱 태그는 태그가 가진 목적이나 역할을 나타내기 때문에

태그 사용만으로도 의미를 쉽게 파악할 수 있습니다.

• <header>  👉  웹 페이지나 섹션의 헤더를 정의합니다. 보통 로고, 제목, 내비게이션 링크 등을 포함합니다.
• <nav>  👉  네비게이션 링크를 감싸는 컨테이너 역할을 합니다. 주로 사이트 내부의 다른 페이지로 이동하는 링크를 포함합니다.
• <main>  👉  문서의 주요 콘텐츠를 정의합니다. 보통 한 페이지에 하나의 요소를 사용합니다.
• <section>  👉   문서의 섹션을 정의합니다. 주제나 콘텐츠의 그룹을 나타내며 일반적으로 제목을 포함합니다.
• <article>  👉  독립적인 콘텐츠를 나타내며 재사용 가능하거나 독립적으로 배포 가능한 내용을 담습니다. 블로그 글, 뉴스 기사, 포럼 게시물 등에 사용됩니다.
• <aside>  👉  독립적인 콘텐츠를 나타내며 재사용 가능하거나 독립적으로 배포 가능한 내용을 담습니다. 블로그 글, 뉴스 기사, 포럼 게시물 등에 사용됩니다.
• <footer>   👉  문서나 섹션의 푸터를 정의합니다. 보통 연락처 정보, 저작권 정보, 관련 링크 등이 들어갑니다.

---

 

📑 사용 시 이점

 

• 검색 엔진 최적화 (Search Engine Optimization = SEO)
• 웹 접근성(Web Accessibility = A11y)

• (시작장애 있는 사용자가 스크린 리더를 사용하여 페이지를 탐색할 때 도움을 줍니다.)

• 동료 개발자가 코드를 읽고 의도 파악하는데 도움이 됩니다.

 ⛔주의할 점

 

시맨틱 태그에 너무 집착하면 개발 생산성이 떨어집니다.

 

따라서, div 태그로 개발하고 필요할 때 시멘틱 태그로 바꿔 나가는 것이 효율적일 수 있습니다.