UZU-DEV

1. 들어가기 전: 섹셔닝 콘텐츠(Sectioning Content)

1.1 섹셔닝 콘텐츠란

HTML에는 섹셔닝 콘텐츠(Sectioning Content) 라는 카테고리가 있다. 이 카테고리에 속한 태그들은 문서 안에서 독립적인 섹션 범위(scope) 를 만들어내며, <header> 와 <footer> 의 소속을 결정한다.

섹셔닝 콘텐츠에 속하는 태그는 딱 네 가지다.

1.2 왜 중요한가: <header> · <footer> 의 소속

<header> 와 <footer> 는 가장 가까운 상위 섹셔닝 콘텐츠(또는 <body>)에 소속된다. 이 개념이 없으면 한 페이지에 여러 <header> 가 있을 때 각자가 어디에 속하는지 혼동하기 쉽다.

<body>
  <header>  ← body에 소속된 페이지 레벨 header
    <h1>uzu-dev</h1>
  </header>

  <article>
    <header>  ← article에 소속된 글 레벨 header
      <h2>HTML 기초 1일차</h2>
    </header>
    <p>내용...</p>
    <footer>  ← article에 소속된 글 레벨 footer
      <p>태그: HTML</p>
    </footer>
  </article>

  <footer>  ← body에 소속된 페이지 레벨 footer
    <p>© 2026 uzu-dev.kr</p>
  </footer>
</body>

1.3 전체 구조 지도

┌─────────────────────────────────────────────┐
│                  <header>                    │
│   로고 / 사이트명 / 검색창                   │
│   ┌─────────────────────────────────────┐   │
│   │               <nav>                 │   │
│   │   홈 | 블로그 | 소개 | 연락처       │   │
│   └─────────────────────────────────────┘   │
├──────────────────────────┬──────────────────┤
│          <main>          │     <aside>       │
│  ┌────────────────────┐  │  ┌─────────────┐ │
│  │     <article>      │  │  │  <section>  │ │
│  │  ┌──────────────┐  │  │  │  최근 포스트│ │
│  │  │   <header>   │  │  │  └─────────────┘ │
│  │  ├──────────────┤  │  │  ┌─────────────┐ │
│  │  │  <section>   │  │  │  │  <section>  │ │
│  │  ├──────────────┤  │  │  │  카테고리   │ │
│  │  │  <section>   │  │  │  └─────────────┘ │
│  │  ├──────────────┤  │  └──────────────────┘
│  │  │   <footer>   │  │
│  │  └──────────────┘  │
│  └────────────────────┘
├──────────────────────────────────────────────┤
│                  <footer>                     │
│   저작권 / 연락처 / 관련 링크               │
└──────────────────────────────────────────────┘

2. <header>: 상단 구조

2.1 정의와 역할

<header> 는 가장 가까운 상위 섹셔닝 콘텐츠(또는 <body>)의 소개·탐색 콘텐츠를 담는 태그다. HTML 명세에 따르면 <header> 는 섹션의 제목(<h1>~<h6>)을 포함하는 것이 일반적이지만, 필수는 아니다.

<header>
  <a href="/" aria-label="uzu-dev 홈으로">
    <img src="logo.svg" alt="uzu-dev 로고">
  </a>
  <nav aria-label="전역 탐색">...</nav>
  <form role="search" aria-label="사이트 검색">
    <input type="search" placeholder="검색...">
    <button type="submit">검색</button>
  </form>
</header>

2.2 페이지 레벨 vs 섹션 레벨

<header> 는 한 페이지에 여러 번 쓸 수 있다.

<!-- 1. 페이지 레벨 header (body에 소속) -->
<header>
  <h1>uzu-dev</h1>
  <nav>...</nav>
</header>

<main>
  <!-- 2. article 레벨 header (article에 소속) -->
  <article>
    <header>
      <h2>HTML 기초 스터디 1일차</h2>
      <p>
        <span>장유주</span> ·
        <time datetime="2026-06-24">2026년 6월 24일</time>
      </p>
    </header>
    <p>오늘은 DOCTYPE 선언을 배웠다...</p>
  </article>
