HTML 강좌 / 문서 제목·설명·언어·문자 인코딩 설정하기

HTML 문서의 head에는 브라우저 탭 제목인 title, 문자 인코딩과 설명을 지정하는 meta 같은 문서 정보를 둡니다. 기본 언어는 html 요소의 lang 속성에 지정합니다. 메타 설명은 검색 결과에 반드시 그대로 표시되는 것은 아닙니다.

문서에 필요한 기본 설정

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>작은 정원 | 식물 가꾸기 안내</title>
  <meta name="description"
        content="작은 정원에서 키우기 쉬운 식물과 기본 관리 방법을 소개합니다.">
</head>
<body>
  <h1>작은 정원</h1>
  <p>식물 가꾸기를 시작해 보세요.</p>
</body>
</html>

코드를 index.html로 저장하고 브라우저에서 열면 탭에 title의 내용이 표시됩니다. h1은 페이지 본문에 보이는 제목으로, title과 역할이 다릅니다. 두 제목이 서로 모순되지 않도록 작성하세요. 전체 문서에서 head와 body를 구별하는 출발점은 HTML 문서의 기본 구조와 같습니다.

head의 내용은 대체로 페이지 본문에 직접 표시되지 않지만 문서의 해석과 소개에 쓰입니다. 반대로 독자가 화면에서 읽을 설명 문장은 body에 적어야 합니다. 다른 페이지를 만든다면 title과 설명을 모두 그 페이지 내용에 맞게 바꾸고, 사이트 이름만 반복하는 동일한 제목을 여러 파일에 복사하지 마세요.

lang과 charset이 필요한 이유

lang="ko"는 문서의 기본 언어가 한국어임을 나타냅니다. 다른 언어로 작성한 일부 구간에는 그 요소에 별도의 lang 값을 지정할 수 있습니다. 언어 정보는 보조 기술이 내용을 읽고 처리하는 데 도움이 됩니다. 언어와 문서 구조는 HTML 접근성 기본: 제목·링크·이미지·키보드의 읽기·조작 점검에도 연결됩니다.

meta charset="utf-8"은 문자 인코딩을 명시합니다. 파일 자체도 UTF-8로 저장해야 한글이 올바르게 표시됩니다. 글자가 깨진다면 태그만 확인하지 말고 편집기의 저장 인코딩과 서버 응답 헤더도 살펴보세요.

문서의 기본 언어가 영어라면 lang="en"처럼 실제 내용에 맞는 값을 사용합니다. 한국어 페이지 안에 영어 문장이 일부 있다고 해서 전체 문서의 언어를 영어로 바꿀 필요는 없습니다. 다만 발음 방식이 중요한 긴 외국어 구간에는 해당 요소에 별도의 lang을 붙일 수 있습니다.

description과 viewport의 역할

description은 페이지 내용을 짧고 구체적으로 요약한 메타데이터입니다. 독자가 페이지에서 얻을 수 있는 내용을 정확히 적되, 키워드를 나열하지 마세요. Google 검색 결과 스니펫 안내에 따르면 검색 결과의 설명은 페이지 본문이나 메타 설명 등에서 생성될 수 있으므로, 메타 설명이 그대로 노출된다고 보장할 수는 없습니다.

viewport 설정은 모바일 화면의 레이아웃 뷰포트와 확대 기준에 영향을 줍니다. 반응형 CSS와 함께 사용할 때 중요하지만, 이 태그 하나만 넣는다고 페이지 전체가 자동으로 모바일에 맞게 바뀌지는 않습니다. 요소 정의는 MDN meta 요소 문서와 MDN title 요소 문서에서 확인할 수 있습니다.

특히 글자가 작아 보인다는 이유로 확대 기능을 제한하지 마세요. 화면 폭에 맞는 CSS와 읽기 쉬운 글자 크기로 해결해야 합니다. 모바일에서 페이지를 열어 가로 스크롤과 텍스트 확대 동작을 직접 확인하는 것이 좋습니다.

설정 위치와 확인 방법 구분하기

lang은 head에 넣는 별도 태그가 아닙니다. <html lang="ko">처럼 문서의 뿌리 요소에 지정하고, 다른 언어 구간에는 해당 요소의 속성으로 적습니다.

1. 글자가 깨지면 올바른 원본 파일을 열고 편집기에서 실제 저장 인코딩을 확인합니다. 잘못 해석된 글자를 그대로 다시 저장하기 전에 원본을 보관합니다.
2. UTF-8로 저장한 파일에 charset 선언이 앞부분에 있는지 확인하고 브라우저에서 새로 엽니다. 선언만 바꾸어도 이미 손상된 문자가 복구되는 것은 아닙니다.
3. 로컬 파일은 정상인데 서버 페이지가 다르면 Network에서 문서 응답의 Content-Type과 charset을 확인합니다. 서버가 다른 인코딩을 명시한다면 서버 설정과 실제 파일을 함께 맞춰야 합니다.

MDN lang 전역 속성

게시 전 확인

각 페이지의 탭 제목이 서로 구분되는지, 본문에 보이는 제목과 일치하는지, 한국어가 깨지지 않는지 확인하세요. 페이지 설명을 작성했다면 현재 본문을 정확히 요약하는지도 다시 읽어 보세요.