Starter code

The following markup is a basic AMP page.

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>Hello, AMPs</title>
    <link rel="canonical" href="https://amp.dev/documentation/guides-and-tutorials/start/create/basic_markup/">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  </head>
  <body>
    <h1 id="hello">Hello AMPHTML World!</h1>
  </body>
</html>

Open this snippet in playground

The body content is pretty straightforward, but there’s some additional code in the head. The required markup is broken down in the table below. Each AMP HTML document must:

Rule	Description
Start with the `<!doctype html>` doctype.	Standard for HTML.
Contain a top-level `<html ⚡>` or `<html amp> tag.`	Identifies the page as AMP content.
Contain `<head>` and `<body>` tags.	While optional in HTML, this is required in AMP.
Contain a `<meta charset="utf-8">` tag right after the `<head>` tag.	Identifies the encoding for the page.
Contain a `<script async src="https://cdn.ampproject.org/v0.js"></script>` tag inside the `<head>` tag. As a best practice, you should include the script as early as possible.	Includes and loads the AMP JS library.
Contain a `<link rel="canonical" href="$SOME_URL">` tag inside their `<head>`.	the `href` attribute should point to the page itself. This section exists for legacy reasons.
Contain a `<meta name="viewport" content="width=device-width" />` tag inside their `<head>` tag.	Specifies a responsive viewport. Learn more in Create Responsive AMP Pages.
Contain the AMP boilerplate code in their `<head>` tag.	CSS boilerplate to initially hide the content until AMP JS is loaded.

Click "Open this snippet in playground" under the example above to get started building our page!

If you want to skip ahead, you can view the finished tutorial code here!

Previous chapter Next chapter

Written by @crystalonscript