content: [API Reference](https://react.dev/reference/react)
  
  [Components](https://react.dev/reference/react-dom/components)
  
  # &lt;title&gt;[Link for this heading]()
  
  The [built-in browser `<title>` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title) lets you specify the title of the document.
  
  ```
  
  <title>My Blog</title>
  ```
  
  - [Reference]()
    
    - [`<title>`]()
  - [Usage]()
    
    - [Set the document title]()
    - [Use variables in the title]()
  
  * * *
  
  ## Reference[Link for Reference]()
  
  ### `<title>`[Link for this heading]()
  
  To specify the title of the document, render the [built-in browser `<title>` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title). You can render `<title>` from any component and React will always place the corresponding DOM element in the document head.
  
  ```
  
  <title>My Blog</title>
  ```
  
  [See more examples below.]()
  
  #### Props[Link for Props]()
  
  `<title>` supports all [common element props.](https://react.dev/reference/react-dom/components/common)
  
  - `children`: `<title>` accepts only text as a child. This text will become the title of the document. You can also pass your own components as long as they only render text.
  
  #### Special rendering behavior[Link for Special rendering behavior]()
  
  React will always place the DOM element corresponding to the `<title>` component within the document’s `<head>`, regardless of where in the React tree it is rendered. The `<head>` is the only valid place for `<title>` to exist within the DOM, yet it’s convenient and keeps things composable if a component representing a specific page can render its `<title>` itself.
  
  There are two exception to this:
  
  - If `<title>` is within an `<svg>` component, then there is no special behavior, because in this context it doesn’t represent the document’s title but rather is an [accessibility annotation for that SVG graphic](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/title).
  - If the `<title>` has an [`itemProp`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemprop) prop, there is no special behavior, because in this case it doesn’t represent the document’s title but rather metadata about a specific part of the page.
  
  ### Pitfall
  
  Only render a single `<title>` at a time. If more than one component renders a `<title>` tag at the same time, React will place all of those titles in the document head. When this happens, the behavior of browsers and search engines is undefined.
  
  * * *
  
  ## Usage[Link for Usage]()
  
  ### Set the document title[Link for Set the document title]()
  
  Render the `<title>` component from any component with text as its children. React will put a `<title>` DOM node in the document `<head>`.
  
  App.jsShowRenderedHTML.js
  
  App.js
  
  Reset[Fork](https://codesandbox.io/api/v1/sandboxes/define?undefined&environment=create-react-app "Open in CodeSandbox")
  
  ```
  import ShowRenderedHTML from './ShowRenderedHTML.js';
  
  export default function ContactUsPage() {
    return (
      <ShowRenderedHTML>
        <title>My Site: Contact Us</title>
        <h1>Contact Us</h1>
        <p>Email us at support@example.com</p>
      </ShowRenderedHTML>
    );
  }
  
  ```
  
  ### Use variables in the title[Link for Use variables in the title]()
  
  The children of the `<title>` component must be a single string of text. (Or a single number or a single object with a `toString` method.) It might not be obvious, but using JSX curly braces like this:
  
  ```
  
  <title>Results page {pageNumber}</title> // 🔴 Problem: This is not a single string
  ```
  
  … actually causes the `<title>` component to get a two-element array as its children (the string `"Results page"` and the value of `pageNumber`). This will cause an error. Instead, use string interpolation to pass `<title>` a single string:
  
  ```
  
  <title>{`Results page ${pageNumber}`}</title>
  ```
  
  [Previous&lt;style&gt;](https://react.dev/reference/react-dom/components/style)
  
  [NextAPIs](https://react.dev/reference/react-dom)