Google AMP is a good way to make a mobile website with fast loading feature. It is entirely built on the latest web technologies. Google AMP has achieved such speed by restricting some parts of HTML, CSS and JavaScript to load the web pages at the best possible speed without losing its beauty. Those restrictions lead to a definition of custom elements and rules.
Rules:
- The doctype declaration is required.
<!doctype html>
- Designer must use <html ⚡> or <html amp> instead or standard <HTML> tag to start the AMP page code. This tells the browser that the file is an AMP file.
<html amp>
- The HEAD tag must contain the following links and code in it to make the AMP code work.
HTML
<!-- The charset definition must be the first child of the `<head>` tag. -->
<meta charset="utf-8">
<!-- The AMP runtime must be loaded as the second child of the `<head>` tag.-->
<script async src=
</script>
<!-- AMP HTML files require a canonical link pointing to the regular HTML.
If no HTML version exists, it should
point to itself -->
<link rel="canonical" href=
<!-- AMP HTML files require a viewport declaration. It's recommended to include initial-scale=1 --><meta name="viewport" content=
"width=device-width,minimum-scale=1,initial-scale=1">
<!-- The AMP boilerplate --><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>
|
- Custom CSS can be added in the AMP page by writing CSS in AMP CSS tag as shown:
HTML
<style amp-custom>
<!-- Custom CSS -->
</style>
|
It can be noted that most of the HTML tags can directly be used in an AMP page while some tags like img are replaced with the redefined AMP tag.
Example:
HTML
<!-- Doctype declaration is required. --><!doctype html><!-- This tells the browser that this is an AMP file. `<html ⚡>` works too. -->
<html amp>
<head>
<!-- The charset definition must be the
first child of the `<head>` tag. -->
<meta charset="utf-8">
<!-- The AMP runtime must be loaded as the
second child of the `<head>` tag.-->
<script async src=
</script>
<!-- AMP HTML files require a canonical
link pointing to the regular HTML.
If no HTML version exists, it should
point to itself -->
<link rel="canonical" href=
<!-- AMP HTML files require a viewport
declaration. It's recommended to
include initial-scale=1 -->
<meta name="viewport" content=
"width=device-width,minimum-scale=1,initial-scale=1">
<!-- CSS must be embedded inline -->
<style amp-custom>
h1 {
color: forestgreen;
}
</style>
<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>
Hello World!<br>Welcome to
GeeksForGeeks
</h1>
</body>
</html>
|
Output:
This output is for iPhone 6/7/8
Article Tags :