본문 바로가기
HTML

HTML article 태그, 웹 페이지 구성과 시멘틱 마크업 용도

by 40's Programmer 2023. 6. 21.
반응형

ARTICLE 태그란?

웹페이지를 만드는 건 결국 다른 사람에게 정보를 공유하기 위함이고, 이를 위해 검색엔진이 좋아하는 구조로 구성해야 합니다. article은 section, fieldset 등과 같이 컨텐츠의 구획을 정하는 태그입니다.

 

사용법

<article>
    <!-- 이 안에는 A 컨텐츠, H, P가 들어갑니다 -->
</article>
  • article은 열고 닫는 태그입니다.
  • article은 기본적은 class, id 외에는 별다른 속성은 없습니다.

 

<section>과 <article>의 차이

언제 section 태그를 쓰고 언제 article 태그를 쓰는지 궁금하더라구요. 그래서 검색을 해보았습니다.

 

article은 블로그, 글, 뉴스, 기사 등 게시물과 관련된 컨텐츠 블록을 감쌀 때 쓰고 section은 긴 문서를 영역별로 나눌 때 사용하는 태그입니다. 웹페이지에 단락이 세 개 있으면 section을 세 번 써서 나누는 거죠.

하지만, 컨텐츠를 명확하게 구분해서 시맨틱 구조를 만들 수 있을까? 하는 생각은 드네요. 기획을 잘 해서 애초부터 구분이 잘되어 있다면 모르겠지만 실제 코딩을 하다보면 빼먹거나 혼재해서 사용할 것 같긴 합니다.

그래도 구분해서 잘 써야겠습니다.

 

반응형