: The TITLE Element</h1>
<p class="page-updated">Last updated: 2026-09-12</p>
<h2><title>The TITLE Element</h2>
<p class="tutorial-intro">Defines the document title shown in the browser tab and search results; exactly one per document, inside head.</p>
<div class="tag-quickinfo"><table class="ref-detail-table"><tbody>
<tr><th>Category</th><td><span class="tag-badge badge-cat">Metadata</span></td></tr>
<tr><th>Content Model</th><td>Only inside head</td></tr>
<tr><th>Allowed Parents</th><td>Any element that accepts flow content</td></tr>
<tr><th>Content Tag</th><td>Yes — requires closing <code></title></code> tag</td></tr>
<tr><th>Status</th><td><span class="tag-badge badge-stable">Standard</span></td></tr>
</tbody></table></div>
<h2 id="syntax">📝 Syntax</h2>
<pre class="ref-syntax-block"><code class="language-html"><title>Page title</title></code></pre>
<div class="ref-attr-links">
<a href="/html/reference/global-attributes.html" class="ref-attr-link">See all global attributes →</a>
<a href="/html/reference/event-attributes.html" class="ref-attr-link">See all event attributes →</a>
</div>
<h2 id="example" class="example-heading">▶ Example</h2>
<p class="tryit-intro">Edit the code below and see the live result in the playground:</p>
<div class="tryit-wrapper"><iframe class="tryit-iframe" src="/html/editor.html?lang=en&mode=playground&embed=1&code=%7B%22html%22%3A%20%22%3C%21--%20Document%20title%20--%3E%5Cn%3Chead%3E%5Cn%20%20%3Cmeta%20charset%3D%5C%22UTF-8%5C%22%3E%5Cn%20%20%3Ctitle%3EMy%20First%20Web%20Page%3C%2Ftitle%3E%5Cn%3C%2Fhead%3E%22%2C%20%22css%22%3A%20%22%22%2C%20%22js%22%3A%20%22%22%7D" sandbox="allow-scripts allow-modals allow-same-origin allow-forms" title="Try It playground"></iframe></div>
<div class="tryit-actions"><a href="javascript:void(0)" class="btn-try" onclick="openEditorModal(this)">▶ Try it</a></div>
<h2 id="browser-support">🌐 Browser Support</h2>
<div class="ref-browser-support">
<table class="ref-browser-table">
<thead><tr>
<th class="ref-browser-el">Browser</th>
<th class="ref-browser-th"><img src="/assets/images/Browser/chrome.svg" alt="Chrome" class="ref-browser-icon"><span class="ref-browser-name">Chrome</span></th>
<th class="ref-browser-th"><img src="/assets/images/Browser/edge.svg" alt="Edge" class="ref-browser-icon"><span class="ref-browser-name">Edge</span></th>
<th class="ref-browser-th"><img src="/assets/images/Browser/firefox.svg" alt="Firefox" class="ref-browser-icon"><span class="ref-browser-name">Firefox</span></th>
<th class="ref-browser-th"><img src="/assets/images/Browser/safari-.svg" alt="Safari" class="ref-browser-icon"><span class="ref-browser-name">Safari</span></th>
<th class="ref-browser-th"><img src="/assets/images/Browser/opera.svg" alt="Opera" class="ref-browser-icon"><span class="ref-browser-name">Opera</span></th>
</tr></thead>
<tbody><tr>
<td class="ref-browser-el"><title></td>
<td class="ref-browser-yes"><span class="ref-check">✓</span> <span class="ref-ver">v1</span></td>
<td class="ref-browser-yes"><span class="ref-check">✓</span> <span class="ref-ver">v12</span></td>
<td class="ref-browser-yes"><span class="ref-check">✓</span> <span class="ref-ver">v1</span></td>
<td class="ref-browser-yes"><span class="ref-check">✓</span> <span class="ref-ver">v1</span></td>
<td class="ref-browser-yes"><span class="ref-check">✓</span> <span class="ref-ver">v1</span></td>
</tr>
<tr><td colspan="6" class="ref-browser-all">Supported in all major browsers</td></tr>
</tbody></table>
</div>
<div class="note-box tip"><strong>Tip：</strong> title text is the tab and SEO title—keep it concise with keywords; no nested tags allowed.</div>
<h2 id="related-tags">🏷️ Related Tags</h2>
<div class="related-tags ref-tag-grid">
<a class="ref-tag-card" href="head.html" title="head element"><head></a>
<a class="ref-tag-card" href="meta.html" title="meta element"><meta></a>
</div>
<h2 id="related-cases">💡 Related Cases</h2>
<div class="ref-case-empty">More case studies coming soon — check back later.</div>
<h2 id="see-also">📚 Related Tutorials</h2>
<div class="ref-tag-grid">
<a class="ref-tag-card" href="/html/index.html" title="HTML Introduction">HTML Introduction</a>
<a class="ref-tag-card" href="/html/basics.html" title="HTML Basics">HTML Basics</a>
<a class="ref-tag-card" href="/html/elements.html" title="HTML Elements">HTML Elements</a>
</div>
<div class="ref-tutorial-grid">
<a class="ref-tutorial-card" href="/html/reference/">
<div class="ref-tutorial-card-title">HTML Tag Reference</div>
<div class="ref-tutorial-card-desc">Browse all HTML tags with syntax, attributes and examples.</div>
</a>
</div>
<!-- Page navigation -->
<nav class="page-nav">
</nav>
<div class="author-bio" itemscope itemtype="https://schema.org/Organization">
<div class="author-avatar">
<img src="/assets/images/logo.png" alt="Web-Tutorial.com" width="48" height="48" loading="lazy" itemprop="logo">
</div>
<div class="author-info">
<p class="author-name"><strong itemprop="name">Web-Tutorial Tech Team</strong></p>
<p class="author-desc" itemprop="description">A team of developers maintaining programming tutorials. Each tutorial is written and reviewed by developers with expertise in that field. We work to keep our content accurate and reliable — if you spot an issue, please let us know.</p>
<p class="author-links">
<a href="/about/" itemprop="url">About Us</a>
</p>
</div>
</div>
</main>
<!-- Right sidebar -->
<aside class="tutorial-sidebar" id="tutorialSidebar">
<button class="sidebar-toggle" id="sidebarToggle" aria-label="Toggle sidebar">◀</button>
<div class="sidebar-scroll">
<div class="sidebar-toc-title"><span class="toc-icon">📄</span> On this page</div>
<div class="sidebar-toc" id="sidebarToc"></div>
<div class="sidebar-ads" data-ad-zone="sidebar">
<div id="ad-slot-b1" class="ad-widget" data-ad-slot="sidebar-top" data-ad-format="rectangle" aria-hidden="true"></div>
</div>
</div>
</aside>
</div>
<div class="font-toolbar" id="fontToolbar">
<button class="ft-btn" onclick="changeFontSize(-1)" aria-label="Decrease font size" title="Decrease font size">A−</button>
<span class="ft-label" id="ftLabel">100%</span>
<button class="ft-btn" onclick="changeFontSize(1)" aria-label="Increase font size" title="Increase font size">A+</button>
</div>
<button id="backTop" onclick="window.scrollTo({top:0,behavior:'smooth'})" aria-label="Back to top">↑</button>
<script src="/assets/js/tutorial.js" defer></script>
<!-- Editor modal -->
<div class="editor-modal" id="editorModal" onclick="if(event.target===this)closeEditorModal()">
<div class="editor-modal-box">
<iframe id="editorIframe" src="about:blank" sandbox="allow-scripts allow-modals allow-same-origin allow-forms"></iframe>
</div>
</div>
<footer class="footer">
<div class="footer-inner">
<div class="footer-col">
<h4>About</h4>
<a href="/about/" class="footer-sm-link">About Us</a>
<a href="/about/privacy.html" class="footer-sm-link">Privacy Policy</a>
<a href="/about/disclaimer.html" class="footer-sm-link">Disclaimer</a>
<a href="mailto:postmaster@web-tutorial.com" class="footer-sm-link">Corrections</a>
</div>
<div class="footer-col">
<h4>Recent Updates</h4>
<p class="footer-sm">
2026-09-07 Java Learning Roadmap launched (5 languages)<br>
2026-09-05 Frontend Developer Capability Map launched<br>
2026-09-03 JavaScript Roadmap launched<br>
2026-08-31 Vibe Coding series completed (7 courses)<br>
<a href="/updates.html">View all updates →</a>
</p>
</div>
<div class="footer-col">
<h4>Online Tools</h4>
<a href="/tools/code-highlighter.html">Code Highlighter</a>
<a href="/tools/json-formatter.html">JSON Formatter</a>
<a href="/tools/color-converter.html">Color Converter</a>
<a href="/tools/regex-tester.html">Regex Tester</a>
<a href="/tools/base64.html">Base64 Encode/Decode</a>
</div>
<div class="footer-col">
<h4>Contact</h4>
<a href="mailto:postmaster@web-tutorial.com">📧 postmaster@web-tutorial.com</a>
<a href="https://github.com/webtutorialcom">🐙 GitHub</a>
<a href="https://x.com/webtutorialcom">🐦 Twitter</a>
</div>
</div>
<div class="footer-bottom">
<p>© 2026 Web-Tutorial.com — Code Without Borders</p>
</div>
</footer>
<!-- 纠错反馈按钮 + 模态窗 -->
<style>
/* ── 浮动按钮 ── */
#report-float-btn {
position: fixed;
bottom: 24px;
right: 80px;
z-index: 9999;
width: 48px;
height: 48px;
border-radius: 50%;
border: none;
background: var(--color-primary, #2563eb);
color: #fff;
font-size: 20px;
cursor: pointer;
box-shadow: 0 3px 12px rgba(37,99,235,0.35);
transition: transform 0.2s, box-shadow 0.2s;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
#report-float-btn:hover {
transform: scale(1.1);
box-shadow: 0 4px 16px rgba(37,99,235,0.5);
}
/* ── 模态窗遮罩 ── */
#report-modal-overlay {
display: none;
position: fixed;
inset: 0;
z-index: 10000;
background: rgba(0,0,0,0.45);
backdrop-filter: blur(2px);
align-items: center;
justify-content: center;
}
#report-modal-overlay.open {
display: flex;
}
/* ── 模态窗卡片 ── */
.report-modal-box {
background: #fff;
border-radius: 14px;
padding: 28px 32px 24px;
max-width: 640px;
width: 90%;
max-height: 85vh;
overflow-y: auto;
box-shadow: 0 12px 40px rgba(0,0,0,0.2);
position: relative;
}
.report-modal-box h3 {
margin: 0 0 12px 0;
font-size: 18px;
font-weight: 700;
color: #1a1a2e;
display: flex;
align-items: center;
gap: 8px;
}
.report-modal-box .close-x {
position: absolute;
top: 12px;
right: 16px;
background: none;
border: none;
font-size: 22px;
cursor: pointer;
color: #999;
line-height: 1;
padding: 4px;
}
.report-modal-box .close-x:hover {
color: #333;
}
.report-modal-box label {
display: block;
font-size: 13px;
font-weight: 600;
color: #555;
margin-bottom: 6px;
}
.report-page-url {
font-size: 12px;
color: #888;
margin-bottom: 16px;
word-break: break-all;
padding: 6px 10px;
background: #f5f5f5;
border-radius: 6px;
}
/* ── 顶部暖文区 ── */
.report-welcome {
font-size: 14px;
line-height: 1.7;
color: #555;
margin-bottom: 20px;
padding: 14px 16px;
background: #f0f7ff;
border-radius: 10px;
border-left: 3px solid var(--color-primary, #2563eb);
}
/* ── 类型标签 ── */
.report-types {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 18px;
}
.report-type-tag {
padding: 6px 14px;
border-radius: 20px;
border: 1.5px solid #ddd;
background: #fafafa;
font-size: 13px;
cursor: pointer;
transition: all 0.15s;
color: #444;
user-select: none;
}
.report-type-tag:hover {
border-color: var(--color-primary, #2563eb);
color: var(--color-primary, #2563eb);
}
.report-type-tag.active {
background: var(--color-primary, #2563eb);
border-color: var(--color-primary, #2563eb);
color: #fff;
}
/* ── 描述文本框 ── */
.report-desc {
width: 100%;
height: 140px;
padding: 10px 12px;
border: 1.5px solid #ddd;
border-radius: 8px;
font-size: 14px;
font-family: inherit;
resize: none;
box-sizing: border-box;
transition: border-color 0.15s;
}
.report-desc:focus {
outline: none;
border-color: var(--color-primary, #2563eb);
}
/* ── 提交按钮 ── */
.report-submit {
display: block;
width: 100%;
padding: 11px 0;
margin-top: 16px;
border: none;
border-radius: 8px;
background: var(--color-primary, #2563eb);
color: #fff;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: opacity 0.15s;
}
.report-submit:hover {
opacity: 0.9;
}
.report-submit:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* ── 成功/失败消息 ── */
.report-msg {
display: none;
text-align: center;
padding: 32px 16px;
font-size: 15px;
font-weight: 500;
line-height: 1.7;
}
.report-msg.show {
display: block;
}
.report-msg.success {
color: #2563eb;
}
.report-msg.error {
color: #e74c3c;
}
.report-msg .report-msg-icon {
font-size: 40px;
display: block;
margin-bottom: 12px;
}
/* ── 蜜罐（对用户不可见） ── */
.report-honeypot {
position: absolute;
left: -9999px;
top: -9999px;
opacity: 0;
height: 0;
overflow: hidden;
}
/* ── RTL 适配 ── */
[dir="rtl"] #report-float-btn {
right: auto;
left: 24px;
}
[dir="rtl"] .report-modal-box .close-x {
right: auto;
left: 16px;
}
[dir="rtl"] .report-welcome {
border-left: none;
border-right: 3px solid var(--color-primary, #2563eb);
}
</style>
<div id="report-bug-root">
<!-- 浮动按钮 -->
<button id="report-float-btn" onclick="openReportModal()" aria-label="Report issue" title="Report issue">📝</button>
<!-- 模态窗 -->
<div id="report-modal-overlay" onclick="closeReportModal(event)">
<div class="report-modal-box" onclick="event.stopPropagation()">
<button class="close-x" onclick="closeReportModal()" aria-label="Close">×</button>
<!-- 表单区 -->
<div id="report-form-area">
<h3 id="report-title">🙏 帮我们做得更好</h3>
<!-- 暖文区 -->
<div class="report-welcome" id="report-welcome">
我们是刚上线的编程教程站，几个人的小团队，精力有限。页面虽经检查，难免还有疏漏——链接失效、排版错乱、内容有误、语言生硬……<br><br>
如果您发现了，麻烦告诉我们，我们会在收到反馈后第一时间进行修复，再次感谢您的光临 🙏
</div>
<!-- URL（对用户隐藏，随表单一起提交） -->
<div class="report-page-url" id="report-url-display" style="display:none"></div>
<label id="report-type-label">问题类型</label>
<div class="report-types" id="report-type-tags"></div>
<label id="report-desc-label">问题描述</label>
<textarea class="report-desc" id="report-desc" rows="4" placeholder="请描述一下您遇到的问题……"></textarea>
<!-- 蜜罐 -->
<div class="report-honeypot">
<input type="text" name="website" id="report-honeypot" tabindex="-1" autocomplete="off">
</div>
<button class="report-submit" id="report-submit-btn" onclick="submitReport()">好的，这就提交 🙏</button>
</div>
<!-- 结果区 -->
<div class="report-msg" id="report-msg-area">
<span class="report-msg-icon" id="report-msg-icon"></span>
<span id="report-msg-text"></span>
</div>
</div>
</div>
</div>
<script>
/* ── 多语言字典 ── */
var REPORT_LANG = {
'zh-CN': {
welcome: '我们是刚上线的编程教程站，几个人的小团队，精力有限。页面虽经检查，难免还有疏漏——链接失效、排版错乱、内容有误、语言生硬……<br><br>如果您发现了，麻烦告诉我们，我们会在收到反馈后第一时间进行修复，再次感谢您的光临 🙏',
title: '帮我们做得更好',
typeLabel: '问题类型',
descLabel: '问题描述',
descPlaceholder: '请描述一下您遇到的问题……',
submit: '好的，这就提交 🙏',
success: '感谢您！您的反馈已经收到，我们会尽快处理。<br>有您帮忙，这个站一定会越来越好 ❤️',
error: '提交失败了……能再试一次吗？',
types: ['链接失效', '排版错乱', '内容错误', '本地化问题', '其他']
},
'en': {
welcome: 'We\'re a tiny team who just launched this tutorial site. We\'ve checked everything, but things still slip through — broken links, layout issues, wrong content, awkward wording…<br><br>If you spot something, let us know and we\'ll get it fixed right away. Thanks for stopping by! 🙏',
title: 'Help Us Improve',
typeLabel: 'Issue Type',
descLabel: 'Description',
descPlaceholder: 'Tell us what you found…',
submit: 'Send it over 🙏',
success: 'Got it! Thank you so much — we\'ll look into it right away.<br>With your help, this site keeps getting better ❤️',
error: 'Something went wrong… Could you try again?',
types: ['Broken Link', 'Layout Issue', 'Content Error', 'Translation', 'Other']
},
'ar': {
welcome: 'نحن فريق صغير أطلقنا هذا الموقع التعليمي حديثاً. راجعنا كل صفحة، لكن قد توجد بعض الأخطاء — روابط معطلة، تخطيط غير صحيح، محتوى خاطئ، ترجمة غير دقيقة…<br><br>إذا لاحظت أي خطأ، فأخبرنا وسنصلحه فوراً. شكراً جزيلاً لمساعدتك لنا! 🙏',
title: 'ساعدنا على التحسين',
typeLabel: 'نوع المشكلة',
descLabel: 'الوصف',
descPlaceholder: 'صِف ما وجدته…',
submit: 'أرسل التقرير 🙏',
success: 'وصلتنا ملاحظاتك! شكراً جزيلاً — سنقوم بمراجعتها فوراً.<br>بمساعدتك، سيصبح هذا الموقع أفضل ❤️',
error: 'حدث خطأ… هل يمكنك المحاولة مرة أخرى؟',
types: ['رابط معطل', 'مشكلة تخطيط', 'خطأ في المحتوى', 'خطأ في الترجمة', 'أخرى']
},
'pt-BR': {
welcome: 'Somos uma equipe pequena e acabamos de lançar este site de tutoriais. Revisamos tudo, mas sempre escapa alguma coisa — links quebrados, layout bagunçado, conteúdo errado, tradução estranha…<br><br>Se você encontrar algo, nos avise e vamos corrigir o mais rápido possível. Valeu pela ajuda! 🙏',
title: 'Nos ajude a melhorar',
typeLabel: 'Tipo de problema',
descLabel: 'Descrição',
descPlaceholder: 'Conte o que você encontrou…',
submit: 'Enviar 🙏',
success: 'Recebemos! Muito obrigado — vamos dar uma olhada.<br>Com sua ajuda, este site fica cada vez melhor ❤️',
error: 'Algo deu errado… Pode tentar novamente?',
types: ['Link quebrado', 'Problema de layout', 'Erro de conteúdo', 'Erro de tradução', 'Outros']
},
'ja': {
welcome: '私たちは少人数のチームで、このチュートリアルサイトを立ち上げたばかりです。念入りに確認していますが、それでも不具合が残っているかもしれません — リンク切れ、レイアウト崩れ、内容の誤り、不自然な翻訳…<br><br>お気づきの点がございましたら、ぜひお知らせください。いただいたご報告はすぐに確認し、修正いたします。どうぞよろしくお願いいたします🙏',
title: 'みなさまのご意見をお聞かせください',
typeLabel: '問題の種類',
descLabel: '詳細',
descPlaceholder: '不具合の内容を詳しく教えてください…',
submit: '送信します 🙏',
success: 'ご報告ありがとうございます！すぐに確認いたします。<br>みなさまのご協力で、このサイトはより良いものに成長していきます ❤️',
error: 'エラーが発生しました…もう一度お試しいただけますか？',
types: ['リンク切れ', 'レイアウト崩れ', '内容の誤り', '翻訳の問題', 'その他']
}
};
function getReportLang() {
var lang = (document.documentElement.lang || 'en').trim();
return REPORT_LANG[lang] || REPORT_LANG[lang.split('-')[0]] || REPORT_LANG['en'];
}
function openReportModal() {
var texts = getReportLang();
var overlay = document.getElementById('report-modal-overlay');
var formArea = document.getElementById('report-form-area');
var msgArea = document.getElementById('report-msg-area');
// 重置表单
formArea.style.display = '';
msgArea.className = 'report-msg';
document.getElementById('report-desc').value = '';
document.getElementById('report-honeypot').value = '';
document.getElementById('report-submit-btn').disabled = false;
// 设置文本
document.getElementById('report-title').innerHTML = '🙏 ' + texts.title;
document.getElementById('report-welcome').innerHTML = texts.welcome;
document.getElementById('report-type-label').textContent = texts.typeLabel;
document.getElementById('report-desc-label').textContent = texts.descLabel;
document.getElementById('report-desc').placeholder = texts.descPlaceholder;
document.getElementById('report-submit-btn').textContent = texts.submit;
// URL
document.getElementById('report-url-display').textContent = window.location.pathname + window.location.search;
// 类型标签
var tagsContainer = document.getElementById('report-type-tags');
tagsContainer.innerHTML = '';
texts.types.forEach(function(t, i) {
var tag = document.createElement('span');
tag.className = 'report-type-tag' + (i === 0 ? ' active' : '');
tag.textContent = t;
tag.dataset.index = i;
tag.onclick = function() {
tagsContainer.querySelectorAll('.report-type-tag').forEach(function(el) { el.classList.remove('active'); });
this.classList.add('active');
};
tagsContainer.appendChild(tag);
});
overlay.classList.add('open');
setTimeout(function() { document.getElementById('report-desc').focus(); }, 300);
}
function closeReportModal(e) {
if (e && e.target !== e.currentTarget && e.target.id !== 'report-modal-overlay' && e.target.className !== 'close-x') {
return;
}
document.getElementById('report-modal-overlay').classList.remove('open');
}
function submitReport() {
var texts = getReportLang();
var btn = document.getElementById('report-submit-btn');
btn.disabled = true;
btn.textContent = '…';
// 蜜罐检测：被机器人填了 → 静默丢弃
if (document.getElementById('report-honeypot').value.trim() !== '') {
showReportResult(true, texts.success);
return;
}
var activeTag = document.querySelector('#report-type-tags .report-type-tag.active');
var typeIndex = activeTag ? parseInt(activeTag.dataset.index) : 0;
var typeText = activeTag ? activeTag.textContent : texts.types[0];
var payload = JSON.stringify({
url: window.location.pathname + window.location.search,
page_lang: (document.documentElement.lang || 'en').trim(),
type_index: typeIndex,
type: typeText,
desc: document.getElementById('report-desc').value.trim()
});
var xhr = new XMLHttpRequest();
xhr.open('POST', '/api/report.php', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.timeout = 10000;
xhr.onload = function() {
if (xhr.status === 200) {
try {
var resp = JSON.parse(xhr.responseText);
showReportResult(resp.ok, resp.ok ? texts.success : (resp.msg || texts.error));
} catch(e) {
showReportResult(true, texts.success);
}
} else {
showReportResult(true, texts.success);
}
};
xhr.onerror = function() {
showReportResult(true, texts.success);
};
xhr.ontimeout = function() {
showReportResult(false, texts.error);
};
xhr.send(payload);
}
function showReportResult(success, msg) {
document.getElementById('report-form-area').style.display = 'none';
var msgArea = document.getElementById('report-msg-area');
msgArea.className = 'report-msg show ' + (success ? 'success' : 'error');
document.getElementById('report-msg-icon').textContent = success ? '🙏' : '😅';
document.getElementById('report-msg-text').innerHTML = msg;
setTimeout(function() {
document.getElementById('report-modal-overlay').classList.remove('open');
}, 4000);
}
// 点击遮罩关闭
document.addEventListener('click', function(e) {
if (e.target.id === 'report-modal-overlay') {
closeReportModal(e);
}
});
</script>
<!-- Load mobile menu script for pages that don't already have it (e.g. tool pages) -->
<script>
(function() {
function loadIfNeeded() {
if (document.querySelector('script[src*="tutorial.js"]')) return;
var s = document.createElement('script');
s.src = '/assets/js/tutorial.js';
s.defer = true;
document.body.appendChild(s);
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', loadIfNeeded);
} else {
loadIfNeeded();
}
})();
</script>
</body>
</html>