diff --git a/docs/content/3.docs/1.usage/3.meta-tags.md b/docs/content/3.docs/1.usage/3.meta-tags.md
index 9711f042f5..10679ba477 100644
--- a/docs/content/3.docs/1.usage/3.meta-tags.md
+++ b/docs/content/3.docs/1.usage/3.meta-tags.md
@@ -23,28 +23,9 @@ export default {
 }
 ```
 
-## `head` Component Property
-
-If you would prefer to use the options syntax, you can do exactly the same thing within your component options with an object or function called `head`. For example:
-
-```js
-export default {
-  head: {
-    script: [
-      {
-        async: true,
-        src: 'https://myscript.com/script.js'
-      }
-    ]
-  }
-}
-```
-
-**Note that `head()` does not have access to the component instance.**
-
 ## Meta Components
 
-Nuxt provides `<Title>`, `<Base>`, `<Script>`, `<Style>`, `<Meta>`, `<Link>`, `<Body>` and `<Head>` components so that you can interact directly with your metadata within your component template.
+Nuxt provides `<Title>`, `<Base>`, `<Script>`, `<Style>`, `<Meta>`, `<Link>`, `<Body>`, `<Html>` and `<Head>` components so that you can interact directly with your metadata within your component template.
 
 Because these component names match native HTML elements, it is very important that they are capitalized in the template.
 
@@ -56,11 +37,13 @@ For example:
 <template>
   <div>
     Hello World
-    <Head :lang="dynamic > 50 ? 'en-GB' : 'en-US'">
-      <Title>{{ dynamic }} title</Title>
-      <Meta name="description" :content="`My page's ${dynamic} description`" />
-      <Link rel="preload" href="/test.txt" as="script" />
-    </Head>
+    <Html :lang="dynamic > 50 ? 'en-GB' : 'en-US'">
+      <Head>
+        <Title>{{ dynamic }} title</Title>
+        <Meta name="description" :content="`My page's ${dynamic} description`" />
+        <Link rel="preload" href="/test.txt" as="script" />
+      </Head>
+    </Html>
 
     <button class="blue" @click="dynamic = Math.random() * 100">
       Click me
diff --git a/examples/use-meta/app.vue b/examples/use-meta/app.vue
index c7fdcf9e56..8483e704f1 100644
--- a/examples/use-meta/app.vue
+++ b/examples/use-meta/app.vue
@@ -2,11 +2,13 @@
   <div>
     Hello World
 
-    <Head :lang="'' + dynamic">
-      <Title>{{ dynamic }} title</Title>
-      <Meta name="description" :content="`My page's ${dynamic} description`" />
-      <Link rel="preload" href="/test.txt" as="script" />
-    </Head>
+    <Html :lang="String(dynamic)">
+      <Head>
+        <Title>{{ dynamic }} title</Title>
+        <Meta name="description" :content="`My page's ${dynamic} description`" />
+        <Link rel="preload" href="/test.txt" as="script" />
+      </Head>
+    </Html>
 
     <button class="blue" @click="dynamic = Math.random() * 100">
       Clickme
diff --git a/packages/nuxt3/src/meta/runtime/components.ts b/packages/nuxt3/src/meta/runtime/components.ts
index 3e49637157..6d82dc3c08 100644
--- a/packages/nuxt3/src/meta/runtime/components.ts
+++ b/packages/nuxt3/src/meta/runtime/components.ts
@@ -193,13 +193,19 @@ export const Style = defineComponent({
 // <head>
 export const Head = defineComponent({
   name: 'Head',
+  setup: (_props, ctx) => ctx.slots.default
+})
+
+// <html>
+export const Html = defineComponent({
+  name: 'Html',
   props: {
     ...globalProps,
     manifest: String,
     version: String,
     xmlns: String
   },
-  setup: setupForUseMeta(headAttrs => ({ headAttrs }), true)
+  setup: setupForUseMeta(htmlAttrs => ({ htmlAttrs }), true)
 })
 
 // <body>
