시멘틱 마크업이란?

Semantic Markup

Semantic Markup은 종종 POSH(Plain Old Semantic HTML)라고도 불리우는데 말 그대로 평범하고 오래된 의미론적인 HTML이라는 뜻입니다.

시멘틱 마크업은 중요하다

HTML은 디자인 요소이고, 기본적인 마크업에 가치를 더 높여 주는 시각적인 효과를 추가하기 전에 잘 구조화된 컨텐츠의 견실한 기초를 다지는 일은 매우 중요할 것입니다.

시멘틱 마크업은 적절한 HTML요소를 올바르게 사용하는 것에서 시작합니다.

예를 하나 들어서, 많은 사람들이 제목을 아래와 같이 마크업을 한다고 가정해 봅니다.

html

<div id="heading" style="font-size: 300%; padding: 10px;">시멘틱 마크업이란?</div>

위의 마크업은 확실히 제목같아 보이지만 의미와 용도면에서 제목으로서의 기능은 없습니다.

이것은 검색엔진의 최적화, 접근성, 그리고 개발면에서 부정적인 효과를 가지고 있습니다.

그러므로 다음과 같이 적절한 시멘틱 요소를 사용하는 것이 더 나을 것이다.

html

<h1>시멘틱 마크업이란?</h1>

시멘틱 마크업은 가능한 가벼워야 합니다.

즉 중첩된 모든 div요소와 실타래 처럼 얽혀 있는 스파게티 코드는 제거되어야 파일 사이즈가 작아지고 코딩이 더 쉬워지는 것입니다.

따라서 HTML, CSS, JavaScript는 각각 분리되어야 한다고 웹전문가들은 주장하고 있습니다.

사소한 분리 작업들이 귀찮다고 그냥 지나치기 보다는 사소하지만 또한 개발 및 유지 보수면에서 상당한 수고를 덜어 줄 수 있는 중요한 부분이 될수 있기에 이에 대해 다시 한번 생각해 보기 바랍니다.

2005년 Andy Clark은 Stuff&Nonsense 사이트에 위의 내용에 대한 글을 게재하였는데 그가 말하고자 하는 요점은 데이터 구조, 스타일 정보, 그리고 스크립트 정보를 각각 분리시켜야 한다는 것이다.

오늘날에도 대부분 그의 생각은 여전히 잘 들어맞고 있습니다.

시멘틱 HTML은 정확하고 접근이 용이한 컨텐츠의 데이타 구조를 형성한다. 바로 HTML5가 이런 부분을 잘 지원하고 있다. 그래서 우리는 어떠한 스크립트를 추가 하지 않고도 가능한 접근이 용이하며 쓸모있게 데이터 구조를 만들어 내야한다.
CSS는 스타일 정보를 제공한다. 즉, 데이터 구조에 우리가 원하는대로 시각적인 효과를 더해 주는 것이다. CSS3는 이전의 CSS2보다 더 강력한 툴이다.
HTML5와 그 외 다른 것에 정의되어진 스크립팅 APIs와 베이스언어를 포함한 자바스크립트는 우리가 제작하는 사이트에 풍부한 기능과 유용성의 증대를 더해 주는 스크립팅을 제공한다.

Jaehee's WebClub

Web Club