HTML 입문: 시맨틱 문서와 접근 가능한 폼 만들기

<!doctype html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>문의 폼 연습</title>
</head>
<body>
  <header>
    <nav aria-label="주요 메뉴"><a href="#contact">문의하기</a></nav>
  </header>
  <main>
    <h1>서비스 안내</h1>
    <section id="contact">
      <h2>문의하기</h2>
      <form>
        <label for="email">이메일</label>
        <input id="email" name="email" type="email" required>
        <button type="submit">확인</button>
      </form>
    </section>
  </main>
  <footer><p>연습 페이지</p></footer>
</body>
</html>

준비

별도 Node.js나 npm이 필요하지 않습니다.

준비할 것은 다음 세 가지입니다.

VS Code
브라우저
작업 폴더

폴더를 만듭니다.

taskflow-publishing/
├─ index.html
└─ style.css

HTML 기본 문서

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <title>TaskFlow</title>
    <link
      rel="stylesheet"
      href="./style.css"
    />
  </head>
  <body>
    <main>
      <h1>TaskFlow</h1>
    </main>
  </body>
</html>

lang

lang="ko"는 문서의 기본 언어가 한국어라는 의미입니다.

화면에 보이지 않지만 브라우저와 보조기술이 문서를 이해하는 데 사용합니다.

charset

UTF-8을 지정해 한글과 다양한 문자를 안정적으로 처리합니다.

viewport

모바일 브라우저에서 실제 화면 폭을 기준으로 반응형 CSS가 동작하도록 합니다.

시맨틱 HTML

다음처럼 모든 영역을 div로 만들 수도 있습니다.

<div class="header">
  ...
</div>
<div class="main">
  ...
</div>

하지만 문서 역할을 이미 설명하는 HTML 요소가 있다면 이를 먼저 사용합니다.

<header>
  ...
</header>


<main>
  ...
</main>


<footer>
  ...
</footer>

시맨틱 HTML은 검색 엔진만을 위한 기술이 아닙니다. 브라우저, 보조기술, 개발자가 문서 구조를 이해하는 공통 기준입니다.

header와 nav

<header>
  <a href="/">
    TaskFlow
  </a>


  <nav aria-label="주요 메뉴">
    <a href="#features">기능</a>
    <a href="#contact">문의</a>
  </nav>
</header>

nav가 여러 개라면 aria-label로 목적을 구분하는 것이 도움이 됩니다.

main

한 페이지의 핵심 콘텐츠는 main에 둡니다.

<main>
  <section>
    <h1>오늘의 작업을 정리하세요</h1>
    <p>
      TaskFlow는 해야 할 일을 빠르게 정리하는 서비스입니다.
    </p>
  </section>
</main>

일반적인 문서에서는 main landmark를 하나만 사용하는 것이 이해하기 쉽습니다.

section과 heading

section은 주제가 있는 문서 영역에 사용합니다.

<section id="features">
  <h2>주요 기능</h2>
  <p>작업 추가, 완료, 정리를 한 화면에서 관리합니다.</p>
</section>

section을 단순 스타일 wrapper처럼 사용하기보다 heading과 함께 명확한 주제를 갖도록 구성합니다.

heading 순서

h1
└─ h2
   └─ h3

글자 크기를 줄이기 위해 h4로 건너뛰는 식으로 사용하지 않습니다.

크기는 CSS가 담당하고 heading level은 문서 구조를 담당합니다.

접근 가능한 폼

문의 폼을 만들어 보겠습니다.

<form>
  <div>
    <label for="name">
      이름
    </label>
    <input
      id="name"
      name="name"
      type="text"
      autocomplete="name"
    />
  </div>


  <div>
    <label for="email">
      이메일
    </label>
    <input
      id="email"
      name="email"
      type="email"
      autocomplete="email"
    />
  </div>


  <div>
    <label for="message">
      문의 내용
    </label>
    <textarea
      id="message"
      name="message"
      rows="5"
    ></textarea>
  </div>


  <button type="submit">
    문의 보내기
  </button>
</form>

label의 for와 input의 id가 같아야 합니다.

라벨 텍스트를 클릭하면 input에 focus가 이동하는지도 확인합니다.

placeholder는 label을 대신하지 않습니다

<input
  type="email"
  placeholder="이메일"
/>

placeholder는 입력 후 사라질 수 있고 label과 역할이 다릅니다.

입력 필드가 무엇인지 설명하는 label은 유지합니다.

link와 button

링크는 이동을 담당합니다.

<a href="/pricing">
  요금제 보기
</a>

버튼은 동작을 실행합니다.

<button type="submit">
  문의 보내기
</button>

