HTML CSS

HTML5 시멘틱 태그와 웹 표준을 지키는 이유

John' 2023. 11. 12. 00:29

인간은 망각의 동물이다. 특정한 행동이나 생각을 자주 하지 않으면 우리 뇌 속에서는 신경의 가지치기 현상이 일어난다고 한다. 우리가 어떤 생각, 기분, 행동을 수행하지 않으면 뇌는 그와 연관된 뉴런들을 발화시키지 않는데, 그 결과 그러한 생각, 기분, 행동이 점점 약해지다가 결국 시들어버리고 잊게 되는 것을 신경 가지치기라고 한다. 그렇기 때문에 우리는 초등학교 시절처럼 리코더를 연주할 수 없는거고, 곡면의 부피를 구하는 적분 공식이나 근의 공식등에 대해 더는 기억하지 못하는 것이다. 쉽건, 어렵건 지금 나는 무조건 많이 생각하고 자꾸 써보고 사용해보는 것 밖에 방도가 없다 생각한다.

 

 

HTML5의 시맨틱 태그와 웹 표준을 지키는 이유는 웹 페이지를 보다 의미 있고 구조적으로 표현하고자 함과 동시에 웹 페이지의 접근성을 향상시키기 위함이다. 시맨틱 태그는 문서의 구조를 명확하게 정의하고, 검색 엔진 및 웹 브라우저가 콘텐츠를 더 잘 이해하도록 돕기 때문에 이를 통해 더 나은 검색 엔진 최적화(SEO)와 웹 페이지 접근성을 제공할 수 있다.

 

 

 

1. 의미 있는 구조 제공:

예를 들어,  <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>등의 시맨틱 태그는 웹 페이지의 구조를 명확히 정의한다. 이를 통해 다른 개발자나 유지보수를 하는 사람들이 코드를 이해하고 수정하기 쉬워진다.

 

<html>
  <head>
    <title>시맨틱 태그 예제</title>
  </head>
  <body>
    <header>
      <h1>웹 페이지 제목</h1>
    </header>
    <nav>
      <ul>
        <li><a href="#">메뉴1</a></li>
        <li><a href="#">메뉴2</a></li>
      </ul>
    </nav>
    <main>
      <section>
        <h2>섹션 제목</h2>
        <p>섹션 내용</p>
      </section>
      <article>
        <h2>글 제목</h2>
        <p>글 내용</p>
      </article>
    </main>
    <footer>
      <p>푸터 내용</p>
    </footer>
  </body>
</html>

 

 

 

2. 검색 엔진 최적화(SEO):
시맨틱 태그를 사용하면 검색 엔진은 콘텐츠의 의미를 더 잘 이해할 수 있는데, 이는 웹 페이지가 더 높은 순위로 나타날 수 있도록 도와준다.

 

 

3. 웹 접근성 향상:
시맨틱 태그는 스크린 리더와 같은 보조 기술을 사용하는 사용자들에게 웹 페이지를 더 잘 이해하고 탐색할 수 있는 기회를 제공한다.

 

 

4. 크로스 플랫폼 호환성:
웹 표준을 준수하면 다양한 브라우저와 기기에서 일관된 방식으로 웹 페이지가 표시될 수 있다.

 

 

웹 표준을 준수하고 시맨틱 태그를 사용함으로써, 개발자들은 더 효율적이고 의미 있는 웹 페이지를 만들 수 있으며, 사용자는 다양한 디바이스와 환경에서 일관된 경험을 얻을 수 있다.