HTML5 | Alat Pemeriksa Tag Tidak Tertutup

Catatan: Ketika beberapa tag tidak ditutup dengan benar, hal ini dapat menyebabkan efek bola salju yang menunjukkan bahwa banyak tag tidak ditutup, seringkali, penyebabnya terletak di bagian bawah daftar kesalahan, tengah, atau setelah tag elemen terakhir dalam daftar kesalahan, dan memperbaiki tag yang tidak ditutup akan mengakibatkan seluruh dokumen lolos pemeriksaan (dengan asumsi masukan yang diberikan adalah kode HTML5 yang valid). Jika kodenya panjang, terkadang ada gunanya membaginya menjadi beberapa bagian yang lebih kecil, untuk mempersempit tag yang tidak ditutup.

Sederhanakan pengkodean HTML Anda dengan alat mutakhir kami yang dengan mudah mendeteksi tag yang tidak ditutup, memastikan kode Anda tetap bebas kesalahan dan halaman web Anda ditampilkan dengan sempurna. Tempelkan kode Anda pada area di atas untuk mengetahui apakah ada tag HTML5 yang tidak ditutup.

HTML5 adalah standar terbaru Hypertext Markup Language, yang menawarkan fitur dan kemampuan canggih untuk membuat konten web modern.

Mempertahankan kode HTML bebas kesalahan dengan tag yang ditutup dengan benar sangat penting untuk kinerja SEO yang kuat, meningkatkan aksesibilitas situs web, dan memastikan pengalaman pengguna yang lancar.

Tag HTML

HTML menampilkan tag tertutup sendiri untuk elemen ringkas seperti gambar ('<img>') dan tag biasa yang mengapit konten, seperti paragraf ('<p>'), menyediakan cara serbaguna untuk menyusun isi web.

Tag yang ditutup sendiri

• '<area />': Mendefinisikan area yang dapat diklik dalam peta gambar.
• '<base />': Menentukan URL dasar untuk URL relatif dalam dokumen.
• '<br />': Menyisipkan jeda baris dalam teks atau konten.
• '<circle />': Mendefinisikan jalur lingkaran dalam SVG (Scalable Vector Graphics).
• '<col />': Menentukan properti kolom untuk tabel HTML.
• '<embed />': Menyematkan konten eksternal, seperti multimedia atau plugin.
• '<hr />': Membuat jeda tematik atau garis horizontal.
• '<img />': Menyematkan gambar ke dalam dokumen.
• '<input />': Mendefinisikan elemen masukan pengguna.
• '<link />': Menautkan sumber daya eksternal seperti stylesheet atau ikon.
• '<meta />': Memberikan metadata tentang dokumen.
• '<param />': Menentukan parameter untuk plugin dalam elemen objek.
• '<path />': Mendefinisikan jalur vektor dalam SVG (Scalable Vector Graphics).
• '<source />': Menentukan beberapa sumber daya media untuk elemen multimedia.
• '<track />': Menyediakan trek teks untuk elemen media seperti '<video>' atau '<audio>'.
• '<wbr />': Mendefinisikan peluang jeda kata dalam teks.
• '<command />': Mendefinisikan tombol perintah dalam menu.
• '<keygen />': Menghasilkan pasangan kunci untuk formulir yang digunakan dalam kriptografi.
• '<menuitem />': Mendefinisikan item dalam '<menu>'.
• '<frame />': Mendefinisikan subjendela (tidak digunakan lagi dalam HTML5).

Tag Reguler

