웹문서의 본문을 구성하는 요소들중에 SECTION을 구성하는 요소에 대하여 알아보자.
✅ BODY 요소
<body> 요소는 문서의 본문 영역을 표시한다. 본문 영역은 실제 콘텐츠가 표현되는 공간이며, 이 공간에서 사용자와의 상호작용이 실질적으로 이루어진다. 또한 body 요소는 브라우저가 렌더링해야 할 범위를 알려준다.
✅ HEADER 요소
HTML5에 새롭게 추가된 요소로서, 웹 문서 맨 윗부분에 있으며 웹 사이트 이름, 글로벌 링크(로그인, 회원가입, 사이트맵, 언어 선택등 웹사이트 어느 곳에서든지 이용할 수 있는 링크)등으로 구성된 영역이다.
<header>
<h1>LOGO</h1>
<h2>검색</h2>
<input type="text">
</header>- 사이트 이름(로고), 내비게이션, 헤드라인, 검색 등으로 구성된다.
- 과거에는 <div id="header">와 같이 사용했었다.
- 문서나 각 section, article 의 헤더 부분에 사용가능하며, 그것들의 제목이나 간단한 소개 콘텐츠를 담을 수 있다.
- 브라우저가 헤더영역을 인식할 수 있게되면 스크린리더의 내비게이션과 검색엔진의 색인에 도움을 줄 수 있다.
✅NAV 요소
HTML5에 새롭게 추가된 요소로서, 목적지로 이동할 수 있도록 링크를 별도로 모아둔 영역이다.
<nav>
<h1>메인 내비게이션</h1>
<ul>
<li>메뉴1</li>
<li>메뉴2</li>
</ul>
</nav>- 링크 중에서 중요도가 높은 링크를 체계적으로 구성해 놓은 것으로 단순 본문 링크와 메뉴(카테고리) 성격의 링크인지 확인이 가능하다.
- ul, li, a 요소들을 여전히 함께 사용해야 한다.
- 브라우저가 네비게이션 영역을 알 수 있게 되면 스크린리더의 내비게이션과 검색엔진의 색인에도 도움을 줄 수 있다.
✅ SECTION 요소
HTML5에 새롭게 추가된 요소로서, 섹션을 표시한다.
<section>
<article>
<h1>제목</h1>
<p>본문</p>
</article>
</section>- 내용적 흐름과 구조를 만들기 위해 내용을 나누는 용도이다.
- 같은 성격의 내용, 즉 관련있는 내용을 section 요소로 묶어 표시한다.
- 뉴스와 광고 섹션 처럼 서로 다른 성격을 지닌 것들을 section 요소로 표시하면 영역 구분이 아주 명확해진다.
- 탭과 같은 상위 주제 아래에 하위 주제로 엮인 탭 방식의 구성일때 각각의 탭을 section 요소로 표시할 수 있다.
- 섹션은 독립적인 영역이라 섹션 내에도 헤더(header)와 푸터(footer)를 둘 수 있다. 이것은 섹션마다 나름의 제목 체계를 가질 수 있다는 것을 의미하며, 섹션마다 H1 요소를 가질 수 있게 되었다.
- 스크린리더 사용자는 섹션 단위로 이동할 수 있으므로 문서 내 내비게이션이 좀 더 수월해지고 검색엔진은 특정 섹션 중심으로 색인 활동을 할 수 있으므로 검색엔진의 효율성을 높일 수 있다.
✅ ARTICLE 요소
HTML5에 새롭게 추가된 요소로서, 독립적으로 구성된 글을 표시한다.
<article>
<header>
<h1>HTML5 구조</h1>
<p>Published On <time datetime="2013-01-22">2013년1월22일</time></p>
</header>
<p>본문 내용</p>
<footer>Posted in unclepapa</footer>
<article> <!-- 코멘트 시작 -->
<header>
작성자:<a href="">나그네</a> at <time datetime="2013-01-22T08:45">2013년1월22일 08:45</time>
</header>
<p>코멘트 내용</p>
</article> <!-- 코멘트 끝 -->
</article>- 본문과 별개로 구성되어 다른 영역에 영향을 주거나 받지 않고 독립적으로 배포되거나 재사용할 수 있다.
- 게시판의 게시물, 블로그 포스트, 댓글, 위젯에 담긴 콘텐츠등이 article에 해당한다.
- 일반적인 상황에서는 section 요소가 article 요소를 포함한다. 하지만 독립적으로 구성된 내용이 몇 개의 섹션으로 구성된 경우라면 article 요소가 section 요소를 포함할 수도 있다.
- section 요소가 관련 있는 내용을 묶는 역할이라면 article 요소는 관련 있는 내용 중에서 독립적으로 구성된 글을 별도로 묶는 역할이다.
- article 영역 내에 헤더(header)와 푸터(footer)를 둘 수 있다.
- article 요소안에 article 요소가 들어갈 경우, 밖의 요소의 내용과 안쪽의 요소의 내용이 관련이 있는 내용이라는 것을 의미한다.
✅ MAIN 요소
HTML5 권고후보에 main요소가 추가되었다.
<main>
<h1>Apples</h1>
<p>The apple is the pomaceous fruit of the apple tree.</p>
<article>
<h2>Red Delicious</h2>
<p>These bright red apples are the most common found in many
supermarkets.</p>
<p>... </p>
<p>... </p>
</article>
<article>
<h2>Granny Smith</h2>
<p>These juicy, green apples make a great filling for
apple pies.</p>
<p>... </p>
<p>... </p>
</article>
</main>- 문서내 main요소가 나오는 것은 1번만 허용
- 콘텐츠모델은 Flow content
- 단, main요소를 article, aside, footer, header, nav요소의 하위로 사용하지 않음
- 섹션 콘텐츠가 아니기 때문에 아웃라인 생성하지 않음
main 요소는 ARIA(Accessible Rich Internet Applicaitons)의 role=”main”에 매핑되지만, 사용자에이전트가 이 매핑을 포함할 때까지는 main요소와 role=”main”을 같이 사용하는 것을 추천하고 있다.
✅ ASIDE 요소
HTML5에 새롭게 추가된 요소로서, 페이지 전체 내용과는 어느정도 관련성이 있지만 주요 내용과는 직접적인 연관성은 없는 분리된 내용을 담고 있다.
<aside>
<section>
<h3>최근글</h1>
<ul>
<li>목록1</li>
<li>목록2</li>
</ul>
</section>
</aside>- 흔히 사이드바라고 부르는 영역으로 배너, 용어 설명, 관련 상품 등 본문 내용과 직접적인 관련성이 적거나 없는 내용으로 구성된다.
- aside 요소로 구성된 것을 검색엔진은 무시하고 본문 위주로 색인을 진행할 수 있고 스크린리더 사용자는 해당 영역이 어떤 성격의 영역인지 신속하게 파악할 수 있으므로 곧바로 다른 영역으로 이동할 수도 있다.
✅ FOOTER 요소
HTML5에 새롭게 추가된 요소로서, 웹 문서 맨 아래쪽에 있으며 저작권, 연락처등으로 구성된 영역이다.
<footer>
<address>
연락처 : <a href="mailto:webmaster@somedomain.com">help@example.com</a>.<br>
모질라 재단, 1981 Landings Drive Building K Mountain View, CA 94043-0801 USA
</address>
<small>Copyright © 2013 Mozila</small>
</footer>- 푸터는 바닥 영역 또는 꼬리말을 지칭하는데, 저작권, 연락정보 등 본문과의 관련성은 있지만 본문에는 담기 어려운 내용을 담는다.
- 일반적으로 푸터 영역은 한 문서 내에서 한 번만 제공되지만 section 요소나 article 요소 내에 있는 footer 요소는 해당 영역에 관한 꼬리말을 표시할 수 있다.
- 맨위로 가기 링크나 헤더의 메인 내비게이션도 반복 제공을 위해 푸터 영역에 둘 수 있다.
'코드스테이츠 > HTML' 카테고리의 다른 글
| Unit3-[HTML]기초 Chapter3. HTML 심화 개요 (0) | 2022.12.21 |
|---|---|
| Unit3-[HTML]기초 Chapter2. HTML 기초 (0) | 2022.12.21 |
| Unit3-[HTML]기초 Chpater1. 웹 개발 이해 하기 (0) | 2022.12.21 |
