Skip to main content

Sections

영역을 표한하기 위해 사용되는 태그​

  • 소개 및 탐색에 도움
  • 회사명, 제목, 로고 등 요소 포함
  • <head>와 다르다
  • <header> 안에 <footer> 사용 불가능, <header> 중첩도 불가능
  • navigation bar
  • 메뉴, 목차, 브레드크럼(breadcrumb)으로 사용. 현재 페이지 및 다른 페이지로의 링크를 보여줌
  • 문서의 모든 링크가 <nav>안에 있을 필요는 없다.
  • 페이지의 작성자, 저작권정보, 관련 문서 등의 내용을 담는다.

main​

  • <body>의 주요 컨텐츠를 표현
  • 웹페이지에 한번만 사용할 수 있다.
  • 사이드바, 탐색 링크, 저작권정보, 사이트 로고, 검색 폼 등 여러 페이지에 반복되는 콘텐츠를 포함하면 안된다.
    • 검색 폼이 주요라면 예외

article​

  • 독립적으로 구분해 배포하거나 재사용할 수 있는 구획
    • 사이트에 영향을 주지않고 독립적인 기능을 수행
    • article 영역을 제거해도 페이지는 정상작동 해야됨
  • 대표로 사용되는 곳은 뉴스 홈페이지
  • 게시판, 블로그 글, 매거진, 뉴스 기사, 위젯, 실시간 채팅 등
  • 제목 요소를 자식으로 포함

section​

  • 제목 요소를 자식으로 포함
caution

<article> vs <section> vs <div>

독립적으로 사용한다면 article!

웹페이지의 문맥 연결성이 필요하다면 section!

단순 스타일링을 위한 것이라면 div!

aside​

  • 문서의 주요 내용과 간접적으로 연관된 부분
  • 문서의 주요 흐름을 따라가지 않고, 보조 역할을 하는 공간
  • 광고 배너

디자인을 위해서 사용되는 태그​

hr​

  • 이야기에서 장면 전환 혹은 문단 안에서 주제가 변경될 때 사용
  • <p>태그 내의 사용은 하지 않는다.

div​

  • 콘텐츠 분할 요소
  • block 컨테이너
  • 웹사이트 레이아웃을 만들 때 사용
  • 공간을 나누는 것 외에 다른 기능은 없음.

span​

  • inline 컨테이너
  • 스타일을 적용하기 위해 묶어 사용(특히 text)
tip

<div>와 <span>은 스타일을 위해서만 사용하자.