코드잇 2주차 위클리 페이퍼로 시맨틱 태그를 사용하면 좋은 점에 대해 설명을 하게 되었다.
이번 기회에 시맨틱 태그는 무엇이며 왜 써야 하는지 알아보자.
시맨틱 이란?
우선 시맨틱이라는 말부터 알아보자. Semantics은 의미론이라는 사전적인 의미를 가진다.
<h1>
Hello World!
</h1>
<span style="font-size: 32px; margin: 21px 0;">
Hello World!
</span>위 코드에서 <h1>태그와 <p>태그는 모양은 동일하다.
그러나 각 태그가 의미하는 것은 다르다.
- h1: 이 페이지에서 최상위 제목
- p : 문단 (제목이라는 의미는 없음)
이처럼 각 태그들은 의미를 가지고 있다.
이제 왜 태그를 목적에 맞게 사용해야 하는지 알아보자.
왜 써야하나?
물론 그냥 div태그, p태그에 스타일을 줘서 모든 화면을 그릴 수는 있다.
하지만 시맨틱 태그를 사용했을 때의 이점은 다음과 같다.
-
웹 접근성이 좋아진다.- 시각 장애가 있는 사용자가 화면 판독기로 페이지를 탐색할 때 의미론적 마크업을 푯말로 사용할 수 있다.
-
코드 가독성이 상승하고 유지보수에 좋다.- 의미없는 div 들을 탐색하는 것보다 의미있는 코드 블록을 찾는 것이 훨씬 쉽다.
-
검색 엔진 최적화(SEO)에 유리하다.- 검색 엔진은 의미론적 마크업을 페이지의 검색 랭킹에 영향을 줄 수 있는 중요한 키워드로 간주한다.
종류는?
종류는 약 100여 가지로 생각보다 상당히 다양하다.
그중 일부만 알아보자.
<header> : 소개 및 탐색에 도움을 주는 콘텐츠를 나타냅니다.
(제목, 로고, 검색 폼, 작성자 이름 등)
<nav> : 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 네비게이션이다.
(메뉴, 목차, 색인)
<main> : 문서 <body>의 주요 콘텐츠를 나타냅니다.
<article> : 문서, 페이지, 애플리케이션, 또는 사이트 안에서 독립적으로 구분되는 요소에 사용됩니다.
(게시판과 블로그 글, 매거진이나 뉴스 기사 등)
<section> : 보통 제목을 포함하고있으며 독립적인 요소나 문서 요약에 사용된다. 일반적인 컨테이너를 위한것이라면 <div>를 사용하는것이 권장 된다.
<figuer> : 이미지가 들어가는 영역이다.
<aside> : 문서의 좌 혹은 우측의 사이드 공간을 의미 주요 컨텐츠 이외에 참고가 되는 정보를 배치한다.
<footer> : 바닥글, 문서 하단에 들어가는 정보로, 사이트의 제작자나 저작권 정보 등을 주로 표시
mdn 시맨틱태그 https://developer.mozilla.org/ko/docs/Glossary/Semantics#html_%EC%8B%9C%EB%A7%A8%ED%8B%B1
mdn 태그 목록
https://developer.mozilla.org/ko/docs/Web/HTML/Element
잘 읽었습니다! 감사드려요!