Semantic 태그에 대해서

Semantic 태그란 무엇인가?

브라우저와 개발자 모두가 그 의미를 명확히 알 수 있게 하는 태그를 바로 Semantic 태그라고 부른다.

예를 들어, <div> 태그나 <span> 태그는 내용에 대해서 아무 의미를 알 수 없다.

하지만, <img>, <table> 태그와 같은 태그들은 내용을 명확하게 알 수 있게 해 준다.

출처 : https://seonueo.tistory.com/32

 <header> : 주로 머리말, 제목을 표현하기 위해 쓰인다.

<nav> : 네비게이션이라고 부르고, 주로 메뉴에 사용되고 위치에 영향을 받지 않아 어디에서든 사용이 가능하다. 

<section> : 본문 콘텐츠를 담고 있고, <section> 안에 <section>을 넣는 것도 가능하다.

<article> : <section>이 콘텐츠를 분류한다면 이 <article> 태그 안에는 실질적인 내용을 넣습니다. 예를 들어, 뉴스로 예를 들면 정치/ 연예/ 사회의 대분류는 <section>이고, 정치의 기사 내용과 연예의 기사 내용들을 <article>에 넣는 것이라 보면 된다.

<aside> : 사이드바라고 부르며, 본문 이외에 내용을 담고 있다. 주로 본문 옆에 광고를 달거나 링크들을 이 공간에 넣어 표현한다.

<footer> : 화면의 구조 중 제일 아래에 위치하고, 회사 소개, 주소나 연락처, 저작권 등을 넣는다.

 

Semantic 태그를 사용해야 하는 이유 

만약, <div> 태그로만 HTML의 모든 태그를 사용한다면, HTML 문서를 접하는 사람이 어떤 데이터를 봐야 할지, 어떤 데이터를 제공하는지 파악하기 굉장히 어렵고 까다로운 일이다. 

그렇기 때문에 Semantic 태그를 사용하여 의미를 부여해준다면, 유지 보수하기가 쉽고, 다른 개발자가 코드를 분석할 경우 시간을 절약할 수 있을 것이다.

의미를 올바르게 부여하는 것만으로도 미래의 나 혹은 개발자 동료에게 더 빠른 퇴근을 선물해 줄 수 있다.

 

SEO란?

Search Engine Optimization의 약자로, 말 그대로 검색 엔진 최적화라고 부른다. 

검색엔진이 웹페이지의 자료를 수집하거나 순위를 방식에 맞게 웹페이지를 구성하여, 검색 결과의 상위에 나올 수 있게 하는 것을 말한다.

SEO를 위해서는 검색어를 페이지에 적절하게 배치해야 한다. 검색엔진은 결과를 보여줄 때, HTML의 태그들을 분석하는데 Semantic 한 문서는 검색엔진이 유의미한 결과를 낳을 수 있도록 합니다.