실행 가능한 HTML 문서: title 태그

Q: title 태그와 h1은 무엇이 다른가요?

은 메타데이터예요. 탭과 검색 결과에서 페이지 이름을 정하고, 페이지 안에는 보이지 않아요. 은 본문에 보이는 주 제목이에요. 둘은 비슷한 내용인 경우가 많지만, title에는 사이트 이름을 더하고 검색에 맞게 표현할 수 있어요.

Q: title 태그 안에 HTML 태그를 넣을 수 있나요?

없어요. title 요소는 텍스트만 담아요. 안의 태그는 글자 그대로 보여서, A B 은 탭에 "A B "로 나와요. & 같은 문자 참조는 동작해요.

Q: JavaScript로 페이지 제목을 바꾸려면 어떻게 하나요?

document.title에 값을 대입하세요. 예를 들어 document.title = '(3) Inbox'처럼요. 브라우저가 탭을 바로 업데이트하는데, 웹 앱이 읽지 않은 메시지 수를 보여 주는 방식이에요.

Q: title 태그와 title 속성은 같은 건가요?

아니요. 요소는 페이지 전체의 이름을 정해요. 거의 모든 요소에서 쓸 수 있는 title 속성은 그 요소에 마우스를 올리면 나타나는 툴팁을 추가해요.

title 태그를 쓰는 위치

모든 페이지에는 <head> 안에 <title> 요소가 하나 필요해요. 그 텍스트가 브라우저가 탭과 북마크에 보여 주는 페이지 이름이고, 검색 엔진이 보통 검색 결과 제목으로 보여 주는 내용이에요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Chocolate Chip Cookies Recipe | Bake Club</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <h1>Chocolate chip cookies</h1>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent = 'document.title is: ' + document.title;
  </script>
</body>
</html>

title 자체는 페이지 안에 절대 나타나지 않아요. 이 미리보기도 Coddy 문서 페이지 안에서 실행되기 때문에 브라우저 탭에는 계속 문서 제목이 보여요. 작은 스크립트가 예제를 별도 파일로 열었을 때 탭에 보일 내용을 출력해 줘요. <title>의 텍스트를 고치면 그 줄이 바뀌어요.

좋은 제목 쓰기

title은 검색 결과나 탭 줄에서 사람들이 페이지에 대해 가장 먼저 읽는 내용인 경우가 많아요. 대부분의 페이지는 규칙 몇 가지로 충분해요.

구체적이고 고유하게 쓰세요. 사이트의 모든 페이지에는 그 페이지를 설명하는 고유한 제목이 있어야 해요. "홈"이나 "페이지 1"이 아니라 "초코칩 쿠키 레시피"처럼요.
중요한 단어를 앞에 두세요. 탭은 좁고 검색 결과는 긴 제목을 잘라요. 핵심 문구는 앞쪽 50~60자 정도 안에 두세요.
사이트 이름은 끝에 붙이세요. |나 :로 구분해서, 페이지 주제가 여전히 먼저 오게 하세요.
사람을 위해 쓰세요. 키워드를 반복해서 채운 제목은 스팸처럼 보이고, 검색 엔진이 제목을 바꿔 쓸 수도 있어요.

