<title> 태그의 정의 및 사용법

<title> 태그는
HTML 문서의 타이틀(title, 제목이나 이름)을 나타내는 태그입니다.

이 타이틀은 화면에서 표시되지는 않지만
브라우저의 제목 표시줄이나 페이지 탭에 보이는 제목으로 사용되며,
시각장애인을 위한 스크린 리더에서도 읽을 수 있어 HTML 문서에서 필수적으로 제공해야 하는 정보입니다.

HTML 문서당 <title> 요소가 하나만 있어야 합니다.

HTML 
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>이 페이지의 타이틀</title> <!-- 문서의 타이틀 -->
    </head>
    <body>
        <!-- ... -->
    </body>
</html>

<title> 태그의 형식은 다음과 같습니다.

기술적인 구문 요약

title 태그의 기술적인 구문 요약
필수 부모 요소 <head>
허용되는 콘텐츠 콘텐츠가 없이 비어 있으면 안 됨. 텍스트로 구성된 콘텐츠만 허용됨
주석(comment)을 나타내는 표기(<!-- -->)나 요소를 나타내는 태그는 무시되어 주석처리되지 않고 텍스트로 간주됨

필수 부모 요소

<title> 태그는 반드시 <head>의 자식 요소로만 사용되어야 합니다.

<head> 태그는 현재의 문서가 상위 문서(예를 들어, <iframe> 문서)를 가지고 있어서 문서의 타이틀 정보를 제공하는 경우가 아니면,
반드시 <title> 요소를 자식 요소로 두고 있어야 합니다. 이 <title> 요소는 해당 HTML 문서의 타이틀을 제공합니다.

허용되는 콘텐츠

<title> 태그의 콘텐츠는 HTML 문서의 타이틀(title, 제목이나 이름)을 나타내는 것으로 콘텐츠가 없으면 안 됩니다. 텍스트로 구성된 콘텐츠만 허용됩니다.

주석(comment)을 나타내는 표기(<!-- -->)나 요소를 나타내는 태그는 무시되어 주석처리되지 않고 텍스트로 간주됩니다.

HTML 
<title><!-- 주석처리되지 않음 --></title>
텍스트로 간주됩니다.
HTML 
<title><span>요소로 처리되지 않음</span></title>
텍스트로 간주됩니다.

접근성 고려사항

HTML의 모든 요소가 그러하듯이 <title> 태그를 사용할 때에도 접근성을 고려해야 합니다.
특히 <title> 태그로 정의하는 HTML 문서의 타이틀(title, 제목이나 이름)은 텍스트로서 접근성에서 고려해야 할 사항이 있습니다.

<html> 태그에 유효한 lang 속성 사용

HTML 문서의 루트 요소인 <html> 태그에는 유효한 lang 속성을 지정해서 해당 문서에 대한 기본 언어를 지정하는 것이 좋습니다. 그래야 HTML 문서의 타이틀을 정확한 발음으로 표현할 수 있습니다.

HTML lang 속성
HTML 
<!DOCTYPE html>
<html lang="ko"> <!-- 해당 문서에 대한 기본 언어를 지정 -->
    <head>
        <meta charset="utf-8">
        <title>이 페이지의 타이틀</title>
    </head>
    <body>
        <!-- ... -->
    </body>
</html>

문자 인코딩

<meta> 태그에 charset="utf-8"로 문자를 인코딩함으로서 모든 환경에서 신뢰할 수 있는 문자로 사람이 읽을 수 있게 설정해야 합니다.

HTML 
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8"> <!-- 문자 인코딩 -->
        <title>이 페이지의 타이틀</title>
    </head>
    <body>
        <!-- ... -->
    </body>
</html>

문서의 주제를 식별할 수 있는 적절한 제목이나 이름을 사용

당연하다고 할 수도 있겠지만, <title> 태그로 정의하는 HTML 문서의 타이틀(title, 제목이나 이름)은 자신의 문서의 주제를 식별할 수 있는 적절한 제목이나 이름을 사용해야 합니다. 문서의 주제와 상관없는 제목이나 이름을 사용할 경우 해당 문서를 식별(일반 사용자, 스크린 리더, 브라우저 응용 프로그램, 검색 엔진 등)하는데 방해가 될 수 있습니다.

다음과 같은 방법들은 올바르지 않습니다.

HTML 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title> <!-- 콘텐츠가 없이 비어 있는 경우 -->
    </head>
    <body>

    </body>
</html>
HTML 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>문서 1</title> <!-- 적절한 제목이 아닌 경우 -->
    </head>
    <body>

    </body>
</html>

<title> 태그와 다양한 웹 기술 적용

<title> 태그는 HTML 문서의 타이틀(title, 제목이나 이름)을 나타내는 태그입니다. 즉, 웹 페이지의 제목을 나타냅니다.

웹은 우리의 일상 생활에 깊이 차지하고 있는 일부분입니다. 검색 엔진으로 필요한 웹 페이지의 내용을 검색하고, 페이스북 등으로 웹 페이지를 공유합니다. 이러한 다양한 웹 기술에 <title> 태그에서 정의하는 웹 페이지의 제목을 활용합니다.

브라우저의 제목 표시줄이나 페이지 탭에 보이는 제목으로 사용

대표적인 경우가 웹 브라우저의 제목 표시줄이나 탭에 표시된다는 것입니다. 이것은 모든 종류의 웹 사이트나 웹 애플리케이션에서 활용되는 기본적인 요소 중 하나입니다.

검색 엔진에서 활용

구글과 같은 검색 엔진에 검색어를 입력하여 찾으면 관련된 검색 결과 리스트가 보여집니다.
검색 결과 리스트 항목에는 제목과 관련된 설명문구가 보여지게 되는데 여기에서 보여지는 제목이 해당 웹 페이지의 <title> 태그로 정의한 웹페이지 제목이 보여지는 것입니다.

이러한 웹 페이지의 제목은 구글의 검색 엔진 봇(bot)이 미리 색인(indexing)한 페이지 제목을 보여주는 것입니다. 검색 엔진도 웹 페이지의 제목은 웹 페이지 내용을 요약한 중요 정보라고 취급하기 때문입니다.

이처럼 <title> 태그에 작성하는 HTML 문서의 타이틀(title, 제목이나 이름)은 검색 엔진 최적화에 중요한 영향을 미칠 수 있으므로, 단순한 키워드만 작성하는 것 보다는 웹 페이지를 내용을 실질적으로 요약하는 간단한 설명이 포함된 제목으로 작성하는 것이 도움이 될 수 있습니다.

브라우저의 북마크(즐겨찾기)로 활용

자주 찾는 웹 페이지는 대개 브라우저에서 제공하는 북마크(혹은 즐겨찾기)로 저장하여 사용하는 경우가 있습니다.
이때 저장된 웹 페이지의 이름은 별도로 작성하지 않는 한 해당 웹 페이지의 제목이 자동으로 저장됩니다. 이 경우에도 <title> 태그에 작성한 HTML 문서의 타이틀을 브라우저가 인식해서 적용하는 것입니다.

물론, 스마트폰에서 웹 페이지를 '홈 화면에 추가하기'로 추가할 때에도 이러한 기술이 활용됩니다.

명세서

title 태그의 명세서 사양
명세서 사양
<title> HTML Standard
#the-title-element

브라우저 호환성

title 태그의 브라우저 호환성
태그
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
<title> 1 12 1 1

참고문헌

같이 보기