시멘틱 태그 (의미 있는 코드 짜기)

html에서 h1, p, div, 등 여러가지 태그들이 있지만, 서로 다른 기능을 하는 듯 하면서도 css 속성을 설정해주면 같은 기능, 효과를 낼 수 있는 태그들이 많이 겹친다.

 

그렇다면 이 태그들을 구분하는 진짜 의미는 무엇일까.

 

h1 태그의  본질은 글자 크기를 지정하는 기능이 아니다.

h1의 진짜 의미는 "가장 큰 제목"이라는 의미를 가진 태그의 정체성 그 자체이다.

하지만 div 처럼 요소로서의 의미가 짙지 않은 태그는 보통 노시멘틱 태그라고 한다.

그리고 header, article 등 요소의 특징적인 의미를 띄는 태그를 시멘틱 태그라고 부른다.

 

각 태그가 가진 본질적인 의미(시멘틱)를 살리는 코딩 (마크업 Markup),

"의미있는 코딩"을 하면 다음과 같은 효과를 얻을 수 있다.

 

1) 코드의 가독성 및 유지 보수성 향상

가장 먼저 코드를 짜는 프로그래머가 편하다. 보기 좋은 소스 코드는 가독성을 높혀 준다. 

각 태그가 어떤 역할을 하는 지 태그의 이름 만으로도 유추할 수 있다면 좋은 코드다.

 

2) 컴퓨터가 읽기 편하다.

사람은 만들어진 사이트 화면을 보고 구성물과 배치로 내용을 한번에 이해할 수 있지만,

컴퓨터는 그렇지 않다. 컴퓨터는 구성요소에 대한 텍스트적인 설명이 필요하다.

 

이때 각 태그 들의 적절한 사용과 배열, 헤더에 들어간 meta 데이터를 잘 설정하면

사이트 탐색과 검색 노출도 향상에 도움이 된다.

 

- 접근성 향상

- 검색 엔진 최적화 (SEO) (검색 노출)