Tag 

<p> digunakan untuk menampilkan paragraf. Topik ini akan kita

pelajari di bagian selanjutnya.

Tag <meta> digunakan untuk menulis info tentang suatu dokumen HTML

seperti deskripsi, nama pengarang, keywords, dan tanggal terakhir
dokumen diperbaharui. Tag <meta> tidak akan tampil di halaman HTML.

Pada umumnya, HTML Element terdiri dari:

 Opening Tag (tag pembuka) - contohnya adalah <p>.

 Closing Tag (tag penutup) - contohnya adalah </p>.
 Attribute - contohnya adalah style yang memiliki Value "color=red" .
HTML Attribute akan kita pelajari di topik selanjutnya.
 Content (konten) yang ingin ditampilkan di browser - contohnya
adalah My first paragraph .

Ada dua jenis HTML Element, yaitu:

1. HTML Element yang memiliki Opening Tag (tag pembuka)

dan Closing Tag (tag penutup) - contohnya adalah <p> dan </p>.
2. Empty HTML Element: memiliki Self-closing Tag, yang hanya
memiliki Opening Tag (tag pembuka) dengan garis miring sebelum
kurung tutup - contohnya adalah <br /> atau <img />.

Tag <br /> digunakan untuk berganti baris (spasi).

Tag <img /> digunakan untuk menampilkan element gambar.
Topik ini akan kita pelajari di bagian selanjutnya.

 width  yang
berfungsi untuk menentukan lebar dari element gambar,
dan diberikan value (nilai) lebar sebesar 80%
 src yang berfungsi untuk menentukan sumber gambar, dan diberikan
value (nilai) untuk diarahkan ke tautan https://bit.ly/3laVBck

 Tag <a> menandakan sebuah element tautan (hyperlink).

  Tautan tersebut bisa diarahkan ke halaman web lain atau bahkan ke
suatu bagian pada halaman web yang sama.
 Attribute href kita gunakan untuk memberi tahu tujuan dari tautan ini.
 Dalam kode di atas, attribute href kita isi dengan alamat web milik
Google https://www.google.com  sehingga ketika kita klik element tautan
tersebut, kita akan diarahkan ke halaman web Google.

HTML comment diawali dengan <!-- dan diakhiri dengan -->

keberadaan comment dalam source code akan diabaikan dan tidak dibaca oleh

komputer saat programnya dijalankan, Namun orang lain yang
membaca source code kita akan tetap dapat membaca comment kita.

tag ini akan menampilkan struktur website kita. Bisa diumpamakan seperti
tag <h1> sebagai judul bab pada sebuah buku, kemudian <h2> sebagai judul
sub-bab.

Tag heading hanya memiliki 6 tingkatan. Penulisannya seperti di bawah ini:

<h1>Heading Satu</h1>
<h2>Heading Dua</h2>
<h3>Heading Tiga</h3>
<h4>Heading Empat</h4>
<h5>Heading Lima</h5>
<h6>Heading Enam</h6>

Tag <span> digunakan untuk mengelompokkan tulisan dalam satu baris. Pada

umumnya sering digunakan untuk menambahkan CSS pada suatu tulisan
pada satu baris, tapi tidak menutup kemungkinan digunakan untuk hal
lainnya.

Contoh penggunaan:

<p>Kucingku bermata <span style="color:blue"> biru</span></p>

Tag <b> atau <strong> digunakan untuk membuat tulisan menjadi tebal.

Contoh penggunaan:

<p>
 Nama saya <b>Sarah</b>. Saya berumur <strong>22 tahun.</strong>
</p>

Untuk membuat huruf bercetak miring, maka dibutuhkan tag <i> atau <em>.

Contoh penggunaan:

<p>
Nama latin dari tanaman padi adalah <i>Oryza</i> <em>sativa L.</em>
</p>

