[HTML/CSS] 시맨틱 태그 Semantic Tag

Semantic(语义)은 "의미가 있는"이라는 뜻. 물을 마시는 "컵", 문을 여는 "손잡이"처럼 일상 생활에서 쉽게 볼 수 있는 사물들이 각각 의미를 가지고 있는 것처럼 HTML의 여러 태그들도 각각 의미를 가지고 있다.

 

시맨틱 태그의 장점

---

1. SEO : 제목 `<h1>`, 부제목 `<h2>` 같은 시멘틱 태그를 적절하게 사용하면 검색엔진이 해당 사이트를 더 잘 이해할 수 있기 때문에 검색 최적화에 유리하다. 
2. Accessbility(웹접근성) : 시맨틱 태그를 잘 사용하면 스크린 리더(웹페이지를 음성으로 읽어주는)나 키보드만 사용해서 웹사이트를 이용하는 사람들도 큰 문제 없이 사용할 수 있다. 
3. Maintainability : `<div>` 태그만 사용해서 개발한 웹사이트보다 한 눈에 알아보기 쉬운 시맨틱 태그를 사용하면 개발자들도 유지보수하기 용이하다.

 

시맨틱 태그 사용법

---

이미지 출처 - 드림코딩

• 웹사이트의 브랜드를 나타내는 로고나 사용자를 위한 중요한 메뉴 아이템들이 담겨있다면 `<div>` 대신 `<header>` 태그를 사용한다. `<header>` 안에 들어가는 메뉴들은 `<div>`보단 `<nav>`를 사용한다.
• 웹사이트 가장 아래 부가적인 정보나 링크가 들어있다면 `<footer>`를 사용한다.
• 웹사이트에서 중요한 콘텐츠를 담고 있는 부분은 `<main>`을 사용한다.
  
  • `<main>` 페이지 안에서 콘텐츠와 직접적인 연관이 없는 부가적인 내용이 담겨있는 곳엔 `<aside>`를 사용한다(광고, 연관 링크 등)
  • `<main>` 안에서 콘텐츠를 그룹으로 나눌 땐 `<article>` 태그를 사용한다.
  • `<article>`안에서 서로 연관된 내용을 묶을 땐 `<section>` 태그를 사용한다.

 

<article>, <section>

<article> 안에서 연관된 내용을 <section>으로 묶는 방식으로 사용한 예

 

`<article>`은 문장 전체를 묶을 때 사용한다. 블로그에선 포스트 1개, 신문에선 기사 1개를 `<article>` 태그로 묶어서 사용한다. 어떤 블로그에서 `<article>` 태그가 6개라면 해당 블로그의 포스트는 6개가 있다고 볼 수 있다. 

`<article>` 태그 자체를 다른 페이지에서 보여줘도 전혀 문제가 없을 경우에 사용한다. 즉, `<main>` 태그 안에서 다른 내용들과 관계없이 독립적으로 고유한 정보를 나타낼때 사용한다. 

서로 연관된 내용을 묶고 싶을 때는 `<section>`을 사용한다. `<section>` 태그는 `<article>` 태그 뿐만 아니라 `<main>` 안에서 연관된 내용을 하나로 묶는 등 어디서든 사용할 수 있다.

 

만약 한 페이지 안에 다른 종류의 내용을 나눠서 보여줘야 한다면 아래처럼 `<section>`태그로 구역을 나누고, 하나의 `<section>` 안에 각각 다른 `<article>` 포스트를 보여주도록 할 수 있다.

 

<section>으로 구역을 나누고, 구역마다 다른 <article> 포스트를 보여주는 예

 

<i>, <em>

`<em>`과 `<i>` 모두 이탤릭체로 표현할 때 사용한다. 시각적으로만 봤을 때 둘의 차이는 없어보인다.

<p>내 이름은 <em>Johan</em>입니다. <i>서울</i>에 살고 있습니다</p>

 

 

하지만 위 코드를 스크린리더로 들어보면 `<em>` 태그를 사용한 Johan을 더 강조하는 것을 알 수 있다. 즉 `<i>` 태그는 시각적으로만 이탤릭체를 표현하고, `<em>` 태그는 강조하는 이탤릭체를 표현할 때 사용한다.

 

<b>, <strong>

`<b>`와 `<strong>` 모두 볼드체를 표현할 때 사용한다. 시각적으로 볼드체를 표현하는건 둘다 동일하다.

<p>내 이름은 <b>Johan</b>입니다. <strong>서울</strong>에 살고 있습니다</p>

 

 

스크린리더로 들어보면 `<strong>` 태그를 사용한 곳을 강조해서 읽는걸 알 수 있다. 즉, `<b>` 태그는 시각적으로만 볼드체를 표현할 때 사용하고, `<strong>`은 강조하고 싶은 중요한 볼드체를 표현할 때 사용한다.

 

순서가 없는 목록을 나타낼 때 — <ul>

unordered list — 순서 없는 목록일 때

 

<ul>
  <li>야채</li>
  <li>과일</li>
  <li>고기</li>
</ul>

 

 

순서가 있는 목록을 나타낼 때 — <ol>

ordered list — 순서가 중요할 때

 

<ol>
  <li>
    야채
    <ol>
      <li>오이</li>
      <li>상추</li>
    </ol>
  </li>
  <li>과일</li>
  <li>고기</li>
</ol>

 

 

단어(term)에 대한 설명이 묶여있는 목록을 나타낼 때 — <dl>

description list — 단어 정의와 설명에 대한 목록

 

`<dt>`(description term) 태그에 원하는 단어를 입력하고, `<dd>` (description detail) 태그엔 단어에 해당하는 설명을 입력한다.

<dl>
  <dt>HTML</dt>
  <dd>웹페이지의 골격, 문서를 만들 때 사용</dd>

  <dt>CSS</dt>
  <dd>HTML로 작성한 문서를 스타일링 할 때 사용</dd>
</dl>

 

 

<img> 태그와 CSS의 background-image

웹페이지 안에서 이미지가 하나의 중요한 요소로 자리 잡고 있을 땐 `<img>` 태그를 사용한다.

 

<img> 태그 사용 예

 

문서의 내용과는 별개로 스타일링 목적을 위해 배경 이미지로 사용할 땐 (이미지가 없어도 문서를 읽고 이해하는데 지장이 없을 때) CSS의 `background-image`를 사용한다.

 

background-image 사용 예

 

<button>, <a>

• 사용자의 특정한 액션을 위해 사용할 땐 `<button>` 태그 사용 e.g. 리뷰, 추천, 로그인, 가입, 퀴즈풀기
• 사용자가 클릭했을 때 다른 페이지로 이동해야할 땐 `<a>` 태그 사용 e.g. 링크, 홈(home)

 

<table>, CSS

• 많은 데이터를 행/열로 표현할 땐 `<table>` 태그 사용
• 단순히 스타일링을 위해 아이템을 그리드(테이블) 형식으로 표현할 땐 `<table>` 태그보단 유연하게 사용할 수 있는 CSS의 Flex나 Grid 사용.

 

레퍼런스

---

• HTML 요소 참고서 | MDN
• 한눈에 보는 HTML 요소 총 정리 | Heropy
• HTML 태그들, 헷갈리는거 정리해 보았다 | 드림코딩

 

---

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요