HTML/CSS 에센셜

Sections

1. 왜 시멘틱한 마크업을 해야할까?

시멘틱 마크업은 인터넷에 떠다니는 정보들을 컴퓨터가 이해할 수 있고, 그 정보를 가공할 수 있도록 하는 것이 목적입니다. 또한, 웹 접근성을 향상시켜 정보 격차를 해소하는 데 도움을 줍니다.

2. `<header>`

소개 및 탐색에 도움을 줍니다.
회사명, 제목, 로고, 검색 폼, 작성자 이름 등의 요소가 포함 될 수 있어요.
<head> 태그와 혼동하지 마세요!
HTML 문서가 여러 섹션으로 구성되어 있을 때 각 섹션의 시작 부분에 <header>를 사용할 수 있습니다

헤더를 중첩 사용하거나 헤더 안에 푸터를 사용할 수 없습니다

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

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

3. `<nav>`

navigation bar
문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여줍니다.

내부에는 메뉴, 목차, 브레드크럼(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> 태그를 가질 수 있습니다.

4. `<footer>`

페이지의 작성자, 저작권정보, 페이지 관련 문서 등의 내용을 담습니다.

5. `<main>`

body의 주요 콘텐츠를 나타냅니다.
웹페이지에서 한 번만 사용할 수 있습니다.
사이드바, 탐색 링크, 저작권정보, 사이트 로고, 검색 폼 등 여러 페이지에 반복되는 콘텐츠를 포함해서는 안 됩니다.
- 검색 폼이 주요 기능이라면 예외입니다.

6. `<article>`

독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타냅니다.
- 사이트의 다른 기능에 영향을 주지 않고 독립적인 기능을 수행합니다.
- 아티클 영역을 제거해도 페이지는 정상적으로 돌아갑니다.
아티클이 대표적으로 사용되는 곳은 뉴스 홈페이지입니다.
- 다양한 기사들이 한 페이지에 담겨있지만, 이 기사들은 각각 독립적으로 사용됩니다.
- 시간마다 노출되는 기사가 달라져도 홈페이지는 정상적으로 운영됩니다.
게시판, 블로그 글, 매거진, 뉴스 기사, 위젯, 실시간 채팅 창 등
제목 요소를 자식으로 포함하여야 합니다!

7. `<section>`

문서 내에서 특정한 섹션을 정의하는 데 사용됩니다. 이 태그는 일반적으로 주제나 컨텐츠를 구분짓기 위해 사용됩니다.
- 뉴스의 사회면 / 연예면 각각의 부분을 나타낼 수 있습니다
제목 요소를 자식으로 포함하여야 합니다!

<article> vs <section>

일단 article 사용을 우선 고민해보세요. 독립적으로 사용한다면 article 사용하시고, 웹페이지의 앞뒤 문맥이 연결성이 필요하거나, 더 적합한 의미를 가진 요소가 없을 때 section을 사용하세요! 단순 스타일링이 목적이라면 div 요소를 사용합니다!

8. `<aside>`

문서의 주요 내용과 간접적으로 연관된 부분을 나타냅니다.
문서의 주요 흐름을 따라가지 않고, 보조적인 역할만 하는 공간입니다.
광고 배너,사이드바 등에 사용합니다.

9. `<hr>`

이야기에서 장면 전환 혹은 문단 안에서 주제가 변경되었을 때 사용합니다.
단락을 구분할 때 사용하므로 <p> 태그 내의 사용은 하지 않습니다!

+) 그래도 호환 이슈가 걱정된다면?

대부분의 모던 웹 브라우저(Chrome, Firefox, Safari, Edge 등)은 HTML5를 완벽하게 지원합니다. 하지만 오래된 버전의 Internet Explorer(IE)는 HTML5와 시맨틱 태그 지원에 제한이 있습니다.
오래된 브라우저와의 호환성을 위해 div 태그를 함께 사용하는 방법도 있습니다.

<div id="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>
</div>
 
<div id="main">
  <main>
    <article>
      <h2>Welcome to my website!</h2>
      <p>This is the main content area.</p>
    </article>
  </main>
</div>
 
<div id="footer">
  <footer>
    <p>&copy; 2024 Weniv Website. All rights reserved.</p>
  </footer>
</div>

<div id="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>
</div>
 
<div id="main">
  <main>
    <article>
      <h2>Welcome to my website!</h2>
      <p>This is the main content area.</p>
    </article>
  </main>
</div>
 
<div id="footer">
  <footer>
    <p>&copy; 2024 Weniv Website. All rights reserved.</p>
  </footer>
</div>

이렇게 div 태그와 시맨틱 태그를 함께 사용하면 오래된 브라우저에서도 문제없이 동작하면서, 동시에 시맨틱 태그의 장점을 활용할 수 있습니다.

시멘틱한 웹사이트 참고하기

Sections

1. 왜 시멘틱한 마크업을 해야할까?

2. <header>

3. <nav>

4. <footer>

5. <main>

6. <article>

7. <section>

8. <aside>

9. <hr>