Ada dua tipe list di HTML, yaitu:

 Unordered list dengan menggunakan tag <ul>

 Ordered list dengan menggunakan tag <ol>

Masing-masing list baik <ul> atau <ol> memiliki element <li> untuk

mendefinisikan nilai-nilai dari list tersebut.

Contoh:

<!-- Unordered List -->

<ul>
<li>Kopi</li>
<li>Teh/li>
<li>Susu</li>
</ul>

<!-- Ordered List -->

<ol>
<li>Kucing</li>
<li>Anjing</li>
<li>Ikan</li>
</ol>

<img src="https://bit.ly/3j6eb3B" alt="Cat" />

Attribute alt memberikan informasi alternatif atas gambar jika pengguna

tidak bisa melihat gambar di website kita. Gambar yang tidak muncul di
browser bisa disebabkan karena koneksi internet yang buruk atau terdapat
error pada attribute src. Attribute alt juga berguna bagi pengguna screen
reader untuk mengetahui informasi tentang gambar tersebut.
Attribute alt harus mendeskripsikan tentang gambar yang bersangkutan jika
gambar tersebut berisi informasi. Kemudian, alt juga sebaiknya menjelaskan
alamat link jika gambar berada di dalam element <a>. Terakhir,
gunakan alt dengan string kosong (contohnya <img alt="" />) apabila gambar
hanya berfungsi sebagai dekorasi pada website.

Sejak HTML5, sudah ada cara langsung untuk bisa menambahkan video
pada halaman web kita; yaitu dengan menggunakan tag <video>. Format
video yang didukung antara lain: mp4, ogg, dan webM.

Syntaxnya cukup simpel, seperti di bawah ini:

<video width="320" height="240" src="link-ke-videonya"></video>

atau dengan mengapit element <source> di antara element <video> seperti ini

<video width="320" height="240">

<source src="link-ke-video-nya" type="video/tipe-videonya"/>
</video>

Contoh penggunaannya:

<video width="320" height="240">

<source src="https://bit.ly/3j6rPni" />
</video>

Untuk memulai videonya secara otomatis. Kita bisa tambahkan

attribute autoplay di dalam element <video>-nya seperti ini

<video width="320" height="240" autoplay>

Dengan begitu videonya akan langsung dimulai sesaat setelah halaman

web kita ditampilkan di browser.

Nah kalau kita ingin menambahkan tombol-tombol media tersebut, kita

bisa tambahkan atribut controls seperti ini

<video width="320" height="240" controls>

Misalkan ukuran file video yang kita taruh itu besar dan membutuhkan
waktu lama untuk di-load. Daripada hanya menampilkan layar hitam, kita
bisa menyuruh element <video> untuk menampilkan sebuah gambar.

Misalnya kita ingin menampilkan gambar seekor kucing selagi video kita di-
load, kita bisa melakukannya seperti di bawah ini

<video width="320" height="240" poster="https://skilvul-assets-01.s3-ap-

southeast-1.amazonaws.com/lesson/intro-to-html/cat.jpeg" controls>
<source src="https://bit.ly/2FKluzq" />
</video>

Oh iya, seperti yang kita bahas di awal, kan ada beberapa format video
yang didukung oleh HTML5. Masalahnya tidak semua browser mendukung
format video yang sama:

 ada yang hanya mendukung mp4 seperti Internet Explorer dan Safari,

 ada juga yang mendukung semua format seperti Chrome dan
Mozilla.

Bagaimana mengatasi masalah ini?

Kita bisa tambahkan beberapa element <source> di dalam <video> seperti ini

<video width="800" height="600">

<source src="link-ke-videonya" type="video/mp4" />
<source src="link-ke-videonya" type="video/ogg" />
<source src="link-ke-videonya" type="video/webm" />
</video>

Dengan begitu, andaikata browsernya tidak mendukung format mp4, dia

akan beralih mencoba yang ada di bawahnya: yaitu ogg dan webm.