기본적인 시맨틱 태그

1.1 태그 <header>

HTML5의 시맨틱 태그는 개발자가 더 구조적이고 읽기 쉬운 문서를 작성하는 데 도움을 줘. 이로 인해 접근성과 SEO(검색 엔진 최적화)를 크게 개선하지. 이 태그들은 웹 페이지의 구조와 내용을 더 명확하게 설명해 줘. 아래에서 주요 시맨틱 태그를 자세히 살펴보자.

<header> 태그는 콘텐츠의 헤더나 섹션을 나타낼 때 사용돼. 이 요소는 보통 소개 정보, 내비게이션 링크, 로고, 헤딩 등 콘텐츠의 상단 부분과 관련된 요소들을 포함해.

사용 예시:

    
      <header>
        <h1>Website Title</h1>
        <nav>
          <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </nav>
      </header>
    
  

주요 특징:

1. 위치: <header> 태그는 문서 전체나 <article>, <section> 같은 개별 섹션에서 사용할 수 있어.
2. 내용: 보통 제목, 로고, 내비게이션 요소와 다른 소개 요소들을 포함해.

1.2 태그 <footer>

<footer> 태그는 콘텐츠나 섹션의 하단 부분을 나타낼 때 사용돼. 이 요소는 보통 저자 정보, 관련 문서 링크, 개인정보 보호정책, 연락처 정보 등 콘텐츠의 하단 부분과 관련된 요소들을 포함해.

사용 예시:

    
      <footer>
        <p>&copy; 2024 My Website</p>
        <nav>
          <ul>
            <li><a href="#privacy">Privacy Policy</a></li>
            <li><a href="#terms">Terms of Service</a></li>
          </ul>
        </nav>
      </footer>
    
  

주요 특징:

1. 위치: <footer> 태그는 문서 전체나 <article>, <section> 같은 개별 섹션에서 사용할 수 있어.
2. 내용: 보통 저자 정보, 법적 정보, 내비게이션 링크와 다른 마지막 요소들을 포함해.

1.3 태그 <article>

<article> 태그는 독립적이고 자립적인 콘텐츠 블록을 나타낼 때 사용돼. 이 블록은 배포 가능하고 재사용할 수 있는 콘텐츠야. 블로그 포스트, 뉴스 기사, 댓글, 사용자 게시물 등이 여기에 해당돼.

사용 예시:

    
      <article>
        <header>
          <h2>Blog Post Title</h2>
          <p>Published on July 6, 2024</p>
        </header>
        <p>This is the content of the blog post. It can include text, images, and other media.</p>
        <footer>
          <p>Author: John Doe</p>
        </footer>
      </article>
    
  

주요 특징:

1. 자립성: <article> 태그는 독립적으로 사용할 수 있고 배포할 수 있는 콘텐츠에 사용돼.
2. 구조: 보통 제목(<header>), 본문, 마무리 부분(<footer>)을 포함해.

적용 사례:

• 기사
• 블로그 게시물
• 뉴스
• 댓글

장점:

• 독립적인 콘텐츠 조각을 나타내
• 검색 엔진과 서비스가 콘텐츠를 식별하고 재사용하는 데 도움을 줘

1.4 태그 <section>

<section> 태그는 주제적으로 관련 있는 콘텐츠 그룹을 정의할 때 사용돼. 이 그룹은 챕터, 섹션 같은 큰 콘텐츠 부분이 될 수 있어. <div>는 시맨틱 의미 없이 스타일링과 그룹화를 위해 사용되지만, <section>은 명확한 시맨틱 의미를 가지고 있어.

사용 예시:

    
      <section>
        <header>
          <h2>About Us</h2>
        </header>
        <p>This section provides information about our company and its history.</p>
      </section>
    
  

주요 특징:

1. 주제적 그룹화: <section> 태그는 콘텐츠를 주제적으로 그룹화할 때 사용돼.
2. 구조: 보통 제목(<header>)과 본문을 포함해.

적용 사례:

• 기사 내 섹션
• 주제적으로 관련된 콘텐츠 그룹
• 논리적으로 강조할 수 있는 페이지의 부분

장점:

• 문서의 구조와 가독성을 개선해
• 검색 엔진이 콘텐츠를 더 잘 이해하고 인덱싱하는 데 도움을 줘