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

HTML 문서의 head에는 브라우저 탭에 표시할 title, 문서 언어를 나타내는 html lang, 문자를 해석할 때 필요한 meta charset 등을 설정합니다. 페이지 설명은 meta name="description"으로 제공할 수 있지만, 검색 결과에 반드시 그대로 표시되는 것은 아닙니다.

문서에 필요한 기본 설정

<!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에 적어야 합니다. 다른 페이지를 만든다면 title과 설명을 모두 그 페이지 내용에 맞게 바꾸고, 사이트 이름만 반복하는 동일한 제목을 여러 파일에 복사하지 마세요.

lang과 charset이 필요한 이유

lang="ko"는 문서의 기본 언어가 한국어임을 나타냅니다. 다른 언어로 작성한 일부 구간에는 그 요소에 별도의 lang 값을 지정할 수 있습니다. 언어 정보는 보조 기술이 내용을 읽고 처리하는 데 도움이 됩니다.

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

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

description과 viewport의 역할

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

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

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

게시 전 확인

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