HTML이 가지는 의미 : 시맨틱태그

시맨틱태그

semantic : 의미의, 의미론적인

시맨틱 태그는 의미를 부여한 html 태그이다.

 

HTML 요소들은 의도된 목적이 있다.

예를들면 <header />, <footer />는 상단과 하단이다.

검색엔진은 HTML내의 태그를 분석하여 페이지의 구조와 내용을 파악하기 때문에, HTML을 작성할때는 각 태그들의 의도된 목적에 맞게 작성하는 것이 좋다. 예를들면 검색엔진은 <article /> 태그가 사용된 콘텐츠를 재배포할 수 있는(퍼가요) 콘텐츠로 인식하고 <section /> 태그로 묶은 콘텐츠는 재배포를 금지하는 콘텐츠로 인식한다.

 

HTML태그의 특징을 통해 스타일을 작성하면 안된다.

예를들면 글씨크기를 크게하고 싶어서 h1태그를 사용하면 안되는 것이다.

h1태그는 페이지를 나타내는 대표문장이고 검색엔진은 h1태그를 통해 페이지를 파악한다.

그래서 h1태그는 각 페이지에 1개만 있어야 한다.

 

반면 아래처럼 h1과 똑같은 스타일의 span태그를 만들었을때, 검색엔진이 파악하는 의미적가치(semantic value)는 없다.

<span style="font-size: 32px; margin: 21px 0;">Is this a top level heading?</span>

 

HTML은 채워질 데이터를 나타내도록 작성해야 한다. HTML을 통해 스타일을 의도해선 안된다.

스타일(어떻게 보여져야 하는가)는 CSS의 역할이다.

 

semantic의미가 없이 스타일의 역할만 하는 태그들

위에서 html을 작성할때는 html태그들의 의미에 맞게 작성해야 한다고 했지만, 의미가 없이 스타일만 의도하는 태그들도 있다.

 

• <em />은 강조를 뜻하는 이탤릭체이다. 강조의 의미가 없이 이탤릭채만을 위해 <em />을 사용하면 안된다. 만약 강조를 뜻하지 않는 단순 이탤릭체를 원하면 <i />를 사용하라.
• <strong />역시 중요함을 뜻하는 bold체이다. 만약 중요함을 뜻하지 않고 단순 bold체를 원한다면 <b />를 사용하라.
• <br />을 줄간격 조정을 위해 사용하지 마라. 시(poem)처럼 line break가 내용의 일부일때 사용하라. 줄간격 조정을 하고 싶다면 읨의미론적으로 텍스트를 뜻하는 <p/>에 CSS의 line-height를 사용하라.

---

참고

구글스타일 html, semantic tagging

mdn Sematics

시맨틱태그란 무엇일까