본문으로 건너뛰기
실습하기

시맨틱(Semantic) 태그

HTML 문서 내 시맨틱(Semantic, 의미) 태그를 사용하면 콘텐츠의 의미를 명확하게 전달할 수 있습니다.

시맨틱은 "의미를 가진"이라는 뜻으로, 어떤 부분이 header(머리말)인지, main(본문)인지, footer(꼬리말)인지 등을 명확하게 구분할 수 있도록 합니다.

시맨택 태그를 사용하면 웹 검색 엔진에 페이지의 의미를 명확하게 전달할 수 있어 검색 엔진 최적화(SEO)에 도움이 되고, 웹 접근성을 높일 수 있습니다.

주요 시맨틱 태그는 아래와 같습니다.


<header> 태그​

header 태그는 웹 페이지의 머리글 부분으로 웹페이지 상단에 로고, 내비게이션 메뉴, 회사 이름 등을 표시합니다.


예시​

header 태그 예시
<header>
  <h1>My Website</h1>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

footer 태그는 웹페이지의 바닥글(꼬리말)로, 웹 사이트의 하단에 저작권 정보, 연결 링크, 저자 정보 등을 표기합니다.


예시​

footer 태그 예시
<footer>
  <p>&copy; 2023 My Website. All rights reserved.</p>
  <nav>
    <ul>
      <li><a href="#">Privacy Policy</a></li>
      <li><a href="#">Terms of Service</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
  </nav>
</footer>


nav 태그는 header 태그 안에서 다른 페이지로 이동할 수 있는 링크들을 표시합니다.


예시​

nav 태그 예시
<nav>
  <ul>
    <li><a href="#home">홈</a></li>
    <li><a href="#news">뉴스</a></li>
    <li><a href="#contact">연락처</a></li>
  </ul>
</nav>

<section> 태그​

<section> 태그는 페이지에서 특정 주제나 내용을 담당하는 영역입니다.

예를 들어 웹 페이지의 연락처 영역, 소개 영역, 뉴스 영역 등을 <section> 태그로 표시할 수 있습니다.


예시​

section 태그 예시
<section id="about">
  <h2>소개</h2>
  <p>저희 웹 페이지에 오신 것을 환영합니다!</p>
</section>

<article> 태그​

<article> 태그는 독립적으로 읽거나 재사용할 수 있는 영역을 정의합니다. 예를 들어 블로그 게시물, 뉴스 스토리, 사용자의 댓글 등에 <article> 태그를 사용할 수 있습니다.


예시​

article 태그 예시
<article>
  <h2>행사 소식</h2>
  <p>다가오는 행사에 대한 정보입니다.</p>
</article>

<main> 태그​

<main> 태그는 웹 페이지의 주요 컨텐츠를 정의합니다.


예시​

main 태그 예시
<main>
  <h1>환영합니다!</h1>
  <p>웹 페이지에 방문해 주셔서 감사합니다.</p>
</main>

<aside> 태그​

<aside> 태그는 페이지의 부가적인 콘텐츠를 표시합니다. 주로 오른쪽이나 왼쪽의 사이드바에 활용해 메인 컨텐츠와는 별개인 추가 정보와 관련 링크를 제공합니다.


예시​

aside 태그 예시
<aside>
  <h2>공지사항</h2>
  <p>이벤트를 확인해 보세요!</p>
  <div>
    <a href="#">이벤트 자세히 보기</a>
  </div>
</aside>

다음 내용이 궁금하다면?

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!