Semantic HTML의 필요성을 예시를 들어 설명해 주세요.

👩🏻‍💻 Semantic HTML의 필요성을 예시를 들어 설명해 주세요.

@semrush

 

💁🏻‍♀️ 요약하자면 ,

Semantic HTML은 웹 페이지의 각 요소에 의미를 부여하는 HTML 마크업 방법입니다. 이는 웹 페이지의 구조와 의미를 더 명확하게 전달하며, 결국 검색 엔진 최적화(SEO)와 웹 접근성을 향상시키는 데 기여합니다.

 

예를 들어,

HTML 안에 제목, 내용, 푸터로 내용이 나눠져 있음에도 불구하고 모든 요소를 <div> 태그로 씌운다면 코드를 보는 개발자 입장에서 웹 페이지 구조와 의미가 정확하게 보이지 않을 뿐 아니라, 우리가 애써 만든 웹 사이트가 검색 엔진에 최적화되지 않을 것입니다.

<div class="Ella">
  <div class="header">
    <h2>제목</h2>
  </div>
  <div class="content">
    <p>내용</p>
  </div>
</div>

따라서, HTML의 각 영역은 각 영역의 의미에 맞게 <header> 요소는 웹 페이지의 제목, <section> 요소로는 섹션을 정의, <article> 요소로는 문서의 내용, <footer> 요소로는 문서 하단의 정보 전달을 위한 목적으로 사용하며 페이지의 의미와 목적을 더욱 명확하게 전달해야 합니다.

<section class="Ella">
  <header>
    <h2>제목</h2>
  </header>
  <article>
    <p>내용</p>
  </article>
</section>

 

더불어,

이처럼 Semantic HTML은 검색 엔진이 페이지의 콘텐츠를 더 잘 이해할 수 있도록 하며, 스크린 리더 같은 보조 기술을 사용하는 사용자가 페이지 내용을 더 쉽게 파악할 수 있도록 하기도 합니다. 또한, 개발자가 코드를 작성하고 유지보수하는 데 도움을 줍니다.