HTML <title> 태그는 웹 페이지의 제목을 정의하는 요소입니다. 이 제목은 브라우저 탭에 표시되며, 사용자가 페이지를 북마크(즐겨찾기)에 추가할 때도 함께 저장됩니다. 모든 웹 페이지에는 반드시 <title> 태그가 포함되어야 합니다.
웹 페이지에 제목이 필요한 이유
웹 페이지를 만들 때는 해당 페이지의 제목을 지정하는 것이 좋습니다. 예를 들어 동네 빵집 웹사이트의 홈페이지를 만든다면, 빵집 이름이 웹 페이지 제목으로 나타나길 원할 것입니다.
바로 이럴 때 <title> 태그가 필요합니다. <title> 태그는 HTML 문서의 제목을 정의하며, 웹 페이지의 head 섹션 안에 위치합니다. 이 글에서는 실제 예제와 함께 <title> 태그의 중요성과 코드에서 활용하는 방법을 살펴보겠습니다.
HTML head 요소 간단 복습
HTML에서 <head> 요소는 문서의 메타 정보를 담는 역할을 합니다. 이 안에 포함된 요소들은 웹 페이지 자체에는 직접 표시되지 않지만, 파비콘(favicon)처럼 페이지에 관한 추가 정보를 제공합니다.
<head> 섹션의 요소들은 문서의 핵심 정보를 함께 설명하며, 브라우저가 스타일시트(CSS)나 스크립트 파일을 찾을 수 있도록 경로를 알려주는 역할도 합니다.
HTML <title> 태그 기본 문법
HTML <title> 태그는 문서의 제목을 정의하며, 반드시 <head> 태그 안에 작성해야 합니다. 이 태그는 해당 웹 페이지의 목적을 간결하게 요약해야 하며, 한 페이지당 하나의 <title> 태그만 사용할 수 있습니다.
기본 문법은 다음과 같습니다:
<head> <title>홈 | 커리어 카르마</title> </head>
<title> 태그는 여는 태그와 닫는 태그로 구성되며, 두 태그 사이에 웹 페이지의 제목을 작성합니다.
<title> 태그 안의 텍스트는 웹 페이지 본문에는 나타나지 않습니다. 그 이유는 <title> 태그가 <body>가 아닌 <head> 안에 위치하기 때문입니다.
위 예제의 제목은 사용자에게 현재 보고 있는 페이지가 무엇인지 정확히 알려주기 때문에 좋은 제목입니다. 또한 사이트 이름을 함께 명시했기 때문에, 사용자가 '홈'이라는 제목의 탭을 여러 개 열어두었을 때도 혼동하지 않습니다.
좋은 제목 작성 원칙
제목은 명확하고 읽기 쉬우며 너무 길지 않아야 합니다. 아래는 좋은 제목의 예시입니다:
- 블로그 – 커리어 카르마
- 커리어 카르마 문의하기
- 커리어 카르마 블로그
모든 제목이 페이지의 목적을 잘 전달하고 있습니다. 브라우저 탭에는 제목이 표시될 공간이 제한적이므로, 제목이 너무 길어서는 안 됩니다.
<title> 태그는 HTML5의 모든 전역 속성(global attributes)을 지원하며, 주요 최신 브라우저 모두에서 사용할 수 있습니다. 다만 이 태그에는 고유한 HTML 속성은 존재하지 않습니다.
HTML title 태그 실전 예제
HTML title 요소는 웹 페이지의 <head> 태그 안에 정의됩니다. 앞서 언급한 동네 빵집 '조셉 에이브럼스 앤 선즈(Joseph Abrams & Sons)'의 홈페이지를 만든다고 가정해 보겠습니다. 사이트 제목에 빵집 이름이 나타나기를 원한다면 다음과 같이 코드를 작성할 수 있습니다:
<head> <title>Joseph Abrams & Sons.</title> </head>
이렇게 하면 웹 페이지가 열렸을 때 페이지 제목이 'Joseph Abrams & Sons'로 설정됩니다.
이번에는 같은 빵집 사이트의 문의(Contact) 페이지를 만든다고 해보겠습니다. 이 경우 'Contact | Joseph Abrams & Sons'라는 제목을 사용하는 것이 좋습니다. 간결하면서도 페이지의 목적을 잘 설명하기 때문입니다.
<title> 태그를 꼭 사용해야 하는 이유
문서 제목 태그를 지정하는 것이 중요한 데에는 몇 가지 이유가 있습니다.
첫째, <title> 태그는 웹 브라우저의 제목 표시줄과 탭에 페이지 제목을 보여줍니다. 예를 들어 이 페이지의 제목은 'HTML Title Tag: A How-To Guide'이며, 브라우저 탭 이름에 그대로 표시됩니다.
둘째, <title> 태그는 사용자가 페이지를 북마크하거나 즐겨찾기에 저장할 때 페이지 이름의 기준이 됩니다. 지정한 제목이 그대로 저장되므로, 적절한 제목을 사용하지 않으면 사용자가 북마크 목록에서 내 페이지를 찾기 어려워질 수 있습니다.
셋째, 검색 엔진은 title 태그의 내용에 의존합니다. title 태그에 지정된 제목은 검색 엔진 결과 페이지(SERP)에서 웹 페이지의 헤드라인으로 표시됩니다. SERP란 검색 결과 화면에 나타나는 항목을 의미합니다.
또한 검색 엔진은 <title> 태그의 내용을 참고하여 웹 페이지의 주제를 판단합니다. 즉, title 태그는 SEO(검색 엔진 최적화)에서도 매우 중요한 역할을 합니다.
마치며
<title> 태그는 HTML 문서의 제목을 명시하는 요소입니다. 이 제목은 브라우저 탭에 표시되며, 검색 엔진이 페이지를 처리할 때 헤드라인과 주제를 결정하는 근거로도 활용됩니다.
이 글에서는 실제 예제와 함께 HTML <title> 태그의 기본 개념과 활용법을 살펴보았습니다. 이제 여러분도 HTML 전문가처럼 title 태그를 자유롭게 사용할 준비가 되었습니다!
HTML 코딩을 더 깊이 배우고 싶다면 HTML 학습 가이드를 확인해 보세요. 초급·중급 개발자를 위한 추천 학습 자료와 강의 목록, HTML 관련 필독 도서까지 정리되어 있습니다.