[HTML] HTML에서 콘텐츠를 그룹으로 묶는 방법

HTML에서 콘텐츠를 그룹으로 묶는 방법

HTML에서는 여러 가지 태그와 속성을 사용하여 콘텐츠를 그룹으로 묶거나 구조를 만들 수 있습니다. 다음은 그중 몇 가지 예시입니다.

<div> 태그

<div> 태그는 "division"의 약자로, 본질적으로는 스타일이나 스크립트를 적용하기 위해 다른 HTML 요소들을 묶을 때 주로 사용됩니다.

<div>
  <p>첫 번째 단락</p>
  <p>두 번째 단락</p>
</div>

div 태그

<span> 태그

<span> 태그는 인라인 요소를 그룹으로 묶을 때 사용됩니다. 주로 텍스트 내에서 스타일을 적용하거나 특정 부분을 구분하기 위해 사용됩니다.

<p>이 문장에서 <span>특정 부분</span>만 스타일을 변경할 수 있습니다.</p>

span 태그

<section> 태그

<section> 태그는 문서의 독립적인 구역을 정의할 때 사용됩니다. 보통 제목 태그(<h1>, <h2> 등)와 함께 사용되어 각 섹션을 명확히 구분합니다.

<section>
  <h1>첫 번째 섹션</h1>
  <p>내용입니다.</p>
</section>

<section>
  <h1>두 번째 섹션</h1>
  <p>다른 내용입니다.</p>
</section>

섹션 태그

<header>, <footer> 태그

<header> 태그는 페이지나 섹션의 헤더(머리말) 부분을, <footer> 태그는 푸터(꼬리말) 부분을 정의합니다.

<header>
  <h1>웹 페이지 제목</h1>
</header>

<footer>
  <p>저작권 정보</p>
</footer>

header와 footer태그

<article> 태그

<article> 태그는 페이지 내에서 독립적으로 구성되거나 재사용 가능한 영역을 설정합니다. 예를 들어 블로그 포스트나 뉴스 기사 등을 묶을 때 사용됩니다.

<article>
  <h1>블로그 포스트 제목</h1>
  <p>내용입니다.</p>
</article>

article 태그

<aside> 태그

<aside> 태그는 페이지의 주 내용과는 별도로 존재하는 콘텐츠를 그룹으로 묶을 때 사용됩니다. 예를 들어 사이드바나 광고, 풋노트 등을 묶을 때 사용됩니다.

<aside>
  <h1>관련 정보</h1>
  <p>이것은 사이드바입니다.</p>
</aside>

aside 태그

이러한 태그들을 적절히 사용하여 HTML 문서의 구조를 만들면, 웹 페이지가 더 명확하고 의미 있는 구조를 가지게 됩니다. 이는 웹 접근성을 높이고, 검색 엔진 최적화(SEO)에도 유리합니다.