head 정리 | 웹접근성 빌드업

개요

다른 프로젝트에 붙일 때 문서 최상단 체크리스트 · meta만이 아니라 html · title · 폰트 · CSS 순서까지

원문 매뉴얼: docs/head.md

필수

head 필수 항목
항목	예시 / 규칙
`<!DOCTYPE html>`	HTML5 선언
`<html lang="ko">`	페이지 언어 (스크린리더 발음·번역에 필요)
`<meta charset="UTF-8">`	head 최상단에 두기
`<meta name="viewport" …>`	`width=device-width, initial-scale=1`
`<title>`	페이지마다 고유 · 내용 파악 가능하게
CSS	본문 스타일 로드

viewport — 하지 말 것

<!-- ❌ 저시력 사용자 확대 불가 → 접근성 위반 소지 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<!-- ✅ -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

title 권장 형식

페이지명 | 사이트명
예) 버튼 | 웹접근성 빌드업

탭/즐겨찾기·스크린리더가 먼저 읽는 정보입니다.

모든 페이지가 같은 title이면 안 됩니다.

(선택) location 연동 시 JS로 경로 | 사이트명 갱신 → common.js

권장

head 권장 항목
항목	설명
`<meta name="description">`	페이지 요약 (비워 두지 말 것. 없으면 태그 삭제)
`color-scheme`	브라우저 UI·폼 컨트롤 톤 (다크 미지원 시 `light`)
폰트 `preload` + `crossorigin`	FOIT/레이아웃 흔들림 완화 · crossorigin 필수(폰트)
`<link rel="icon">`	탭 식별 (실서비스에서 경로 지정)
`format-detection`	전화번호 자동링크 방지가 필요하면 `telephone=no`

선택 (실서비스에서 채우기)

빈 값으로 두지 마세요. 쓸 때만 넣고 실제 내용을 채웁니다.

<meta name="author" content="기관명">
<link rel="icon" href="/favicon.ico">

<!-- Open Graph / SNS (내용 있을 때만) -->
<meta property="og:type" content="website">
<meta property="og:title" content="페이지 제목">
<meta property="og:description" content="요약">
<meta property="og:url" content="https://example.go.kr/page">
<meta property="og:image" content="https://example.go.kr/og.png">
<meta property="og:locale" content="ko_KR">

X-UA-Compatible · Cache-Control 은 레거시/개발용. 모던 브라우저만 대상이면 X-UA는 생략해도 됩니다.

이 킷 기본 템플릿

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="format-detection" content="telephone=no">
    <meta name="color-scheme" content="light">

    <title>페이지명 | 웹접근성 빌드업</title>
    <meta name="description" content="이 페이지가 다루는 내용을 한 문장으로">

    <!-- <link rel="icon" href="/a11y/favicon.ico"> -->

    <link rel="preload" href="/font/Pretendard-Regular.subset.woff2" as="font" type="font/woff2" crossorigin>
    <link rel="preload" href="/font/Pretendard-Medium.subset.woff2" as="font" type="font/woff2" crossorigin>
    <link rel="preload" href="/font/Pretendard-SemiBold.subset.woff2" as="font" type="font/woff2" crossorigin>
    <link rel="preload" href="/font/Pretendard-Bold.subset.woff2" as="font" type="font/woff2" crossorigin>

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

body 쪽과 짝을 이룰 것

head만으로 끝나지 않습니다.

head와 짝이 되는 body 요소
항목	위치
스킵 네비게이션	`#skipToContent` (`common.css`)
랜드마크	`header` / `nav` / `main` 또는 `#container` / `footer`
페이지 제목	`h2.ptitle` 등 보이는 제목 (`title`과 의미 일치)

체크리스트

lang 지정
charset이 head 앞쪽
viewport에 확대 제한 없음
title 고유·의미 있음
description 비어 있지 않음 (또는 태그 없음)
빈 og/meta 더미 없음
폰트 preload에 crossorigin
스킵 링크·본문 제목은 body에 준비

head 요소 정리

개요