본문으로 바로가기

HTML5의 시멘틱 태그

category 웹코딩/HTML5 CSS3 2016. 10. 12. 19:58



 

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 &amp; 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
댓글 , 엮인글
Coding Everyday
블로그 이미지 webcooker 님의 블로그
MENU
CATEGORY
VISITOR 오늘 / 전체

티스토리툴바