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

Berikut sejumlah tag HTML dasar yang sering digunakan dalam pengembangan web:

Contoh penggunaan kode:

‍‍Output:

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:

Contoh penggunaan kode:

Output:

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: <img>

Tag < img > adalah tag kosong. Artinya, tag ini tidak memiliki tag penutup. Atribut-atribut utama yang digunakan bersamanya adalah:

Contoh penggunaan kode:

Output:

Tag HTML untuk Membuat Link

Dalam HTML, tag yang digunakan untuk membuat link (tautan) adalah tag < a >. Tag ini memungkinkan kamu menghubungkan satu halaman dengan halaman lain, baik dalam situs yang sama maupun ke website lain.

Berikut cara menggunakannya:

Tag HTML untuk link: < a >

Tag < a > memiliki beberapa atribut utama yang dapat digunakan, seperti:

Contoh penggunaan kode:

Output:

Tag HTML untuk Membuat List

Tag HTML untuk membuat list memungkinkan kamu menyusun informasi dalam format yang terstruktur dan mudah dibaca. Ada tiga jenis list utama dalam HTML, yaitu daftar berurutan, daftar tak berurutan. dan daftar deskripsi.

Berikut tag yang digunakan untuk membuat masing-masing jenis list tersebut:

Daftar berurutan (ordered list)

Contoh penggunaan kode:‍‍

Output:

Daftar tak berurutan (unordered list)

Contoh penggunaan kode:

Output:

Daftar deskripsi (description list)

Contoh penggunaan kode:‍

Output:

{{COMPONENT_IDENTIFIER}}

Tag HTML untuk Membuat Form and Input

Berikut beberapa tag HTML yang sering digunakan saat membuat form dan input dalam desain web:

Contoh penggunaan kode:

Output:

Tag HTML untuk Membuat Table

Berikut tag yang akan kamu gunakan saat membuat tabel:

Contoh penggunaan kode:

  Output:

Tag HTML untuk Style dan Programming

Tag HTML untuk style dan programming membantu kamu dalam mengatur tampilan dan fungsi dari halaman web. Berikut beberapa tag penting dalam kategori ini:

Tag untuk style

Contoh penggunaan kode:

Output:

Tag untuk programming

Contoh penggunaan kode:

Output:

FAQ (Frequently Ask Question)

Apa itu atribut dalam Tag HTML?

Atribut adalah informasi tambahan yang bisa kamu tambahkan dalam tag HTML untuk mengontrol perilakunya. Sebagai contoh, atribut src dalam tag < img > dipakai untuk menentukan sumber gambar.

Apa bedanya tag HTML dengan element HTML?

Tag HTML adalah kode yang digunakan untuk membuka dan menutup elemen. Di sisi lain, elemen HTML adalah seluruh unit yang terdiri dari tag pembuka, konten, dan tag penutup. Contoh dari elemen adalah < p >Ini adalah paragraf< /p >, dengan < p > sebagai tag pembuka dan < /p > sebagai tag penutup.

Apa perbedaan tag < b >, < strong >, < i >, dan < em >?

Dalam HTML, keempat tag tersebut digunakan untuk memberikan penekanan pada teks, namun masing-masing memiliki perbedaan dalam penggunaan dan makna.

• < b > dan < i >: secara visual, tag ini dipakai untuk mengubah style teks. Tag < b > akan membuat teks menjadi tebal (bold), sementara tag < i > membuat teks menjadi miring (italic). Penggunaan tag ini lebih ke arah styling saja dan tidak menambah makna semantik atau penekanan khusus pada konten tersebut.
• < strong > dan < em >: sama seperti < b > dan < i >, tag < strong > akan membuat teks tebal dan < em > akan membuat teks miring. Namun, berbeda dengan sebelumnya, penggunaan tag ini juga menekankan makna semantik. Elemen yang diberi tag < strong > atau < em > biasanya menjadi ide pokok dalam konten. Browser atau teknologi asistif lainnya dapat menginterpretasikan penekanan ini dalam cara yang berbeda.

Penutup

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.