시멘틱 마크업이란?

 시멘틱 마크업이란?

 

Semantic은 '의미론'이라는 뜻입니다. HTML을 시멘틱하게 마크업한다는 것은 의미론적인 요소를 사용하여 문서를 만든다는 것을 의미합니다. 단순히 div와 span으로 이루어진 문서가 아니라 의미를 가진 태그 요소를 사용해 문서를 만드는 것입니다.  

 

 

 

 

 의미론적인 요소들

 

<article>
의미 : 재사용할 수 있는 구획을 나타냄. 
예제 : 게시판, 블로그 글, 뉴스 기사 등

<aside>
의미 : 문서의 주요 내용과 간접적으로 연관된 부분
예제 : 사이드바, 광고

<details>
의미 : '열림'상태일 때만 내부 정보를 보여주는 위젯
예제 : summary와 함께 쓰임

<summary>
의미 : 디테일 요소의 제목 역할
예제 : details 자식으로 상세요소가 열리기 위한 제목 역할

<figcaption>
의미 : 부모 요소 콘텐츠의 설명, 범례
예제 : 이미지에 대한 설명글

<figure>
의미 : 독립적인 콘텐츠 
예제 : 이미지 등 설명을 위해 figcaption과 사용

<footer>
의미 : 작성자, 저작권 정보, 관련 문서 등의 내용을 담는 푸터
예제 : 사이트 푸터

<header>
의미 : 소개 및 탐색에 도움을 주는 콘텐츠
예제 : 로고, 제목, 검색폼, 작성자 이름 등이 있는 사이트 헤더

<main>
의미 : body의 주요 콘텐츠, 문서의 핵심 주제, 핵심 기능
주의 : hidden 속성을 이용해, 문서에 하나만 존재해야함.즉, 문서에서 유일한 내용이며 반복적이지 않은 콘텐츠

<mark>
의미 : 강조하고 싶은 부분
예제 : 하이라이트

<nav>
의미 : 또 다른 페이지로 이동하는 링크를 보여줌
예제 : 메뉴, 목차, 색인

<section>
의미 : 독립적인 구획을 나타내며, 더 적합한 의미를 가진 요소가 없을 때 사용. 해당 구획이 논리적인 구분을 나타냄
주의 : 단순 스타일링, 일반 컨테이너가 목적이라면 div를 사용할 것

<time>
의미 : 시간의 특정 지점, 구간
예제 : 기계가 읽을 수 있는 형태로 날짜와 시간을 표현할 때 사용

 

 

 

  왜 시멘틱하게 마크업 해야할까요?

 

 - 검색 엔진은 의미론적 마크업을 페이지의 검색 랭킹에 영향을 줄 수 있는 중요한 키워드로 간주합니다.  

 - 시각 장애가 있는 사용자가 화면 판독기로 페이지를 탐색할 때 의미론적 마크업을 푯말로 사용할 수 있습니다.  

 - 가독성 측면에서 의미없고 클래스 이름이 붙여져 있거나 그렇지 않은 끊임없는 div를 탐색하는 것보다, 의미있는 코드블록을 찾는 것이 훨씬 쉽습니다.

 

 

 

 

  마크업 문법 맞는지 확인하는 사이트

 

validator.w3.org

 

 

※ 브라우저는 기본적으로 마크업 문법이 틀려도 알아서 해석해 줍니다. 위 사이트를 이용하면, 조금 더 명확하게 문법을 지킬 수 있습니다.

 

 

 

 정리

 

글을 쓸 때 서론, 본론, 결론을 쓰듯이 마크업 할 때도 의미를 담으면, 개발자도, 리더기도 문서를 이해하기 쉽습니다.

 

 

 

 

 자료 출처

 

[시맨틱 마크업] - developer.mozilla.org/ko/docs/Glossary/Semantics