1) HTML5의 시멘틱 태그들
HTML5에서 두드러지는 특징 중 하나는 시멘틱 태그들이 도입되었다는 것입니다. 이런 시멘틱 태그를 사용해 웹 문서 구조를 만들게 되면 문서를 이해하기도 쉽고, 유지 보수하기도 훨씬 쉬워집니다.
머리글 부분 지정 - <header> 태그
<header> 태그는 말 그대로 머리글(header)에 해당됩니다. 즉, 사이트 전체의 머리글이 될 수도 있고, 블로그 포스트의 머리글이 될 수도 있습니다.
사이트 전체의 대한 머리글일 경우 <header> 태그 안에서 <h1>에서 <h6>까지의 태그를 사용해 사이트 제목으로 사용할 수도 있고 <img> 태그를 사용해 사이트 로고를 삽입하기도 합니다. 또한 <header> 안에 <form> 태그를 사용해서 검색 창을 삽입하거나 사이트 메인 메뉴를 삽입할 수도 있습니다. 사이트 전체의 머리글일 경우 주로 사이트 상단이나 왼쪽에 배치합니다.
본문에 사용된 <header>의 경우엔 본문의 머리글이기 때문에 <h1>에서 <h6>까지의 태그를 사용해 본문 내용 중 제목과 부제목을 표시하는 경우가 많습니다.
<h1> 태그를 사이트 제목으로 사용하는 사이트 전체의 header
|
<header id="mainHeader"> <nav>menu</nav> <h1>HTML5</h1> </header> |
제목과 부제목의 묶음 - <hgroup> 태그
<hgroup> 태그는 제목과 그와 관련된 부제목을 묶어주는 것입니다. <header> 태그를 이용해서 제목과 부제목을 그 안에 넣을 수 있는데 왜 <hgroup> 태그를 사용하여 제목과 부제목을 하나로 묶어주는 것일까요?
<header> 태그는 페이지를 구성하기 위한 구분 단위입니다. 여기서부터 여기까지 머리글이고, 여기는 본문, 여기는 메뉴... 식으로 페이지 내용에 따라 구성을 나누기 위한 요소인 것이지요. 그에 비해 <hgroup> 태그는 웹 페이지 구조를 좀더 간단히 조직하기 위해 필요한 태그입니다. 즉, 제목과 부제목을 <hgroup>으로 묶게 되면 웹 페이지 전체 구조를 만들 때 문서에서 중요한 뼈대가 어떤 것인지를 쉽게 알 수 있고 그만큼 문서를 빠르고 정확하게 조직할 수 있습니다.
|
<!DOCTYPE HTML> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8" /> <title>h2 태그를 본문 제목으로 사용하는 header</title> <style type="text/css"> body, section, header { font-family: Verdana, Geneva, sans-serif; } </style> </head> <body> <section id="about_us"> <header> <h2>About Us</h2> <nav>...</nav> </header>
<section class="content"> <div> <header> <p class="section-intro">Prior ...</p> </header> </div> </section>
<section id="out_people" class="alt"> <header> <h2>Our People</h2> <nav>...</nav> </header> </section>
<section class="content"> <article id="alastair-grigor" class="current"> <figure><img src="images/banner.jpg"></figure> <header> <h2>Alastair Grigor</h2> <p class="position">BA LLB</p> </header> <section class="content"> <p>Alastair has ...</p> </section> </article> </section> </section> </body> </html> |
<header>
<nav>
...
</nav>
<hgroup>
<h1>MiniApps</h1>
<h2>HTML5 apps for iPhone, iPad, Android & other mobile platform</h2>
</hgroup>
</header>
내비게이션 링크 표현 - <nav> 태그
<nav> 태그는 문서 안에서, 혹은 다른 문서로 링크하기 위한 내비게이션 링크를 표현합니다. HTML이나 XHTML로 웹 문서를 만들 때는 별도의 <div> 태그를 이용해 ‘nav’나 ‘menu’ 등 특별한 ID를 지정해 주어야 했지만 HTML5에서는 <nav> 태그가 있기 때문에 이 요소를 사용하면 어느 부분이 내비게이션인지를 손쉽게 알 수 있습니다. <nav> 태그는 <header>나 <footer> 또는 <aside> 태그 안에 포함시킬 수도 있고 독립해서 사용할 수도 있습니다. 즉, 위치에 영향을 받지 않습니다.
문서 안에 여러 개의 <nav> 태그를 사용할 경우 따로 ID를 지정해 주어 스타일시트에서 그 스타일을 지정하면 됩니다.
일반적으로 <nav> 태그가 <header> 태그 안에 포함되어 있습니다. 따라서 <header> 태그 위치를 옮기게 되면 <header>안에 메인 위치도 옮겨지게 될 것입니다.
|
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>header 안에 포함된 nav 노드</title> <style type="text/css"> body { margin: 20px; } img { border: 0; } a { text-decoration: none; color: #666; } header, nav { /* HTML5 tag */ display: block; } nav { font-family: Verdana, Geneva, sans-serif; font-size: 0.8em; color: #09f; } nav ul { margin: 0; padding: 0; list-style: none; } nav ul li { float: left; width: 120px; height: 50px; line-height: 50px; text-align: center; border-right: 1px solid #eaeaea; } nav ul li a:hover { text-decoration: underline; } </style> </head>
<body> <header> <a href="#none"><img src="images/pic1.jpg" alt="picture" /></a><br /><br /> <nav> <ul> <li><a href="#none" title="homepage">Homepage</a></li> <li><a href="#none" title="What we do">nav tag</a></li> </ul> </nav> </header> </body> </html> |
웹상의 실제 내용 - <article> 태그
article이라는 단어의 사전적인 의미가 신문 또는 잡지의 '기사(記事)'인 것처럼 <article> 태그 역시 웹 상의 실제 내용을 말합니다. 그리고 신문기사가 여기저기에 인용될 수 있는 것처럼 <article> 태그를 사용한 콘텐츠는 웹에서 다른 곳으로 배포되거나 재사용될 수 있습니다. 보통 블로그의 포스트나 웹 사이트의 내용, 사용자가 등록한 코멘트, 웹 콘텐츠의 독립적인 항목 등이 모두 여기에 해당될 수 있습니다.
웹 콘텐츠를 자동 검색하는 로봇에서는 <article> 태그가 사용된 콘텐츠를 발견하면 배포 가능한 콘텐츠라는 것을 쉽게 알아낼 수 있게 됩니다.
아래 사이트는 <article> 태그를 이용해 포스트 내용을 표시하고 있습니다. 좀 더 구체적으로 살펴보면 포스트 제목을 표시하는 <h3> 태그와 포스트 작성 시간을 표시하는 <time> 태그, 그리고 포스트 내용을 표시하는 <p> 태그로 구성되어 있습니다.
콘텐츠를 그룹으로 묶어주는 - <section> 태그
책에서 소제목을 붙여놓은 단락을 섹션(section) 또는 절이라고 하는데, HTML5에서도 제목을 붙여서 콘텐츠 그룹을 묶는 것을 <section> 태그라고 합니다. 웹 사이트의 시작 페이지라면 '사이트 소개'나 '뉴스', '연락 정보' 등을 섹션으로 나눌 수도 있고, 여러 탭으로 이루어진 뉴스 페이지라면 하나의 탭을 하나의 섹션으로 할 수도 있습니다.
또한 <section> 태그는 웹에서 재배포되어서는 안 될 콘텐츠를 지정할 때도 사용합니다. 하지만 단순히 콘텐츠를 묶기 위해 <section> 태그를 사용하는 것은 바람직하지 않습니다. 스타일을 적용하거나 스크립트를 사용하기 위해 콘텐츠 중 일부를 묶고 싶다면 <div> 태그를 사용하면 됩니다.
아래는 명확하게 구별되는 내용을 그룹으로 묶는 <section> 태그의 예입니다.
|
<section class="wrapper"> <header>section tag</header> </section> |
<section> 태그로 절을 나눈 후 그 안에 <article> 태그를 넣거나 또 다른 <section> 태그를 넣을 수도 있습니다.
본문을 표시하는 남는 내용 - <aside> 태그
블로그를 이용하다 보면 실제 블로그 포스트를 표시하는 부분 외에 왼쪽이나 오른쪽 기타 내용들을 표시되는 부분이 있습니다. 흔히 '사이드 바'라고 부르는 이런 부분을 표시하는 요소가 <aside> 태그입니다. 사이드 바는 필수 요소가 아니기 때문에 필요하지 않은 경우에는 화면에 표시하지 않아도 됩니다.
제작자 정보나 저작권 정보 - <footer> 태그
HTML에서는 웹 사이트의 저작권 정보나 사이트 제작자 정보를 표시하기 위해서 <div id="footer"> 또는 <div id="copyright"> 같은 별도의 영역을 만들고 거기에 필요한 정보를 입력했습니다. 하지만 HTML5에서는 간단하게 <footer> 태그에 내용만 입력하면 됩니다.
<footer> 태그는 그 안에 다른 어떤 요소도 포함할 수 있습니다.
아래 사이트는 <footer> 태그 안에 <address> 태그를 사용하여 저작권 정보를 표시하고 있습니다.
저작권 정보를 표시하는 <footer> 태그
|
<footer> <address>Copyright (C) MRI.inc All Right Reserved.</address> </footer> |
'웹코딩 > HTML5 CSS3' 카테고리의 다른 글
| HTML5 비디오 요소 (0) | 2016.10.12 |
|---|---|
| HTM5에 새로 추가된 주요 태그들 (0) | 2016.10.12 |
| HTML5의 새 요소 (0) | 2016.10.12 |
| 둥근 모서리 (0) | 2016.09.17 |
| 텍스트 에디터 (0) | 2016.09.16 |
