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

hyeonkyeong·2023년 3월 6일
0

HTML

목록 보기
1/2

1. 시맨틱 태그란

프로그래밍에서,시맨틱은 코드 조각의 의미를 나타냅니다 — 예를 들어 ("이게 어떻게 시각적으로 보여질까?" 보다)"이 Javascript 라인을 실행하는 것은 어떤 효과가 있는가?", 혹은 "이 HTML 엘리먼트가 가진 목적이나 역할은 무엇인가?" - mdn

즉, 의미를 가지고 있는 요소로써 코드를 보는 개발자에게 명확하게 해당 요소의 의미, 목적을 전달하기 위함이다.

# 왼쪽 이미지
div, span 태그 등은 contents에 대하여 어떠한 설명이나 목적이 없다.

# 오른쪽 이미지
해당 태그들은 각각의 의미를 가지고 목적을 전달하고 있다.

  • header : 소개, 제목, 로고 등

  • section : 메인 컨텐츠 영역. 전체 문서에서 단 하나

  • article : 독립적인 컨텐츠를 구분 (기사 컨텐츠 요소)

  • figure : 비디오, 이미지, 코드 영역

  • nav : 네비게이션 영역. 링크. 메뉴

  • aside : 메인 컨텐츠 이외의 사이드 컨텐츠. 별개 정보, 연관 정보

  • footer : 저작권, 계약 정보, 사이트맵, 연락처 등
    ...

또한, 위 그림처럼 article 요소들은 중첩되어 사용이 가능하고, article 요소는 heading 요소를 반드시 가져야 한다.

이러한 시맨틱 태그 사용의 이점은 웹 표준을 지키는 이유와 연관성이 있다.

2. 시맨틱 태그의 이점

1 ) 웹 표준 및 접근성의 측면

웹 표준은 브라우저 종류 및 버전에 따른 기능 차이에 대하여 호환이 가능하도록 제시된 표준으로, 다양한 플랫폼에 영향을 받지 않고 동일한 화면 구현으로 웹 페이지를 제작하는 기법을 뜻한다.

시맨틱 마크업은 이런 웹 표준을 지키는 가장 효율적인 마크업 방식으로, 시맨틱 태그를 통해 컴퓨터의 검색 엔진은 태그의 의미를 명확하게 파악하여 정보를 제공하며 이것을 검색최적화(SEO)라고 한다.

웹 접근성 측면에서도 보조기기를 사용해 웹에 접근하는 사용자들은 태그의 의미가 불분명 하더라도 시각적 레퍼런스를 통해 이해할 수 있지만, 시각장애인이나 고령자분들은 이와 같은 경우 동등하게 접근하고 이해하기 힘들기 때문에 웹 접근성을 보장하기 위해 시맨틱 마크업을 사용해야 한다.

2) 수월한 코드 가독성 및 유지 보수

위와 같이 모든 태그들이 div로 되어있을 경우... 어느 부분이 어느 영역(header, sectino, footer 등 ...) 인지 파악하기가 어렵다.
따라서, 시맨틱 태그를 사용한다면 웹의 레이아웃을 금방 파악하고 내용을 쉽게 유추할 수 있다.

1. 이미지 출처
2. 이미지 출처

profile
문제를 해결하는 개발자가 되기.

1개의 댓글

comment-user-thumbnail
2023년 3월 9일

안녕하세요, 제로베이스 프론트엔드스쿨 멘토입니다. 작성해주신 글 잘 읽었고, 앞으로의 더 나은 블로깅을 응원하는 마음에서 작은 의견을 남기고 갑니다 :) 

  • 전체적으로 본인만의 언어로 글을 잘 정리해서 작성해주셔서 읽기가 편했습니다.
  • 설명하기에 적절한 이미지를 골라주신 것과, 이에 대한 설명을 잘 적어주셔서 좋았습니다.
  • 하단에 출처를 적어주신 것도 좋습니다. mdn을 참고하셨다고 언급해주셨는데, 이 또한 출처에 적어주면 좋을 것 같습니다. (외부의 자료에서 가져온 내용과 내가 주도적으로 정리한 내용이 드러날 수 있도록요..!)

감사합니다.

답글 달기