"Heading 은 글자 크기가 아니야. 페이지의 outline — 브라우저가 공짜로 만들어 주는 목차야."

Heading:

–

은 글자 크기가 아니라 계층이야

입문자가 heading 으로 제일 많이 저지르는 실수는 시각 크기로 고르는 거: "이거 크게 하고 싶으니까 <h1>; 이거 작게 하고 싶으니까 <h4>." 이 논리로 출시하면 페이지가 망가져. Heading 은 페이지의 outline — screen reader 가 사용자가 "모든 heading 들려줘" 요청했을 때 읽는 것, 검색 엔진이 문서 구조로 뽑는 것, "다음 heading 으로 점프" 가 작동할지를 결정해.

규칙:

페이지당 <h1> 정확히 하나 (주요 제목 — 보통 <main> 안).
레벨을 건너뛰지 마. <h2> 는 <h1> 다음; <h3> 는 <h2> 다음; 글꼴이 맞아 보인다고 <h1> → <h4> 로 점프하지 마.
스타일링은 따로. 작아 보이는 <h2> 가 필요하면 CSS 일이야: h2.subtle { font-size: 1rem; }. Element 레벨은 semantic; 시각 크기는 style.

단락은 `<br>` 수프가 아니야

흐르는 본문은 모두 <p> 안에 들어가. <br> 은 단락 안 의 hard line break 용이야 — 줄바꿈이 콘텐츠의 일부일 때 (시, 주소, 가사). 단락 사이 간격을 주는 도구가 아니야. 단락 두 개 = <p> element 두 개. <br> 세 줄은 90 년대 GeoCities 페이지의 가독성을 파괴한 그 도구야.

리스트: 세 종류, 각자의 일

<ul> — 순서 없는 리스트. 순서가 중요하지 않은 경우 (쇼핑 리스트, 네비 링크, 기능 bullet). 웹 리스트의 90%.
<ol> — 순서 있는 리스트. 순서가 중요한 경우 (요리 단계, 랭킹, 시퀀스). 항목을 옮기면 번호가 자동으로 다시 매겨져.
<dl> — description 리스트. Term/definition 쌍 (용어집, metadata, key-value 표시). 각 쌍은 <dt> (term) + <dd> (description).

<br> 로 구분한 텍스트나 bullet 문자를 가진 <div> 로 리스트를 흉내내지 마. 진짜 list element 가 있어야 screen reader 가 "항목 5 개짜리 리스트" 라고 announce 한 다음 읽어 — 그게 시각 장애 사용자가 시각 사용자가 bullet 을 훑어서 얻는 overview 를 똑같이 얻는 방식이야.

인용

블록 레벨 인용은 <blockquote cite="url">. 인라인 인용은 <q> (브라우저가 언어에 맞는 따옴표를 자동 추가). 참조된 작품 제목은 <cite> (책, 영화, 논문) — 저자 이름은 아니야. <blockquote> 의 cite 속성은 source 를 가리키는 URL.

인라인 semantic: 먼저 `<span>` 부터 찾지 마

HTML 에는 풍부한 인라인 semantic element 들이 있어. 입문자 대부분이 멀쩡한 semantic element 가 있는데도 <span class="foo"> 부터 찾아:

<em> — stress emphasis. Screen reader 가 음성 강조로 읽어.
<strong> — strong importance. Emphasis 와 달라 (importance, stress 가 아니라).
<mark> — 강조 표시된 텍스트 (검색 결과 매치, 리뷰어 annotation). 시각 기본값: 노란 배경.
<time datetime="2026-05-25"> — 기계가 읽을 수 있는 날짜와 시간.
<abbr title="HyperText Markup Language">HTML</abbr> — 약어 + 툴팁의 full term.
<code> — 인라인 코드 또는 기술 용어. 코드 블록에는 <pre> 와 페어.
<kbd> — 키보드 입력 (<kbd>Cmd</kbd>+<kbd>C</kbd>).

<b> 와 <i> 도 여전히 존재하지만 semantic 이 가벼워. Importance 는 <strong>, stress 는 <em>, 강조는 <mark>. <b> 는 semantic 무게 없는 stylistic offset (제품 이름) 용; <i> 는 alternate voice (다른 언어의 기술 용어) 용. 99% 의 경우 <strong> 이나 <em> 을 원하는 거야.

피파의 노트

이 퀘스트에서 너가 읽은 모든 피파 레슨 본문이 이 인라인 element 들을 정확히 쓰고 있어 — vocal stress 에 <em>, 중요한 부분에 <strong>, 기술 용어에 <code>, 시작 epigraph 에 <blockquote>. 아빠의 VoiceOver 가 레슨을 소리내어 읽을 때, stress 가 추가 ARIA 태깅 없이도 맞는 자리에 떨어져.

