HTML5 section 엘리먼트

HTML5 section 엘리먼트(element)

일반적인 문서 및 애플리케이션 영역을 표시할 때 사용한다. 콘텐츠의 주제별 그룹화한다

섹션의 예로는 챕터 될, 탭 대화 상자, 또는 논문의 번호 섹션에있는 다양한 탭 페이지. 웹 사이트의 홈 페이지는 섹션으로 소개, 뉴스 항목에 대한 연락처 정보등으로 사용될 수있다.

공식사이트에는 section엘리먼트사용시 두가지주의점을 요망하고있다.

article 엘리먼트와 혼란하지말것, article은 내용,주제를 담은 것을 사용할때 사용한다

스크립트나 기타 기능적으로 엘리먼트를 사용하게 될 경우 div를 대신사용할것

요약하면 section의 경우는 구역지정으로 감싸는역할로 사용할것을 권하고있다. 이전에 div엘리먼트가 기능적,본문을 담은 부분,전체를 감사는역할을했다면 이번에 3가지역할이 분리된것이다.

 

  
Apples
  
Tasty, delicious fruit!
 
 
The apple is the pomaceous fruit of the apple tree.
 

  
Red Delicious
  
These bright red apples are the most common found in many
  supermarkets.
 
 

  
Granny Smith
  
These juicy, green apples make a great filling for
  apple pies.
 

위 에제와 같이 문서 구조를 가르키는 h1 ~ h6과 같이 사용할 수있다. 굳이 내포할것이냐 말것이냐를 고려할것은없으며 h1이 section엘리먼트를 벗어나도 상관없다. 덧붙이면 section밖에 맨처음 사용된h1은 사이트를 대변할것이고 section안의 h1은 그 section을 대변할것이다.아래 예제를보자

졸업
  

   
세레모니
    
졸업오픈
    
졸업연설
    
어쩌고 저쩌고
  

   
졸업자

    
누구누구
    
누구누구여자
    
누구
    
.......
  
 

맨처음h1은 졸업이라는 사이트를 말해주고있다.그아래는 각각의것을 대변한다