HTML 완전 해설

문서 개요와 시맨틱 태그

HTML5는 header, nav, main, section, article, aside, footer 같은 시맨틱 요소를 제공합니다. 이들은 화면 표시에 영향을 주지 않지만 콘텐츠 구조를 표현하여 사용자보조기기와 검색엔진이 맥락을 파악하기 쉽게 만듭니다.

<article>
  <header><h2>기사 제목</h2></header>
  <section>
    <h3>소제목</h3>
    <p>본문 내용...</p>
  </section>
  <aside>관련 링크/주석</aside>
  <footer>작성자, 날짜</footer>
</article>

목록과 제목 계층

제목은 문서의 계층을 형성합니다. h1은 최상위, 이후 h2~h6로 논리적으로 이어져야 합니다. 목록은 ul과 ol을 사용하고, 정의 목록은 dl, dt, dd를 사용합니다.

<h1>문서 제목</h1>
<h2>큰 섹션</h2>
<h3>소섹션</h3>

<ul>
  <li>항목 A</li>
  <li>항목 B</li>
</ul>

<dl>
  <dt>용어</dt>
  <dd>설명</dd>
</dl>

텍스트와 인라인 의미

인라인 태그는 문장 내 의미를 표현합니다. 예: strong(강조, 중요), em(강세), cite(출처), code(코드), kbd(키 입력), samp(샘플 출력), mark(하이라이트).

예시: 키보드 단축키는 Ctrl + K, 코드 조각은 <span>처럼 표시합니다.

역할과 이름/상태

역할(role)은 컴포넌트 타입, 이름(name)은 레이블, 상태(state)는 현재 값이나 활성화 여부를 전달합니다. 시맨틱 요소가 있으면 역할을 중복 지정하지 않는 것이 원칙입니다.

<button aria-pressed="false" aria-label="즐겨찾기 토글">★</button>
<div role="alert">저장되었습니다!</div>

폼 접근성

label과 폼 컨트롤의 연결(for/id 혹은 감싸기), fieldset/legend로 그룹 의미 전달, 에러 메시지는 aria-live로 동적 알림.

<form aria-describedby="form-help">
  <p id="form-help">* 표시는 필수 항목입니다.</p>
  <fieldset>
    <legend>회원 정보</legend>
    <label for="name">이름*</label>
    <input id="name" name="name" required>

    <label for="email">이메일*</label>
    <input id="email" name="email" type="email" required>
  </fieldset>

  <div aria-live="polite" id="error-region"></div>
  <button type="submit">제출</button>
</form>

입력 유형

email, url, number, date, tel, search 등은 모바일 키보드를 적절히 표시하고 기본 검증을 제공합니다.

제약 검증 API

브라우저의 기본 검증 메시지를 활용하거나 JS로 커스터마이즈할 수 있습니다. checkValidity(), reportValidity(), setCustomValidity() 등을 사용합니다.

<script>
const form = document.querySelector('form');
form.addEventListener('submit', (e) => {
  if (!form.checkValidity()) {
    e.preventDefault();
    const email = document.getElementById('f-email');
    if (!email.validity.valid) {
      email.setCustomValidity('올바른 이메일을 입력하세요.');
      email.reportValidity();
    } else {
      email.setCustomValidity('');
    }
  }
});
</script>

이미지

의미 있는 이미지는 alt를 제공하고, 장식적 이미지는 빈 alt=""로 스크린리더가 건너뛰게 합니다.

오디오/비디오

컨트롤을 제공하고, 자막(track)이나 대본을 함께 제공하십시오.

SVG

벡터 기반으로 스케일에 강합니다. 아이콘은 role="img"와 aria-label을 사용해 이름을 제공할 수 있습니다.

Canvas

Canvas는 픽셀 드로잉이므로 접근성 대체 설명을 제공해야 합니다. 복잡한 그래픽의 경우 별도 설명을 텍스트로 제공하세요.

성능 최적화

• 리소스 힌트: preload, prefetch, preconnect로 네트워크 대기시간 감소
• 이미지 최적화: loading="lazy", srcset/sizes로 적절한 해상도 제공
• JS 분할: type="module"와 defer로 파싱 차단 최소화
• CSS 크리티컬 경량화: Above-the-fold 스타일 최소 인라인, 나머지 분리

<link rel="preload" as="style" href="styles.css">
<script src="main.js" type="module" defer></script>
<img src="img-640.jpg"
     srcset="img-320.jpg 320w, img-640.jpg 640w, img-1280.jpg 1280w"
     sizes="(max-width: 640px) 100vw, 640px"
     loading="lazy" alt="반응형 이미지 예시">

SEO 베스트 프랙티스

• 고유 제목/설명: <title>, description 메타 충실히 작성
• 구조화 데이터: Schema.org JSON-LD로 문서 의미 제공
• 접근성: 알트텍스트, 제목 계층, 스킵링크 등은 검색 인덱싱에도 긍정적
• 정규화: canonical로 중복 컨텐츠 정리

언어/방향성

문서 전체는 lang으로, 부분적으로 다른 언어가 필요한 경우 요소별 lang을 지정합니다. RTL 언어에는 dir="rtl"을 사용합니다.

예시: HyperText Markup Language, لغة ترميز النص التشعبي

시간/지역 형식

time 요소를 사용해 기계가 읽을 수 있는 날짜/시간을 제공하세요.

전주(대한민국) 기준: 2025년 10월 21일 19:42 (KST)

템플릿과 사용자 정의 요소

template는 렌더링되지 않는 마크업을 담고, JS로 복제하여 사용합니다. Shadow DOM은 스타일/구조를 캡슐화합니다.