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

JunYong Park·2023년 4월 13일
post-thumbnail

HTML 시멘틱 태그 특징

HTML5 시멘틱 태그는 웹 페이지의 구조와 내용을 명확하게 정의하는 데 도움을 주며, 검색 엔진 최적화(SEO)와 웹 접근성에도 중요한 역할을 한다.또한 웹 표준을 준수하여 크로스 브라우징이나 호환성 문제를 최소화할 수 있다.

그렇다면 왜 시멘틱 태그를 사용하는 것일까?

  • 검색 엔진 최적화(SEO): 시멘틱 태그는 웹 페이지의 구조와 내용을 명확하게 정의하기 때문에 검색을 할 때 엔진이 잘 이해하고 쉽게 찾아낼 수 있다. 이러한 특성으로 인해 검색 결과 페이지에서 노출되는 확률이 높아지는 효과를 볼 수 있다.
  • 웹 접근성: 시멘틱 태그는 웹 페이지의 구조를 보다 명확하게 정의하기 때문에 스크린 리더와 같은 보조기술을 사용하는 사용자들에게도 웹 페이지를 이해하는 데 많은 도움이 된다.
  • 코드 유지 보수성: 시멘틱 태그는 코드를 명확하게 정의하기 때문에 코드의 가독성이 높아져 코드를 유지 보수하는 데 도움을 준다. 이로인해 새로운 기능을 추가하는 것도 쉬워진다.
  • 시멘틱 태그 종류

    w3schools
    header

  • 헤더영역에 사용하는 태그, 로고 아이콘 검색양식 등이 들어있다.
  • 웹 페이지의 머리말 부분을 나타낸다.
  • nav

  • 네비게이션 바 영역에 사용하는 태그
  • 메뉴, 목차 등에 사용된다.
  • section

  • 구체적인 시맨틱 태그가 없는 문서의 독립적인 영역을 나타낸다.
  • 보통 제목이 오고 article 보다 큰 영역을 나타낼 때 사용하는 태그
  • article

  • 개별 콘텐츠에 사용하는 태그
  • 게시물, 작성글, 댓글 등이 있다.

    aside

  • 사이드 영역에 사용하는 태그
  • 사이드바로 사용되어지고 본문과는 별개의 내용을 포함한다.
  • footer

  • 맨 아래 풋터 영역에 사용하는 태그
  • 저작권, 데이터 정보, 회사 정보등이 들어있다.
  • 웹 표준을 지키는 이유

    웹 표준(Web Standards)이란?

    웹 표준은 '웹에서 표준적으로 사용되어지는 기술이나 규칙'을 말한다. 표준화단체인 W3C가 권고한 표준안에 따라 웹사이트를 작성할 때 이용하는 HTML, CSS, JavaScript 등에 대한 규정이 담겨 있다.

    웹 표준이 중요한 이유

    현재 지구 인구의 과반수가 인터넷을 사용하고 있고 앞으로 더욱 증가할 것이다. 그렇기 때문에 표준화는 반드시 해결해야 하는 과제 중 하나이다.

    웹 표준을 지키는 이유

    • 호환성 문제 최소화: 웹 표준을 준수하면 모든 브라우저에서 웹 페이지가 일관된 방식으로 동작한다. 이를 통해 크로스 브라우징이나 호환성 문제를 최소화할 수 있다.
    • 개발 생산성 향상: 웹 표준을 준수하면 다른 개발자들과 협업하기 쉬워지는데, 웹 페이지를 개발할 때 필요한 기능들이 미리 정의되어 있어, 개발 생산성이 향상된다.
    • 보안 강화: 웹 표준을 준수하면 보안에 대한 이슈를 사전에 예방할 수 있어서 보안을 강화하는 데에 큰 도움을 준다.


    📍시멘틱 태그를 사용하고 웹 표준을 지키는 이유는 구조와 내용을 명확하게 정의하여 검색 환경을 최적화하고 유지 보수성 향상 및 보안을 강화시키는데 목적이 있다.

    마무리

    결론적으로, 시멘틱 태그를 사용하고 웹 표준을 지켜 품질을 향상시키는 것은 사용자들의 접근성과 만족도를 높이기 위함이라고 할 수 있다. 그렇기 때문에 개발을 하면서 항상 이 두가지를 염두에 두며 진행해야할 것이다.

    profile
    이유 없는 개발은 없다

    2개의 댓글

    comment-user-thumbnail
    2023년 4월 13일

    시멘틱 태그를 사용하면 마크업할때 정리도 잘되고 좋은거같아요!

    1개의 답글