</main>

2.3 <header> 안에 올 수 있는 것들

<header> 는 흐름 콘텐츠(flow content)를 담을 수 있으나, 섹셔닝 콘텐츠 자체나 <header>, <footer> 는 포함할 수 없다.

<header>
  <h1>사이트 제목</h1>        ✅ 제목 태그
  <p>부제목 설명</p>          ✅ 문단
  <nav>...</nav>               ✅ 내비게이션
  <form>...</form>             ✅ 검색 폼
  <img src="logo.png" alt=""> ✅ 이미지

  <section>...</section>       ❌ 섹셔닝 콘텐츠 불가
  <header>...</header>         ❌ 중첩 불가
  <footer>...</footer>         ❌ footer 포함 불가
</header>

2.4 ARIA 랜드마크 역할

• <body> 의 가장 바깥 <header> (즉 섹셔닝 콘텐츠 안에 들어가 있지 않은 header) → banner 랜드마크.
• <article>, <aside>, <nav>, <section> 안의 <header> → 랜드마크 역할 없음.

3. <nav>: 메뉴와 링크 모음

3.1 정의와 역할

<nav> 는 페이지의 주요(major) 탐색 링크 묶음을 나타낸다. 스크린 리더 사용자가 키보드 단축키로 탐색 영역을 건너뛰거나 바로 이동할 수 있도록 명확히 표시하는 역할도 한다.

<nav aria-label="전역 탐색">
  <ul>
    <li><a href="/" aria-current="page">홈</a></li>
    <li><a href="/blog">블로그</a></li>
    <li><a href="/about">소개</a></li>
  </ul>
</nav>

3.2 aria-current="page": 현재 페이지 표시

현재 활성화된 메뉴 항목에 aria-current="page" 속성을 추가하면 스크린 리더가 "현재 페이지"임을 안내한다. CSS로 스타일만 바꾸는 것과 달리, 이 속성은 시각 없이도 현재 위치를 파악하게 한다.

<nav aria-label="전역 탐색">
  <ul>
    <li><a href="/">홈</a></li>
    <li><a href="/blog" aria-current="page">블로그</a></li>  <!-- 현재 페이지 -->
    <li><a href="/about">소개</a></li>
  </ul>
</nav>

3.3 한 페이지에 여러 <nav> 쓰기

여러 <nav> 가 있을 때는 aria-label 또는 aria-labelledby 로 구분한다.

<!-- aria-label: 직접 이름 지정 -->
<nav aria-label="전역 탐색">...</nav>

<!-- aria-labelledby: 다른 요소의 텍스트를 레이블로 참조 -->
<h2 id="toc-heading">목차</h2>
<nav aria-labelledby="toc-heading">
  <ul>
    <li><a href="#section-1">1. HTML이란</a></li>
    <li><a href="#section-2">2. 기본 골격</a></li>
  </ul>
</nav>

aria-label 과 aria-labelledby 의 차이:

• aria-label: 직접 문자열을 속성값으로 지정. 화면에 보이는 텍스트가 없을 때 적합.
• aria-labelledby: 이미 화면에 표시된 요소의 id 를 참조. 중복 없이 기존 텍스트 활용.

3.4 브레드크럼(Breadcrumb) 내비게이션

현재 페이지의 경로를 보여주는 브레드크럼도 <nav> 로 마크업한다.

<nav aria-label="브레드크럼">
  <ol>
    <li><a href="/">홈</a></li>
    <li><a href="/blog">블로그</a></li>
    <li><a href="/blog/html" aria-current="page">HTML 기초</a></li>
  </ol>
</nav>

• 브레드크럼은 <ol> 을 쓴다. 경로의 순서가 의미 있기 때문이다.
• 현재 페이지(마지막 항목)에 aria-current="page" 를 추가한다.
• aria-label="브레드크럼" 으로 전역 내비게이션과 구분한다.

3.5 모든 링크 묶음에 <nav> 를 쓰면 안 된다

