metadata

`<title>`

The document's title, shown in the browser tab, bookmarks, and search-engine result snippets. It is required in every valid HTML document.

Syntax

<title>Page Title — Site Name</title>

Common attributes

Attribute	Purpose
lang	Global attribute — language of the title text
dir	Global attribute — text direction (ltr, rtl, auto)

Examples

<title>HTML input tag — Utilko</title>

Descriptive title with brand suffix

<title>Home | Utilko</title>

Common brand-separator pattern

<title>404 — Page not found</title>

Distinct titles per page state help users and SEO

Gotcha

Keep titles under about 60 characters or Google truncates them in search results. Every page must have a unique, descriptive — duplicates hurt both SEO and screen-reader users switching tabs.</p> </section> <section class="mb-8"> <h2 class="text-xl font-bold text-gray-900 mb-3">Related tags</h2> <div class="grid grid-cols-1 sm:grid-cols-2 gap-2"> <a href="/html/meta/" class="block rounded-lg border border-gray-200 bg-white p-3 hover:border-brand-300 hover:shadow-sm transition group"> <div class="font-mono font-semibold text-gray-900 group-hover:text-brand-700"><meta></div> <div class="text-xs text-gray-500 mt-0.5 line-clamp-2">Provides metadata about the document that other tags cannot express — charset, viewport, description, robots directives, and Open Graph tags. Placed only inside <head>.</div> </a><a href="/html/link/" class="block rounded-lg border border-gray-200 bg-white p-3 hover:border-brand-300 hover:shadow-sm transition group"> <div class="font-mono font-semibold text-gray-900 group-hover:text-brand-700"><link></div> <div class="text-xs text-gray-500 mt-0.5 line-clamp-2">Defines a relationship between the current document and an external resource — stylesheets, icons, preloads, RSS feeds, canonical URLs, and manifest files. Lives inside <head>.</div> </a><a href="/html/h1/" class="block rounded-lg border border-gray-200 bg-white p-3 hover:border-brand-300 hover:shadow-sm transition group"> <div class="font-mono font-semibold text-gray-900 group-hover:text-brand-700"><h1></div> <div class="text-xs text-gray-500 mt-0.5 line-clamp-2">The top-level heading, describing the main topic of the page or its sectioning root. Modern practice allows one <h1> per page (the page title) or one per sectioning element — pick a convention and stick to it.</div> </a> </div> </section> <p class="text-sm text-gray-600"> <a href="/html/" class="text-brand-600 hover:underline">← All HTML tags</a> <span class="mx-2 text-gray-400">·</span> <a href="/css/" class="text-brand-600 hover:underline">CSS selectors</a> <span class="mx-2 text-gray-400">·</span> <a href="/html-entities-reference/" class="text-brand-600 hover:underline">HTML entities</a> </p> </div> </main>  <footer class="bg-gray-900 text-gray-300"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10"> <div class="grid grid-cols-1 sm:grid-cols-3 gap-8">  <div> <a href="/" class="flex items-center gap-2 mb-3"> <img src="/favicon.svg" alt="Utilko logo" width="28" height="28" class="rounded-lg" loading="lazy"> <span class="text-xl font-bold text-white">Utilko</span> </a> <p class="text-sm text-gray-400 leading-relaxed mb-3"> 300+ free browser-based tools. No signup, no uploads, runs offline once loaded. </p> <a href="/all-tools/" class="inline-flex items-center gap-1 text-sm text-brand-400 hover:text-brand-300 font-medium transition-colors"> Browse all tools → </a> </div>  <div> <h3 class="text-white text-sm font-semibold uppercase tracking-wider mb-4">Browse</h3> <ul class="grid grid-cols-2 gap-x-4 gap-y-2"> <li> <a href="/all-tools/" class="text-sm text-gray-400 hover:text-white transition-colors"> All Tools </a> </li><li> <a href="/newspapers/" class="text-sm text-gray-400 hover:text-white transition-colors"> Newspapers </a> </li><li> <a href="/regex/" class="text-sm text-gray-400 hover:text-white transition-colors"> Regex Patterns </a> </li><li> <a href="/http-status/" class="text-sm text-gray-400 hover:text-white transition-colors"> HTTP Status Codes </a> </li><li> <a href="/css/" class="text-sm text-gray-400 hover:text-white transition-colors"> CSS Selectors </a> </li><li> <a href="/linux/" class="text-sm text-gray-400 hover:text-white transition-colors"> Linux Commands </a> </li><li> <a href="/git/" class="text-sm text-gray-400 hover:text-white transition-colors"> Git Commands </a> </li><li> <a href="/docker/" class="text-sm text-gray-400 hover:text-white transition-colors"> Docker CLI </a> </li><li> <a href="/kubectl/" class="text-sm text-gray-400 hover:text-white transition-colors"> kubectl </a> </li><li> <a href="/javascript/array/" class="text-sm text-gray-400 hover:text-white transition-colors"> JS Array Methods </a> </li><li> <a href="/javascript/string/" class="text-sm text-gray-400 hover:text-white transition-colors"> JS String Methods </a> </li><li> <a href="/react/hooks/" class="text-sm text-gray-400 hover:text-white transition-colors"> React Hooks </a> </li><li> <a href="/python/" class="text-sm text-gray-400 hover:text-white transition-colors"> Python Built-ins </a> </li><li> <a href="/sql-functions/" class="text-sm text-gray-400 hover:text-white transition-colors"> SQL Functions </a> </li><li> <a href="/css/property/" class="text-sm text-gray-400 hover:text-white transition-colors"> CSS Properties </a> </li><li> <a href="/html/" class="text-sm text-gray-400 hover:text-white transition-colors"> HTML Tags </a> </li><li> <a href="/bash/" class="text-sm text-gray-400 hover:text-white transition-colors"> Bash Reference </a> </li><li> <a href="/vim/" class="text-sm text-gray-400 hover:text-white transition-colors"> Vim Commands </a> </li><li> <a href="/npm/" class="text-sm text-gray-400 hover:text-white transition-colors"> npm Commands </a> </li><li> <a href="/python/string/" class="text-sm text-gray-400 hover:text-white transition-colors"> Python String Methods </a> </li><li> <a href="/python/dict/" class="text-sm text-gray-400 hover:text-white transition-colors"> Python Dict Methods </a> </li><li> <a href="/typescript/utility/" class="text-sm text-gray-400 hover:text-white transition-colors"> TypeScript Utility Types </a> </li><li> <a href="/javascript/object/" class="text-sm text-gray-400 hover:text-white transition-colors"> JS Object Methods </a> </li><li> <a href="/http-headers/" class="text-sm text-gray-400 hover:text-white transition-colors"> HTTP Headers </a> </li><li> <a href="/how-to/" class="text-sm text-gray-400 hover:text-white transition-colors"> How-To Guides </a> </li><li> <a href="/compare/" class="text-sm text-gray-400 hover:text-white transition-colors"> Comparisons </a> </li><li> <a href="/cheat-sheets/" class="text-sm text-gray-400 hover:text-white transition-colors"> Cheat Sheets </a> </li><li> <a href="/glossary/" class="text-sm text-gray-400 hover:text-white transition-colors"> Glossary </a> </li><li> <a href="/reference/" class="text-sm text-gray-400 hover:text-white transition-colors"> References </a> </li><li> <a href="/blog/" class="text-sm text-gray-400 hover:text-white transition-colors"> Blog </a> </li> </ul> </div>  <div> <h3 class="text-white text-sm font-semibold uppercase tracking-wider mb-4">About</h3> <ul class="space-y-2"> <li> <a href="/about/" class="text-sm text-gray-400 hover:text-white transition-colors"> About </a> </li><li> <a href="/api-docs/" class="text-sm text-gray-400 hover:text-white transition-colors"> Free API </a> </li><li> <a href="https://pdfedits.net/" target="_blank" rel="noopener" class="text-sm text-gray-400 hover:text-white transition-colors"> PDFEdits (sister site) </a> </li> </ul> </div> </div>  <div class="border-t border-gray-800 mt-8 pt-5 flex flex-col sm:flex-row items-center justify-between gap-2 text-sm text-gray-400"> <p>© 2026 Utilko. All rights reserved.</p> <p>All tools are free to use.</p> </div> </div> </footer>     </body></html>