All about {Web}

HTML5 - New Structural Tags : <section>

Web Design/HTML & HTML 52018. 4. 26. 10:30

HTML5 - New Structural Tags ( 구조 태그 ) : <section></section>



01. <section></section>
02. <article></article>
03. <aside></aside>
04. <header></header>
05. <hgroup></hgroup>
06. <footer></footer>
07. <nav></nav>

01. <section></section>
HTML Section 요소 (<section>) 는 문서의 일반적인 구획을 나타냅니다. 즉, (전형적으로 제목을 가지고 있는) 컨텐츠의 주제 그룹을 말합니다. 각 <section>은 식별되어야하며, 일반적으로 (<h1>-<h6> 요소들을 자식으로 가집니다.

- 제목으로 시작하는 컨텐트를 의미적으로 그룹핑하기 위해 사용됩니다.
- section요소를 사용할 수 있는 예로는 챕터나 탭으로 구분된  대화상자에서 탭된 페이지, 또는 논문의 번호가 매겨진 색션이 될 수 있습니다. 홈페이지에서는 소개, 뉴스 아이템, 연락처등이 섹션으로 분리될 수 있습니다.
- 요소의 컨텐츠를 배포해도 이치에 맞다면 section요소대신 article요소를 사용할것을 권장합니다.
- section요소는 일반적인 컨테이너 요소는 아닙니다. 요소가 단순히 스타일링을 위한 목적이나 스크립팅의 편의를 위해서 필요할때 section요소보다는 div요소를 사용할것을 권장합니다.

<!DOCTYPE html>
<html>
<body>

<section>
  <h1>WOOIN21</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat.</p>
</section>

<section>
  <h1>CODE IS POETRY.</h1>
  <p>Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>

<p><strong>Note:</strong> The section tag is not supported in Internet Explorer 8 and earlier versions.</p>

</body>
</html>

WOOIN21

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

CODE IS POETRY.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Note: The section tag is not supported in Internet Explorer 8 and earlier versions.

 


저작자표시

'Web Design > HTML & HTML 5' 카테고리의 다른 글

HTML5 - New Structural Tags : <aside>  (0) 2018.04.28
HTML5 - New Structural Tags : <article>  (0) 2018.04.28
HTML - META tag  (0) 2018.04.26
HTML vs HTML5  (0) 2018.04.25
[HTML] 메타태그 - viewport (뷰포트)  (0) 2018.04.13

티스토리툴바