웹 페이지를 만들 때 섹션(section, 구획)을 나눠야 한다.
예를 들면
네이버의 모바일 화면을 살펴보자.
네이버가 검색엔진이다 보니,
검색을 하는 부분이 가장 중요해 '검색어를 입력해주세요'를 가장 우선적으로 두었고,
맨 아래에 이용약관, 개인정보처리방침, 고객센터 등
사용자가 잘 이용하지 않는 부분은 맨아래(footer)로 작게 두었다.
우선순위에 따라 콘텐츠들을 다르게 배치하였고
해당 콘텐츠 요소들마다 섹션(section)이 나눠진 것을 볼 수 있다 !
네이버의 화면을 HTML 태그로 단순하게 표현을 하면
아래와 같이 나타낼 수가 있다.
영어로 적힌 부분은 HTML에서 사용할 수 있는 '태그(tag)'이다.
콘텐츠들의 섹션(section)을 나누는 태그(tag)들에 대해서 알아보도록 하겠다.
<header></header>
제목, 로고, 검색 폼, 작성자 이름 등을 나타낼 때 사용하며
소개 및 탐색에 도움을 주는 콘텐츠를 구분한다.
<article>
<header>
<h2>The Planet Earth</h2>
<p>Posted on Wednesday, <time datetime="2017-10-04">4 October 2017</time> by Jane Smith</p>
</header>
<p>We live on a planet that's blue and green, with so many things still unseen.</p>
<p><a href="https://janesmith.com/the-planet-earth/">Continue reading....</a></p>
</article>
<footer></footer>
작성자, 저작권 정보, 관련 문서 등을 나타낼 때 사용하며
기본적으로 가장 아래에 나타낸다.
<article>
<h1>How to be a wizard</h1>
<ol>
<li>Grow a long, majestic beard.</li>
<li>Wear a tall, pointed hat.</li>
<li>Have I mentioned the beard?</li>
</ol>
<footer>
<p>© 2018 Gandalf</p>
</footer>
</article>
<article></article>
게시판, 블로그 글, 잡지와 같은 매거진, 뉴스 기사를 나타낼 때 사용한다.
<article class="forecast">
<h1>Weather forecast for Seattle</h1>
<article class="day-forecast">
<h2>03 March 2018</h2>
<p>Rain.</p>
</article>
<article class="day-forecast">
<h2>04 March 2018</h2>
<p>Periods of rain.</p>
</article>
<article class="day-forecast">
<h2>05 March 2018</h2>
<p>Heavy rain.</p>
</article>
</article>
<address></address>
사람, 단체, 조직 등에 대한 연락처 정보를 나타낼 때 구분짓는 태그이다.
물리적 주소나 URL, 이메일 주소, 전화번호, SNS 식별자, 좌표 등 어떤 정보든지 올 수 있다.
<p>연락처 정보를 나타낼 때 구분하는 태그</p>
<address>
<a href="hwan@naver.com">hwanE@naver.com</a><br>
<a href="tel:+1012345678">(+82) 010-1234-5678</a>
</address>
<aside></aside>
문서의 주요 내용과 간접적으로 연관되어 있는 부분을 나타낼 때 사용한다.
주로 사이드바 혹은 콜아웃 박스로 표현한다.
<article>
<p>
디즈니 만화영화 <em>인어 공주</em>는
1989년 처음 개봉했습니다.
</p>
<aside>
인어 공주는 첫 개봉 당시 8700만불의 흥행을 기록했습니다.
</aside>
<p>
영화에 대한 정보...
</p>
</article>
<nav></nav>
메뉴, 목차, 색인(index)를 나타낼 때 사용한다.
현재 페이지 또는 다른 페이지로의 링크를 보여주는 섹션을 나타낸다.
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<section></section>
콘텐츠를 강조하고, 독립적으로 나눌 때 사용한다. 잘 사용하진 않는다.
<h1>Choosing an Apple</h1>
<section>
<h2>Introduction</h2>
<p>This document provides a guide to help with the important task of choosing the correct Apple.</p>
</section>
<section>
<h2>Criteria</h2>
<p>There are many different criteria to be considered when choosing an Apple — size, color, firmness, sweetness, tartness...</p>
</section>
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
제목을 나타내거나 중요한 내용을 강조할 때 사용한다.
폰트의 크기와 굵기가 달라진다. h1이 가장 크고, h6이 가장 작다.
<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>
왜 이러한 태그들을 사용하는 것일까?
태그의 이름만 봐도 어떤 콘텐츠인지 짐작을 할 수 있다.
웹개발자가 콘텐츠들을 섹션 태그들에 넣어서 웹 페이지를 만들게 되면
다른 사람들이 봐도, '아하 이 태그 안에 콘텐츠가 들어갔으니 이것은 중요한 내용이구나!'
이런 짐작이 가능하다는 것이다.
또한
해당 태그들로 콘텐츠에 대한 큰 틀을 잡을 수 있다.
섹션을 구분하는 태그들로 큰 틀을 잡아놓고,
해당 태그 안에 들어갈 콘텐츠를 생각하면 쉽게 떠올릴 수 있지 않은가!!
출처 : mozilla
댓글