시멘틱 마크업이란?

시멘틱 마크업이란?

 시멘틱 마크업은 종종 POSH(Plain Old Semantic HTML)라고도 불리는데, 단어 그대로 평범하고 오래된 의미론적인 HTML이라는 뜻입니다. 시멘틱은 즉, 기계(컴퓨터, 브라우저)가 잘 이해할 수 있도록 하는 것을 뜻합니다.

애초에 프로그래밍 언어는 사람과 기계와의 정해진 약속이며 HTML 역시 마찬가지입니다. HTML은 HTML이 가진 철학에 맞게 문서를 구조적으로 나타낼 수 있도록 표현 되어야합니다. 시멘틱 마크업의 사용은 HTML이 가진 철학을 올바르게 표현할 수 있도록 돕습니다.

---

시멘틱 마크업을 통해서 얻는 것

 시멘틱 마크업을 잘 사용하면 브라우저에게 코드가 가진 의미를 정확하게 전달할 수 있습니다. 웹이라는 문서를 표현하기 위해서 의미에 맞는 태그를 사용하며, 문서를 표현할 때 구조화를 해준다면 정확하게 의미를 전달할 수 있으며, 결국 기계와 사람 모두에게 이해하기 쉬운 코드가 됩니다.

시멘틱 마크업은 다음과 같은 역할을 수행합니다.

(https://developer.mozilla.org/en-US/docs/Glossary/Semantics 참조)

- 검색 엔진은 중요한 키워드로 콘텐츠를 고려해 페이지의 검색 순위를 결정합니다. ( https://ko.wikipedia.org/wiki/SEO 참조)

- 스크린 리더기는 시각 장애가 있는 사용자가 페이지를 탐색할 수 있도록 돕습니다.

- 시멘틱 마크업을 사용한다면 검색이 훨씬 용이합니다.

- 태그요소에 채울 데이터를 개발자 제안합니다.

- 시맨틱 네이밍은 적절한 맞춤 요소 및 구성 요소 이름을 반영합니다.

---

작은 부분부터 코드가 가진 의미를 실천하자

 마크업을 사용하기 전에 "채울 데이터를 가장 잘 표현하는 요소는 무엇일까?"라고 고민하는 과정을 통해서 시멘틱 웹을 만들 수 있습니다. 표현해야 하는 자료가 데이터 목록인지, 순서가 정해지지는 않았는지, 섹션과 관련 정보를 제외하고있는 글인지, 정의를 나열하는지, 캡션이 필요한 그림이나 이미지인지, 사이트 전체 머리글과 바닥글 외에 따로 머리글과 바닥 글이 있어야하는지 고민하는 일을 통해서 더 나은 시멘틱 웹을 만드는 일을 시작할 수 있습니다.  

아래의 태그들은 모양새를 가졌지만

왼쪽의 태그들은 의미가 없으며, 오른쪽의 태그들은 의미를 지니고 있습니다.

가령, 웹에서 중요한 단어를 표현해야 하는 경우 b태그 대신에 strong 태그를 사용하는 것이 기계와 사람 모두에게 이해하기 쉬운 코드를 작성하는 일이 됩니다.

<b>굵은</b>  vs  <strong>중요한</strong>
<i>기울어진</i> vs <em>강조하는</em>
<u>밑줄친</u>  vs  <ins>새롭게 추가된</ins>
<s>중간선 있는</s> vs <del>삭제된</del>