섹션과 관련된 태그(Section Related Tag)

섹션 관련 테그 종류

<header>

1. HTML 문서의 헤더 영역을 의미하는 태그로 제목이나 내비게이션, 검색등의 내용들을 포함 할수 있습니다.

2. 텍스트, 인라인 요소, 블록 레벨 요소를 포함할 수 있지만 <hedaer>,<footer> 태그는 포함할 수 없습니다.

See the Pen header tag by ture403 (@ture403) on CodePen.

<nav>

1. HTML 문서의 메인 메뉴나 목차 등을 정의해 주는 태그입니다.

2. 텍스트, 인라인 요소, 블록 레벨 요소를 포함 할수 있습니다.

See the Pen nav tag by ture403 (@ture403) on CodePen.

<section>

1. HTML 문서에서 맥락이 같은 요소들은 주제별로 그룹화해주는 태그이며 섹션 주제에 대한 제목 요소 ( <h2>~<h6> )를 포함하는 것이 좋습니다.

2. 텍스트, 인라인 요소, 블록 레벨 요소를 포함할 수 있습니다.

See the Pen Untitled by ture403 (@ture403) on CodePen.

<article>

1. HTML 문서 내에서 독립적으로 배포 또는 재사용이 가능한 게시물, 뉴스 기사, 블로그 포스팅 등을 의미하는 태그이며 제목 요소 ( <h2>~<h6> )를 포함하는 것이 좋습니다.

2. 텍스트, 인라인 요소, 블록 레벨 요소를 포함할 수 있습니다.

See the Pen Untitled by ture403 (@ture403) on CodePen.

<aside>

1.메인 콘텐츠와 직접적으로 관련이 없는 영역을 의미하는 태그이며 HTML 문서의 오른쪽이나 왼쪽의 사이드 메뉴나 광고 등의 영역으로 사용됩니다.

2. 텍스트, 인라인 요소, 블록 레벨 요소를 포함할 수 있습니다.

See the Pen aside by ture403 (@ture403) on CodePen.

<footer>

1. HTML 문서의 푸터 영역을 의마하는 태그로 섹션 작성자나 저작권에 대한 정보, 관련된 문서의 링크를 포함할 수 있습니다.

2. 텍스트, 인라인 요소, 블록 레벨 요소를 포함할 수 있지만 <header>, <footer> 태그는 포함할 수 없습니다.

See the Pen footer tag by ture403 (@ture403) on CodePen.

<address>

1. HTML 문서의 소유자나 조직에 대한 연락처 정보를 정의할 때 사용하는 태그입니다.

2. 텍스트와 인라인 요소를 포함할 수 있고 <h1>~<h6>. <section>,<article>,<aside>,<nav>,<header>,<footer>와 같은 일부 블록 레벨 요소들은 포함할 수 없습니다.

3. <address> 태그는 보통 <footer> 태그 내에서 많이 정의합니다.

See the Pen 주소 태그 사용 by ture403 (@ture403) on CodePen.

 

<h1>~<h6>

1.HTML 문서에서 제목을 정의 할 떄 사용하는 태그입니다.

2.<h1>~<h6> 태그는 텍스트와 인라인 요소를 포함할 수 있지만 블록 레벨 요소는 포함할 수 없습니다.

3. 스크린 리더(음성낭독프로그램) 에서는 제목의 수준으로 바로 이동할 수 있기 때문에 <h1>=><h2>=><h3>=><h4>=><h5>=><h6> 순으로 정의하는 것이 좋으며, 중간에 제목의 수준이 빠지지 않도록 주의해야 합니다. 보통 <h2> 태그부터는 같은 레벨의 제목 태그를 여러 번 정의할 수도 있습니다.

See the Pen h1-h6 태그 by ture403 (@ture403) on CodePen.