<p>HTML5에서는 기존의 XHTML보다 <span style="color: #ff0000;">더 의미론적인 구조를 가진 웹 문서를 만들 수 있도록 새로운 태그들이 추가</span>되었다.</p><p> </p><p>웹 문서의 일반적인 구조는 header(머리말), content(내용), footer(꼬리말)의 형식으로 되어 있지만 XHTML에서는 이러한 의미를 가진 태그들이 없었다.</p><p> </p><p><span style="color: #ff0000;">HTML5에서는 이러한 부분을 해결할 수 있는 </span><span style="color: #ff0000;"><header>, <nav>, <section>, <article>, <footer>와 같은 문서 구조에 대한 시맨틱 태그들이 새롭게 추가</span>되어 더욱 의미있는 마크업이 가능해졌다. </p><p> </p><p>※ 왜 시맨틱 태그를 사용해야 하는가?</p><p> </p><p>‘시맨틱(semantic)‘은 ’의미가 통하는‘이란 뜻이다. <span data-ke-size="size16">즉, HTML5에 도입된 시맨틱 태그는 개발자와 브라우저에게 의미있는 태그를 제공하게 된다. </span><span data-ke-size="size16">기존에는 <div> 태그로 영역을 지정하였기 때문에, </span><span data-ke-size="size16">검색엔진이 html 파일을 분석할 때 정확하게 컨텐츠를 식별하기가 힘들었다. </span><span data-ke-size="size16">HTML5에서는 정해진 시맨틱 태그를 사용할 것을 권장한다.</span></p><p> </p><hr data-ke-style="style7"><p> </p><div class="table-wrap"><table data-ke-type="table" data-ke-align="alignLeft" style="width: 100%;" border="1" data-ke-style="style13"><tbody><tr><td style="width: 100%;"><b><header> 태그 | 머리말 지정하기</b></td></tr></tbody></table></div><p><span style="color: #ff0000;"><header> 태그는 특정 부분의 머리말에 해당</span>한다. <span style="color: #ff0000;">문서의 큰 제목이나 내비게이션, 검색 폼 등의 내용들을 포함</span>할 수 있다.</p><p>로고 이미지와 <nav> 태그를 감싸서 사이트 전체의 머리말 부분이 될 수도 있고, 본문 중에 <section> 태그나 <article> 태그의 머리말 부분이 될 수도 있다.</p><p> </p><p><span style="color: #ff0000;">[사용 예]</span></p><p><body></p><p>  <header></p><p>    <h1><a href="index.html"><img src="images/logo.gif" alt="웹 접근성 연구소"></a></h1></p><p>    …</p><p>  </header></p><p>  <section></p><p>    <header></p><p>        …</p><p>    </header></p><p>        …</p><p>  </section></p><p></body></p><p> </p><p> </p><div class="table-wrap"><table data-ke-type="table" data-ke-align="alignLeft" style="width: 100%;" border="1" data-ke-style="style13"><tbody><tr><td style="width: 100%;"><b><nav> 태그 | 문서를 연결하는 주요 내비게이션</b></td></tr></tbody></table></div><p>주로 메인 내비게이션의 의미를 줄 때 사용하며 제목 요소로 시작한다.</p><p><span style="color: #ff0000;"><nav> 태그는 <b>페이지의 주요 내비게이션에 사용</b>해야 한다고 규정</span>하고 있다. <span style="color: #ff0000;">즉, 모든 목록 형태의 링크 그룹에 <nav> 요소를 사용하는 것은 바람직하지 않다.</span></p><p> </p><p>대표적으로 사이트 이용 안내 등의 <footer> 링크 목록을 들 수 있는데, 이러한 링크 목록 콘텐츠의 경우에는 사이트의 주요 내비게이션이라 보기 어려우므로 <nav> 요소를 사용하지 않는 것이 적절하다.</p><p> </p><p><nav> 태그는 위치에 영향을 받지 않기 때문에 <header> 태그나 <footer> 태그 또는 <aside> 태그 안에 포함시킬 수도 있고, 독립해서 사용할 수도 있다. </p><p> </p><p><span style="color: #ff0000;">[사용 예]</span></p><p><body></p><p>  <header></p><p>    <h1><a href="index.html"><<img src="images/logo.gif" alt="웹 접근성 연구소"></a></h1></p><p>    <nav></p><p>      <h2>주 메뉴</h2></p><p>      <ul></p><p>        <li><a href="#">웹 표준</a></li></p><p>        <li><a href="#">웹 접근성</a></li></p><p>        <li><a href="#">묻고 답하기</a></li></p><p>        <li><a href="#">자료실</a></li></p><p>        <li><a href="#">회원가입</a></li></p><p>     </ul></p><p>    </nav></p><p>  </header></p><p></body></p><p> </p><p> </p><div class="table-wrap"><table data-ke-type="table" data-ke-align="alignLeft" style="width: 100%;" border="1" data-ke-style="style13"><tbody><tr><td style="width: 100%;"><b><section> 태그 | 콘텐츠 영역 나타내기</b></td></tr></tbody></table></div><p><span style="color: #ff0000;"><section> 태그는 문서에서 <b>의미가 같은 내용들을 묶어주는 의미적 그룹 요소</b></span>이며, <b><span style="color: #ee2323;">제목 요소로 시작</span></b>한다. 즉, 의미상 내용들을 그룹으로 묶는 것이 가능하고 그 그룹에 제목을 명료하게 명시할 수만 있다면 <section> 태그를 사용하면 된다.</p><p> </p><p>일반적으로 콘텐츠를 장이나 절 등으로 구분하고자 할 경우에 사용하며 <header> 태그나 <footer> 태그와 비교해서 콘텐츠 영역을 구분짓는 용도로 사용한다고 생각하면 큰 문제가 없을 것이다. </p><p> </p><p><span style="color: #ff0000;">[사용 예]</span></p><p><body></p><p>  <section></p><p>    <h1>섹션 요소</h1></p><p>      <section></p><p>        <h2>섹션 요소의 사용</h2></p><p>        <p>섹션 요소는 일반적으로 콘텐츠를 장이나 절 등으로 구분하고자 할 경우나 탭 형식으로 되어 있는 </p><p>              콘텐츠를 마크업할 때 사용한다.</p></p><p>        <p>장이나 절 등으로 구분되기 때문에 반드시 섹션 요소 안에는 제목을 의미하는 요소가 포함되어야 한다.</p></p><p>      </section></p><p>      <section></p><p>        <h2>섹션 요소의 콘텐츠 모델</h2></p><p>        <p>섹션 요소는 섹셔닝 콘텐츠에 속한 요소로 아웃라인에 영향을 준다.</p></p><p>      </section></p><p>  </section></p><p></body></p><p> </p><p> </p><div class="table-wrap"><table data-ke-type="table" data-ke-align="alignLeft" style="width: 100%;" border="1" data-ke-style="style13"><tbody><tr><td style="width: 100%;"><b><article> 태그 | 실제 콘텐츠 내용 넣기</b></td></tr></tbody></table></div><p><span style="color: #ff0000;">신문 기사나 블로그의 글은 문서 내에서 하나의 자립적인 콘텐츠</span>이며 이러한 콘텐츠들은 수정이나 가공없이 <span style="color: #ff0000;">다른 사이트로 배포 또는 재사용할 수 있다</span>는 특징을 가지고 있다. 이처럼 <span style="color: #ff0000;"><b>독립적으로 배포 또는 재사용이 가능한 모든 내용들</b>을 <article> 태그에 포함</span>한다.</p><p> </p><p><article> 태그는 자립적이고 독립적인 배포나 재사용이 가능한 콘텐츠라는 의미에서 <span style="color: #ee2323;"><b>제목 요소를 포함하는 것이 바람직</b></span>하다. </p><p> </p><p><span style="color: #ff0000;">[사용 예]</span></p><p><body></p><p>  <article></p><p>    <h1>책 그리고 커피와 함께한 생일</h1></p><p>    <p>느즈막이 일어난 생일 아침. 요가로 몸을 풀어준 뒤 책 몇 권을 가방에 넣고 가까운 커피 전문점으로 향했다.<br></p><p>          커피는 아 메리카노에 샷 추가로 주문하고 햇살이 따뜻하게 비치는 창가에 자리를 잡고 가지고 온 책을 펼쳤다.</p><p>    </p></p><p>    <article></p><p>      <p>슬비</p></p><p>      <p>생일이셨군요. 늦었지만 축하 드려요. 커피한잔과 책을 읽으며 여유롭고 한가하게 보내신 모습이 부러운데요.<br></p><p>            담 기회에는 함께 커피 마시며 얘기 나눌 수 있으면 좋겠네요.</p></p><p>    </article></p><p>  </article></p><p></body></p><p> </p><p> </p><div class="table-wrap"><table data-ke-type="table" data-ke-align="alignLeft" style="width: 100%;" border="1" data-ke-style="style13"><tbody><tr><td style="width: 100%;"><b><aside> 태그 | 본문 이외의 내용 표시하기</b></td></tr></tbody></table></div><p><aside> 태그는 본문 내용 외에 주변에 표시되는 기타 내용들을 나타낸다.</p><p>흔히 웹 사이트에서 왼쪽이나 오른쪽, 혹은 하단에 표시되는 광고나 링크 같은 사이드 바처럼 주위의 내용들과 관련이 없고 <span style="color: #ff0000;">메인 콘텐츠와 분리할 수 있는 독립적인 요소</span>이다.</p><p> </p><p>즉, <b><span style="color: #ff0000;">삭제되더라도 메인 콘텐츠에 영향을 끼치지 않는 부가적인 콘텐츠</span></b>이므로 <aside> 태그는 필요할 경우에만 사용한다.</p><p> </p><p><span style="color: #ff0000;">[사용 예]</span></p><p><body></p><p>  <section>...</section></p><p>  <aside></p><p>    <h2>국내 추천 여행지 Best5</h2></p><p>    <ul></p><p>      <li><a href="#">보성 녹차밭</a></li></p><p>      <li><a href="#">평창 대관령 목장</a></li></p><p>      <li><a href="#">정읍 내장산 국립공원</a></li></p><p>      <li><a href="#">부안 내소사</a></li></p><p>      <li><a href="#">거제 외도 해상공원</a></li></p><p>    </ul></p><p>  </aside></p><p></body></p><p> </p><p> </p><div class="table-wrap"><table data-ke-type="table" data-ke-align="alignLeft" style="width: 100%;" border="1" data-ke-style="style13"><tbody><tr><td style="width: 100%;"><b><footer> 태그 | 꼬리말 지정하기</b></td></tr></tbody></table></div><p><span style="color: #ff0000;"><footer> 태그는 특정 부분의 꼬리말에 해당</span>한다. </p><p>문서 전체의 꼬리말로 사용될 수도 있고, 경우에 따라 본문 중에 <section> 태그나 <article> 태그의 꼬리말로도 사용이 가능하다. 문서 전체의 꼬리말로 사용될 때는 <span style="color: #ff0000;">작성자나 저작권에 대한 정보, 관련된 문서의 링크를 포함</span>할 수 있다.<span style="color: #000000;"> </span></p><p> </p><p><span style="color: #ff0000;">[사용 예]</span></p><p><body></p><p>  <section></p><p>    …</p><p>    <footer>…</footer></p><p>  </section></p><p>  <footer></p><p>    <address></p><p>      제주 NIA 글로벌센터 : 제주특별자치도 서귀포시 서호중앙로 68-11(697-100) 디지털문화본부</p><p>      | 이메일 : wah@nia.or.kr</p><p>    </address></p><p>    <p class="copyright"><i>Copyright ⓒ 2019 National Information Society Agency</i></p></p><p>  </footer></p><p></body></p><p> </p><hr data-ke-style="style3"><p> </p><div class="table-wrap"><table data-ke-type="table" data-ke-align="alignLeft" style="width: 100%;" border="1" data-ke-style="style4"><tbody><tr><td style="width: 100%;"><b>※ <section> 태그와 <article> 태그를 구분하자 </b><br><br><br>보통 <section> 태그와 <article> 태그가 혼동되는데, <span style="color: #ff0000;"><b><section> 태그는 의미가 같은 내용을 묶어주는 의미적 그룹 요소</b></span>이고 <b><span style="color: #ff0000;"><article> 태그는 배포나 재사용이 가능한 하나의 자립적인 요소</span></b>이다.<br><br><section> 태그는 <section> 태그나 <article> 태그를 포함할 수 있고 <article> 태그 또한 <article> 태그나 <section> 태그를 포함할 수 있다.<br><br>즉, <section> 태그 안에서 자립적이고 배포나 재사용이 가능한 내용들이 모두 같은 의미를 가졌다면 이것은 <article> 태그를 이용하여 그룹화하며, <article> 태그 안에서 의미가 같은 내용들을 그룹화해야 한다면 이것은 <section> 태그를 이용한다.<br><br><div class="figure-img" data-ke-type="image" data-ke-style="alignCenter" data-ke-mobilestyle="widthOrigin"><img src="https://t1.daumcdn.net/cafeattach/1QoDq/a8b11b81b69e52fa58801d5de98d0a506b79cbb3" class="txc-image" data-img-src="https://t1.daumcdn.net/cafeattach/1QoDq/a8b11b81b69e52fa58801d5de98d0a506b79cbb3" data-origin-width="600" data-origin-height="333"></div><div class="figure-img" data-ke-type="image" data-ke-style="alignCenter" data-ke-mobilestyle="widthOrigin"><img src="https://t1.daumcdn.net/cafeattach/1QoDq/8eecd6ec82991d306763bbe6cf66c82ac0ae22be" class="txc-image" data-img-src="https://t1.daumcdn.net/cafeattach/1QoDq/8eecd6ec82991d306763bbe6cf66c82ac0ae22be" data-origin-width="600" data-origin-height="333"></div></td></tr></tbody></table></div><p> </p><p> </p><p> </p><p> </p><p> </p>
<!-- -->
