시맨틱(Semantic Elements)에 대해 알아보자

 처음 이 단어를 들었을 때 흔히 아는 공사장에서의 시멘트(cement)를 생각했었지만, 아쉽게도 의미론(semant)이라는 뭔가 철학적인 단어인 반면 어렵지 않은데 브라우저와 개발자에게 요소자체로 의미가 있으면 semantic, 그렇지 않으면 non-semantic으로 정의된다. 요소들은 html상에서 태그로 구분되어지기 때문에 시맨틱 태그로 불리기도 한다.

 

 대표적으로 html에서 영역을 나눌 때 쓰는 <div>는 자체적으로는 의미가 없어 id나 class를 부여하여 추가적인 설명이 필요하므로 non-semantic태그이다. 반면, <header>는 웹페이지의 헤더를 나타낸다는 것을 알 수 있기 때문에 semantic태그이다.

 

 

Semantic Tag
<header>	문서 또는 섹션의 헤더를 지정
<nav>	탐색 링크를 정의
<main>	문서의 주요 내용을 지정
<article>	독립적이고 자체 포함된 콘텐츠를 정의
<section>	문서의 섹션을 정의
<aside>	페이지 콘텐츠 이외의 콘텐츠를 정의
<footer>	문서 또는 섹션의 바닥글을 정의
<figure>	일러스트레이션, 다이어그램, 사진, 코드 목록 등과 같은 자체 포함 콘텐츠를 지정
<figcaption>	<figure> 요소에 대한 캡션을 정의
<details>	사용자가 보거나 숨길 수 있는 추가 세부 정보를 정의
<summary>	<details> 요소에 대한 가시적 제목을 정의
<mark>	표시/강조 표시된 텍스트를 정의, 형광펜처럼 칠해준다.
<time>	날짜/시간을 정의

 

 

 페이지의 레이아웃을 정의할 때 사용하는 태그들이 대부분이다. 개인적으로 레이아웃 관련 태그들은 자주 사용하고, <figure>와 <figcaption>은 사진과 사진의 부연설명을 적을 때 주로 사용하는데 블로그나 기사형태가 아니면 사용할 경우가 거의 없었고, <details>, <summary>, <mark>, <time>은 이번 글작성을 통해 처음 알게 되었다.

 

 해당 태그들은 HTML5에 도입된 태그로 HTML5의 출시일은 2014년 10월 28일이다.

 이것이 시사하는 바는 레거시코드들과 이를 통해 학습하는 주니어들, 해당내용을 학습하지 않은 개발자들의 코드들은 대부분이 <div>로 되어있을 것이라는 점이고, 실제로 그런 경우를 많이 보아왔다. 레이아웃 관련 태그들은 내부적으로 div와 같은 역할을 하기 때문에 기능상의 문제는 없지만 SEO(Search Engine Optimization)을 위해서라도 적용하는 편이 좋다.

 

---

참고

 

https://www.w3schools.com/html/html5_semantic_elements.asp

HTML Semantic Elements