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

HTML vs HTML5

Web Design/HTML & HTML 52018. 4. 25. 22:47

HTML  vs  HTML5 [HyperText Markup Language 5]
HTML 5 is an Evolution, Not a Revolution. ( HTML 5는 혁명이 아닌 진화이다. )

※ HTML의 진화 :
1995 :  HTML 2.0
1997 :  HTML 3.2
1998 :  Web Standard Project
2000 :  XHTML 1.0
2000~2004 :  The Growth of the Web
2004 :  HTML5 - The Rise of the HTML 5

※ HTML5가 아닌 것들 :
CSS3 Transitions
Web Sockets
Geolocation
SVG
CSS3 @font-face

 

※ HTML 5가 HTML과 다른 점 :
01.웹문서의 첫 머리에 선언하는 문서타입( DOCTYPE )의 선언이 간편화
HTML 4 :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 5 :
<!doctype html> /* 대소문자 관계 없음 */

02. 언어셋 인코딩 (Character Encoding )
 HTML4 :
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
HTML5 :
<meta charset="utf-8">

03. HTML5에 추가된 새로운 요소들 (HTML 5 New Elements ; 26 elements )

 article

 aside

 audio

 canvas

command 

details

datalist

embed

figcaption

 figure

footer

header

hgroup

keygen

mark

meter

nav

 output

progress

rp

ruby

section

source

summary

time

video

 

 

 

 

 

저작자표시 비영리 변경금지

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

HTML5 - New Structural Tags : <article>  (0) 2018.04.28
HTML5 - New Structural Tags : <section>  (0) 2018.04.26
HTML - META tag  (0) 2018.04.26
[HTML] 메타태그 - viewport (뷰포트)  (0) 2018.04.13
HTML5 브라우저 호환 테스트  (0) 2018.04.10

티스토리툴바