<!-- 잘못된 사용: 부가적인 링크에 nav -->
<article>
  <p>이 글이 도움이 됐다면...</p>
  <nav>  ❌
    <a href="#">트위터 공유</a>
    <a href="#">페이스북 공유</a>
  </nav>
</article>

<!-- 올바른 사용: 부가 링크는 단순 div 또는 p -->
<article>
  <p>이 글이 도움이 됐다면...</p>
  <div class="share-links">  ✅
    <a href="#">트위터 공유</a>
    <a href="#">페이스북 공유</a>
  </div>
</article>

3.6 ARIA 랜드마크 역할

<nav> 는 자동으로 ARIA navigation 랜드마크 역할을 갖는다.

4. <main>: 핵심 콘텐츠 영역

4.1 정의와 역할

<main> 은 페이지의 핵심 콘텐츠 영역이다. 사이트 전반에서 반복되는 콘텐츠를 제외하고, 이 페이지에서만 고유하게 존재하는 콘텐츠를 담는다.

<!-- 반복 콘텐츠: header, nav, footer, 광고 배너 → main 밖 -->
<!-- 고유 콘텐츠: 블로그 글 본문, 검색 결과, 상품 상세 → main 안 -->

4.2 문서 내 단 하나만

<main> 은 한 문서에 하나만 존재해야 한다.

단, SPA(Single Page Application)처럼 hidden 속성으로 숨겨진 <main> 이 여러 개 있는 경우는 예외다. 페이지 전환 시 이전 <main> 은 숨기고 새로운 <main> 만 표시하는 방식에서는 동시에 두 개가 DOM에 있어도 실제로 보이는 것은 하나여야 한다.

4.3 <main> 이 올 수 없는 위치

HTML 명세는 <main> 이 다음 요소들의 자식이 되어서는 안 된다고 규정한다.

<article><main>...</main></article>  ❌
<aside><main>...</main></aside>      ❌
<footer><main>...</main></footer>    ❌
<header><main>...</main></header>    ❌
<nav><main>...</main></nav>          ❌

<main> 은 <body> 의 직접 자식이거나, CSS 레이아웃 목적의 <div> 안에 위치해야 한다.

4.4 Skip Link 패턴

스크린 리더 사용자뿐 아니라 키보드만으로 탐색하는 사용자도, 페이지마다 내비게이션을 처음부터 탭으로 건너뛰어야 하는 불편이 있다. Skip Link 는 이를 해결하는 접근성 패턴이다.

<!-- 1. 페이지 맨 처음에 숨겨진 skip link 배치 -->
<a href="#main-content" class="skip-link">주요 콘텐츠로 바로 이동</a>

<header>
  <nav>
    <!-- 탭으로 건너뛰고 싶은 긴 내비게이션 -->
    <ul>
      <li>...</li>
      <!-- ... -->
    </ul>
  </nav>
</header>

<!-- 2. main에 id 부여 -->
<main id="main-content">
  <h1>페이지 제목</h1>
  ...
</main>

/* 기본 상태: 화면에서 숨김 (display:none 금지 — 포커스 불가) */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
}

/* 포커스 시: 화면에 표시 */
.skip-link:focus {
  top: 0;
}

display: none 이 아닌 position: absolute; top: -100% 로 숨기는 이유: display: none 이나 visibility: hidden 은 키보드 포커스 자체를 막아버려 탭으로 접근이 불가능하다. Skip Link 는 포커스를 받아야 화면에 나타나는 방식이므로, 포커스는 가능하되 시각적으로만 숨겨야 한다.

4.5 ARIA 랜드마크 역할

<main> 은 자동으로 ARIA main 랜드마크 역할을 갖는다.

5. <article> 과 <section>: 콘텐츠의 독립성

5.1 핵심 판단 기준

두 태그를 구분하는 핵심 질문은 하나다.

"이 콘텐츠를 RSS 피드나 뉴스레터에 그대로 실어도 맥락 없이 의미가 전달되는가?"

그렇다면 → <article> / 아니라면 → <section> 또는 <div>

5.2 <article>: 독립적으로 완결된 콘텐츠

<article> 은 다른 페이지나 플랫폼에 그대로 배포(syndication) 하거나 공유해도 의미가 충분히 전달되는 자급 자족 콘텐츠 단위다.

