🖋️ 시멘틱 태그 사용

웹 페이지의 내용을 의미론적으로 정확하게 표현하는 HTML 사용 방법

각 HTML 요소가 단순히 스타일이나 동작을 정의하는 것이 아니라, 그 요소가 문서에서 어떤 역할을 하는지를 명시

검색 엔진 최적화(SEO), 웹 접근성, 그리고 페이지의 가독성과 유지 보수가 향상

---

• <header>

  • 페이지나 섹션의 머리말
  • 보통 로고, 제목, 내비게이션 메뉴를 포함

• <nav>

  • 내비게이션 링크의 집합
  • 주로 메인 메뉴, 목차, 색인에 사용

• <main>

  • 문서의 주요 콘텐츠
  • 각 문서에는 하나의 <main> 요소만 존재해야 함

• <section>

  • 문서의 독립적인 구역
  • 각 <section>은 관련된 콘텐츠로 구성

• <article>

  • 독립적으로 배포하거나 재사용할 수 있는 콘텐츠
  • 예를 들어 블로그 글, 뉴스 기사 등이 이에 해당

• <aside>

  • 주 콘텐츠와 간접적으로만 관련된 부분
  • 광고, 바이오, 관련 링크 목록 등이 여기에 포함

• <footer>

  • 페이지나 섹션의 바닥글
  • 저자 정보, 저작권 정보, 관련 문서 링크 등이 포함

• <figure> 와 <figcaption>

  • 독립적인 콘텐츠 (예: 이미지, 다이어그램, 코드 스니펫)
  • 콘텐츠의 설명이나 캡션을 제공

• 블로그 게시물

function BlogPost({ title, content, author, date }) {
  return (
    <article>
      <header>
        <h1>{title}</h1>
        <p>작성자: {author}, 날짜: {date}</p>
      </header>
      <main>
        <p>{content}</p>
      </main>
      <footer>
        <p>저작권 © {new Date().getFullYear()} - {author}</p>
      </footer>
    </article>
  );
}