🍏 시멘틱이란?
Semantics
프로그래밍에서 시멘틱은 코드 조각의 의미를 나타낸다.
우리가 시멘틱한 웹, 시멘틱한 태그를 지향하는 이유는 "의미있는" 마크업을 하기 위함이다.
예를 들자면, html에서 <h1>은 시멘틱 요소이다.
"이 페이지에서 최상위 제목"인 텍스트를 감싸는 역할(또는 의미)를 나타낸다.
이외에도 아래와 같은 시멘틱 태그들이 있다.
header- 헤더를 의미한다
nav- 내비게이션을 의미한다
aside- 사이드에 위치하는 공간을 의미한다
section- 본문의 여러 내용(article)을 포함하는 공간을 의미한다
article- 본문의 주내용이 들어가는 공간을 의미한다
footer- 푸터를 의미한다
🍏 왜 시멘틱일까?
검색 엔진은 html코드 만으로 그 의미를 인지하여야 하는데 이때 시멘틱 요소(Semantic element)를 해석하게 된다.
<font size="10"><b>Hello</b></font>
<h1>Hello</h1>1행의 요소는 의미론적으로 어떤 의미도 가지고 있지 않다. 하지만, 2행의 요소는 header 중 가장 상위 레벨이라는 의미를 내포하고 있어서 개발자가 의도한 요소의 의미를 명확히 드러내고 있다.
=> 이것은 코드의 가독성을 높이고 유지보수를 쉽게 한다.
🍏 Semantic Web의 의미
시맨틱 웹(Semantic Web)은 '의미론적인 웹'이라는 뜻으로 기계가 이해할 수 있는 형태로 제작된 웹을 의미한다.
🍏 의미있는 마크업의 이점
- 웹 접근성 측면에서 시각 장애가 있는 사용자가 화면 판독기로 페이지를 탐색할 때 의미론적 마크업을 푯말로 사용할 수 있다.
- 의미없고 클래스 이름이 붙여져있거나 그렇지 않은 끊임없는
div들을 탐색하는 것보다, 의미있는 코드 블록 찾기 쉽다. - 해당 코드가 어떤 역할을 하는지 어떤 기능을 하는지 직관적인 이해를 가능하게 한다. 즉, 코드의 가독성을 높인다.
- 검색엔진이 시멘틱 태그를 중요한 키워드로 간주해서
SEO(Search Engine Optimize)에 유리하다. > 검색엔진 최적화
✔️ 이처럼 시멘틱 태그는 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명하는 역할을 한다.
뚜벅뚜벅