fungsi fungsi code html dari 60 tag

 

Tag Struktur Dasar

TagFungsiContoh
<!DOCTYPE html>Menentukan tipe dokumen HTML<!DOCTYPE html>
<html>Tag utama dokumen HTML<html lang="id">
<head>Metadata dan link eksternal<head><title>Judul</title></head>
<title>Judul halaman di tab browser<title>Profil Kang</title>
<body>Konten utama halaman<body>...konten...</body>

📝 Tag Format Teks

TagFungsiContoh
<h1><h6>Heading dari besar ke kecil<h1>Judul Utama</h1>
<p>Paragraf<p>Ini paragraf.</p>
<br>Baris baruBaris pertama<br>Baris kedua
<b>Teks tebal<b>teks penting</b>
<i>Teks miring<i>catatan</i>
<u>Garis bawah<u>penekanan</u>
<pre>Teks dengan format asli<pre> teks spasi</pre>
<hr>Garis horizontal<hr>
<strong>Teks penting (SEO & aksesibilitas)<strong>Wajib dibaca</strong>
<em>Penekanan emosional<em>perlu diperhatikan</em>
<mark>Sorotan teks<mark>highlight</mark>

🖼️ Tag Media

TagFungsiContoh
<img>Menampilkan gambar<img src="foto.jpg" alt="Foto">
<video>Menampilkan video<video controls><source src="vid.mp4"></video>
<audio>Menampilkan audio<audio controls><source src="lagu.mp3"></audio>
<source>Sumber media alternatif<source src="file.webm" type="video/webm">
<figure>Gambar dengan caption<figure><img><figcaption>Deskripsi</figcaption></figure>
<figcaption>Keterangan gambar<figcaption>Ini gambar saya</figcaption>

🔗 Tag Navigasi dan Link

TagFungsiContoh
<a>Hyperlink<a href="https://example.com">Klik</a>
<nav>Navigasi<nav><ul><li>...</li></ul></nav>
<ul>List tak berurutan<ul><li>Item</li></ul>
<ol>List berurutan<ol><li>Item</li></ol>
<li>Item dalam list<li>Data</li>

🧩 Tag Formulir

TagFungsiContoh
<form>Membuat form<form action="/submit">...</form>
<input>Input data<input type="text">
<textarea>Kotak teks panjang<textarea></textarea>
<button>Tombol<button>Kirim</button>
<select>Dropdown<select><option>1</option></select>
<option>Pilihan dropdown<option value="A">A</option>
<label>Label input<label for="nama">Nama:</label>
<fieldset>Kelompokkan input<fieldset>...</fieldset>
<legend>Judul fieldset<legend>Data Pribadi</legend>

🧮 Tag Tabel

TagFungsiContoh
<table>Tabel data<table><tr><td>...</td></tr></table>
<tr>Baris tabel<tr><td>...</td></tr>
<td>Sel data<td>Isi</td>
<th>Header kolom<th>Judul</th>
<caption>Judul tabel<caption>Data Siswa</caption>
<thead>Bagian atas tabel<thead><tr>...</tr></thead>
<tbody>Isi tabel<tbody><tr>...</tr></tbody>
<tfoot>Bagian bawah tabel<tfoot><tr>...</tr></tfoot>

🧠 Tag Semantik HTML5

TagFungsiContoh
<main>Konten utama<main>...</main>
<section>Bagian konten<section>...</section>
<article>Artikel mandiri<article>...</article>
<aside>Sidebar<aside>...</aside>
<header>Bagian atas<header>...</header>
<footer>Bagian bawah<footer>...</footer>
<time>Tanggal/waktu<time datetime="2025-08-06">6 Agustus 2025</time>

🧪 Tag Interaktif & Script

TagFungsiContoh
<script>Menyisipkan JavaScript<script>alert("Halo Kang!")</script>
<noscript>Alternatif jika JS tidak aktif<noscript>JS tidak aktif</noscript>
<canvas>Gambar dinamis<canvas id="myCanvas"></canvas>
<iframe>Menyisipkan halaman lain<iframe src="page.html"></iframe>
<embed>Menyisipkan media eksternal<embed src="file.pdf">

Posting Komentar

Lebih baru Lebih lama