<article>
  <header>
    <h2>HTML 기초 스터디 1일차</h2>
    <p>
      <span>장유주</span> ·
      <time datetime="2026-06-24">2026년 6월 24일</time>
    </p>
  </header>

  <section>
    <h3>오늘 배운 것</h3>
    <p>DOCTYPE 선언의 역할을 이해했다...</p>
  </section>

  <section>
    <h3>느낀 점</h3>
    <p>구조의 중요성을 새삼 깨달았다...</p>
  </section>

  <footer>
    <ul>
      <li>HTML</li>
      <li>Web 기초</li>
    </ul>
  </footer>
</article>

적합한 사용 사례:

<article> 의 중첩: 댓글 구조

<article> 안에 또 다른 <article> 을 넣을 수 있다. 블로그 글과 그 글에 달린 댓글이 대표적인 중첩 구조다.

<article>                        <!-- 블로그 글 -->
  <h2>HTML 기초 스터디 1일차</h2>
  <p>오늘은 DOCTYPE을 배웠다...</p>

  <section>
    <h3>댓글 3개</h3>

    <article>                    <!-- 댓글 1 -->
      <header>
        <h4>홍길동</h4>
        <time datetime="2026-06-24T10:00">2026-06-24 10:00</time>
      </header>
      <p>좋은 글 감사합니다!</p>
    </article>

    <article>                    <!-- 댓글 2 -->
      <header>
        <h4>김철수</h4>
        <time datetime="2026-06-24T11:00">2026-06-24 11:00</time>
      </header>
      <p>저도 오늘 공부했어요!</p>
    </article>
  </section>
</article>

5.3 <section>: 주제별 콘텐츠 구역

<section> 은 더 큰 콘텐츠의 일부로서 주제별로 묶이는 구역이다. 반드시 제목 태그(<h1>~<h6>)를 포함하는 것이 강력히 권장된다.

<!-- 포스트 내 장(章) 구분 -->
<article>
  <h2>웹의 역사</h2>

  <section>
    <h3>1. 인터넷의 탄생</h3>
    <p>1969년 ARPANET에서 시작됐다...</p>
  </section>

  <section>
    <h3>2. 웹의 발명</h3>
    <p>1989년 팀 버너스리가 제안했다...</p>
  </section>

  <section>
    <h3>3. 대중화</h3>
    <p>1993년 모자이크 브라우저가 등장했다...</p>
  </section>
</article>

<section> 이 <article> 을 포함하는 경우

반대로 <section> 안에 여러 <article> 이 들어갈 수도 있다. 블로그 목록 페이지가 대표적이다.

<main>
  <section>
    <h2>최근 포스트</h2>

    <article>
      <h3><a href="/post/1">HTML 기초 1일차</a></h3>
      <time datetime="2026-06-24">2026년 6월 24일</time>
    </article>

    <article>
      <h3><a href="/post/2">CSS 기초 1일차</a></h3>
      <time datetime="2026-06-25">2026년 6월 25일</time>
    </article>
  </section>
</main>

5.4 제목 없는 <section> 은 <div> 를 써라

<section> 은 반드시 가시적인 제목(<h1>~<h6>) 이 있어야 한다. 제목 없이 단순히 그룹만 짓는 용도라면 <div> 가 적합하다.

<!-- 잘못된 사용: 제목 없는 section -->
<section>  ❌
  <p>이 구역엔 제목이 없다.</p>
  <p>단순 그룹화만 필요하다.</p>
</section>

<!-- 올바른 사용: 단순 그룹화는 div -->
<div class="promo-banner">  ✅
  <p>이 구역엔 제목이 없다.</p>
  <p>단순 그룹화만 필요하다.</p>
</div>

단, aria-label 이나 aria-labelledby 로 접근 가능한 이름을 부여하면 제목 없이도 <section> 을 쓸 수 있다. 이 경우 <section> 은 ARIA region 랜드마크 역할을 갖는다.

5.5 <article> vs <section> vs <div> 선택 기준

6. <aside>: 부가 정보