이 가짜 탭은 실제 탭 너비 정도에서 제목을 잘라요. 더 짧거나 긴 제목을 넣어 보세요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>How to Bake Soft Chocolate Chip Cookies at Home | Bake Club</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .bar { background: #e5e7eb; padding: 8px 8px 0; border-radius: 8px 8px 0 0; }
    .tab {
      width: 200px; background: #fff; border-radius: 8px 8px 0 0;
      padding: 8px 12px; font-size: 13px;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
  </style>
</head>
<body>
  <div class="bar"><div class="tab" id="tab"></div></div>
  <p>Full title: <code id="full"></code> (<span id="len"></span> characters)</p>
  <script>
    document.getElementById('tab').textContent = document.title;
    document.getElementById('full').textContent = document.title;
    document.getElementById('len').textContent = document.title.length;
  </script>
</body>
</html>

사이트 이름이 끝에 있으면 잘린 탭에서도 페이지가 무엇에 관한 건지 보여요. 순서를 바꾸면("Bake Club | How to...") 사이트의 모든 탭이 같은 두 단어로 시작하게 돼요.

title 태그, h1, title 속성 차이

	위치	보이는 곳	역할
`<title>`	`<head>` 안, 한 번	탭, 북마크, 검색 결과	페이지 이름
`<h1>`	`<body>` 안	페이지 위	눈에 보이는 주 제목
`title="..."` 속성	아무 요소에나	마우스를 올리면 툴팁	그 요소에 대한 추가 힌트

title과 <h1>은 보통 뜻이 같지만, title은 검색에 맞게 표현하고 사이트 이름을 담을 수 있고, 제목은 더 짧아도 돼요. title 속성은 이름과 달리 관련이 없어요. 밑줄 친 단어에 마우스를 올려 보세요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Title vs title attribute</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <h1>Welcome to Bake Club</h1>
  <p>We test every recipe in a
    <span title="An oven with a fan that moves hot air" style="text-decoration: underline dotted;">convection oven</span>.
  </p>
</body>
</html>

title 속성의 툴팁은 터치스크린에서 나타나지 않고 스크린 리더도 확실히 읽어 주지 않으니, 중요한 정보를 거기에만 두지 마세요.

title에는 텍스트만 들어가요

브라우저는 <title>과 </title> 사이의 모든 것을 일반 텍스트로 읽어요. 태그는 해석되지 않지만 & 같은 문자 참조는 디코딩되고, 연속된 공백은 공백 하나로 합쳐져요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Salt &amp; Pepper   <b>Bold?</b></title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <p>document.title:</p>
  <pre id="out" style="background: #f3f4f6; padding: 8px;"></pre>
  <script>
    document.getElementById('out').textContent = document.title;
  </script>
</body>
</html>

결과는 Salt & Pepper <b>Bold?</b>예요. 엔티티는 &가 되고, 공백 세 칸은 한 칸이 되고, <b> 태그는 글자 그대로 남아요. title에서는 강조를 할 수 없어요.

JavaScript로 제목 바꾸기

document.title은 읽고 쓸 수 있어요. 웹 앱은 이걸로 탭에 읽지 않은 메시지 수나 현재 상태를 보여 줘요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Inbox</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .tab { display: inline-block; background: #e5e7eb; border-radius: 8px 8px 0 0; padding: 8px 14px; font-size: 13px; }
    button { font: inherit; margin-top: 10px; padding: 6px 12px; }
  </style>
</head>
<body>
  <div class="tab" id="tab">Inbox</div><br>
  <button id="add">New message</button>
  <button id="read">Mark all read</button>
  <script>
    let unread = 0;
    const show = () => {
      document.title = unread ? '(' + unread + ') Inbox' : 'Inbox';
      document.getElementById('tab').textContent = document.title;
    };
    document.getElementById('add').onclick = () => { unread++; show(); };
    document.getElementById('read').onclick = () => { unread = 0; show(); };
  </script>
</body>
</html>

실제 페이지에서는 여기 있는 가짜 탭과 동시에 브라우저 탭이 바뀌어요. JavaScript를 실행하는 검색 엔진은 스크립트로 정한 제목도 볼 수 있지만, 색인되어야 하는 제목은 HTML에 직접 쓰는 게 확실해요.

자주 하는 실수

title이 아예 없음. 브라우저는 URL이나 파일 이름을 대신 보여 주고, 페이지는 올바르지 않은 HTML이 돼요. 템플릿에서 meta viewport 태그 옆에 두고 모든 페이지에 넣으세요.
모든 페이지에 같은 title. 탭, 북마크, 검색 결과를 서로 구별할 수 없어요.
<title>을 <body>에 넣음. 브라우저는 그래도 쓰지만, 원래 자리는 <head>이고 어떤 도구는 놓쳐요.
<title> 요소가 두 개. 첫 번째만 인정돼요. 나머지는 지우세요.
모든 제목을 사이트 이름으로 시작함. 페이지 주제를 앞에 두고, 사이트 이름은 끝에 두세요.

자주 묻는 질문

HTML에서 title 태그란 무엇인가요?

<title>은 페이지의 이름을 정해요. 브라우저는 탭과 북마크에 보여 주고, 검색 엔진은 보통 검색 결과의 클릭할 수 있는 제목으로 보여 줘요. <head> 안에 쓰고 텍스트만 담아요.

title 태그는 얼마나 길어야 하나요?

검색 엔진은 긴 제목을 표시 너비에 따라 잘라요. 그래서 중요한 단어는 앞쪽 50~60자 정도 안에 두세요. 한글은 글자 폭이 넓어서 더 일찍 잘릴 수 있어요. HTML에는 정해진 제한이 없지만, 그 지점을 넘는 부분은 말줄임표 뒤로 숨을 수 있어요.

title 태그와 h1은 무엇이 다른가요?

<title>은 메타데이터예요. 탭과 검색 결과에서 페이지 이름을 정하고, 페이지 안에는 보이지 않아요. <h1>은 본문에 보이는 주 제목이에요. 둘은 비슷한 내용인 경우가 많지만, title에는 사이트 이름을 더하고 검색에 맞게 표현할 수 있어요.

title 태그 안에 HTML 태그를 넣을 수 있나요?

없어요. title 요소는 텍스트만 담아요. 안의 태그는 글자 그대로 보여서, <title>A <b>B</b></title>은 탭에 "A <b>B</b>"로 나와요. & 같은 문자 참조는 동작해요.

JavaScript로 페이지 제목을 바꾸려면 어떻게 하나요?

document.title에 값을 대입하세요. 예를 들어 document.title = '(3) Inbox'처럼요. 브라우저가 탭을 바로 업데이트하는데, 웹 앱이 읽지 않은 메시지 수를 보여 주는 방식이에요.

title 태그와 title 속성은 같은 건가요?

아니요. <title> 요소는 페이지 전체의 이름을 정해요. 거의 모든 요소에서 쓸 수 있는 title 속성은 그 요소에 마우스를 올리면 나타나는 툴팁을 추가해요.

HTML title 태그: 페이지 제목, 길이, SEO