Semantic 태그

1. Semantic 태그

Semantic 태그는 HTML 문서를 의미적으로 구분하는 태그들로, 문서의 구조와 내용을 더욱 명확하게 표현할 수 있도록 도와줍니다.

대표적인 Semantic 태그로는 <header>, <nav>, <main>, <section>, <article>, <aside>, <footer> 등이 있습니다. 이 태그들을 적절히 사용하면 검색 엔진 최적화(SEO)와 접근성 향상에 도움이 됩니다.

<div> 태그와 마찬가지로 CSS로 스타일을 주기 전에는 콘텐츠나 레이아웃에 영향을 주지 않습니다.

1.1 header

<header> 태그는 일반적으로 웹 페이지의 상단에 위치하며, 사이트의 제목, 로고, 검색창, 네비게이션 등의 요소를 포함할 수 있습니다.

head 태그와 header 태그를 혼동하지 마세요!
head는 문서의 메타데이터, header는 문서의 소개 부분입니다.

header 태그 사용 규칙:

중첩해서 사용할 수 없습니다.
안에 <footer> 태그를 포함할 수 없습니다.
각 섹션의 시작 부분에 사용하여 해당 섹션의 소개 부분을 나타낼 수 있습니다.

<!-- 잘못된 예 -->
<header>
  <header></header>
</header>

<header>
  <footer></footer>
</header>

1.2 nav

<nav> 태그는 navigation의 약자로, 웹 페이지 내에서 현재 페이지나 다른 페이지로 이동할 수 있는 링크들을 모아 놓은 섹션을 나타냅니다. 이 태그는 주로 메뉴, 목차, 브레드크럼(breadcrumb) 등으로 사용됩니다.

메뉴로 사용할 때는 일반적으로 <ul> 태그와 함께 사용하여 각 메뉴 아이템을 <li> 태그로 나타냅니다. 브레드크럼으로 사용할 때는 <ol> 태그와 함께 사용하여 현재 페이지의 위치를 나타내는 계층 구조를 표현합니다.

스타일링을 하지 않은 메뉴

<nav>
  <ul>
    <li><a href="#">위니브</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

스타일링을 한 메뉴

<nav>
  <ul>
    <li><a href="#">위니브</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

body {
  margin: 0;
  padding: 0;
}
nav {
  margin: 0;
  padding: 5px;
  background-color: #dddddd;
}
ul {
  list-style: none;
  display: flex;
}
li {
  margin-right: 10px;
}
a {
  color: white;
  text-decoration: none;
}

메뉴와 브레드크럼(breadcrumb)으로 사용되는 예제입니다.

메뉴

<nav>
  <ul>
    <li><a href="#">위니브</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

브레드크럼

<nav>
  <ol>
    <li><a href="#">위니브</a></li>
    <li><a href="#">캐릭터소개</a></li>
    <li>라이캣</li>
  </ol>
</nav>

<nav> 태그 안에는 반드시 문서의 모든 링크가 포함될 필요는 없습니다. 이 태그는 페이지의 주요 탐색 링크를 위한 것으로, 하나의 웹페이지에 여러 개의 <nav> 태그를 사용할 수 있습니다. 예를 들어, 하나는 사이트 전체 탐색용으로, 다른 하나는 현재 페이지 내 탐색용으로 사용할 수 있습니다.

<nav> 태그를 사용하면 문서의 구조와 의미를 더욱 명확하게 전달할 수 있으며, 스크린 리더와 같은 보조 기술을 사용하는 사용자들에게 더 나은 접근성을 제공할 수 있습니다.

1.3 main

<main> 태그는 문서의 주요 콘텐츠를 나타냅니다. 웹 페이지에서 한 번만 사용할 수 있으며, 보통 아래와 같은 형식으로 구성됩니다.

다만 <main> 태그는 인터넷 익스플로러에서는 지원되지 않으므로 인터넷익스플로러를 지원해야 하는 경우에는 <div> 태그로 대체하여 사용할 수 있습니다.

main 태그 사용 가능 브라우저

<body>
  <header>
    <nav></nav>
  </header>
  <main>
    <article></article>
    <aside></aside>
  </main>
  <footer></footer>
