Head
Head
lets you set the <head>
of your page.
tsx
<Head(alias) function Head(props: ComponentProps<"head">): JSX.Element
import Head
> <Title(alias) const Title: Component<JSX.HTMLAttributes<HTMLTitleElement>>
import Title
>Hogwarts</Title(alias) const Title: Component<JSX.HTMLAttributes<HTMLTitleElement>>
import Title
> </Head(alias) function Head(props: ComponentProps<"head">): JSX.Element
import Head
>
tsx
<Head(alias) function Head(props: ComponentProps<"head">): JSX.Element
import Head
> <Title(alias) const Title: Component<JSX.HTMLAttributes<HTMLTitleElement>>
import Title
>Hogwarts</Title(alias) const Title: Component<JSX.HTMLAttributes<HTMLTitleElement>>
import Title
> </Head(alias) function Head(props: ComponentProps<"head">): JSX.Element
import Head
>
Usage
Setting the <head>
of your page
The Head
component includes machine-readable metadata about the document, like its title, description of its content, links to scripts, and stylesheets.
It is a wrapper over the head
element and accepts the same attributes. It accepts elements you would usually place under head
, like title
, meta
, and link
along with their wrapped counterparts.
The Head
is required to be a child of Html
and should be the first child of Html
. It serves a few purposes, and a document without the Head
component will not render correctly.
tsx
export default function Rootfunction Root(): JSX.Element
() { return (
<Html(alias) function Html(props: ComponentProps<"html">): JSX.Element
import Html
lang(property) JSX.HTMLAttributes<HTMLHtmlElement>.lang?: string | undefined
="en"> <Head(alias) function Head(props: ComponentProps<"head">): JSX.Element
import Head
> <Title(alias) const Title: Component<JSX.HTMLAttributes<HTMLTitleElement>>
import Title
>Solid - Hacker News</Title(alias) const Title: Component<JSX.HTMLAttributes<HTMLTitleElement>>
import Title
> <Meta(alias) const Meta: Component<JSX.MetaHTMLAttributes<HTMLMetaElement>>
import Meta
charset(property) JSX.MetaHTMLAttributes<HTMLMetaElement>.charset?: string | undefined
="utf-8" /> <Meta(alias) const Meta: Component<JSX.MetaHTMLAttributes<HTMLMetaElement>>
import Meta
name(property) JSX.MetaHTMLAttributes<HTMLMetaElement>.name?: string | undefined
="viewport" content(property) JSX.MetaHTMLAttributes<HTMLMetaElement>.content?: string | undefined
="width=device-width, initial-scale=1" /> <Meta(alias) const Meta: Component<JSX.MetaHTMLAttributes<HTMLMetaElement>>
import Meta
name(property) JSX.MetaHTMLAttributes<HTMLMetaElement>.name?: string | undefined
="description" content(property) JSX.MetaHTMLAttributes<HTMLMetaElement>.content?: string | undefined
="Hacker News Clone built with Solid" /> <Link(alias) const Link: Component<JSX.LinkHTMLAttributes<HTMLLinkElement>>
import Link
rel(property) JSX.LinkHTMLAttributes<HTMLLinkElement>.rel?: string | undefined
="manifest" href(property) JSX.LinkHTMLAttributes<HTMLLinkElement>.href?: string | undefined
="/manifest.webmanifest" /> </Head(alias) function Head(props: ComponentProps<"head">): JSX.Element
import Head
> </Html(alias) function Html(props: ComponentProps<"html">): JSX.Element
import Html
> );
}
tsx
export default function Rootfunction Root(): JSX.Element
() { return (
<Html(alias) function Html(props: ComponentProps<"html">): JSX.Element
import Html
lang(property) JSX.HTMLAttributes<HTMLHtmlElement>.lang?: string | undefined
="en"> <Head(alias) function Head(props: ComponentProps<"head">): JSX.Element
import Head
> <Title(alias) const Title: Component<JSX.HTMLAttributes<HTMLTitleElement>>
import Title
>Solid - Hacker News</Title(alias) const Title: Component<JSX.HTMLAttributes<HTMLTitleElement>>
import Title
> <Meta(alias) const Meta: Component<JSX.MetaHTMLAttributes<HTMLMetaElement>>
import Meta
charset(property) JSX.MetaHTMLAttributes<HTMLMetaElement>.charset?: string | undefined
="utf-8" /> <Meta(alias) const Meta: Component<JSX.MetaHTMLAttributes<HTMLMetaElement>>
import Meta
name(property) JSX.MetaHTMLAttributes<HTMLMetaElement>.name?: string | undefined
="viewport" content(property) JSX.MetaHTMLAttributes<HTMLMetaElement>.content?: string | undefined
="width=device-width, initial-scale=1" /> <Meta(alias) const Meta: Component<JSX.MetaHTMLAttributes<HTMLMetaElement>>
import Meta
name(property) JSX.MetaHTMLAttributes<HTMLMetaElement>.name?: string | undefined
="description" content(property) JSX.MetaHTMLAttributes<HTMLMetaElement>.content?: string | undefined
="Hacker News Clone built with Solid" /> <Link(alias) const Link: Component<JSX.LinkHTMLAttributes<HTMLLinkElement>>
import Link
rel(property) JSX.LinkHTMLAttributes<HTMLLinkElement>.rel?: string | undefined
="manifest" href(property) JSX.LinkHTMLAttributes<HTMLLinkElement>.href?: string | undefined
="/manifest.webmanifest" /> </Head(alias) function Head(props: ComponentProps<"head">): JSX.Element
import Head
> </Html(alias) function Html(props: ComponentProps<"html">): JSX.Element
import Html
> );
}
Reference
<Head />
Use the Head
component as the first child of Html
to set the <head>
of your page. It is necessary to have this otherwise your app will break in production (probably in dev too).
The Head
component automatically inserts any link
elements needed for preloading JavaScript and CSS for the current page. It handles the insertion of any meta-tags that are added throughout the application.
Head
and its descendants are not hydrated on page boot up in the browser after server rendering. It accepts the same props as the native <head>
element.
tsx
import { Html(alias) function Html(props: ComponentProps<"html">): JSX.Element
import Html
, Head(alias) function Head(props: ComponentProps<"head">): JSX.Element
import Head
} from "solid-start";
export default function Rootfunction Root(): JSX.Element
() { return (
<Html(alias) function Html(props: ComponentProps<"html">): JSX.Element
import Html
> <Head(alias) function Head(props: ComponentProps<"head">): JSX.Element
import Head
>...</Head(alias) function Head(props: ComponentProps<"head">): JSX.Element
import Head
> </Html(alias) function Html(props: ComponentProps<"html">): JSX.Element
import Html
> );
}
tsx
import { Html(alias) function Html(props: ComponentProps<"html">): JSX.Element
import Html
, Head(alias) function Head(props: ComponentProps<"head">): JSX.Element
import Head
} from "solid-start";
export default function Rootfunction Root(): JSX.Element
() { return (
<Html(alias) function Html(props: ComponentProps<"html">): JSX.Element
import Html
> <Head(alias) function Head(props: ComponentProps<"head">): JSX.Element
import Head
>...</Head(alias) function Head(props: ComponentProps<"head">): JSX.Element
import Head
> </Html(alias) function Html(props: ComponentProps<"html">): JSX.Element
import Html
> );
}