6.1 정의와 역할

<aside> 는 주요 콘텐츠와 간접적으로 관련된 부가 정보를 담는 태그다. 핵심 흐름을 끊지 않고 "참고로…"처럼 곁다리 정보를 제공할 때 쓴다.

6.2 두 가지 맥락에서의 사용

페이지 레벨 <aside> — 사이드바

<div class="layout">
  <main>
    <article>...</article>
  </main>

  <aside>
    <section>
      <h2>최근 포스트</h2>
      <ul>
        <li><a href="#">CSS 기초 1일차</a></li>
        <li><a href="#">HTML 기초 2일차</a></li>
      </ul>
    </section>

    <section>
      <h2>카테고리</h2>
      <ul>
        <li><a href="#">HTML (5)</a></li>
        <li><a href="#">CSS (3)</a></li>
      </ul>
    </section>
  </aside>
</div>

<article> 레벨 <aside> — 글 내 참고 정보

<article>
  <h2>HTTP와 HTTPS의 차이</h2>
  <p>HTTP는 데이터를 평문으로 전송한다...</p>

  <aside>
    <h3>관련 글</h3>
    <p>TLS 핸드셰이크에 대한 자세한 내용은
       <a href="/tls-handshake">5편: HTTPS 핵심 원리</a>를 참고한다.</p>
  </aside>

  <p>반면 HTTPS는 TLS 암호화를 사용해...</p>
</article>

Pull Quote (인용 강조)

<article>
  <p>시맨틱 HTML을 사용하면 구조가 명확해진다.
     코드가 스스로를 설명하는 문서가 된다...</p>

  <aside>
    <blockquote>
      <p>"코드가 스스로를 설명하는 문서가 된다"</p>
    </blockquote>
  </aside>

  <p>이 접근 방식이 유지보수를 훨씬 편하게 만든다...</p>
</article>

6.3 <aside> 에 넣으면 안 되는 콘텐츠

핵심 흐름에 필수적인 콘텐츠는 <aside> 에 넣으면 안 된다. "<aside> 를 제거해도 본문을 이해하는 데 지장이 없는가?"를 기준으로 판단한다.

<!-- 잘못된 사용: 핵심 콘텐츠를 aside에 배치 -->
<article>
  <h2>HTTP란</h2>
  <aside>  ❌
    <p>HTTP는 HyperText Transfer Protocol의 약자로,
       웹에서 데이터를 주고받는 핵심 통신 규약이다.</p>
  </aside>
</article>

<!-- 올바른 사용: 핵심 콘텐츠는 p나 section에 -->
<article>
  <h2>HTTP란</h2>
  <p>  ✅
    HTTP는 HyperText Transfer Protocol의 약자로,
    웹에서 데이터를 주고받는 핵심 통신 규약이다.
  </p>
</article>

6.4 ARIA 랜드마크 역할

페이지 레벨의 <aside> 는 자동으로 ARIA complementary 랜드마크 역할을 갖는다.

7. <footer>: 하단 정보

7.1 정의와 역할

<footer> 는 가장 가까운 상위 섹셔닝 콘텐츠(또는 <body>)의 푸터 정보를 담는 태그다. 저작권, 관련 링크, 연락처, 작성자 정보, 태그 목록 등이 들어간다.

<footer>
  <nav aria-label="푸터 탐색">
    <ul>
      <li><a href="/privacy">개인정보처리방침</a></li>
      <li><a href="/terms">이용약관</a></li>
      <li><a href="/contact">연락처</a></li>
    </ul>
  </nav>
  <small>© 2026 uzu-dev.kr. All rights reserved.</small>
</footer>

7.2 페이지 레벨 vs 섹션 레벨

<header> 와 마찬가지로 <footer> 도 <article>, <section> 안에서 독립적으로 쓸 수 있다.

<article>
  <header>
    <h2>HTML 기초 스터디 1일차</h2>
  </header>

  <p>오늘 배운 내용...</p>

  <!-- article 레벨 footer: 작성자, 태그, 관련 글 -->
  <footer>
    <address>
      작성자: <a href="/about" rel="author">장유주</a>
    </address>
    <ul aria-label="태그">
      <li>HTML</li>
      <li>Web 기초</li>
    </ul>
  </footer>
