🖋️ 시멘틱 태그를 사용할 때와 그 외의 태그 사용

@ 시멘틱 HTM

• 태그는 브라우저와 개발자 모두에게 그 의미를 명확하게 설명

• 웹 페이지를 더욱 유익하고 적응 가능하게 설계

• 접근성과 검색 엔진 최적화(SEO)를 향상

• <header>

  • 문서 또는 섹션의 헤더
  • 소개 콘텐츠나 탐색 링크에 사용

<header>
  <nav>
    <!-- Navigation Links -->
  </nav>
  <h1>Site Logo</h1>
  <!-- Search form -->
</header>

• <footer>

  • 문서 또는 섹션의 바닥글
  • 저작권 정보, 연락처 링크 또는 기타 페이지 끝 요소에 사용

<footer>
  <p>Copyright © 2023 My Website</p>
  <!-- Additional links or info -->
</footer>

• <nav>

  • 탐색 링크 세트
  • 메뉴, 목차, 다른 페이지에 대한 링크에 적합

<nav>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <!-- Other links -->
  </ul>
</nav>

• <section>

  • 문서의 섹션
  • 주제별로 관련된 콘텐츠를 그룹화하는 데 사용
  • 이상적으로 각 <section> 은 일반적으로 제목(<h1>-<h6>)을 포함하여 식별

<nav>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <!-- Other links -->
  </ul>
</nav>

• <article>

  • 독립적이고 독립적인 콘텐츠
  • 블로그 게시물, 뉴스 기사, 포럼 게시물에 적합

<article>
  <h2>Article Title</h2>
  <p>Article content...</p>
</article>

• <aside>

  • 배치된 콘텐츠와 별도로 콘텐츠를 표시(예: 사이드바)
  • 관련 링크, 약력, 광고 등 주요 콘텐츠와 접선적으로 관련된 콘텐츠에 사용

<aside>
  <h2>Related Searches</h2>
  <!-- Related search links -->
</aside>

• <main>

  • 문서의 주요 내용
  • 문서에는 <main> 요소가 하나만 존재해야 함

<main>
  <article>
    <!-- Search result 1 -->
  </article>
  <article>
    <!-- Search result 2 -->
  </article>
  <!-- More search results -->
</main>

@ 의미없는 태그

• 콘텐츠에 대한 정보를 제공 X

• 주로 스타일 지정

• 다른 요소의 컨테이너로 사용

• <div>

  • 의미 요소가 없고 유동 콘텐츠를 위한 일반 컨테이너
  • CSS를 사용하여 스타일을 지정하지 않으면 콘텐츠나 레이아웃에 영향 X
  • CSS 스타일 또는 JavaScript 기능을 위한 컨테이너로 사용

<div class="container">
  <!-- Your content -->
</div>

• <span>

  • 문구 콘텐츠, 인라인 요소 및 텍스트를 위한 일반 컨테이너
  • <div>와 마찬가지로 스타일 지정이나 스크립트에 사용

<p>This is an <span class="highlight">important</span> text.</p>