Article 태그와 Section 태그 정리

※ 개인적으로 공부하기 위한 HTML5 태그 정리 글입니다.

프런트엔드를 공부하다 보면 의외로 신기한 태그들을 새롭게 알게 된다. 그리고, 한 번쯤은 봤을만한 태그들이 익숙해지고 직접 작업을 할 때, 사용하게 되면 태그들이 있는 이유를 한 번에 이해하게 되고, HTML 구조만 보더라도 어떤 식으로 구성되어 있고 어떤 의도로 작업을 했는지 쉽게 이해할 수 있게 되었다.

어쩌면, 영문으로 되어 있어서 언어를 조금 더 잘 이해하고 그 뜻을 파악할 수 있었다면 더 쉽게 이해할 수 있었을지도 모른다. HTML5에서는 정말 다양한 태그들이 있고 평소에 잘 사용하지 않는 태그들이 있지만, 사실 생각해보면 활용도가 굉장하고 언제든지 쉽게 사용할 수 있는 태그들이 있는 것이다. Audio 태그나 Address태그도 마찬가지다.

Article 태그

Article 태그와 Section 태그를 한 번에 설명하는 이유는 비슷하지만, 다른 용도로 사용되는 태그이기 때문이다. Article 태그는 문서 내에서 Section처럼 분리하는 용도로 사용이 되지만, 별도의 구조를 만들 때 주로 사용될 수 있다. 이와는 반대로 Section 태그는 문장 안에서 관계가 있는 내용이지만 분리하고 싶을 때 사용한다.

Section 태그

Section 태그와 Div 태그를 혼동하는 경우가 있는데, 쉽게 생각하면 된다. 같은 구조 내에서 관계가 있으면 Section, 별도의 표시 없이 그저 구조로의 역할만하기를 원한다면 Div를 사용하면 된다. Article 태그를 대주제라고 하면, Section은 그 안에 포함이 될 수 있다. 그 반대도 가능하다.

사용방법 예시

첫번째 사용예시는 Article이 Section을 묶는 구조입니다.

<article>
    동물
    <Section>강아지</Section>
    <Section>고양이</Section>
</article>

두번째 사용예시는 Section이 Article을 묶는 구조입니다.

<Section id="Content">
    <article>봄 컨텐츠</article>
    <article>여름 컨텐츠</article>
    <article>가을 컨텐츠</article>
    <article>겨울 컨텐츠</article>
</Section>

위와 같이 평소에는 잘 사용하지 않지만, 분명한 쓰임새가 있는 다양한 태그들, 사용하기 어려운 것이 아니라 사용하기 귀찮아서 사용하지 않는 경우가 더 많다고 생각된다. 혹은 모르거나, 관심이 없거나 그렇다. 하지만, HTML 구조 내에서 각각의 태그들은 그 의미가 분명하고, 짜임새에 따라서 구조적으로 보다 더 단단해질 수 있다.