[기술면접준비] Semantic HTML의 필요성

예를 들어, 아래와 같은 코드가 있다고 가정해봅시다.

<div class="header">
  <div class="logo">
    <img src="logo.png" alt="My Website" />
  </div>
  <div class="menu">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
  </div>
</div>

이 코드에서는 <div> 요소를 사용하여 웹 페이지의 구조를 나타내고 있습니다. 하지만, 이는 페이지의 내용을 보는 데에는 큰 문제가 없지만, 스크린 리더와 같은 보조 기술을 사용하는 사용자에게는 페이지의 내용을 이해하기 어려울 수 있습니다.

 

반면, Semantic HTML을 사용하면 이러한 문제를 해결할 수 있습니다.

 

 

Semantic HTML은 HTML 요소의 의미를 명확하게 전달하는 것을 의미합니다. 즉, 웹 페이지의 구조와 내용을 더 명확하게 표현하기 위한 HTML 마크업 방법입니다. 이러한 Semantic HTML의 사용으로 스크린 리더와 같은 보조 기술을 사용하는 사용자도 웹 페이지의 내용을 이해하기 쉬워지고, 코드의 가독성과 유지 보수성이 향상되며, 검색 엔진 최적화(SEO)나 웹 접근성을 개선할 수 있습니다.

 

 아래와 같은 코드로 변경할 수 있습니다.

<header>
  <div class="logo">
    <img src="logo.png" alt="My Website" />
  </div>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
  </nav>
</header>

위 코드에서는 <header>와 <nav> 요소를 사용하여 웹 페이지의 구조를 명확하게 표현하고 있습니다. 또한, <div> 대신 <nav> 요소를 사용하여 메뉴를 표시하고 있습니다.

 

Semantic HTML은 다음과 같은 요소들을 사용합니다.

header : 페이지의 제목이나 로고 등을 담는 요소
nav : 네비게이션 요소를 담는 요소
section : 문서의 주요 콘텐츠를 담는 요소
article : 독립적인 콘텐츠를 담는 요소
aside : 사이드바나 광고 등 부가적인 콘텐츠를 담는 요소
footer : 페이지의 저작권 정보나 연락처 등을 담는 요소

이 외에도 Semantic HTML은 main, h1-h6, p, ul, ol, figure, figcaption, time 등의 요소를 사용합니다. 이들 요소는 페이지의 구조와 의미를 더욱 분명하게 표현할 수 있습니다.