Semantic Tag (시멘틱 태그)가 무엇이고 왜 사용해야 하는가? <div> 태그 남발하는 사람 필독📝

[sernan96]

문제상황

프론트 관련 글들을 읽다가 발견한 처음 보는 용어인 시멘틱 태그를 발견하여 읽어보게 되었습니다.
그런데 html을 작성할 때 div를 남발하던 습관이 좋지 않았음을 깨닫게 해주어서 이에 대해서 공유하기 위해 글을 올립니다!😊

Semantic Tag가 뭔데?

시멘틱(semantic) 태그는 HTML5에서 도입된 중요한 개념으로, 웹 콘텐츠의 의미를 명확하게 정의하는 데 사용됩니다. 이러한 태그들은 HTML 문서 구조를 더 논리적으로 만들어주는 역할을 합니다. 예를 들어, <div>와 같은 일반적인 블록 레벨 요소는 의미를 담고 있지 않지만, 시멘틱 태그들은 요소가 웹 페이지에서 수행하는 역할을 나타냅니다.

주요 시멘틱 태그들:

• <header>: 페이지나 섹션의 헤더를 정의
• <nav>: 내비게이션 링크들을 묶는 역할
• <main>: 문서의 주요 콘텐츠를 감싸는 요소
• <section>: 문서 내 특정 주제별로 구분된 섹션을 나타냄
• <article>: 독립적으로 구분될 수 있는 콘텐츠 블록(예: 블로그 포스트, 기사 등)
• <aside>: 부가적인 정보, 예를 들어 광고나 관련 링크
• <footer>: 페이지나 섹션의 하단을 정의

시멘틱 태그의 장점 ✔️

1. 접근성 향상:

   • 스크린 리더와 같은 보조 기술을 사용하는 사용자들에게 웹 콘텐츠의 구조를 명확히 전달할 수 있습니다. 예를 들어, <nav> 태그가 있으면, 스크린 리더는 이 부분이 내비게이션 영역임을 이해합니다.

2. SEO(Search Engine Optimization) 향상:

   • 검색 엔진 크롤러는 시멘틱 태그를 통해 페이지의 콘텐츠를 더 잘 이해하고, 검색 결과에서 더 정확하게 인덱싱합니다. 예를 들어, <article> 태그에 포함된 내용은 독립적인 콘텐츠로 이해되며, 이는 검색 결과에 유리하게 작용할 수 있습니다.

3. 가독성과 유지보수 용이성:

   • 개발자나 디자이너가 코드를 읽을 때 각 섹션이 어떤 의미를 가지고 있는지 쉽게 파악할 수 있어 유지보수가 간편해집니다. 의미를 가진 태그들은 그 용도를 직관적으로 파악할 수 있기 때문입니다.

4. 미래 호환성:

   • 시멘틱 태그를 사용하면 최신 표준에 맞는 코드를 작성하는 것이므로, 브라우저 업데이트나 새로운 표준에 대한 대응이 더 수월합니다.

단점 🤔

1. 구형 브라우저 호환성 문제:

   • 매우 오래된 브라우저에서는 시멘틱 태그가 제대로 인식되지 않거나 지원되지 않을 수 있습니다. 다만, 이 문제는 대부분의 최신 브라우저에서는 해결된 상태입니다.

2. 학습 곡선:

   • 시멘틱 태그에 익숙하지 않은 초보 개발자는 기존의 <div>나 <span>만 사용하는 것에 비해 처음에는 더 많은 시간을 들여야 할 수 있습니다.

요약: 왜 시멘틱 태그를 쓰는 것이 좋은가?

시멘틱 태그를 사용하면 웹 페이지의 의미를 명확히 정의하고, 이를 통해 접근성, SEO, 유지보수성이 크게 향상됩니다. 비록 약간의 학습이 필요하고, 매우 구형 브라우저와의 호환성 문제가 있을 수 있지만, 이러한 단점들은 장점에 비해 상대적으로 미미합니다. 표준에 맞는 코드를 작성하는 것은 웹 개발의 중요한 목표 중 하나이므로, 시멘틱 태그는 매우 권장됩니다!

[cryingdryice]

사실 div 태그를 남발하는 이유가 이런 시멘틱 태그에 대한 이해가 없어 그런거긴 하죠ㅋㅋ
이 참에 제대로 알게 되어 상황에 맞게 적용해보도록 노력하겠습니다!
좋은 글 감사합니다~