섹션/메인 요소

<nav>

루트 섹션 요소

루트 섹션(Root Section) 요소

<bady>

문서에서 단 1번만 사용 가능하다.

섹션 요소들

  • 섹션 요소는 일반적인 컨테이너 요소(<span>, <div> 등)가 아니다. 문서 개요에 명시적으로 나열되는 경우에만 섹션 요소가 적합하다는 규칙이 있다.

  • 모든 섹션 요소들은 그 안에 제목을 포함시켜야 한다.

문서 개요에 명시적으로 나열되는 경우란?

예를들어 뉴스 섹션 안에 광고, 프로그램, 오늘의 뉴스 등 개요가 나열되는 경우를 이야기 한다.

  • header 요소는 일반적으로 섹션의 제목, 목차, 검색, 로고 등을 포함하는데 사용한다.

  • footer 요소는 일반적으로 섹션의 저자, 링크, 저작권 정보 등을 포함하는데 사용한다.

    섹션과 헤딩

    • 헤딩(h1 ~ h6) 요소는 섹션의 제목에 해당된다.

<article>

문서, 페이지, 애플리케이션, 사이트 등에 포함된 독립적인 섹션을 말한다. 잡지, 신문, 논문, 에세이, 보고서, 블로그, 기타 소설 미디어 일 수 있다.

  • 일반적인 규칙은 <article> 요소의 내용이 문서 개요에 명시적으로 나열되는 경우에만 적합하다.

  • 각 <article> 요소는 일반적으로 요소 하위 항목으로 제목(h1~h6 요소)을 포함시켜 식별해야 한다.

    • <article>은 일반적으로 <section>, <header>, <footer>등의 자식요소로 마크업 되는 경우가 대부분이다. 

<aticle>
  <h2>기사 제목</h2>
  ...
</aticle>

<section> 내부에 <article> 사용이 가능하고 <article> 내부에 <section> 요소 사용이 가능하다.

<section>

  • <section> 요소는 문서, 애플리케이션의 일반적인 섹션을 말한다. 대부분 주제별로 그룹화된 콘텐츠를 <section>으로 묶는다.

  • 웹 사이트의 <section>은 소개(introduction), 뉴스 항목(news item), 연락처 정보(contact information)를 위한 섹션으로 나눌 수 있다.

콘텐츠가 사이트에 포함된 독립적인 섹션의 성향이 크다면 <section> 요소 대신 <article> 요소를 사용하는 것이 좋다.

<section> 요소를 표현을 목적으로 사용해서는 안된다.

<aside>

웹 사이트의 사이드바에 해당되는 부 콘텐츠(메인 콘텐츠와 분리된) 섹션을 말한다.

<nav>

다른 페이지로 이동하는 링크 또는 사이트 내 탐색 링크를 포함하는 섹션 요소이다.

내용을 쉽게 이해할 수 있도록 <nav> 요소 내부에는 비순차 목록(<ul>)을 사용한다. 사이트의 모든 링크를 <nav>에 포함하는 것은 아니며, 주로 사이트를 탐색하는 링크를 포함한다. 사이트 하단에 위치한 링크는 <footer> 요소만으로 충분하다.

참고

섹션 내부에 사용 되는 요소들

<header>

<header> 요소는 일반적으로 섹션의 제목, 목차, 검색, 로고 등을 포함하는데 사용한다.

  • 일반적으로 <header>에 해당 페이지의 logo를 넣는다.

    • logo는 페이지의 h1으로 설정할 수 있다.

    • logo는 사용자 경험의 관점에서서 메인페이지로 이동할 수 있도록 설정하는 것이 좋다.

    • 메인페이지로 가는 링크는 보통 /를 넣어준다. 

<header>
  <h1><a href="/">logo</a></h1>
</header>

<footer>

<footer> 요소는 일반적으로 섹션의 저자, 링크, 저작권 정보 등을 포함하는데 사용한다.

<header>과 <footer> 요소를 섹션 요소 내부에 넣을 수도 있다. 만약 섹션 요소 안에 묶어줄 콘텐츠가 많다면 <header>과 <footer>을 이용해서 묶어주면 된다. 

<section>
  <header>
    <h2>제목</h2>
    <p>내용</p>
    <p>내용</p>
  </header>
</section>

메인 요소

<main>

  • 문서 또는 애플리케이션 <body> 요소의 메인 콘텐츠에 해당한다.

  • <main> 요소는 섹션 요소가 아니다.

  • <main> 요소 2개 이상 사용해도 상관 없지만 한 문서에서 보이는 <main> 요소는 2개 이상이면 안된다. 그렇기 때문에 사용 되지 않는 <main> 요소는 화면에서 감춤(hidden) 처리 해야한다. 

<main>...</main>
<main hidden>...</main>
<main hidden>...</main>

  • <article>, <section>, <aside>, <nav> 요소는 main 요소를 자식으로 포함할 수 없다.

  • 반대로 <main> 요소는 섹션 요소들을 포함할 수 있다. <main> 내부에는 <header>, <footer> 요소를 직접적으로 포함하지 않는다.

참고

Previous섹션/메인/컨테이너 요소Next-- 섹션과 헤딩

Last updated