amp html code img ad video embedded validator amptemplatescom

The intention is that websites with rich content load instantly. In addition, get smart ads work together with AMP html code and content, intended as a user-friendly answer to adblockers. For making AMP HTML page the required markup to use at least:

1.<!doctype html>
2.<html ⚡>  [AMP HTML accept this]
3.<head> and <body>  [This can be optional]
4.<link rel=”canonical” href=”$SOME_URL” />

[It does point to the regular HTML doctype version, and in AMP HTML stylesheet is replaced by canonical, calling the stylesheet here is not allowed.]

To do style in the AMP HTML use:

<style amp-custom>
             h2 {color: Green}
</style>

[Here <style> is replaced by <style amp-custom>, Inside this tag we can design according to our wish.]

The AMP HTML code documentation comes with some pre-built components and specifications available for developers. Some of them are:

amp-img

As with responsive design and mobile websites, AMP is designed to let web sites across all platforms and devices work. But where the HTML code of responsive websites still agree so heavy that it delayed the website, AMP websites should appear immediately. The large, rich websites are built with HTML AMP as a “lightweight” pages.

Images are for example “responsive” created by uploading a separate image to any desired screen size. The code is then indicated which picture belongs to which screen resolution. This way, you not one big image to be loaded, which should be scaled to the screen. Instead, just the image to be loaded associated with this particular screen.

This is the HTML version of img tag. It is a runtime implementation that gives priority to system resources whether to accelerate them or delay based on other system resources, connection and other favoured factors. When implementing an amp-img, a developer must explicitly define the size of the image such as width and height so the system can determine its aspect ratio prior to fetching the actual image.  Here <img> Tag is replaced by <amp-img> . Inside this tag we can give heigh, wide ,src and many more properties. Like following code :

amp-img can be styled using some properties of CSS, a very simple example of a piece of AMP HTML code for inserting an image:

amp-img {

  background-color: grey;

}

 

amp-video

amp-video replaces the HTML5 video tag which only gets loaded when the amp-video is on or just close to the viewport. The system runtime will explicitly determine when the video as specified by its src attribute, This implementation works just same way as HTML5.

Using the amp-video component, a developer can implement up to three HTML nodes as subsets. These are the source tags, a placeholder that shows before the video starts and fallback which sends an exception error when an unsupported HTML5 browser is detected. Below is a source code example of how the amp-video can be coded.

<amp-video width=400 height=300 src="https://yourhost.com/videos/myvideo.mp4"

poster="myvideo-poster.jpg">

<div fallback>

<p>Your browser doesn’t support HTML5 video</p>

</div>

<source type="video/mp4" src="foo.mp4">

<source type="video/webm" src="foo.webm">

</amp-video>

 

amp-ad

This in-built component is developed to bootstrap how ads show on mobile pages. Ads on the amp-ad file get loaded the same way other image and video resources get loaded. No ad networks are allowed inside the file to run. Instead, the runtime runs an iframe from another AMP document to run the ad.

amp-ad like other AMP components, requires width and height values to know explicitly what data is being fetched. This is possible by using a type argument to know what ad networked is being displayed on the page. Here’s an example of the amp-ad file behavior:

<amp-ad width=300 height=250

Type=”a9”

data-aax size=”300x250”

data-aax pubname=”test123”

data-aax src=”302”>

</amp-ad>

[Here <amp-ad> tags is used. It has type attribute. It identifies the ad network. And the networks are like foo, A9, AdReactor, AdSense, AdTech, Doubleclick. These are some of the networks you can use.]

amp-embed

Developers can use the amp-embed to integrate other elements into the AMP file. All the functionalities of amp-embed have been derived from amp-ad with just different tag name. Below is a source code example of how the amp-embed implementation works:

<amp-embed width=400 height=300

layout=responsive

data-publisher=thepublisher

data-mode=themode

data-article=auto

data-placement="Below Article Thumbnails">

</amp-embed>



Checking the valid AMP html page

To validate your AMP Page at first  Open your page in your browser then Add “#development=1” to the URL like as http://localhost/amp.html#development=1. At last  Open the Chrome Dev Tools  and check for validation errors. If your page isn’t valid what happens? If your page isn’t valid then it shows like as following:

amp html validator

Fix AMP validation errors

Most of the validation errors are easy to fix. Consider the following common AMP error for example:

amp html validator

Explanation of the AMP error:

  1. The first line of the error tries its best to indicate to you where the error occured.
  2. The second line, MANDATORY_ATTR_MISSING is the actual name of the error and MANDATORY_ATTR_MISSING signals that we’ve used a tag and forgot an important attribute.
  3. The third line, AMP HTML Spec that talks about the limitation or feature in question.

Published by AMP Coder

Support engineer and developer at AMPtemplates.com. From HTML Code to Template to Customer.

Leave a Reply

Your email address will not be published. Required fields are marked *