Semantic Markup, 시맨틱 마크업

Semantic   의미론적 

Markup      태그를 사용하는 컴퓨터 언어(HTML과 같은)

Semantic Markup  의미가 있는 태그를 사용하는 컴퓨터 언어

 

먼저 의미가 있는 태그란 무엇인지 알아보자

A : <div>, <span>
B : <form>, <table>

 

A,B는 둘 다 HTML의 태그이다. 하지만, 둘 중 하나는 semantic, 다른 하나는 non-semantic 요소이다. 

어떤 것이 의미가 있는 태그일까?

 

정답은 B이다. <form>태그는 사용자에게 입력받는 "형식"이라는 것을 알 수 있고, <table>은 "표"를 의미한다는 것을 알 수 있다. 반면에 <div>와 <span>은 class나 id를 읽기 전까지는 어떤 컨텐츠를 가지고 있는지 알 수가 없다. 즉, 의미가 있는 태그는 컨텐츠의 목적과 내용을 알 수 있게 해주는 태그를 말한다.

 

semantic tag를 사용하는 이유는 무엇일까?

 

# A : semantic code
<header></header>
<section>
	<article>
    	<figure>
        	<img>
        </figure>
    </article>
</section>
<footer></footer>

# B : non-semantic code
<div id="header"></div>
<div class="section">
	<div class="article">
		<div class="figure">
			<img>
		</div>
	</div>
</div>
<div id="footer"></div>

위의 두 코드는 정확히 같은 내용을 가지고 있다. 만약 A와 B코드 중 하나의 내용을 수정해야 한다면 어떤 것을 선택할 것인가?

 

A가 간결하고 한눈에 파악하기 쉬워 접근하기 쉬운 코드라는 생각이 들 것이다. 예시는 고작 9줄밖에 되지 않는 코드지만 실제 사용하는 훨씬 긴 코드를 본다면 더욱 더 A의 편을 들게 될 것이다.  

 

따라서, semantic 태그를 권장하는 이유는 다음과 같다.

• 읽기 쉽다
• 사용자의 이해를 돕고 검색엔진 최적화에 유리한 높은 접근성을 가지고 있다
• 일관된 코드(consistent code)이기 때문에 모두가 알아볼 수 있다

마지막 줄에 있는 일관성을 설명해보겠다. 우리는 header를 다음과 같은 방법으로 생성할 수 있다.

<div class="header">, <div id="header">, <div class="head">

하지만, 표준 semantic 태그로는 <header> 하나로 일관되어 누구나 알아볼 수 있게 된다.

 

결국, Semantic Markup이라는 것은 의미를 간결하게 전달하는 태그를 사용해 HTML 문서를 작성하는 것을 말한다.

사실 나는 div 애호가인데 이제는 semantic 태그로 프로그램을 짜야겠다. 껄껄

 

 

👇🏻 HTML5에 추가된 새로운 semantic tag들을 확인하기 바란다.

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

HTML Semantic Elements

 

👇🏻 요소들의 주기율표

https://bradfrost.com/blog/post/atomic-web-design/