HTML_Section Elements

Koohyeon·2021년 3월 19일
0

HTML

목록 보기
2/3
post-thumbnail

HTML5의 Sectioning content(nav, article, section, aside)에 대해 MDN을 참고하여 작성한 글입니다.

Section Elements in HTML5

  • 메뉴, 목차 등의 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 섹션에 쓰인다. 하나의 문서 내에 여러개 사용할 수 있지만 <nav> 안에 <nav>를 중첩하여 사용할 수는 없다.
  • 필수 요소는 아니지만 보통 list elements를 포함한다.

<article>

  • 블로그 글, 뉴스 등의 독립된 콘텐츠를 보여준다. 블로그 글에 대한 댓글과 같은 요소는 <article> 안에 <article>이 중첩하여 사용해 바깥쪽 요소와 관련된 콘텐츠임을 나타낼 수 있다.
  • headers, asdies, footers와 같은 semantic elements를 포함할 수 있다.
  • <article> 안에 <section>이 포함될 수 있으며, <section> 안에 <article>이 포함될 수도 있다.

<section>

  • 일반적인 섹션 요소로, 이 섹션을 나타내는 더 구체적인 태그가 없는 경우 사용한다. (예를 들어 문서의 주요내용이라면 <main>으로, 신문 기사라면 <article>로 나타낼 수 있을 것이다.)
  • <section> 안의 콘텐츠는 서로 의미적으로 연관이 있어야 하는데, 만약 서로 연관이 없으며 오로지 스타일링을 위해 그룹화해야한다면 <div>를 사용하는 것이 낫다.
  • 몇가지의 예외를 제외하고는 heading 태그를 반드시 포함하여 각 <section>이 구분되도록 해야 한다.

<aside>

  • 메인 요소와 관련은 있지만, 직접적으로 연관된 것은 아닌 사이드바, 인용문 등의 영역을 나타낸다.

  • <aside> 안에 <aside>를 포함할 수는 없다.


이 외 Sectioning을 위해 사용되는 Elements

<body>

  • 해당 문서의 모든 콘텐츠를 포함한다.
  • 도입부 역할의 영역을 정의한다. 보통 로고, 타이틀, 네이게이션, 검색창 등을 포함한다.
  • <article>이나 <section> 등 다른 요소 안에도 사용되는데, 이 경우 섹션의 제목, 작가이름 등이 포함될 수 있다.
  • 반드시 시작 부분에 배치되는 것은 아니다.
  • 보통 heading 태그와 콘텐츠 관련 metadata(블로그 포스트의 작성시간, 목차 등)를 포함하고 있다.
  • 섹션의 저자, 라이센스 정보, 관련 링크 등을 포함하는 footer을 나타낸다.

+

<main>

  • 웹페이지의 기본적인 내용을 포함한다.
  • 각 페이지에서 개별적으로 존재해야 하며, 로고나 검색창 같은 다른 페이지를 가도 볼 수 있는 기본적인 요소는 포함하면 안된다.
  • 각 페이지당 하나의 요소를 사용해야 한다.
  • <article>, <aside>, <header>, <footer>, <nav> 안에 포함시킬 수 없다.

0개의 댓글