 |
| 65 Tag HTML : Fungsi dan Contoh Lengkapnya |
Overview
Tag HTML adalah alat yang membentuk kata-kata dan kalimat, membantu kita mengkomunikasikan pesan visual ke pengunjung situs. Dari menyusun teks dan gambar sampai menciptakan interaksi yang dinamis, tag HTML bertindak sebagai bahan baku yang mengubah konsep menjadi kenyataan dalam tampilan browser.
Saat memasuki dunia pengembangan web, salah satu konsep kunci yang akan kamu temui adalah tag HTML.
Dalam membuat website, tag HTML adalah elemen penting untuk membangun struktur dan tampilan konten halaman web. Tag mengatur elemen-elemen seperti judul, paragraf, gambar, dan video.
Setiap elemen dalam halaman web didefinisikan menggunakan tag HTML tertentu. Memahami penggunaan tag HTML ini krusial menjadi dasar dari tampilan dan struktur konten pada halaman web.
Mari kita selami lebih dalam!
Pengertian HTML Tag
Tag HTML adalah elemen dasar yang digunakan untuk membangun struktur dan format konten di halaman web.
Bayangkan kamu sedang membaca sebuah buku. Ada judul, paragraf, gambar, dan mungkin juga kutipan di dalamnya. Di dunia web, setiap komponen tersebut direpresentasikan dengan tag HTML tertentu.
Sebagai contoh, judul direpresentasikan dengan tag < h1 > sampai < h6 >, sementara paragraf dengan tag < p >. Ada banyak juga tag lainnya yang membantu kita mengatur dan menampilkan konten web lebih rapi.
Fungsi Tag HTML
Tag HTML bukanlah sekedar kode yang ditulis di dalam dokumen HTML. Sebaliknya, tag HTML memiliki fungsi yang sangat penting dalam pembuatan laman web. Berikut beberapa fungsi utama dari tag HTML:
- Struktur dokumen : seperti yang dijelaskan oleh FreeCodeCamp, tag HTML membantu dalam menyusun struktur dokumen HTML. Mulai dari header sampai footer, setiap bagian dari halaman web dikelilingi oleh tag tertentu. Hal ini membantu browser dalam menafsirkan dan menampilkan konten secara tepat.
- Format konten : tag HTML tidak hanya menyusun, tapi juga memformat konten. Misalnya, tag seperti < b > untuk tebal, < i > untuk miring, dan < u > untuk bergaris bawah membantu kita untuk menonjolkan bagian tertentu dari teks.
- Menyisipkan media : tag HTML seperti < img > dan < video > memungkinkan kita untuk menyertakan gambar atau video dalam laman web. Fungsi ini membuat laman web menjadi lebih interaktif dan menarik.
- Pembuatan link : tag HTML juga ada yang digunakan untuk membuat hyperlink, sehingga kamu dapat berpindah dari satu halaman ke halaman lain. Dengan fungsi ini, web menjadi dinamis dan saling terhubung.
- Integrasi dengan CSS dan JavaScript : tag HTML juga berguna sebagai jembatan dengan CSS dan JavaScript. Kita bisa menambahkan gaya dan fungsi interaktif ke halaman web. Proses ini juga membantu dalam meningkatkan user experience.
- Aksesibilitas : menurut TutorialsTonight, dengan menggunakan tag seperti < alt > pada gambar, kita dapat menjadikan laman web lebih mudah diakses oleh orang-orang yang memiliki keterbatasan.
- Search Engine Optimization (SEO) : tag HTML membantu mesin pencari seperti Google dalam mengenali dan menilai konten laman web, sehingga memungkinkan laman tersebut muncul dalam hasil pencarian yang relevan.
Tag HTML Dasar link
Berikut sejumlah tag HTML dasar yang sering digunakan dalam pengembangan web :
- <!DOCTYPEhtml> :
- digunakan untuk Mendefinisikan tipe document HTML5
- <html> :
- Digunakan untuk mendefinisikan seluruh dokumen HTML
- <head> :
- Berisi informasi meta tentang dokumen, seperti judul, link ke file CSS, dan lainnya.
- mendefinisikan bagian kepala dokumen html
- <title> :
- Dipakai di dalam elemen '<head>' untuk menetapkan judul halaman web yang akan ditampilkan pada tab browser. Penting untuk diingat bahwa dalam satu dokumen HTML, hanya akan diterima satu tag '<title>' saja.
- mendefiniskan judul halaman
- <body> :
- Merupakan bagian utama dari halaman web, di mana berisi semua konten yang ingin ditampilkan kepada audiens.
- mendefinisikan body/isi dokumen html
- <h1> - <h6> :
- Digunakan untuk judul dan subjudul, dengan '<h1>' sebagai judul utama dan '<h6>' sebagai judul terkecil.
- <p> :
- Berfungsi untuk paragraf teks.
- <a> :
- Digunakan untuk membuat hyperlink ke halaman lain.
- <br> :
- Digunakan untuk membuat jeda baris dalam teks.
- <hr> :
- Dipakai untuk membuat garis horizontal. Biasanya sering digunakan sebagai pemisah konten.
- <div> :
- Merupakan tag untuk mengelompokkan elemen lainnya, sehingga memungkinkan kontrol yang lebih baik terhadap style dan layout. '<div>' adalah block-level element yang akan membuat baris baru saat dibuat.
- <span> :
- Tag untuk mengelompokkan elemen lainnya, tetapi sebagai inline element. Tidak akan membuat baris baru saat dibuat.
Contoh penggunaan kode :
Tag HTML untuk Formatting
Tag HTML untuk formatting dipakai untuk mengatur tampilan teks dan konten lain di halaman web. Berikut beberapa tag formatting yang umum digunakan :
- <b> :
- Membuat teks tebal (bold).
- <strong> :
- Memberikan penekanan kuat pada teks (biasanya ditampilkan sebagai tebal).
- <i> :
- Membuat teks miring (italic).
- <em> :
- Memberikan penekanan pada teks (biasanya ditampilkan sebagai miring).
- <u> :
- Membuat teks bergaris bawah (underline).
- <del> :
- Menandai teks yang telah dihapus.
- <ins> :
- Menandai teks yang telah ditambahkan atau disispkan.
- <sub> :
- Menampilkan teks sebagai subscrip (di bawah garis dasar).
- <sup> :
- Menampilkan teks sebagai superscrip (di atas garis dasar).
- <pre> :
- Menampilkan teks dengan font monospace sekaligus menjaga spasi dan baris yang ada.
- <blockquote> :
- Digunakan untuk menampilkan kutipan panjang, biasanya dengan indentasi.
- <q> :
- Dipakai untuk kutipan pendek. Browser biasanya akan menambahkan tanda kutip di awal dan akhir teks.
- <abbr> :
- Menyediakan Atribut 'title' yang menjelaskan kepanjangan dari singkatan.
- <cite> :
- Menandai judul karya seperti buku atau artikel ilmiah.
- <code> :
- Menampilkan teks sebagai kode, biasanya dalam font monospace.
- <kbd> :
- Menandai input keyboard, sebagai tombol yang harus ditekan.
Contoh penggunaan kode :
Tag HTML untuk Membuat Image
Dalam HTML, tag yang khusus digunakan untuk menyisipkan gambar adalah tag < img >. Tag ini memungkinkan kamu menambahkan gambar dalam berbagai format (seperti JPEG, PNG, GIF) ke dalam halaman web.
Berikut penjelasan tentang bagaimana tag ini digunakan :
Tag HTML untuk Gambar :
Tag < img > adalah tag kosong. Artinya, tag ini tidak memiliki tag penutup. Atribut-atribut utama yang digunakan bersamanya adalah :
- src :
- Atribut ini menentukan URL dari gambar yang ingin ditampilkan URL bisa berupa alamat web lengkap atau alamat relatif ke file dalam struktur folder situs web kamu. Contoh : '<img src="gambar.jpg">' atau '<img src="https://contoh.com/gambar.jpg">'.
- alt :
- Menyediakan teks alternatif yang akan ditampilkan jika gambar tidak dapat dimuat. Teks ini juga membantu dalam aksesibilitas, memungkinkan untuk mendeskripsikan gambar kepada audiens tunanetra. Contoh : '<img src="gambar.jpg"alt="Deskripsi Gambar">'.
- width dan height :
- Digunakan untuk menentukan lebar dan tinggi gambar. Kamu bisa menentukan ukuran dalam piksel atau persentase. Contoh : '<img src="gambar.jpg"width="300" height="200">'.
- title :
- Menambahkan teks tooltip yang muncul ketika audiens mengarahkan kursor ke gambar.
Contoh penggunaan kode :
Tag HTML untuk Membuat Link
Tag <a> memiliki beberapa Atribut utama yang dapat digunakan, seperti :
- href :
- Menentukan URL tujuan dari link. Contoh : '<a href="https://contoh.com">Kunjungi Situs</a>'.
- target :
- Menentukan bagaimana link akan terbuka. Misalnya, menggunakan '<a href="https://contoh.com" target="_blank">' akan membuka link dalam tab atau jendela baru.
- rel :
- Menentukan hubungan antara halaman saat ini dan halaman yang dituju. 'rel' sering digunakan dalam SEO, dengan nilai seperti "nofollow" untuk mengatur tindakan mesin pencari terhadap link tersebut.
Contoh penggunaan kode :
post(21)
https://bit.ly/4g5CgWp