HTML/CSS 베이스캠프

Semantic 태그

Semantic 태그는 HTML 문서를 의미적으로 구분하는 태그들로, 문서의 구조와 내용을 더욱 명확하게 표현할 수 있도록 도와줍니다. 대표적인 Semantic 태그로는 <header>, <nav>, <main>, <section>, <article>, <aside>, <footer> 등이 있습니다. 이 태그들을 적절히 사용하면 검색 엔진 최적화(SEO)와 접근성 향상에 도움이 됩니다.

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

1. header

<header> 태그는 일반적으로 웹 페이지의 상단에 위치하며, 사이트의 제목, 로고, 검색창, 네비게이션 등의 요소를 포함할 수 있습니다. <head> 태그와 혼동하지 않도록 주의해야 합니다. <head> 태그는 문서의 메타데이터를 포함하는 반면, <header> 태그는 문서의 내용 중 소개 부분을 나타냅니다.

<header> 태그는 중첩해서 사용할 수 없으며, 안에 <footer> 태그를 포함할 수도 없습니다. 하지만 HTML 문서가 여러 섹션으로 구성되어 있을 때, 각 섹션의 시작 부분에 <header>를 사용하여 해당 섹션의 소개 부분을 나타낼 수 있습니다.

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

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

2. nav

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

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

스타일링을 하지 않은 메뉴

스타일링을 한 메뉴

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

메뉴

<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>

브레드크럼

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

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

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

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

3. main

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

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

main 태그 사용 가능 브라우저

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

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

4. footer

footer는 웹 페이지의 하단에 위치하며, 페이지의 작성자, 저작권정보, 관련 문서 등의 내용을 담습니다. 아래 예시는 위니북스의 footer입니다.

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

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

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

footer 예시

5. section

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

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

<section>
  <h2>
    <span class="a11y-hidden">위니북스에 대한 설명</span>
  </h2>
  <p>위니북스란...</p>
  <!-- 생략... -->
</section>

<section>
  <h2>
    <span class="a11y-hidden">위니북스에 대한 설명</span>
  </h2>
  <p>위니북스란...</p>
  <!-- 생략... -->
</section>

6. article

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

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

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

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

article vs section

둘 중 어떤 것을 사용할지 고민될 때는 독립적으로 사용한다면 <article> 사용하시고, 웹페이지의 앞뒤 문맥이 연결성이 필요하거나, 더 적합한 의미를 가진 요소가 없을 때 <section>을 사용하세요. 단순 스타일링이 목적이라면 div 요소를 사용합니다.

7. aside

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

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

위니북스의 오른쪽 사이드바 역시 aside 태그로 구현되었습니다.

실습

지금까지 배운 다양한 태그들을 실습해볼겁니다. 아래 이미지를 어떻게 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>

<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>