HTML article section header footer

이번에는 article 과 section , header 와 footer에 대해서 알아보도록 하자.

<article>, </article>

이 태그는 독립된 텍스트를 나눌 때 사용한다.

자동으로 줄 바꿈이 일어난다!

<section>, </section>

이 태그는 article 내에서 텍스트를 나눌 때 사용한다.

마찬가지로 자동으로 줄 바꿈이 일어난다.

다만 article 과 section은 줄바꿈이 두번 일어나서, section과 section사이

또는 article 과 article 사이에는 반드시 빈줄이 생기게 된다.

<header>, </header>

헤드 태그나 <h1>, </h1> 헤더 태그와 다르다

웹페이지의 맨 위엣부분을 나눌 때 사용된다.

<footer>, </footer>

웹페이지의 아랫부분을 나눌 때 사용된다.

그 외에도

<aside>, </aside>

로 section 안에서 또 나눠줄 수도 있고

<figure>, </figure>

로 피규어를 마킹할 수도 있다

<nav>, </nav>

사이에는 네비게이션, 그러니까 흔히 웹사이트의 헤더와 아티클 사이에 있는 메뉴 바를 마킹 할 수 있다.

내 블로그를 이렇게 나눠서 표시한다면

이쯤 되겠다

코드 예시

출력 예시