</body>

footer는 웹 페이지의 하단에 위치하며, 페이지의 작성자, 저작권정보, 관련 문서 등의 내용을 담습니다. 아래 예시는 위니브 교재 서비스의 footer를 간단히 줄인 것입니다.

<footer>
  <h2>
    <span class="a11y-hidden">weniversity</span>
  </h2>
  <p>Copyright © 2023 WENIV All Rights Reserved</p>
  <!-- 생략... -->
</footer>

여러 페이지의 footer들이 어떻게 구성되었는지 확인해보세요.

footer 예시

1.5 section

<section> 태그는 문서 내에서 특정한 섹션을 정의하는 데 사용됩니다. 이 태그는 일반적으로 주제나 컨텐츠를 구분 짓기 위해 사용되며, 뉴스의 사회면 / 연예면 각각의 부분을 나타낼 수 있습니다.

<section> 태그는 자식 요소로 제목 요소(heading)를 포함해야 합니다. 비록 사용자에게 보이지 않는 텍스트라고 할지라도 스크린 리더 사용자에게는 중요한 정보가 됩니다.

<section>
  <h2>
    <span class="a11y-hidden">위니버시티 교재에 대한 설명</span>
  </h2>
  <p>위니버시티 교재란...</p>
  <!-- 생략... -->
</section>

1.6 article

<article> 태그는 독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타냅니다. 사이트의 다른 기능에 영향을 주지 않고 독립적인 기능을 수행합니다.

아티클이 대표적으로 사용되는 곳은 뉴스 홈페이지입니다. 다양한 기사들이 한 페이지에 담겨있지만, 이 기사들은 각각 독립적으로 사용됩니다. 시간마다 노출되는 기사가 달라져도 홈페이지는 정상적으로 운영됩니다.

<article> 태그는 <section> 태그와 비슷해 보일 수 있지만, <section>은 주제별로 구분하고 <article>은 독립적인 콘텐츠를 구분합니다. <article>은 게시판, 블로그 글, 매거진, 뉴스 기사, 위젯, 실시간 채팅 창 등에 사용됩니다.

<article> 태그도 자식 요소로 제목 요소(heading)를 포함하여야 합니다.

article vs section 선택 가이드

상황	사용할 태그
독립적으로 배포/재사용 가능한 콘텐츠	`<article>`
앞뒤 문맥 연결이 필요한 콘텐츠	`<section>`
단순 스타일링 목적	`<div>`

1.7 aside

aside 태그는 문서의 주요 내용과 간접적으로 연관된 부분을 나타냅니다. 이 태그로 묶인 콘텐츠는 문서의 주요 흐름을 따라가지 않고, 보조적인 역할만 하는 공간입니다.

웹 페이지에서 사이드바, 광고, 관련 링크, 삽화, 인용구, 작은 웹 어플리케이션 등을 표시할 수 있습니다. aside 태그 내에는 nav 태그를 사용하여 관련 링크를 제공할 수도 있습니다.

교재나 블로그 화면의 사이드바(목차, 관련 글 목록 등)도 aside 태그로 구현하는 경우가 많습니다.

2. 실습

지금까지 배운 다양한 태그들을 실습해 볼 겁니다. 아래 이미지를 어떻게 html로 작성해야 할지 고민한 후, 마크업만 진행해봅시다!

실습용 이미지

실습 답안

<section>
  <h2>로그인</h2>
  <p>더 편리해진 위니브에 오신 것을 환영합니다.</p>
  <!-- 로그인 페이지 이동 버튼 -->
  <a href="#">
    <img src="./img/weniv-logo.png" alt="weniv" />
    로그인
  </a>
  <a href="#"> <img src="./img/icon-lock.png" alt="" />아이디 </a>
  <span>|</span>
  <a href="#">비밀번호찾기</a>
  <a href="#"> <img src="./img/icon-user.png" alt="" />회원가입 </a>
</section>

Semantic 태그

1. Semantic 태그

1.1 header

1.2 nav

1.3 main

1.4 footer

1.5 section

1.6 article

1.7 aside

2. 실습