• '<p>': Mendefinisikan sebuah paragraf.
• '<h1> to <h6>': Judul dari tingkat yang berbeda.
• '<strong>': Mewakili kepentingan yang kuat.
• '<em>': Mewakili teks yang ditekankan.
• '<mark>': Menyorot teks untuk referensi.
• '<abbr>': Mendefinisikan singkatan.
• '<blockquote>': Mewakili kutipan blok.
• '<ul>': Mendefinisikan daftar tidak berurutan.
• '<ol>': Mendefinisikan daftar yang diurutkan.
• '<li>': Mewakili item daftar.
• '<dl>': Mendefinisikan daftar deskripsi.
• '<dt>': Mewakili istilah dalam daftar deskripsi.
• '<dd>': Mewakili deskripsi dalam daftar deskripsi.
• '<a>': Mendefinisikan hyperlink.
• '<nav>': Mewakili tautan navigasi.
• '<audio>': Menyematkan konten audio.
• '<video>': Menyematkan konten video.
• '<form>': Mendefinisikan formulir HTML.
• '<textarea>': Membuat input teks multi-baris.
• '<select>': Membuat daftar dropdown.
• '<button>': Mendefinisikan tombol yang dapat diklik.
• '<table>': Mendefinisikan tabel HTML.
• '<thead>': Mendefinisikan header tabel.
• '<tbody>': Mendefinisikan isi isi tabel.
• '<tr>': Mendefinisikan baris tabel.
• '<th>': Mendefinisikan sel header tabel.
• '<td>': Mendefinisikan sel data tabel.
• '<caption>': Memberikan keterangan untuk tabel.
• '<div>': Mendefinisikan wadah generik.
• '<span>': Mendefinisikan teks bergaya sebaris.
• '<header>': Mewakili header dokumen atau bagian.
• '<footer>': Mewakili dokumen atau bagian footer.
• '<section>': Mewakili pengelompokan konten secara tematik.
• '<article>': Mewakili konten yang berdiri sendiri.
• '<aside>': Mewakili konten yang secara tangensial berkaitan dengan konten di sekitarnya.
• '<button>': Mendefinisikan tombol yang dapat diklik.
• '<details>': Mewakili widget pengungkapan.
• '<summary>': Memberikan ringkasan untuk elemen '<details>'.
• '<object>': Menyematkan konten atau sumber daya eksternal.
• '<iframe>': Menyematkan konteks penjelajahan bertingkat.
• '<canvas>': Menyematkan grafik melalui skrip.
• '<svg>': Menyematkan Grafik Vektor yang Dapat Diskalakan.
• '<math>': Menyematkan persamaan matematika.
• '<time>': Mewakili waktu atau rentang tertentu.
• '<address>': Mewakili informasi kontak.
• '<code>': Mewakili teks kode komputer.
• '<pre>': Mewakili teks yang telah diformat sebelumnya.
• '<fieldset>': Mengelompokkan elemen formulir terkait.
• '<legend>': Memberikan keterangan untuk '<fieldset>'.
• '<ruby>': Merupakan anotasi untuk tipografi Asia Timur.
• '<rt>': Mewakili pengucapan karakter dalam elemen '<ruby>'.

Perhatikan bahwa daftar di atas hanya menyertakan beberapa tag HTML umum yang bisa menutup sendiri dan tidak menutup sendiri (biasa), namun masih banyak lagi tag yang tersedia di HTML5 untuk berbagai tujuan.

Glosarium

• Verifikasi Kode HTML untuk Tag yang Tidak Tertutup: Tombol yang menjalankan proses pengecekan.
• Baris: Teks sebelum nomor baris, di mana tag yang tidak memiliki pasangan penutup terdeteksi.
• Tidak ada tag yang belum ditutup terdeteksi.: Pesan ketika semua tag HTML ditutup dengan benar.
• Pastekan kode HTML anda disini...: Area dimana kode HTML berada, untuk memeriksa tag yang tidak tertutup/hilang.
• Tag berikut sepertinya tidak ditutup: Jika ada satu tag yang tidak ditutup dalam kode.
• Tag berikut sepertinya tidak ditutup: Jika ada dua atau lebih tag yang tidak ditutup dalam kode.

Kesimpulan

Menutup tag HTML dengan benar sangat penting dalam pengembangan web. Setiap tag berfungsi sebagai instruksi penting bagi browser untuk menafsirkan dan merender konten secara akurat. Mengabaikan tag penutup dapat menyebabkan masalah tata letak yang tidak diinginkan, salah tafsir konten, dan pengalaman pengguna yang tidak konsisten di berbagai perangkat dan browser. Perhatian cermat terhadap detail ini tidak hanya memastikan antarmuka pengguna yang mulus dan menyenangkan secara visual, tetapi juga mendukung aksesibilitas dan optimasi mesin pencari. Dengan mengikuti praktik terbaik penutupan tag HTML, pengembang menjaga integritas kode mereka, mengembangkan situs web yang andal, mudah diakses, dan ramah pengguna yang menyampaikan informasi secara efektif sambil mempertahankan presentasi visual yang konsisten.