Semantic HTML? 시멘틱 마크업이란?

😎 Semantic HTML? 시멘틱 마크업이란?

Semantic HTML
의미론적 HTML을 의미한다.
시맨틱 요소는 브라우저와 개발자 모두에게 그 의미를 명확하게 설명할 수 있다.  -w3schools-

 

✅ 시멘틱 마크업이란?

 의미를 잘 전달하도록 문서를 작성하는 것

non-Semantic
<div>, <span> : 내용에 대한 의미가 없다.

Semantic
<form>, <header>, <footer> : 내용의 의미를 명확하게 정의한다.

 

✅ 시멘틱 마크업을 해야하는 이유

1. SEO (Search Engine Optimization)

시멘틱 마크업은 검색엔진 최적화(SEO)에도 영향을 준다.

구글과 같은 검색 엔진들은 문서(웹사이트)를 방문하면 문서에 포함된 링크를 따라가며 관련 내용들을 모두 수집하고,

수집된 문서는 구글 시스템에서 분석 과정을 거친다.

문서에 사용된 태그와 단어의 빈도 등 검색엔진 자체 알고리즘에 따라 주요 키워드를 추출하고

키워드, 내용의 구분에 맞는 태그 등을 조합해 문서의 점수를 매긴다.

이렇게 모든 사이트들의 점수를 비교하고 점수가 높은 사이트들을 우선적으로 검색에서 상위노출을 시킨다.

검색엔진과 시기마다 알고리즘이 다르게 동작하기 때문에 절대적인 정답은 없지만

영역 구분이 명확하지 않은 문서보다는 영역의 명확한 구분과 적절한 html 속성들이 있는 문서에서 더 정확한 내용과

키워드들을 추출할 수 있고 이로 인해 SEO에 긍정적인 영향을 끼칠 것이라는 건 예상할 수 있다.

이것이 Semantic HTML을 작성해야하는 이유이다.

 

예시

사이트의 제목을 <p>태그 안에 작성했을 경우는 <h1>태그로 작성했을 때보다 훨씬 더 약한 의미를 갖게 되고,

이는 SEO에 악영향을 끼친다.

또, 어떠한 글을 image로 제작해서 이미지 하나만 포스팅 한다면(게다가 alt 태그 없이),

검색 엔진은 해당 컨텐츠의 내용을 인식하지 못하고 해당 컨텐츠는 노출되지 못할 것이다.

 

2. 웹 접근성

웹 접근성 (정보통신접근성)
「지능정보화기본법」에 따라 장애인이나 고령자가 웹 사이트에서 제공하는 정보를
비장애인과 동등하게 접근하고 이용 할 수 있도록 보장하는 것으로
웹 접근성 준수는 법적의무사항에 속한다.  -한국웹접근성인증평가원-

 

시각 장애인은 스크린 리더라는 장치를 통해 웹사이트를 이해한다.

스크린 리더는 HTML 문서를 읽어 내려가며, 각 요소들의 내용을 음성으로 알려주는 장치로

사진, 영상 등의 미디어 컨텐츠의 경우는 alt 속성에 있는 텍스트를 읽는 등

시각 장애인도 정보에 접근할 수 있도록 도와준다.

그렇기 때문에 개발자는 모든 사용자가 서비스에 접근할 수 있도록 방법을 제공해야 한다.

이러한 경우는 Semantic Markup을 이용하여 문서를 제작하면 접근성을 높일 수 있다.

 

예시

리스트를 작성하는 경우 <div> 태그로 리스트를 만드는 것보다

리스트의 의미를 가지고 있는 <ul> <li> 태그를 사용하는 것이 좋다.

 

3. 소통

Semantic Markup은 기계에게도 의미를 전달해주지만, 동료 개발자에게도 의미를 전달할 수 있다.

<div> 와 <span>으로만 작성된 코드보다

적절한 <h1> <ul> <li> 등 Semantic Markup으로 작성된 코드가 동료 개발자와의 소통 및 유지보수에서

훨씬 더 효율적이기 때문에 Semantic Markup은 소통에도 도움이 된다.

 

 

✅ 시멘틱 마크업 예시

 

1. HTML5 이전에는 id, class를 통해 태그의 의미를 보여주는 방식으로 작성했다.

<div id="header"> 
<div id="footer">

이 방법은 명확한 기준이 없다는 문제점이 있다.

 

 

2. HTML5에서는 Semantic Tag가 등장한다.

<header>
<nav>
<footer>
...

HTML5 Tag는 명확한 기준이 정의가 된 태그를 제공한다.

 

 

 

❗ 정리

Semantic HTML은 검색엔진 최적화(SEO), 웹 접근성, 동료 개발자와의 소통, 유지보수 가독성 등

여러 긍정적인 영향이 있으니 효율적인 서비스를 만들고 싶다면 Semantic Markup을 고려해서 개발하도록 하자.

 

 

 

 

참고

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

HTML Semantic Elements