Sections
<body>
- 실제 사용자에게 보여지는 문서의 컨텐츠를 나타내는 요소입니다.
<article>
- 독립적으로 구분하거나 재사용할 수 있는 구획을 나타냅니다.
<section>
- 일반적으로 연관성 있는 문서의 구획을 나누고자 할 때 사용하는 요소입니다.
section vs article
- article 요소는 독립적 콘텐츠(다른 서비스에 가져다 놔도 이상하지 않음)
- section 요소는 사이트 내 연관 콘텐츠(다른 서비스에 가져다 놓으면 이상함)
- article과 section 요소는 heading 요소와 함께 사용하는 것을 권장(높이 없이 비워두기도 함)
<header>
- 특정한 컨텐츠의 시작 부분을 나타내는 요소입니다. 일반적으로 구역의 제목을 포함합니다.
- 네비게이션과 관련된 내용이 들어감
<h1> … <h6>
- heading은 제목을 지정하기 위해 사용됩니다.
<h1>내용</h1> ~ <h6>내용</h6>까지 중요도에 따라 사용되며 단순히 글자를 크게하거나 굵게 하기 위해 사용하지는 않습니다.<h1>요소는 페이지당 한 번만 사용할 것을 권장합니다.- heading 요소를 사용하면 익명 영역(anonymous section)을 생성합니다.
- living standard에 sections에 해당 태그가 들어가 있으나, 이해를 돕기 위해 글자 태그로 그룹핑 했습니다.
<h1>hello world</h1> <h2>hello world</h2> <h3>hello world</h3> <h4>hello world</h4> <h5>hello world</h5> <h6>hello world</h6>
다음과 같이 hgroup으로 대제목과 소제목을 나눌 수 있습니다.
<section> <hgroup> <h1>제목</h1> <h2>소제목</h2> </hgroup> <p>풀밭에 같지 전인 노년에게서 청춘의 방지하는 수 봄바람을 품고 칼이다.</p> </section>
- heading 요소들은 아래와 같이 사용자로 하여금 페이지의 계층구조를 쉽게 파악할 수 있도록 합니다. 그렇기 때문에 특별한 이유 없이 heading 레벨을 갑자기 몇 단계 뛰어넘도록 작성하는 것은 지양해야 합니다.
<nav>
- nav(네비게이션, 탐색) 요소는 보통 메뉴에 사용됩니다.
<nav>
<a href="https://paullab.co.kr">바울랩</a>
<a href="https://naver.com">네이버</a>
<a href="https://google.com">구글</a>
</nav><aside>
- 꼭 오른쪽일 필요는 없습니다. 다른 요소도 마찬가지에요.
- 해당 콘텐츠와는 별개 콘텐츠
- 보통 사이드바 혹은 광고 영역으로 활용
<footer>
- footer 요소가 속한 가장 가까운 구획의 작성자 정보, 저작권, 관련된 링크 등의 내용을 담는 구획 요소입니다.
<address>
- 가장 가까운 부모
article이나body요소의 연락처 정보를 나타냅니다. 만약 가장 가까운 부모 요소가body라면 문서 전체의 연락처 정보를 의미합니다. 연락처 정보에는 전화번호, 메일 주소, 우편 주소 등이 있습니다.
Web FrontEnd Developer