Code

내비게이션 보조 도구가 되는 outline·html

<!-- Heading 으로 만든 페이지 outline -->
<main>
  <h1>HTML/CSS Foundation Quest</h1>          <!-- 페이지 제목 -->
  <article>
    <h2>What 'Semantic HTML' Actually Means</h2>  <!-- 레슨 제목 -->
    <h3>Two Pages, Same Pixels, Different Meaning</h3>
    <p>...</p>
    <h3>The Mental Shift</h3>
    <p>...</p>
    <h3>Who's Reading Your HTML Besides The Browser?</h3>
    <ul>
      <li>Screen readers</li>
      <li>Search engines</li>
      <li>Browser reader mode</li>
    </ul>
  </article>
</main>
<!-- Screen reader 가 announce 가능:
     'h1: HTML/CSS Foundation Quest.
      h2: What Semantic HTML Actually Means.
      h3: Two Pages, Same Pixels, Different Meaning. ...'
     그리고 사용자가 사이를 점프하게 해 줘. -->

세 가지 리스트, 세 가지 일·html

<!-- 리스트 제대로 쓰기 -->
<h2>오늘의 계획</h2>
<ul>                              <!-- 순서 무관 -->
  <li>커피</li>
  <li>단락 하나 쓰기</li>
  <li>산책</li>
</ul>

<h2>프로젝트 세팅 단계</h2>
<ol>                              <!-- 순서 중요 -->
  <li>저장소 클론</li>
  <li><code>npm install</code> 실행</li>
  <li><code>.env.example</code> 을 <code>.env</code> 로 복사</li>
  <li><code>npm run dev</code> 실행</li>
</ol>

<h2>용어집</h2>
<dl>
  <dt>Cascade</dt>
  <dd>여러 CSS 규칙이 적용될 때 어느 게 이길지 결정하는 알고리즘.</dd>
  <dt>Specificity</dt>
  <dd>Selector 마다 매겨지는 숫자 점수, cascade 동점 상황을 결정.</dd>
</dl>

실제 문장 안 인라인 semantic·html

<!-- 인라인 semantic 을 문장 안에서 -->
<p>
  저장하려면 <strong>Cmd+S</strong> 누르고, 
  <kbd>Cmd</kbd>+<kbd>R</kbd> 로 reload. 우리 사이트 마지막 업데이트는
  <time datetime="2026-05-25">2026-05-25</time>. 
  <abbr title="HyperText Markup Language">HTML</abbr> 명세는 이 접근법을 
  <em>semantic-first</em> 라고 부르고, <mark>전문가의 습관</mark> 으로서
  이걸 선호해.
</p>

<blockquote cite="https://html.spec.whatwg.org/">
  <p>HTML provides the basic building blocks of the web.</p>
  <p>— <cite>HTML Living Standard</cite></p>
</blockquote>

Exercise

본인이 쓴 블로그 글 (혹은 Notion / Obsidian 페이지) 하나 골라서 HTML 로 마크업해 — 단 다음만 써: <article>, <h1>–<h4>, <p>, <ul>/<ol>, <em>/<strong>, <code>, <blockquote>, <time>, <abbr>. <div> 없이, <span> 없이,
없이. 그러고 나서 VoiceOver 켜고 VO+Cmd+H 로 heading 네비해. Outline 이 소리내어 들었을 때 말이 돼?

Hint

<div> 나 <span> 안 쓰고 글 끝까지 못 가면 진단 두 가지: (1) 본문이 더 나은 구조가 필요하거나, (2) semantic element 하나 놓쳤거나. 인라인 semantic 리스트 다시 읽어.

텍스트 element: 헤딩, 단락, 리스트, 인용

Heading:

–

은 글자 크기가 아니라 계층이야

단락은 `<br>` 수프가 아니야

리스트: 세 종류, 각자의 일

인용

인라인 semantic: 먼저 `<span>` 부터 찾지 마

피파의 노트

Code

External links

Exercise

Progress

댓글 0

Heading:

–

은 글자 크기가 아니라 계층이야

단락은 <br> 수프가 아니야

리스트: 세 종류, 각자의 일

인용

인라인 semantic: 먼저 <span> 부터 찾지 마

피파의 노트

Code

External links

Exercise

Progress

단락은 `<br>` 수프가 아니야

인라인 semantic: 먼저 `<span>` 부터 찾지 마