Skip to main content
  1. SEO glossary/

Title Tag

3 mins

What is it? #

Title Tag: A title tag, also known as a page title or website title, is an HTML element that specifies the title of a web page. It is placed within the head section of an HTML document and is used to display the title of the page in a browser’s title bar or tab. The title tag is essential for both user experience and search engine optimization (SEO), as it helps users and search engines understand the main topic and purpose of the page.

Here are some examples: #

The tag is used in the head section of an HTML document to specify the title of the document. Here are some examples of where the <title> tag is used:</p> <ol> <li>In the head section of an HTML document:</li> </ol> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="cp"><!DOCTYPE html></span> </span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span> </span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">head</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"UTF-8"</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">title</span><span class="p">></span>Document Title<span class="p"></</span><span class="nt">title</span><span class="p">></span> </span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">head</span><span class="p">></span> </span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">body</span><span class="p">></span> </span></span><span class="line"><span class="cl"> <span class="c"><!-- Content goes here --></span> </span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">body</span><span class="p">></span> </span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">html</span><span class="p">></span> </span></span></code></pre></div><ol start="2"> <li>In the head section of an XHTML document:</li> </ol> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-xml" data-lang="xml"><span class="line"><span class="cl"><span class="cp"><?xml version="1.0" encoding="UTF-8"?></span> </span></span><span class="line"><span class="cl"><span class="cp"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></span> </span></span><span class="line"><span class="cl"><span class="nt"><html</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/1999/xhtml"</span> <span class="na">xml:lang=</span><span class="s">"en"</span><span class="nt">></span> </span></span><span class="line"><span class="cl"><span class="nt"><head></span> </span></span><span class="line"><span class="cl"> <span class="nt"><meta</span> <span class="na">http-equiv=</span><span class="s">"Content-Type"</span> <span class="na">content=</span><span class="s">"text/html; charset=utf-8"</span> <span class="nt">/></span> </span></span><span class="line"><span class="cl"> <span class="nt"><meta</span> <span class="na">name=</span><span class="s">"viewport"</span> <span class="na">content=</span><span class="s">"width=device-width, initial-scale=1.0"</span><span class="nt">></span> </span></span><span class="line"><span class="cl"> <span class="nt"><title></span>Document Title<span class="nt"></title></span> </span></span><span class="line"><span class="cl"><span class="nt"></head></span> </span></span><span class="line"><span class="cl"><span class="nt"><body></span> </span></span><span class="line"><span class="cl"> <span class="c"><!-- Content goes here --></span> </span></span><span class="line"><span class="cl"><span class="nt"></body></span> </span></span><span class="line"><span class="cl"><span class="nt"></html></span> </span></span></code></pre></div><ol start="3"> <li>In the head section of a SVG document:</li> </ol> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-xml" data-lang="xml"><span class="line"><span class="cl"><span class="cp"><?xml version="1.0" encoding="UTF-8"?></span> </span></span><span class="line"><span class="cl"><span class="cp"><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"></span> </span></span><span class="line"><span class="cl"><span class="nt"><svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">xmlns:xlink=</span><span class="s">"http://www.w3.org/1999/xlink"</span> <span class="na">version=</span><span class="s">"1.1"</span> <span class="na">id=</span><span class="s">"svg1"</span> <span class="na">xml:lang=</span><span class="s">"en"</span><span class="nt">></span> </span></span><span class="line"><span class="cl"><span class="nt"><defs></span> </span></span><span class="line"><span class="cl"> <span class="nt"><style></span> </span></span><span class="line"><span class="cl"> .cls1 { </span></span><span class="line"><span class="cl"> fill: red; </span></span><span class="line"><span class="cl"> } </span></span><span class="line"><span class="cl"> <span class="nt"></style></span> </span></span><span class="line"><span class="cl"><span class="nt"></defs></span> </span></span><span class="line"><span class="cl"><span class="nt"><g</span> <span class="na">id=</span><span class="s">"g1"</span><span class="nt">></span> </span></span><span class="line"><span class="cl"> <span class="nt"><title></span>Group Title<span class="nt"></title></span> </span></span><span class="line"><span class="cl"> <span class="nt"><rect</span> <span class="na">class=</span><span class="s">"cls1"</span> <span class="na">x=</span><span class="s">"10"</span> <span class="na">y=</span><span class="s">"10"</span> <span class="na">width=</span><span class="s">"100"</span> <span class="na">height=</span><span class="s">"100"</span> <span class="nt">/></span> </span></span><span class="line"><span class="cl"> <span class="nt"><circle</span> <span class="na">class=</span><span class="s">"cls1"</span> <span class="na">cx=</span><span class="s">"50"</span> <span class="na">cy=</span><span class="s">"50"</span> <span class="na">r=</span><span class="s">"40"</span> <span class="nt">/></span> </span></span><span class="line"><span class="cl"><span class="nt"></g></span> </span></span><span class="line"><span class="cl"><span class="nt"></svg></span> </span></span></code></pre></div><p>In these examples, the <title> tag is used to specify the title of the document (or group, in the case of the SVG document). The title is displayed in the browser’s title bar or tab, and it can also be used by search engines and other systems to identify the document.</p> <h2 id="in-summary" class="relative group">In Summary <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#in-summary" aria-label="Anchor">#</a></span></h2> <p>(Title Tag)</p> <p>TLDR:</p> <p>A comprehensive guide to understanding and implementing (Title Tag) in your web development project. Learn the importance of (Title Tag) in SEO, user experience, and accessibility, as well as best practices and tips for creating effective (Title Tag) content.</p> </div> </section> <footer class="pt-8 max-w-prose print:hidden"> <div class="flex"> <img class="!mt-0 !mb-0 h-24 w-24 rounded-full ltr:mr-4 rtl:ml-4" width="96" height="96" alt="Chris Haines" src="/img/chris2_hu8453a239c3b4c65cedc6a6a635eaa79b_109751_192x192_fill_box_smart1_3.png" /> <div class="place-self-center"> <div class="text-[0.6rem] uppercase leading-3 text-neutral-500 dark:text-neutral-400"> Author </div> <div class="font-semibold leading-6 text-neutral-800 dark:text-neutral-300"> Chris Haines </div> <div class="text-sm text-neutral-700 dark:text-neutral-400">Chris is an SEO consultant and has been working in SEO for over 10 years. When not involved in SEO Chris enjoys messing around with vintage synthesizers.</div> <div class="text-2xl sm:text-lg"> <div class="flex flex-wrap text-neutral-400 dark:text-neutral-500"> <a class="px-1 transition-transform hover:scale-125 hover:text-primary-700 dark:hover:text-primary-400" href="https://twitter.com/chris_at_b449" target="_blank" aria-label="Twitter" rel="me noopener noreferrer" > <span class="relative inline-block align-text-bottom icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg> </span> </a > <a class="px-1 transition-transform hover:scale-125 hover:text-primary-700 dark:hover:text-primary-400" href="https://uk.linkedin.com/in/london-seo-consultant-chris-haines" target="_blank" aria-label="Linkedin" rel="me noopener noreferrer" > <span class="relative inline-block align-text-bottom icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/></svg> </span> </a > <a class="px-1 transition-transform hover:scale-125 hover:text-primary-700 dark:hover:text-primary-400" href="https://youtube.com/" target="_blank" aria-label="Youtube" rel="me noopener noreferrer" > <span class="relative inline-block align-text-bottom icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"/></svg> </span> </a > </div> </div> </div> </div> <div class="pt-8"> <hr class="border-dotted border-neutral-300 dark:border-neutral-600" /> <div class="flex justify-between pt-3"> <span> <a class="group flex" href="/seo-glossary/top-level-domain/"> <span class="mr-2 text-neutral-700 transition-transform group-hover:-translate-x-[2px] group-hover:text-primary-600 ltr:inline rtl:hidden dark:text-neutral dark:group-hover:text-primary-400" >←</span > <span class="ml-2 text-neutral-700 transition-transform group-hover:translate-x-[2px] group-hover:text-primary-600 ltr:hidden rtl:inline dark:text-neutral dark:group-hover:text-primary-400" >→</span > <span class="flex flex-col"> <span class="mt-[0.1rem] leading-6 group-hover:underline group-hover:decoration-primary-500" >Top Level Domain</span > <span class="mt-[0.1rem] text-xs text-neutral-500 dark:text-neutral-400"> </span> </span> </a> </span> <span> <a class="group flex text-right" href="/seo-glossary/tiered-link-building/"> <span class="flex flex-col"> <span class="mt-[0.1rem] leading-6 group-hover:underline group-hover:decoration-primary-500" >Tiered Link Building</span > <span class="mt-[0.1rem] text-xs text-neutral-500 dark:text-neutral-400"> </span> </span> <span class="ml-2 text-neutral-700 transition-transform group-hover:translate-x-[2px] group-hover:text-primary-600 ltr:inline rtl:hidden dark:text-neutral dark:group-hover:text-primary-400" >→</span > <span class="mr-2 text-neutral-700 transition-transform group-hover:-translate-x-[2px] group-hover:text-primary-600 ltr:hidden rtl:inline dark:text-neutral dark:group-hover:text-primary-400" >←</span > </a> </span> </div> </div> </footer> </article> <div class="pointer-events-none absolute top-[100vh] bottom-0 w-12 ltr:right-0 rtl:left-0" > <a href="#the-top" class="pointer-events-auto sticky top-[calc(100vh-5.5rem)] flex h-12 w-12 items-center justify-center rounded-full bg-neutral/50 text-xl text-neutral-700 backdrop-blur hover:text-primary-600 dark:bg-neutral-800/50 dark:text-neutral dark:hover:text-primary-400" aria-label="Scroll to top" title="Scroll to top" > ↑ </a> </div> </main><footer class="py-10 print:hidden"> <nav class="pb-4 text-base font-medium text-neutral-500 dark:text-neutral-400"> <ul class="flex flex-col list-none sm:flex-row"> <li class="mb-1 ltr:text-right rtl:text-left sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0" > <a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" href="/tags/" title="Tags" >Tags</a > </li> <li class="mb-1 ltr:text-right rtl:text-left sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0" > <a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" href="/seo-services/" title="SEO Services 📈" >SEO Services</a > </li> <li class="mb-1 ltr:text-right rtl:text-left sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0" > <a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" href="/seo-consultant-london/" title="SEO Consultant London 👨" >SEO Consultant London</a > </li> <li class="mb-1 ltr:text-right rtl:text-left sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0" > <a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" href="/privacy-policy/" title="Privacy Policy" >Privacy Policy</a > </li> </ul> </nav> <div class="flex items-center justify-between"> <div> <p class="text-sm text-neutral-500 dark:text-neutral-400"> © 2024 Chris Haines </p> </div> </div> </footer> <div id="search-wrapper" class="invisible fixed inset-0 z-50 flex h-screen w-screen cursor-default flex-col bg-neutral-500/50 p-4 backdrop-blur-sm dark:bg-neutral-900/50 sm:p-6 md:p-[10vh] lg:p-[12vh]" data-url="https://chrishaines.uk" > <div id="search-modal" class="flex flex-col w-full max-w-3xl min-h-0 mx-auto border rounded-md shadow-lg top-20 border-neutral-200 bg-neutral dark:border-neutral-700 dark:bg-neutral-800" > <header class="relative z-10 flex items-center justify-between flex-none px-2"> <form class="flex items-center flex-auto min-w-0"> <div class="flex items-center justify-center w-8 h-8 text-neutral-400"> <span class="relative inline-block align-text-bottom icon"> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="search" class="svg-inline--fa fa-search fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"/></svg> </span> </div> <input type="search" id="search-query" class="flex flex-auto h-12 mx-1 bg-transparent appearance-none focus:outline-dotted focus:outline-2 focus:outline-transparent" placeholder="Search" tabindex="0" /> </form> <button id="close-search-button" class="flex items-center justify-center w-8 h-8 text-neutral-700 hover:text-primary-600 dark:text-neutral dark:hover:text-primary-400" title="Close (Esc)" > <span class="relative inline-block align-text-bottom icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/></svg> </span> </button> </header> <section class="flex-auto px-2 overflow-auto"> <ul id="search-results"> </ul> </section> </div> </div> </div> </body> </html>