diff --git a/examples/with-babel-macros/pages/_document.js b/examples/with-babel-macros/pages/_document.js
index f97c28a312672..dfbe440013fd1 100644
--- a/examples/with-babel-macros/pages/_document.js
+++ b/examples/with-babel-macros/pages/_document.js
@@ -1,9 +1,9 @@
-import Document, { Head, Main, NextScript } from 'next/document'
+import Document, { Html, Head, Main, NextScript } from 'next/document'
 
 export default class MyDocument extends Document {
   render() {
     return (
-      <html>
+      <Html>
         <Head>
           <style dangerouslySetInnerHTML={{ __html: this.props.css }} />
         </Head>
@@ -11,7 +11,7 @@ export default class MyDocument extends Document {
           <Main />
           <NextScript />
         </body>
-      </html>
+      </Html>
     )
   }
 }
diff --git a/examples/with-cxs/pages/_document.js b/examples/with-cxs/pages/_document.js
index e7c8bfe368133..3e6bc93e4fe6e 100644
--- a/examples/with-cxs/pages/_document.js
+++ b/examples/with-cxs/pages/_document.js
@@ -1,4 +1,4 @@
-import Document, { Head, Main, NextScript } from 'next/document'
+import Document, { Html, Head, Main, NextScript } from 'next/document'
 import cxs from 'cxs/lite'
 
 export default class MyDocument extends Document {
@@ -10,7 +10,7 @@ export default class MyDocument extends Document {
 
   render() {
     return (
-      <html>
+      <Html>
         <Head>
           <style
             id="cxs-style"
@@ -21,7 +21,7 @@ export default class MyDocument extends Document {
           <Main />
           <NextScript />
         </body>
-      </html>
+      </Html>
     )
   }
 }
diff --git a/examples/with-emotion-11/pages/_document.js b/examples/with-emotion-11/pages/_document.js
index 09fb820698805..d91f03e85f448 100644
--- a/examples/with-emotion-11/pages/_document.js
+++ b/examples/with-emotion-11/pages/_document.js
@@ -1,4 +1,4 @@
-import Document, { Head, Main, NextScript } from 'next/document'
+import Document, { Html, Head, Main, NextScript } from 'next/document'
 import { extractCritical } from '@emotion/server'
 
 export default class MyDocument extends Document {
@@ -21,13 +21,13 @@ export default class MyDocument extends Document {
 
   render() {
     return (
-      <html>
+      <Html>
         <Head />
         <body>
           <Main />
           <NextScript />
         </body>
-      </html>
+      </Html>
     )
   }
 }
diff --git a/examples/with-emotion/pages/_document.js b/examples/with-emotion/pages/_document.js
index 5a7664a9f940a..23c13e651b69f 100644
--- a/examples/with-emotion/pages/_document.js
+++ b/examples/with-emotion/pages/_document.js
@@ -1,4 +1,4 @@
-import Document, { Head, Main, NextScript } from 'next/document'
+import Document, { Html, Head, Main, NextScript } from 'next/document'
 import { extractCritical } from 'emotion-server'
 
 export default class MyDocument extends Document {
@@ -21,13 +21,13 @@ export default class MyDocument extends Document {
 
   render() {
     return (
-      <html>
+      <Html>
         <Head />
         <body>
           <Main />
           <NextScript />
         </body>
-      </html>
+      </Html>
     )
   }
 }
diff --git a/examples/with-fela/pages/_document.js b/examples/with-fela/pages/_document.js
index 7eb6061ac72ee..bd85170ef4031 100755
--- a/examples/with-fela/pages/_document.js
+++ b/examples/with-fela/pages/_document.js
@@ -1,4 +1,4 @@
-import Document, { Main, NextScript } from 'next/document'
+import Document, { Html, Main, NextScript } from 'next/document'
 import { renderToNodeList } from 'react-fela'
 
 import getFelaRenderer from '../getFelaRenderer'
@@ -23,12 +23,12 @@ export default class MyDocument extends Document {
 
   render() {
     return (
-      <html>
+      <Html>
         <body>
           <Main />
           <NextScript />
         </body>
-      </html>
+      </Html>
     )
   }
 }
diff --git a/examples/with-goober/pages/_document.js b/examples/with-goober/pages/_document.js
index bbd38e55885d3..c7550d37d9911 100644
--- a/examples/with-goober/pages/_document.js
+++ b/examples/with-goober/pages/_document.js
@@ -1,4 +1,4 @@
-import Document, { Head, Main, NextScript } from 'next/document'
+import Document, { Html, Head, Main, NextScript } from 'next/document'
 import { extractCss } from 'goober'
 
 export default class MyDocument extends Document {
@@ -11,7 +11,7 @@ export default class MyDocument extends Document {
 
   render() {
     return (
-      <html>
+      <Html>
         <Head>
           <style
             id={'_goober'}
@@ -23,7 +23,7 @@ export default class MyDocument extends Document {
           <Main />
           <NextScript />
         </body>
-      </html>
+      </Html>
     )
   }
 }
diff --git a/examples/with-google-analytics-amp/pages/_document.js b/examples/with-google-analytics-amp/pages/_document.js
index 17937755978e9..daf9b598655b0 100644
--- a/examples/with-google-analytics-amp/pages/_document.js
+++ b/examples/with-google-analytics-amp/pages/_document.js
@@ -1,4 +1,4 @@
-import Document, { Main, NextScript } from 'next/document'
+import Document, { Html, Main, NextScript } from 'next/document'
 import { useAmp } from 'next/amp'
 
 import { GA_TRACKING_ID } from '../lib/gtag'
@@ -13,7 +13,7 @@ function AmpWrap({ ampOnly, nonAmp }) {
 export default class MyDocument extends Document {
   render() {
     return (
-      <html>
+      <Html>
         <body>
           <Main />
           <NextScript />
@@ -65,7 +65,7 @@ export default class MyDocument extends Document {
             }
           />
         </body>
-      </html>
+      </Html>
     )
   }
 }
diff --git a/examples/with-google-analytics/pages/_document.js b/examples/with-google-analytics/pages/_document.js
index 47c01282a8441..572dffed49cc2 100644
--- a/examples/with-google-analytics/pages/_document.js
+++ b/examples/with-google-analytics/pages/_document.js
@@ -1,11 +1,11 @@
-import Document, { Head, Main, NextScript } from 'next/document'
+import Document, { Html, Head, Main, NextScript } from 'next/document'
 
 import { GA_TRACKING_ID } from '../lib/gtag'
 
 export default class MyDocument extends Document {
   render() {
     return (
-      <html>
+      <Html>
         <Head>
           {/* Global Site Tag (gtag.js) - Google Analytics */}
           <script
@@ -30,7 +30,7 @@ export default class MyDocument extends Document {
           <Main />
           <NextScript />
         </body>
-      </html>
+      </Html>
     )
   }
 }
diff --git a/examples/with-next-less/pages/_document.js b/examples/with-next-less/pages/_document.js
index ff2803c511f96..af8e814a863dd 100644
--- a/examples/with-next-less/pages/_document.js
+++ b/examples/with-next-less/pages/_document.js
@@ -4,18 +4,18 @@ In production the stylesheet is compiled to .next/static/style.css and served fr
 You have to include it into the page using either next/head or a custom _document.js, as is being done in this file.
 */
 
-import Document, { Head, Main, NextScript } from 'next/document'
+import Document, { Html, Head, Main, NextScript } from 'next/document'
 
 export default class MyDocument extends Document {
   render() {
     return (
-      <html>
+      <Html>
         <Head />
         <body>
           <Main />
           <NextScript />
         </body>
-      </html>
+      </Html>
     )
   }
 }
diff --git a/examples/with-next-page-transitions/pages/_document.js b/examples/with-next-page-transitions/pages/_document.js
index b9d28a347e6fe..9f007ca30b8d8 100644
--- a/examples/with-next-page-transitions/pages/_document.js
+++ b/examples/with-next-page-transitions/pages/_document.js
@@ -1,4 +1,4 @@
-import Document, { Head, Main, NextScript } from 'next/document'
+import Document, { Html, Head, Main, NextScript } from 'next/document'
 
 export default class MyDocument extends Document {
   static async getInitialProps(ctx) {
@@ -8,7 +8,7 @@ export default class MyDocument extends Document {
 
   render() {
     return (
-      <html lang="en">
+      <Html lang="en">
         <Head>
           <meta
             name="viewport"
@@ -30,7 +30,7 @@ export default class MyDocument extends Document {
           <Main />
           <NextScript />
         </body>
-      </html>
+      </Html>
     )
   }
 }
diff --git a/examples/with-portals/pages/_document.js b/examples/with-portals/pages/_document.js
index b6b762a55ce8e..9b7ed4536e34b 100644
--- a/examples/with-portals/pages/_document.js
+++ b/examples/with-portals/pages/_document.js
@@ -1,9 +1,9 @@
-import Document, { Head, Main, NextScript } from 'next/document'
+import Document, { Html, Head, Main, NextScript } from 'next/document'
 
 export default class MyDocument extends Document {
   render() {
     return (
-      <html>
+      <Html>
         <Head />
         <body>
           <Main />
@@ -11,7 +11,7 @@ export default class MyDocument extends Document {
           <div id="modal" />
           <NextScript />
         </body>
-      </html>
+      </Html>
     )
   }
 }
diff --git a/examples/with-react-helmet/pages/_document.js b/examples/with-react-helmet/pages/_document.js
index c9f6ffd7a10a4..8b427aa4677d4 100644
--- a/examples/with-react-helmet/pages/_document.js
+++ b/examples/with-react-helmet/pages/_document.js
@@ -1,4 +1,4 @@
-import Document, { Head, Main, NextScript } from 'next/document'
+import Document, { Html, Head, Main, NextScript } from 'next/document'
 import { Helmet } from 'react-helmet'
 
 export default class MyDocument extends Document {
@@ -28,13 +28,13 @@ export default class MyDocument extends Document {
 
   render() {
     return (
-      <html {...this.helmetHtmlAttrComponents}>
+      <Html {...this.helmetHtmlAttrComponents}>
         <Head>{this.helmetHeadComponents}</Head>
         <body {...this.helmetBodyAttrComponents}>
           <Main />
           <NextScript />
         </body>
-      </html>
+      </Html>
     )
   }
 }
diff --git a/examples/with-react-native-web/pages/_document.js b/examples/with-react-native-web/pages/_document.js
index d8ee4d7540bf9..4030597dabdbd 100644
--- a/examples/with-react-native-web/pages/_document.js
+++ b/examples/with-react-native-web/pages/_document.js
@@ -1,5 +1,5 @@
 import { Children } from 'react'
-import Document, { Head, Main, NextScript } from 'next/document'
+import Document, { Html, Head, Main, NextScript } from 'next/document'
 import { AppRegistry } from 'react-native'
 import config from '../app.json'
 // Force Next-generated DOM elements to fill their parent's height
@@ -25,13 +25,13 @@ export default class MyDocument extends Document {
 
   render() {
     return (
-      <html style={{ height: '100%' }}>
+      <Html style={{ height: '100%' }}>
         <Head />
         <body style={{ height: '100%', overflow: 'hidden' }}>
           <Main />
           <NextScript />
         </body>
-      </html>
+      </Html>
     )
   }
 }
diff --git a/examples/with-rebass/pages/_document.js b/examples/with-rebass/pages/_document.js
index 762fea94632d5..382b991b9fbf8 100644
--- a/examples/with-rebass/pages/_document.js
+++ b/examples/with-rebass/pages/_document.js
@@ -1,4 +1,4 @@
-import Document, { Head, Main, NextScript } from 'next/document'
+import Document, { Html, Head, Main, NextScript } from 'next/document'
 import { ServerStyleSheet } from 'styled-components'
 
 export default class MyDocument extends Document {
@@ -8,13 +8,13 @@ export default class MyDocument extends Document {
     const styleTags = sheet.getStyleElement()
 
     return (
-      <html>
+      <Html>
         <Head>{styleTags}</Head>
         <body>
           <div className="root">{main}</div>
           <NextScript />
         </body>
-      </html>
+      </Html>
     )
   }
 }
diff --git a/examples/with-strict-csp/pages/_document.js b/examples/with-strict-csp/pages/_document.js
index ad580073027b8..3b0fca4c2b036 100644
--- a/examples/with-strict-csp/pages/_document.js
+++ b/examples/with-strict-csp/pages/_document.js
@@ -1,5 +1,5 @@
 import crypto from 'crypto'
-import Document, { Head, Main, NextScript } from 'next/document'
+import Document, { Html, Head, Main, NextScript } from 'next/document'
 
 const cspHashOf = (text) => {
   const hash = crypto.createHash('sha256')
@@ -18,7 +18,7 @@ export default class MyDocument extends Document {
     }
 
     return (
-      <html>
+      <Html>
         <Head>
           <meta httpEquiv="Content-Security-Policy" content={csp} />
         </Head>
@@ -26,7 +26,7 @@ export default class MyDocument extends Document {
           <Main />
           <NextScript />
         </body>
-      </html>
+      </Html>
     )
   }
 }
diff --git a/examples/with-style-sheet/pages/_document.js b/examples/with-style-sheet/pages/_document.js
index 830e998b72dd5..dc72499d197a1 100644
--- a/examples/with-style-sheet/pages/_document.js
+++ b/examples/with-style-sheet/pages/_document.js
@@ -1,9 +1,9 @@
-import Document, { Head, Main, NextScript } from 'next/document'
+import Document, { Html, Head, Main, NextScript } from 'next/document'
 
 export default class MyDocument extends Document {
   render() {
     return (
-      <html>
+      <Html>
         <Head>
           <style>{`body { margin: 0 }`}</style>
           <link
@@ -16,7 +16,7 @@ export default class MyDocument extends Document {
           <Main />
           <NextScript />
         </body>
-      </html>
+      </Html>
     )
   }
 }
diff --git a/examples/with-styled-components-rtl/pages/_document.js b/examples/with-styled-components-rtl/pages/_document.js
index 0e7d9d96ea59a..90e22b0f6e368 100644
--- a/examples/with-styled-components-rtl/pages/_document.js
+++ b/examples/with-styled-components-rtl/pages/_document.js
@@ -1,4 +1,4 @@
-import Document, { Head, Main, NextScript } from 'next/document'
+import Document, { Html, Head, Main, NextScript } from 'next/document'
 import { ServerStyleSheet, StyleSheetManager } from 'styled-components'
 import stylisRTLPlugin from 'stylis-plugin-rtl'
 
@@ -20,13 +20,13 @@ export default class MyDocument extends Document {
   }
   render() {
     return (
-      <html>
+      <Html>
         <Head>{this.props.styleTags}</Head>
         <body>
           <Main />
           <NextScript />
         </body>
-      </html>
+      </Html>
     )
   }
 }
diff --git a/examples/with-styletron/pages/_document.js b/examples/with-styletron/pages/_document.js
index 0eb00f9da73d8..655c799278709 100644
--- a/examples/with-styletron/pages/_document.js
+++ b/examples/with-styletron/pages/_document.js
@@ -1,4 +1,4 @@
-import Document, { Head, Main, NextScript } from 'next/document'
+import Document, { Html, Head, Main, NextScript } from 'next/document'
 import { Provider as StyletronProvider } from 'styletron-react'
 import { styletron } from '../styletron'
 
@@ -15,7 +15,7 @@ class MyDocument extends Document {
 
   render() {
     return (
-      <html>
+      <Html>
         <Head>
           {this.props.stylesheets.map((sheet, i) => (
             <style
@@ -31,7 +31,7 @@ class MyDocument extends Document {
           <Main />
           <NextScript />
         </body>
-      </html>
+      </Html>
     )
   }
 }
diff --git a/examples/with-typescript-types/pages/_document.jsx b/examples/with-typescript-types/pages/_document.jsx
index f97c28a312672..dfbe440013fd1 100644
--- a/examples/with-typescript-types/pages/_document.jsx
+++ b/examples/with-typescript-types/pages/_document.jsx
@@ -1,9 +1,9 @@
-import Document, { Head, Main, NextScript } from 'next/document'
+import Document, { Html, Head, Main, NextScript } from 'next/document'
 
 export default class MyDocument extends Document {
   render() {
     return (
-      <html>
+      <Html>
         <Head>
           <style dangerouslySetInnerHTML={{ __html: this.props.css }} />
         </Head>
@@ -11,7 +11,7 @@ export default class MyDocument extends Document {
           <Main />
           <NextScript />
         </body>
-      </html>
+      </Html>
     )
   }
 }
diff --git a/examples/with-typestyle/pages/_document.js b/examples/with-typestyle/pages/_document.js
index 38937e7644d19..fada64089114f 100644
--- a/examples/with-typestyle/pages/_document.js
+++ b/examples/with-typestyle/pages/_document.js
@@ -1,4 +1,4 @@
-import Document, { Head, Main, NextScript } from 'next/document'
+import Document, { Html, Head, Main, NextScript } from 'next/document'
 import { getStyles } from 'typestyle'
 
 export default class MyDocument extends Document {
@@ -10,7 +10,7 @@ export default class MyDocument extends Document {
 
   render() {
     return (
-      <html>
+      <Html>
         <Head>
           <style id="styles-target">{this.props.styleTags}</style>
         </Head>
@@ -18,7 +18,7 @@ export default class MyDocument extends Document {
           <Main />
           <NextScript />
         </body>
-      </html>
+      </Html>
     )
   }
 }