</article>

7.3 <address> 태그와의 관계

<address> 는 가장 가까운 상위 <article> 또는 <body> 의 연락처 정보를 담는 태그다. <footer> 안에 자주 함께 쓰인다.

<!-- article 안의 address: 글 작성자 연락처 -->
<article>
  <footer>
    <address>
      작성자: <a href="mailto:uzu@example.com">장유주</a>
    </address>
  </footer>
</article>

<!-- 페이지 footer 안의 address: 사이트 운영자 연락처 -->
<footer>
  <address>
    문의: <a href="mailto:hello@uzu-dev.kr">hello@uzu-dev.kr</a>
  </address>
</footer>

<address> 는 물리적 주소·이메일·전화 등 연락처 정보에만 쓴다. 일반 텍스트 주소(도로명 주소)를 강조하기 위한 용도로 쓰면 안 된다.

7.4 <footer> 의 제약

<footer>
  <footer>...</footer>  ❌ 중첩 불가
  <header>...</header>  ❌ header 포함 불가
</footer>

7.5 ARIA 랜드마크 역할

• <body> 의 가장 바깥 <footer> → contentinfo 랜드마크.
• <article>, <aside>, <nav>, <section> 안의 <footer> → 랜드마크 역할 없음.

8. ARIA 랜드마크 역할 총정리

스크린 리더 사용자는 랜드마크를 이용해 페이지의 주요 영역으로 즉시 이동할 수 있다. 시맨틱 태그가 자동으로 부여하는 ARIA 역할은 다음과 같다.

9. [실습] 시맨틱 구조 안에 요소 재배치하기

1~5편에서 배운 텍스트·목록·링크·이미지 요소들을 올바른 시맨틱 구조 안에 배치해 완성된 블로그 포스트 페이지를 만든다.

9.1 완성 목표 구조

body
├── a.skip-link ("주요 콘텐츠로 바로 이동")
├── header
│   ├── p > a (사이트 로고)
│   └── nav[aria-label="전역 탐색"] > ul > li*3
├── nav[aria-label="브레드크럼"] > ol > li*3
├── div.layout
│   ├── main#main-content
│   │   └── article
│   │       ├── header (글 제목 + 날짜 + 작성자)
│   │       ├── figure (대표 이미지 + figcaption)
│   │       ├── section (1장)
│   │       ├── section (2장)
│   │       └── footer (태그 목록 + address)
│   └── aside
│       ├── section (최근 포스트)
│       └── section (카테고리)
└── footer
    ├── address (연락처)
    ├── nav[aria-label="푸터 탐색"]
    └── small (저작권)

9.2 완성 코드

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description"
    content="HTML 기초 시리즈 1일차 — DOCTYPE, head, body를 공부한 스터디 노트">
  <title>HTML 기초 스터디 1일차 | uzu-dev</title>
  <link rel="stylesheet" href="style.css">
  <link rel="icon" href="favicon.svg">
