Common element attributes
AMP menyediakan kumpulan atribut umum yang diperluas untuk berbagai komponen AMP (dan elemen HTML). Dokumen ini menjelaskan setiap atribut umum.
fallback
Fallback merupakan konvensi yang memungkinkan elemen menyampaikan kepada pembaca bahwa browsernya tidak mendukung elemen tersebut atau gagal memuat resource utama. Atribut fallback
dapat diletakkan pada elemen HTML apa pun yang merupakan turunan langsung elemen AMP yang mendukung fallback. Perilaku persis terkait fallback bergantung pada implementasi elemen, namun biasanya elemen fallback akan ditampilkan menggantikan elemen reguler.
Sering digunakan dengan: gambar, animasi, audio, dan video
Contoh:
<amp-img src="invalid.jpg" height="400" width="300" layout="responsive">
<div fallback style="background-color: #ccc; display: flex; justify-content: center; align-items: center;">
Could not load image
</div>
</amp-img>
Untuk informasi selengkapnya, lihat Placeholder & fallback.
heights
Semua elemen AMP yang mendukung tata letak responsive
, juga mendukung atribut heights
. Nilai atribut ini merupakan ekspresi ukuran berdasarkan ekspresi media, serupa dengan atribut ukuran pada tag img
namun dengan dua perbedaan utama:
- The value applies to the height, not the width of the element.
- Percent values are allowed. A percent value indicates the percent of the element's width. For example, a value of
80%
indicates that the height of the element will be 80% of the element's width.
heights
ditentukan bersamaan dengan width
dan height
, setelan default layout
diubah menjadi responsive
. Example:
<amp-img
src="amp.png"
width="320"
height="256"
heights="(min-width:500px) 200px, 80%"
>
</amp-img>
For more information, see Art direction with srcset, sizes & heights.
layout
AMP menyediakan kumpulan tata letak yang menentukan perilaku komponen AMP dalam tata letak dokumen. Anda dapat menentukan tata letak komponen dengan menambahkan atribut layout
menggunakan salah satu nilai tata letak yang didukung untuk elemen tersebut (lihat dokumentasi elemen untuk mengetahui nilai apa saja yang didukung).
Contoh:
<amp-img
src="/img/amp.jpg"
width="1080"
height="610"
layout="responsive"
alt="an image"
>
</amp-img>
Untuk informasi selengkapnya, lihat Kueri Tata Letak & Media dan Spesifikasi Tata Letak.
media
Semua elemen AMP mendukung atribut media
. Nilai media
adalah kueri media. Jika kueri tidak cocok, elemen tidak dirender dan resource serta kemungkinan resource turunannya tidak akan diambil. Jika jendela browser berubah ukuran atau orientasi, kueri media dievaluasi ulang dan elemen disembunyikan serta ditampilkan berdasarkan hasil yang baru.
Contoh:
<amp-img
media="(min-width: 650px)"
src="wide.jpg"
width="466"
height="355"
layout="responsive"
></amp-img>
<amp-img
media="(max-width: 649px)"
src="narrow.jpg"
width="527"
height="193"
layout="responsive"
></amp-img>
Untuk informasi selengkapnya, lihat Kueri Tata Letak & Media.
noloading
Atribut noloading
menunjukkan apakah "indikator pemuatan" harus dinonaktifkan untuk elemen ini. Banyak elemen AMP menampilkan "indikator pemuatan", yaitu animasi dasar yang menunjukkan bahwa elemen belum dimuat sepenuhnya.
Sering digunakan dengan: gambar, animasi, video, dan iklan
Contoh:
<amp-img src="card.jpg" noloading height="190" width="297" layout="responsive">
</amp-img>
on
Atribut on
digunakan untuk menginstal penangan kejadian pada elemen. Kejadian yang didukung bergantung pada elemen.
Sering digunakan dengan: lightbox, sidebar, daftar langsung, dan formulir
Sintaks:
eventName:targetId[.methodName[(arg1=value, arg2=value)]]
Contoh:
<button on="tap:my-lightbox">Open lightbox</button>
<amp-lightbox id="my-lightbox" layout="nodisplay"> ... </amp-lightbox>
For more information, see Actions and Events in AMP.
placeholder
Atribut placeholder
menunjukkan bahwa elemen yang ditandai dengan atribut ini bertindak sebagai placeholder untuk elemen AMP induk. Atribut ini dapat diletakkan pada elemen HTML apa pun yang merupakan turunan langsung elemen AMP yang mendukung placeholder. Secara default, placeholder langsung ditampilkan untuk elemen AMP, meskipun resource elemen AMP belum didownload atau diinisialisasi. Setelah siap, elemen AMP biasanya menyembunyikan placeholder-nya dan menampilkan kontennya. Perilaku persis terkait placeholder bergantung pada implementasi elemen.
Sering digunakan dengan: gambar, animasi, video, dan iklan
Contoh:
<amp-anim src="animated.gif" width="466" height="355" layout="responsive">
<amp-img placeholder src="preview.png" layout="fill"></amp-img>
</amp-anim>
Untuk informasi selengkapnya, lihat Placeholder & fallback.
sizes
Semua elemen AMP yang mendukung tata letak responsive
, juga mendukung atribut sizes
. Nilai atribut sizes
adalah ekspresi ukuran seperti yang dijelaskan di atribut ukuran di tag img
, namun diperluas ke semua elemen, tidak hanya gambar.
Contoh:
<amp-img
src="amp.png"
width="400"
height="300"
layout="responsive"
sizes="(min-width: 320px) 320px, 100vw"
>
</amp-img>
Untuk informasi selengkapnya, lihat Gambar responsif dengan atribut srcset, sizes & heights.
<img
decoding="async"
src="amp.png"
sizes="(min-width: 320px) 320px, 100vw"
class="i-amphtml-fill-content i-amphtml-replaced-content"
/>
For more information, see Art direction with srcset, sizes & heights.
width and height
Untuk sebagian tata letak, komponen AMP harus memiliki atribut width
dan height
yang berisi nilai piksel bilangan bulat.
Contoh:
<amp-anim width="245" height="300" src="/img/cat.gif" alt="cat animation">
</amp-anim>
Untuk informasi selengkapnya, lihat Kueri Tata Letak & Media dan Spesifikasi Tata Letak.