시멘틱 마크업

시멘틱은 의미론적이란 뜻이다. 즉, 시멘틱 마크업이란 의미론적인 마크업이라는 말이다.

브라우저(컴퓨터)가 잘 이해할 수 있는 코드라는 뜻이다.

 

의미에 맞는 요소를 사용하고 문서의 구조화를 잘 하여 인간과 기계가 모두 이해할 수 있는 코드를 짜야한다는 것이다.

 

 

1. 의미에 맞는 태그 사용

 

아래는 화면으로 보기엔 같은 모습으로 표현되나 단순 표현용 태그와 의미를 가지는 태그로 차이가 있는 몇가지 태그들이다.

<b>굵은</b> vs <strong>중요한</strong>
<u>밑줄친</u> vs <ins>새롭게 추가된</ins>
<s>중간선이 있는</s> vs <del>삭제된</del>

 

예를 들어 <b>태그와 <strong> 태그는 보기엔 굵은 글자로 같은 효과를 주는 것처럼 보이지만,

<b>태그는 그저 굵은 글씨를 만들어주는 태그이고,  <strong>태그는 중요한 글자를 나타내는 태그이다.

<strong>태그도 보기엔 그저 <b>태그처럼 굵은 글자로 표현되지만, 브라우저에서는 해당 부분이 중요한 글자임을 나타내기 위해서 굵게 표현해주는 것이란 차이가 있다. 또한, 코드를 직접 보는 사람의 입장에서도 해당 부분이 중요한 부분임을 알아차리기 쉽다.

 

시멘틱 마크업을 하기 위해서는 가능한 <b>태그와 같은 표현만을 위한 태그가 아닌, <strong>과 같은 컨텐츠가 가진 의미를 나타내는 태그를 사용하여야 한다.

 

 

2. 올바른 마크업 구조 설계

 

웹 페이지의 올바른 정보 구조는 섹셔닝(Sectioning), 헤딩(Heading), 섹셔닝루츠(Sectioning Roots) 요소들로 구성된다.

Sectioning에는 article, aside, nav, section 이 4가지 태그들이 속해 있다.

Heading에는 h1, h2, h3, h4, h5, h6 이렇게 각 섹션의 머리말을 정의하는 태그들이 있다.

Sectioning Roots에는 body, blockquote, details, fieldset, figure, td 태그들이 있다. 이 Section Roots에 속하는 태그들의 하위에 있는 내용은 정보 구조에 포함되지 않는다. Sectioning Roots는 별개의 새로운 문서로 취급하기 때문이다.

 

만약 섹셔닝 요소를 사용하였다면, 그 안에 헤딩 요소를 넣어 이름을 만들어 주어야 한다.

한 섹션 안에 헤딩이 여러개라면 헤딩이 섹션을 만든다.

헤딩 요소들은 h1부터 순차적으로 사용해야 하는데, 섹션이 새로 만들어지면, h1부터 새로 시작할 수 있다.

body태그 안에 섹션을 만들었는데, body에 헤딩이 없다면, 이 문서는 제목이 없는 문서가 된다. body태그도 섹셔닝루츠에 포함되므로, 별개의 새로운 문서이므로 헤딩이 필요하다.

 

 

* HTML5 Outliner를 검색해서, HTML5 웹표준에 맞는 구조를 짤 수 있도록 도와주는 사이트를 찾을 수 있다. - 이동하기

브라우저 확장 프로그램으로도 있다. 이름도 같다. 설치하면 시멘틱 마크업을 하는데 유용하게 쓸 수 있다.

 

 

 

출처)

edwith 부스트코스 웹 UI 개발 - 시멘틱 마크업

2014 제 3회 널리 세미나 - 08. 시멘틱고한 HTML5 마크업 구조 설계, 어떻게 할까?