프론트엔드/React

Div 범벅에서 벗어나 제대로 시멘틱 태그 사용하기

홍수성찬 2023. 7. 8. 10:36

HTML 태그를 사용하게 될 때면, <div> 태그가 범벅이 된다.

그 만큼, 시멘틱 태그를 제대로 알지 못하고, 그래서 제대로 활용하지 못하고 있다는 뜻이다.

지금은 그나마 나아졌지만, 예전에는 정말로 <div>만 사용했다.

그래서 이번 기회에 시맨틱 태그를 제대로 사용하기 위해 학습하려고 한다.

 

HTML 시멘틱 태그

웹 페이지의 구조와 의미를 더 명확하게 전달하기 위해 사용한다.

이를 통해 웹 페이지의 가독성, 접근성, SEO 등이 향상될 수 있다. 더욱 효율적이고 적절한 HTML 시멘틱 태그 사용 방법과 예시를 확인하면서 학습하려고 한다.

 

<header>

웹 페이지의 머리말을 나타내는 영역으로 사용된다. 사이트 로고, 제목, 검색 폼, 사이트 내비게이션 등이 포함된다.

<header>
  <h1>Website Title</h1>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </nav>
</header>

 

<nav>

웹 페이지의 네비게이션 링크를 감싸는 컨테이너로 사용된다.

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

 

<main>

웹 페이지의 주요 콘텐츠 영역으로 사용된다. 한 페이지에 하나의 <main> 태그만 사용해야 된다.

<main>
  <h1>Main Content</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <!-- Additional content -->
</main>
 
<section>
웹 페이지의 주제나 콘텐츠를 그룹화하는 데 사용된다.
<section>
  <h2>Section Title</h2>
  <p>Section Content</p>
</section>
 
<article>
독립적인 콘텐츠 블록을 나타내는 데 사용된다. 블로그 포스트, 뉴스 기사 등 독립적인 항목에 적합하다.
<article>
  <h2>Article Title</h2>
  <p>Article Content</p>
</article>
 

<aside>

웹 페이지의 부가 콘텐츠를 표현하는 영역으로 사용된다. 사이드 바, 광고 영역 등에 사용된다.

<aside>
  <h3>Advertisement</h3>
  <p>Ad content</p>
</aside>
 

<footer>

웹 페이지의 바닥글을 나타내는 영역으로 사용된다. 연락처 정보, 저작권 정보, 사이트 링크 등이 포함된다.

<footer>
  <p>&copy; 2023 Website. All rights reserved.</p>
</footer>
 
위의 예시는 효율적이고 적절한 HTML 시멘틱 태그 사용 방법의 예시이다. 각 태그는 의미론적으로 정확하고, 웹 페이지의 구조와 콘텐츠를 명확히 전달할 수 있다. 그러나 실제 웹 페이지의 구조와 콘텐츠에 따라 적합한 시멘틱 태그를 선택하여 사용해야 한다.
 

<p>

위에서 놓친 태그가 있다. 바로 p 태그이다. 이는 단락을 나타내는 데 사용된다. 주로 텍스트 콘텐츠를 그룹화하고, 문단 단위로 표현할 때 사용된다.

 

  • 본문 텍스트: 긴 텍스트 콘텐츠 문단 단위로 구분하여 표현할 때 사용된다.
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Quisque eget dui at lacus cursus iaculis.</p>

 

  • 문단의 일반적인 텍스트 콘텐츠: 문단을 구성하는 일반적인 텍스트를 p 태그로 감싸서 구조화할 수 있다.
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>

 

  • 문단 단위의 목록 설명: p 태그를 사용하여 문단으로 목록을 설명할 수 있다.
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>
<p>Below is a list of items:</p>

 

  • 문단 단위의 인용문: 인용문을 문단 단위로 표현할 때 p 태그를 사용할 수 있다.
<p>
  "Be yourself; everyone else is already taken."
  <br />
  - Oscar Wilde
</p>

 

<p> 태그는 블록 수준 요소이기 때문에 자동으로 위 아래에 공백이 삽입되며, 브라우저에 의해 기본적으로 스타일이 적용된다. 따라서 일반적으로 텍스트 콘텐츠를 구조화하고 스타일을 적용하기 위해 사용한다. 하지만 오로지 텍스트 콘텐츠 만을 포함해야 하며, 블록 수준 요소를 중첩해서 사용할 수 없다.

 

 

그렇다면, <div> 태그는 언제 사용해야 할까?

<div> 태그는 구획을 나타내는 데 사용된다, 아무 의미를 가지지 않는 블록 수준의 요소이며, 주로 스타일링을 위한 컨테이너로 사용된다.

 

  • 구획의 그룹화: 다른 요소들을 하나의 그룹으로 묶어 스타일을 적용하거나 구조를 만들 때 사용된다.
<div>
  <h1>Heading</h1>
  <p>Paragraph</p>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
</div>

 

  • 스타일링: <div> 태그는 자체적으로 아무 의미를 가지지 않기 때문에 스타일을 적용하기 위한 컨테이너로 자주 사용된다.
<div class="container">
  <p>Content</p>
</div>

 

  • 이벤트 핸들링: 이벤트 핸들러를 등록하고 다른 요소들을 래핑하는 용도로 사용된다.
<div onClick="handleClick">
  <button>Click Me</button>
</div>

 

  • 레이아웃 구성: 다른 요소들을 묶어 원하는 레이아웃을 구성하는 데 사용된다.
<div class="header">Header</div>
<div class="main">Main Content</div>
<div class="footer">Footer</div>

 

  • 컴포넌트 래핑: 다른 컴포넌트를 래핑하여 구성 요소를 그룹화하거나 스타일링하기 위해 사용된다.
<div class="wrapper">
  <Component1 />
  <Component2 />
</div>

 

<div> 태그는 아무 의미 없는 요소로, 주로 구획의 그룹화, 스타일링, 레이아웃 구성, 컴포넌트 래핑 등의 목적으로 사용된다. 그러나 가능하면 의미론적인 요소인 시멘틱 태그(<header>, <nav>, <main>, <section> 등)를 사용하여 콘텐츠를 구조화하고 의미를 부여하는 것이 가장 좋다. <div> 태그는 상황에 따라 유용하지만, 필요한 경우에만 사용해야 한다.