Frontend Academy · 강의

시맨틱 HTML5: 시맨틱 요소와 div 남용 비교

의미 없는 래퍼 div를 시맨틱 요소로 바꾸고 문서 개요 알고리즘과 제목 계층 구조를 이해합니다.

레슨 3/413개 단계

시맨틱 HTML5: 시맨틱 요소와 div 남용 비교은(는) CoddyKit의 무료 Frontend Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Frontend Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

div 수프 — 문제점

div 수프는 <div>와 <span> 요소만으로 구성된 페이지입니다. 구조를 전달하려면 클래스 이름이 필요하고, 이러한 클래스가 없으면 화면 낭독기가 이해할 수 없으며, 검색 엔진에도 의미를 전달하지 못합니다.

<!-- Div soup (avoid) -->
<div class="container">
  <div class="header">
    <div class="logo">...</div>
    <div class="nav">...</div>
  </div>
  <div class="content">...</div>
  <div class="footer">...</div>
</div>

의미 요소를 사용하는 대안

의미 없는 div를 목적을 전달하는 의미 요소로 대체하십시오. 이제 구조 자체가 설명 역할을 하므로 CSS 없이도 이해할 수 있습니다.

<!-- Semantic HTML (preferred) -->
<body>
  <header>
    <a href="/"><img src="logo.svg" alt="Brand"></a>
    <nav>...</nav>
  </header>
  <main>...</main>
  <footer>...</footer>
</body>

문서 개요 알고리즘

제목 요소(h1-h6)는 문서 개요를 만듭니다. 화면 낭독기 사용자는 제목으로 탐색합니다. 보조 기술은 개요 수준을 알려 줍니다. 계층을 논리적으로 유지하십시오: 페이지 제목에는 h1, 주요 섹션에는 h2, 하위 섹션에는 h3을 사용합니다.

<time> — 기계 판독용 날짜

<time> 요소는 기계가 읽을 수 있는 datetime 속성으로 날짜와 시간을 표시합니다. 검색 엔진은 이벤트 날짜를 이해하고, 화면 낭독기는 형식이 지정된 날짜를 읽을 수 있습니다.

<p>Published on <time datetime="2025-06-15">June 15, 2025</time></p>
<time datetime="2025-06-15T14:30">2:30 PM</time>

<address>

<address> 요소는 가장 가까운 article 또는 문서의 연락처 정보를 감쌉니다. 우편 주소일 필요는 없으며 이메일, 전화번호, 소셜 계정 식별자도 포함됩니다.

<address>
  <a href="mailto:hello@coddy.app">hello@coddy.app</a><br>
  <a href="https://twitter.com/coddykit">@coddykit</a>
</address>

<figure>와 <figcaption>

<figure>는 이미지, 차트, 코드 예시, 동영상처럼 독립적인 콘텐츠를 감쌉니다. <figcaption>은 figure에 의미상 연결된 캡션을 제공합니다.

<figure>
  <img src="chart.png" alt="Monthly active users 2025">
  <figcaption>Figure 1: Monthly active users increased 42% in Q4 2025.</figcaption>
</figure>

<blockquote>와 <cite>

<blockquote>는 긴 인용문을 표시합니다. 출처 URL에는 cite 속성을 사용하십시오. <cite> 요소는 창작물(책, 글, 영화)의 제목을 표시합니다.

<blockquote cite="https://developer.mozilla.org">
  <p>HTML is the standard markup language for creating web pages.</p>
  <footer>—<cite>MDN Web Docs</cite></footer>
</blockquote>

<details>와 <summary>

<details>와 <summary>를 함께 사용하면 JavaScript 없이 기본 제공 아코디언/공개 위젯을 만들 수 있습니다. 브라우저가 열기와 닫기, 키보드 상호 작용, 접근성을 자동으로 처리합니다.

<details>
  <summary>What is the refund policy?</summary>
  <p>We offer a 30-day money-back guarantee on all plans.</p>
</details>

<mark> — 강조된 텍스트

<mark>는 검색 결과 일치 항목처럼 참고를 위해 강조된 텍스트를 나타냅니다. CSS로 텍스트를 노란색으로 꾸미는 것과는 의미가 다릅니다.

<p>Search results for <q>flexbox</q>:</p>
<p>Use <mark>flexbox</mark> for one-dimensional layouts...</p>

<abbr> — 약어

약어와 두문자어는 <abbr>로 감싸고, title 속성에 전체 용어를 제공하십시오. 화면 낭독기와 브라우저는 마우스를 올렸을 때 사용자에게 확장된 표현을 제공합니다.

<abbr title="Cascading Style Sheets">CSS</abbr>
<abbr title="Accessible Rich Internet Applications">ARIA</abbr>

<div>와 <span>을 사용하는 경우

둘 다 여전히 유용합니다. 의미가 없는 일반 블록 래퍼(레이아웃 컨테이너나 React의 구성 요소 루트)에는 <div>가 적합합니다. 의미 없이 인라인 스타일을 적용할 연결 지점에는 <span>을 사용하십시오.

빠른 확인

JavaScript 없이 기본 제공 접기/펼치기 공개 위젯을 만드는 HTML 요소는 무엇입니까?

인터랙티브 레슨에서 답해보세요

복습: 의미 있는 HTML5

div 수프를 의미 요소로 대체하십시오: header, nav, main, article, section, aside, footer. 날짜에는 time을, 미디어에는 figure/figcaption을, 아코디언에는 details/summary를, 강조에는 mark를 사용하십시오. 의미가 없는 레이아웃 컨테이너에는 div와 span을 사용하십시오.

무료로 시작

AI 튜터와 함께 HTML을(를) 배우세요 — 무료

브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.

코스: 41
레슨: 163

무료로 학습 시작 전체 코스 보기

자주 묻는 질문