</head>
<body>

  <!-- Skip Link: 키보드 사용자를 위한 본문 바로가기 -->
  <a href="#main-content" class="skip-link">주요 콘텐츠로 바로 이동</a>

  <!-- 페이지 레벨 header -->
  <header>
    <p><a href="/">uzu-dev</a></p>
    <nav aria-label="전역 탐색">
      <ul>
        <li><a href="/">홈</a></li>
        <li><a href="/blog" aria-current="page">블로그</a></li>
        <li><a href="/about">소개</a></li>
      </ul>
    </nav>
  </header>

  <!-- 브레드크럼 내비게이션 -->
  <nav aria-label="브레드크럼">
    <ol>
      <li><a href="/">홈</a></li>
      <li><a href="/blog">블로그</a></li>
      <li><a href="/blog/html-day1" aria-current="page">HTML 기초 1일차</a></li>
    </ol>
  </nav>

  <!-- 레이아웃 래퍼 (CSS 목적) -->
  <div class="layout">

    <!-- 핵심 콘텐츠 -->
    <main id="main-content">
      <article>

        <!-- article 레벨 header: 제목, 날짜, 작성자 -->
        <header>
          <h1>HTML 기초 스터디 1일차</h1>
          <p>
            <a href="/about" rel="author">장유주</a> ·
            <time datetime="2026-06-24">2026년 6월 24일</time>
          </p>
        </header>

        <!-- 대표 이미지 -->
        <figure>
          <img
            src="https://raw.githubusercontent.com/theUZUlab/uzu-assets/main/uzu-dev/blogs/study-notes/thumbnails/html-day1.png"
            alt="DOCTYPE, html, head, body로 구성된 HTML 문서 기본 골격 코드"
            width="800"
            height="450"
            loading="eager"
          >
          <figcaption>HTML 문서의 기본 골격 — DOCTYPE 선언부터 body까지</figcaption>
        </figure>

        <!-- 1장 -->
        <section>
          <h2>1. HTML이란</h2>
          <p>
            <abbr title="HyperText Markup Language">HTML</abbr>은
            웹 문서의 <strong>구조와 의미</strong>를 정의하는 마크업 언어다.
            프로그래밍 언어가 아니므로 연산·제어 흐름은 없다.
          </p>
          <dl>
            <dt>마크업(Markup)</dt>
            <dd>태그로 콘텐츠에 의미와 구조를 표시하는 것.</dd>
            <dt>시맨틱(Semantic)</dt>
            <dd>태그가 외양이 아닌 콘텐츠의 성격을 표현하는 것.</dd>
          </dl>
        </section>

        <!-- 2장 -->
        <section>
          <h2>2. 오늘 배운 핵심</h2>
          <ol>
            <li>
              <code>&lt;!DOCTYPE html&gt;</code> —
              브라우저를 표준 모드로 동작시키는 선언
            </li>
            <li>
              <code>&lt;head&gt;</code> —
              화면에 보이지 않는 메타데이터 영역
            </li>
            <li>
              <code>&lt;body&gt;</code> —
              사용자에게 보이는 모든 콘텐츠 영역
            </li>
          </ol>
          <p>
            자세한 내용은
            <a href="/blog/html-structure"
               target="_blank"
               rel="noopener noreferrer">
              2편: HTML 문서의 기본 구조
            </a>를 참고한다.
          </p>
        </section>

        <!-- article 레벨 footer: 태그, 작성자 연락처 -->
        <footer>
          <ul aria-label="태그">
            <li>HTML</li>
            <li>Web 기초</li>
          </ul>
          <address>
            작성자: <a href="mailto:uzu@uzu-dev.kr">장유주</a>
          </address>
        </footer>

      </article>
    </main>

    <!-- 부가 정보 영역 -->
    <aside>
      <section>
        <h2>최근 포스트</h2>
        <ul>
          <li><a href="/blog/css-day1">CSS 기초 1일차</a></li>
          <li><a href="/blog/html-day2">HTML 기초 2일차</a></li>
          <li><a href="/blog/html-day1" aria-current="page">HTML 기초 1일차</a></li>
        </ul>
      </section>

      <section>
        <h2>카테고리</h2>
        <ul>
          <li><a href="/blog?cat=html">HTML <span>(5)</span></a></li>
          <li><a href="/blog?cat=css">CSS <span>(3)</span></a></li>
          <li><a href="/blog?cat=js">JavaScript <span>(2)</span></a></li>
        </ul>
      </section>
    </aside>

  </div>

  <!-- 페이지 레벨 footer -->
  <footer>
    <address>
      문의: <a href="mailto:hello@uzu-dev.kr">hello@uzu-dev.kr</a>
    </address>
    <nav aria-label="푸터 탐색">
      <ul>
        <li><a href="/privacy">개인정보처리방침</a></li>
        <li><a href="/about">소개</a></li>
        <li><a href="/contact">연락처</a></li>
      </ul>
    </nav>
    <small>© 2026 uzu-dev.kr. All rights reserved.</small>
  </footer>

</body>
</html>

9.3 배치 결정 근거