<!DOCTYPE html>
<html>
<head>
<title>HTML5 - <hgroup> element 테스트</title>
</head>
<body>
<h1>장원준 "개막전 선발 욕심 있다"</h1>
<h2>日롯데 2군에 5이닝 무실점</h2>
<p>롯데 자이언츠가 일본 지바롯데 마린스 2군과의 연습경기에서 대승을 거뒀다.</p>
<hgroup>
<h1>장원준 "개막전 선발 욕심 있다"</h1>
<h2>日롯데 2군에 5이닝 무실점</h2>
</hgroup>
<p>롯데 자이언츠가 일본 지바롯데 마린스 2군과의 연습경기에서 대승을 거뒀다. </p>
</body>
</html>
<html>
<head>
<title>HTML5 - <hgroup> element 테스트</title>
</head>
<body>
<h1>장원준 "개막전 선발 욕심 있다"</h1>
<h2>日롯데 2군에 5이닝 무실점</h2>
<p>롯데 자이언츠가 일본 지바롯데 마린스 2군과의 연습경기에서 대승을 거뒀다.</p>
<hgroup>
<h1>장원준 "개막전 선발 욕심 있다"</h1>
<h2>日롯데 2군에 5이닝 무실점</h2>
</hgroup>
<p>롯데 자이언츠가 일본 지바롯데 마린스 2군과의 연습경기에서 대승을 거뒀다. </p>
</body>
</html>
결과 화면은 아래와 같다. (결과링크)
사용자에게 보여주는 화면은 <hgroup> 요소를 사용하나 사용하지 않으나 동일함을 알 수 있다. 하지만 HTML5에는 시멘틱 개념이 도입되었고, 이러한 관점에서는 두 소스 코드는 다른 의미를 가진다.
각각의 컨텐츠를 도식화 해 보면 다음과 같다.
첫번째 소스 코드에서는 <h2> 요소는 <h1> 요소의 '하위' 항목이 되고 <p> 요소는 <h2>요소에 대한 설명으로 인식된다.
두번째 소스 코드에서는 <h2> 요소는 <h1> 요소의 '부가' 항목이 되고 <p> 요소는 <h1>, <h2>요소에 대한 설명으로 인식된다.
만약 검색 엔진 등 기계적으로 본문에 대한 주제나 요약을 찾을 경우,
첫번째 소스코드에서는 <h2> 요소가 <p> 요소를 대표하게 되고,
두번째 소스코드에서는 <h1>, <h2>요소가 모두 <p> 요소를 대표하게 되는데,
<h1>, <h2> 중 다시 하나를 선별한다면 <h1> 요소가 <p>요소를 대표하게 된다.
'IT > Web Dev' 카테고리의 다른 글
| [펌/번역] "Mobifying" Your HTML5 Site (0) | 2011.03.10 |
|---|---|
| [펌/번역] "Mobifying" Your HTML5 Site (0) | 2011.03.09 |
| HTML5에서 <hgroup> 요소의 의미 (0) | 2011.02.23 |
| [펌/번역] Intelligent Site Structure for better SEO (0) | 2011.02.21 |
| HTML5의 시맨틱 태그(Semantic tag)가 가지는 의미 (3) | 2011.02.18 |
| [WebKit] 웹킷(WebKit) 개발 환경 구축하기 (0) | 2011.02.11 |
댓글을 달아 주세요