[FE] 📚 시맨틱 태그

728x90

📚 시맨틱 태그

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

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

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

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

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

728x90