Semantic HTML의 필요성을 예시를 들어 설명해주세요.
Semantic HTML은 HTML 요소의 의미와 목적을 명확하게 나타내는 것을 말합니다.
이를 사용함으로써 웹 페이지의 접근성과 검색 엔진 최적화(SEO)를 개선하며, 웹 사이트를 이해하고 유지 보수하기 쉽게 만듭니다.
예를 들어,
HTML 안 모든 요소를 <div> 태그로 씌운다면 코드를 보는 개발자 입장에서 웹 페이지 구조와 의미가 정확하게 보이지 않을 뿐 아니라, 우리가 애써 만든 웹 사이트가 검색 엔진에 최적화되지 않을 것입니다.
<div class="Review">
<div class="header">
<h2>제목</h2>
</div>
<div class="content">
<p>내용</p>
</div>
</div>따라서, HTML의 각 영역은 각 영역의 의미에 맞게 <header> 요소는 웹 페이지의 제목, <section> 요소로는 섹션을 정의, <article> 요소로는 문서의 내용, <footer> 요소로는 문서 하단의 정보 전달을 위한 목적으로 사용하며 페이지의 의미와 목적을 더욱 명확하게 전달해야 합니다.
<section class="Review">
<header>
<h2>제목</h2>
</header>
<article>
<p>내용</p>
</article>
</section>
더불어,
이처럼 Semantic HTML은 검색 엔진이 웹 사이트의 콘텐츠를 더 잘 이해하고 색인화할 수 있도록 하며, 스크린 리더 같은 보조 기술을 사용하는 사용자가 페이지 내용을 더 쉽게 파악할 수 있도록 하기도 합니다. 또한, 코드의 가독성과 유지보수성을 높이게 됩니다. 예를 들어 <section> 요소는 문서의 주요 섹션을 나타내며, 해당 섹션의 내용이 변경되더라도 요소의 의미와 목적은 변하지 않습니다.
이는 코드를 읽기 쉽게 만들어 개발자가 웹 사이트를 이해하고 유지 보수하기 쉬워집니다.
위와 같이 Semantic HTML은 웹 사이트의 접근성, SEO, 가독성, 유지 보수성 등을 개선하며,
웹 개발자들에게 매우 유용한 도구입니다.
시맨틱 태그 종류
- 헤더 영역을 나타내는 <header> 태그
- SP비게이션 영역을 나타내는 <nav> 태그
- 핵심 콘텐츠를 담는 <main> 태그
- 독립적인 콘텐츠를 담는 <article> 태그
- 콘텐츠 영역을 나타내는 <section> 태그
- 사이드바 영역을 나타내는 <aside> 태그
- 푸터 영역을 나타내는 <footer> 태그
댓글