HTML 시멘틱 태그 특징
HTML5 시멘틱 태그는 웹 페이지의 구조와 내용을 명확하게 정의하는 데 도움을 주며, 검색 엔진 최적화(SEO)와 웹 접근성에도 중요한 역할을 한다.또한 웹 표준을 준수하여 크로스 브라우징이나 호환성 문제를 최소화할 수 있다.
그렇다면 왜 시멘틱 태그를 사용하는 것일까?
검색 엔진 최적화(SEO): 시멘틱 태그는 웹 페이지의 구조와 내용을 명확하게 정의하기 때문에 검색을 할 때 엔진이 잘 이해하고 쉽게 찾아낼 수 있다. 이러한 특성으로 인해 검색 결과 페이지에서 노출되는 확률이 높아지는 효과를 볼 수 있다.
웹 접근성: 시멘틱 태그는 웹 페이지의 구조를 보다 명확하게 정의하기 때문에 스크린 리더와 같은 보조기술을 사용하는 사용자들에게도 웹 페이지를 이해하는 데 많은 도움이 된다.
코드 유지 보수성: 시멘틱 태그는 코드를 명확하게 정의하기 때문에 코드의 가독성이 높아져 코드를 유지 보수하는 데 도움을 준다. 이로인해 새로운 기능을 추가하는 것도 쉬워진다.
시멘틱 태그 종류
w3schools
header
헤더영역에 사용하는 태그, 로고 아이콘 검색양식 등이 들어있다.웹 페이지의 머리말 부분을 나타낸다.
nav
네비게이션 바 영역에 사용하는 태그
메뉴, 목차 등에 사용된다.
section
구체적인 시맨틱 태그가 없는 문서의 독립적인 영역을 나타낸다.
보통 제목이 오고 article 보다 큰 영역을 나타낼 때 사용하는 태그
article
개별 콘텐츠에 사용하는 태그
게시물, 작성글, 댓글 등이 있다.
aside
사이드 영역에 사용하는 태그
사이드바로 사용되어지고 본문과는 별개의 내용을 포함한다.
footer
맨 아래 풋터 영역에 사용하는 태그
저작권, 데이터 정보, 회사 정보등이 들어있다.
웹 표준을 지키는 이유
웹 표준(Web Standards)이란?
웹 표준은 '웹에서 표준적으로 사용되어지는 기술이나 규칙'을 말한다.
표준화단체인 W3C가 권고한 표준안에 따라 웹사이트를 작성할 때 이용하는 HTML, CSS, JavaScript 등에 대한 규정이 담겨 있다.
웹 표준이 중요한 이유
현재 지구 인구의 과반수가 인터넷을 사용하고 있고 앞으로 더욱 증가할 것이다. 그렇기 때문에 표준화는 반드시 해결해야 하는 과제 중 하나이다.
웹 표준을 지키는 이유
- 호환성 문제 최소화: 웹 표준을 준수하면 모든 브라우저에서 웹 페이지가 일관된 방식으로 동작한다. 이를 통해 크로스 브라우징이나 호환성 문제를 최소화할 수 있다.
- 개발 생산성 향상: 웹 표준을 준수하면 다른 개발자들과 협업하기 쉬워지는데, 웹 페이지를 개발할 때 필요한 기능들이 미리 정의되어 있어, 개발 생산성이 향상된다.
- 보안 강화: 웹 표준을 준수하면 보안에 대한 이슈를 사전에 예방할 수 있어서 보안을 강화하는 데에 큰 도움을 준다.
📍시멘틱 태그를 사용하고 웹 표준을 지키는 이유는 구조와 내용을 명확하게 정의하여 검색 환경을 최적화하고 유지 보수성 향상 및 보안을 강화시키는데 목적이 있다.
마무리
결론적으로, 시멘틱 태그를 사용하고 웹 표준을 지켜 품질을 향상시키는 것은 사용자들의 접근성과 만족도를 높이기 위함이라고 할 수 있다. 그렇기 때문에 개발을 하면서 항상 이 두가지를 염두에 두며 진행해야할 것이다.
시멘틱 태그를 사용하면 마크업할때 정리도 잘되고 좋은거같아요!