HTML5 - Semantic Tag - HTML5 텍스트 레벨 시맨틱

From. 반응형 웹디자인

앞서 살펴봤던 구조적 요소 외에도, HTML5에서는 인라인 요소에 사용되는 몇몇 태그의 의미가 변경됐다. HTML5 규격은 이 태그들을 텍스트 레벨 시맨틱(http://dev.w3.org/html5/spec/Overview.html#text-level-semantics)이라고 정의하고 있다.



<b> 요소

종종 <b> 요소를 단순히 스타일링을 위한 연결고리 정도로 사용하고 있지만, 실제로는 볼드체를 의미한다. 그러나 이제 HTML5 규격은 공식적으로 <b> 요소를 다음과 같이 정의한다.

" ... 문서에서의 키워드, 리뷰에서의 제품 이름, 대화형 텍스트 기반 소프드웨어에서의 실행 단어, 기사의 주요 소식과 같이 텍스트의 일부를 별도의 분위기나, 중요성의 전달 없이 단순히 주의를 상기시키는 목적으로 사용.."



<em> 요소

솔직히 <em> 요소 역시 단순히 스타일링을 위해 사용해 왔다. 그러나 HTML5가 다음과 같이 의미를 정의하고 있기 때문에 사용법을 수정해야 할 것 같다.

"콘텐츠를 강조..."

따라서 콘텐츠를 강조하고자 하는 경우가 아니라면, <b> 태그나 <i> 태그를 대신 사용하는 편이 좋다.



<i> 요소

HTML5 규격은 <i>를 다음과 같이 정의하고 있다.

"... 다른 목소리나 분위기의 텍스트를 표시하거나, 텍스트에서 일반적인 문장과 다른 품질이나 텍스트를 표시"

결론적으로 말해서, 단순히 텍스트를 이탤릭체로 만들기 위해 사용하는 것이 아니다.

마트업에 텍스트 레벨 시맨틱 적용하기

홈페이지 메인 콘텐츠 영역의 현재 마크업을 살펴보고 의미를 향상할 수 있는지 알아보자. 현재 마크업은 다음과 같다.

								<!-- the content -->
								<div id="content" role="main">							
									<img class="oscarMain" src="img/oscar.png" alt="atwi_oscar" />
									<h1>Every year when I watch the Oscars I'm annoyed…</h1>
									<p>that films like King Kong, Moulin Rouge and Munich< get the statue whilst the real cinematic heroes lose out. Not very Hollywood is it?</p>
									<p>We’re here to put things right.</p>
								<a href="#">these should have won &raquo;</a>	
								</div>

						

향상할 수 있는 여지가 분명히 있다. 먼저, 헤드라인인 <h1> 태그 안에 있는 <span> 태그는 의미적으로 필요 없다. 따라서 대신 스타일로 문장을 강조해 보자. 수정된 코드는 다음과 같다.

							<h1>Every year <em>when I watch the Oscars I'm annoyed…</em></h1>
						

영화 제목에서 다른 스타일을 적용할 필요가 있다. 그러나 다른 분위기나 표현이 필요한 건 아니므로 여기서는 <b> 태그가 완벽한 후보가 될거 같다(단순히 주의 상기).

							<p>that films like <b>King Kong</b>, <b>Moulin Rouge</b> and <b>Munich</b> get the statue whilst the real cinematic heroes lose out. Not very Hollywood is it?</p>
						

* 텍스트 레벨 시맨틱 요소의 기본 스타일링 *
지금까지 <b> 요소가 사용돼온 방법 때문에, 대부분의 브라우저는 아직도 <b> 요소를 단순히 볼드체로 렌더링한다. 따라서 상황에 따라 해당 CSS의 기본 스타일을 변경할 필요가 있다.

마지막으로, 브라우저가 혼동하지 않도록 'We're here to put things right' 문장을 <bi> 태그로 감싼다. 아마 대신 <em> 태그를 사용해야 한다고 주장할지도 모르겠다. 이 경우에는 그것도 괜찮은 방법이다. 예제에서는 <i> 태그를 사용했다. 결과 코드는 다음과 같다.

							<p><i>We’re here to put things right.</i></p>
						

<b> 태그와 마찬가지로 브라우저는 <i> 태그를 단순히 이탤릭체로 렌더링할 수 있다. 따라서 상황에 따라 기본 스타일을 변결할 필요가 있다.

우리는 마크업에 좀 더 의미를 부여하고자 텍스트 레벨 시맨틱 요소를 몇 개 추가했다. HTML5에는 이 외에도 많은 텍스트 레벨 시맨틱 태그가 존재한다. 전체 목록은 다은 URL을 참고하기 바란다.

http://dev.w3.org/html5/spec/Overview.html#text-level-semantics

약간의 노력을 추가해 사용자에게 더 많은 의미를 제공할 수 있게 됐다.