Before getting into the details of this article, please go through my earlier article on Accelerated Mobile Pages (AMP):
AMP Markup
In my earlier article on this series, I explained why AMP is making a difference for the mobile web experience. Now let's look at the very basic markup for AMP page,
- Every AMP document should start with <!DOCTYPE html>
- HTML tag should contain 'amp' as <html ?> or it can be <html amp>
- <head> and <link> are our standard HTML tags
- <style> tag is in line as per AMP restrictions. Whatever styles we need, all need to be inline under <head> tag. To add a custom style the following tag can be used,
- <style amp-custom>
- amp-img
- {
- border: 2px solid grey;
- }
- </style>
- <script> tag is showing 'async' meaning external JS file needed for AMP custom attributes need to be loaded asynchronously. This is the key requirement for AMP pages for non-blocking loading of page e.g.
- <script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>
Now let's explore some of the key AMP tags with some real examples,
- Suppose you want to show a banner Image on a page then it can be referred with tag <amp-img>,
- <amp-img src="banner.jpg" alt="Banner" height="400" width="800"></amp-img>
- Let's assume we are playing some video and along with video, we also need to display ads on a page. Video can be just displayed using <amp-video> and Ad can be displayed using <amp-ad> tag,
Refer the following code snippet and screenshot for the same from mobile,
- <!doctype html>
- <html amp lang="en">
-
- <head>
- <meta charset="utf-8">
- <title>My First AMP</title>
- <link rel="canonical" href="first-amp.html" />
- <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
- <style>
- body
- {
- opacity: 0
- }
- </style><noscript><style>body{opacity:1}</style></noscript>
- <script async src="https://cdn.ampproject.org/v0.js"></script>
- </head>
-
- <body>
- <h1>
- Welcome to my first AMP!</h1>
- </br>
- <h2>
- AMP Ad with AdSense</h2>
- <amp-ad width="300" height="200" type="adsense" data-ad-client="ca-pub-8125901705757971" data-ad-slot="7783467241">
- </amp-ad>
- <h2>
- AMP Video</h2>
- <amp-video width="15" height="10" src="OSP204.mp4" layout="responsive" controls>
- </amp-video>
- </body>
-
- </html>
Output of the above code snippet can be seen as below,
- Twitter: Let's now think of displaying Twitter information in a Twitter like interface,
Important: First of all add the following script tag under our head tag for Twitter display,
- <script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>
Entire code snippet can be seen as below,
- <!doctype html>
- <html amp lang="en">
-
- <head>
- <meta charset="utf-8">
- <title>My First AMP</title>
- <link rel="canonical" href="first-amp.html" />
- <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
- <style>
- body
- {
- opacity: 0
- }
- </style><noscript><style>body{opacity:1}</style></noscript>
- <script async src="https://cdn.ampproject.org/v0.js"></script>
- <script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>
- </head>
-
- <body>
- <h1>
- Welcome to my first AMP!</h1>
- </br>
- <h2>Twitter</h2>
- <amp-twitter width=486 height=657 media="(min-width: 401px)" layout="responsive" data-tweetID="699784934026715137">
- </amp-twitter>
- </body>
-
- </html>
Output of above code snippet can be seen as below,
- Just like Twitter, now I would like to pull Instagram feed as well as a part of my AMP page.
Just add reference to amp-instagram.js as below,
- <script async custom-element="amp-instagram" src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js"></script>
And under <body> tag include below tag,
- <h2>Instagram</h2>
- <amp-instagram data-shortcode="_-CJrcwrKd" width="320" height="392" layout="responsive">
- </amp-instagram>
Output for above code snippet will be,
Hope you now have a better understanding of some of the key tags from AMP.
In the next article, I would like to summarize the above tags and demonstrate from my mobile device wit a faster mobile web experience.
Read more articles on HTML: