HTML AMP is the way to build static web page with reliable performance and fast performance. This is an effort to improve the structure of the web, because a lot of web-accessible, especially to use sluggish mobile/cell phone.

HTML AMP built with existing web structures, but limit the CSS, HTML and JavaScript in order to make the website more quickly accessible.

How HTML AMP work?


HTML AMP work with AMP adding JavaScript library and did not change the main structure of a web. The structure of the web as usual, just added the JS library so that sufficient AMP spec HTML AMP. Simple code from a web with AMP HTML like this:

<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<link rel="canonical" href="hello-world.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>Hello World!</body>
</html>

Adding AMP JS Library, will include:

  • AMP JS Library, which manages the loading of external resources to ensure faster rendering in the page.
  • A validator AMP that provides a way for web developers to easily validate that the code their HTML AMP out of specification.
  • Some of the custom element, the HTML component called AMP, that make the general pattern is easy to implement.

AMP JS library


AMP JS library already includes builtin components (amp-ad, amp-video, amp-img, amp-pixel) so that it no longer needed the additional scripts, to speed up the rendering.

AMP Validator


AMP Validator allows web developers to easily identify if a web page does not meet the specification of HTML AMP.
Add "#depelopment = 1" into the URL of the page HTML AMP will make it easy for developers to know the structure of the error AMP HTML.

AMP HTML Components


  • HTML AMP Components is a set of additional custom element or replace the functionality of the HTML5 element.
  • Replaces the elements of the HTML5 spec are not allowed such as amp-img and amp-videos.
  • Applying third-party content, such as amp-youtube, amp-ad, and amp-twitter. Add another design, such as amp-lightbox and amp-carousel.
  • Facilitate web creation techniques, such as amp-anim, which allows web developers to display animated images, whether images (GIF) or video files (MP4 or Mus) based on browser compatibility.

You Might Also Like:

Disqus Comments

Hello, how may we help you? Just send us a message now to get assistance.

Facebook Messenger ×