시맨틱 태그
의미있는 태그를 말한다. 해당 태그를 봤을때 태그 속 내용이 무엇일지 쉽게 알 수 있게 해주고, HTML코드가 어떻게 구성되어있는지 파악하는데 도움을 준다.
이미지 출처 : https://www.semrush.com/blog/semantic-html5-guide/
시맨틱(Semantic)이란
프로그래밍에서 시맨틱(Semantic)은 코드조각의 '의미'를 나타낸다. HTML의 시맨틱태그 뿐만 아니라, CSS의 class명이나, 변수, 함수의 이름을 어떻게 지을지 고민하는 것도 시맨틱을 고려하는 것이라 볼 수 있다.
시맨틱 태그를 사용하는 이유
1. 의미 전달을 명확히 할 수 있다.
<!-- non-semantic tag -->
<div class="title" style="font-size:50px">hello world!</div><!-- semantic tag -->
<h1>hello world!</h1>두가지 코드는 같은 문장을 보여주고 있는데, h1 태그를 사용한 코드는 해당 문장이 제목이라는 것을 쉽게 알 수 있다. 우리는 css를 통해 원하는 대로 정보를 그려낼 수 있지만 의미없는 div 태그 보다 h1 태그를 활용해서 제목인것을 더 쉽게 나타내고, HTML이 기본적으로 가지고 있는 css도 적용 할 수 있다.
<header>, <main>, <footer> 태그를 통해 페이지의 상하단 및 중심이 되는 컨텐츠가 무엇인지 쉽게 구분하도록 작성할 수 있고, <strong>이나 <blockquote>, <address> 등을 통해 해당 내용이 무엇인지 강조하는 부분인지 태그만으로 구분이 가능해진다.
즉, 가독성과 유지보수가 용이해진다.
2. 검색 엔진 최적화(SEO)에 도움을 준다.
검색엔진 최적화(SEO - Search Engine Optimization)는 구글, 네이버 등과 같은 검색엔진에서 웹사이트가 결과페이지에 잘 노출되게 만드는 것을 말한다.
시맨틱 태그를 사용하여 작성하면 검색엔진이 웹페이지를 분석 할 때 태그들이 가지고 있는 데이터 또한 수집하기 때문에 웹페이지가 어떤 정보를 제공하는지 보다 효율적으로 전달 할 수 있다.
시맨틱 태그의 종류
<header> : 웹페이지의 로고, 로그인, 검색 폼 등 페이지의 상단영역에 주로 위치한다.
<nav> : 네비게이션 메뉴 부분을 의미한다. (예: 제품소개, 고객지원 등)
<main> : 웹 페이지의 상세 항목이 보여지는 공간이다.
<section> : 구역을 나누어 표현할때 쓰인다. 하나의 main안에 여러 section과 article을 나누어 사용한다.
<article> : main안에서 주요 내용이 들어간다.
<footer> : 웹 페이지 하단 영역으로 사업자 정보나 저작권, 대표번호 등의 정보가 들어가는 영역이다.
<h1> to <h6> : 태그 속 문장이 제목임을 나타내는 태그이다.
<a> : 링크를 연결할때 사용한다. 페이지의 이동이나, 외부링크로 연결된다.
<ol> : ordered-list로 순서를 매긴 리스트를 만들때 사용한다.
<ul> : unordered-list로 순서가 매겨지지 않은 리스트를 만들 수 있다.
<q> : 인용문을 작성할때 사용한다.
참고사이트
https://developer.mozilla.org/ko/docs/Glossary/Semantics
https://www.semrush.com/blog/semantic-html5-guide/
https://seo.tbwakorea.com/blog/what-is-semantic-tag/