디자인 때문에 anchor와 button의 의미를 뒤섞지 않습니다.

DevTools로 구조 확인

브라우저에서 index.html을 연 뒤 DevTools Elements를 확인합니다.

다음 순서가 실제 DOM에도 존재하는지 봅니다.

header
main
  section
  section
  form
footer

Elements에서 잘못 중첩된 요소나 예상과 다른 DOM 구조가 없는지 확인합니다.

자주 발생하는 오류

CSS가 연결되지 않습니다

href 경로를 확인합니다.

<link
  rel="stylesheet"
  href="./style.css"
/>

Network 탭에서 style.css 요청이 404인지 확인합니다.

label을 클릭해도 input에 focus가 안 갑니다

for와 id가 같은지 확인합니다.

heading을 디자인 용도로 사용합니다

문서 구조를 먼저 정하고 글자 크기는 다음 회차 CSS에서 조절합니다.

학습 완료 체크리스트

• HTML 기본 문서를 만들 수 있습니다.
• header, nav, main, section, footer 역할을 설명할 수 있습니다.
• heading 순서를 문서 구조 기준으로 사용할 수 있습니다.
• label과 input을 연결할 수 있습니다.
• link와 button을 구분할 수 있습니다.
• DevTools Elements에서 DOM 구조를 확인할 수 있습니다.

독립 실습은 여기서 마칠 수 있습니다. 아래 선택 실습은 TaskFlow 프로젝트 파일로 진행합니다.

<!DOCTYPE html>
<html lang="ko">
 <head>
  <meta charset="utf-8"/>
  <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
  <title>
   TaskFlow
  </title>
  <link href="./style.css" rel="stylesheet"/>
 </head>
 <body>
  <header>
   <a href="#home">
    TaskFlow
   </a>
   <nav aria-label="주요 메뉴">
    <a href="#features">
     기능
    </a>
    <a href="#contact">
     문의
    </a>
   </nav>
  </header>
  <main id="home">
   <section>
    <h1>
     해야 할 일을 한눈에 정리하세요
    </h1>
    <p>
     TaskFlow는 오늘의 작업을 빠르게 정리하는 서비스입니다.
    </p>
   </section>
   <section id="features">
    <h2>
     주요 기능
    </h2>
    <article>
     <h3>
      빠른 작업 추가
     </h3>
     <p>
      해야 할 일을 바로 기록할 수 있습니다.
     </p>
    </article>
   </section>
   <section id="contact">
    <h2>
     문의하기
    </h2>
    <form>
     <div>
      <label for="name">
       이름
      </label>
      <input autocomplete="name" id="name" name="name" type="text"/>
     </div>
     <div>
      <label for="email">
       이메일
      </label>
      <input autocomplete="email" id="email" name="email" type="email"/>
     </div>
     <div>
      <label for="message">
       문의 내용
      </label>
      <textarea id="message" name="message" rows="5"></textarea>
     </div>
     <button type="submit">
      문의 보내기
     </button>
    </form>
   </section>
  </main>
  <footer>
   <p>
    © TaskFlow
   </p>
  </footer>
 </body>
</html>

body {
  font-family: Arial, sans-serif;
}

publishing-step-01-html-form

다음 학습

글 소개·학습 준비·전체 목차

웹 퍼블리싱 · 1 / 15 · 필수 최초 진입 · HTML 시맨틱 문서와 폼

HTML 문서는 header·nav·main·section·footer로 영역의 의미를 구분하고, 폼은 label의 for와 input의 id를 같게 연결해 작성합니다. 파일을 브라우저에서 열어 링크 이동·라벨 초점·기본 입력 검사를 확인하면 문서와 폼의 구조를 직접 설명할 수 있습니다.

이번 글에서는 VS Code에서 HTML/CSS 파일을 만들고 브라우저로 확인하는 것부터 시작해 header, nav, main, section, form, footer를 사용하는 시맨틱 문서와 label이 연결된 접근 가능한 폼을 작성합니다.

상단의 practice.html 한 파일로 문서와 폼을 확인합니다. 하단에서는 같은 원칙으로 15회 동안 발전시킬 TaskFlow 정적 서비스 화면의 첫 체크포인트를 만듭니다.

이번 글에서 배우는 내용

• HTML 기본 문서 구조
• lang, charset, viewport
• header·nav·main·section·footer
• heading 순서
• form·label·input·button
• link와 button의 역할 차이
• DevTools Elements 확인
• TaskFlow 정적 화면 첫 구성

먼저 알아야 할 내용

파일·폴더를 만들고 HTML을 UTF-8로 저장할 수 있으면 됩니다. VS Code와 브라우저 외에 별도 런타임은 필요 없습니다.

목차