# HTML Viewer

URL: https://discuvr.org/html-viewer/?hl=id
Last updated: 2026-11-08
MCP tool: `inspect_html`

Tempel HTML dan lihat pratinjau langsung di sandbox, pada lebar ponsel, tablet, atau desktop. Beautify, minify, jalankan skrip dengan konsol, temukan error markup.

Template email, potongan dari tiket, laporan hasil ekspor: kadang Anda hanya perlu melihat seperti apa sepotong HTML. Tempelkan dan HTML langsung dirender saat Anda mengetik, di dalam bingkai yang terkunci, pada lebar layar yang Anda pilih. Di samping pratinjau, Anda bisa merapikannya, mengecilkannya, menjalankan skripnya dengan konsol, dan melihat daftar hal yang benar-benar salah pada markup.

## Fungsinya

- Pratinjau langsung saat mengetik; di atas 200.000 karakter pratinjau berhenti sampai Anda menekan Segarkan.
- Ukuran pratinjau ponsel, tablet, desktop, dan lebar penuh, plus layar penuh.
- Skrip nonaktif secara default; aktifkan untuk melihat output konsol dan error.
- Rapikan markup yang berantakan atau perkecil, tanpa menyentuh isi pre, script, atau style.
- Laporan inspeksi: jumlah elemen, kerangka heading, dan masalah yang konkret.
- Buka file .html lokal, salin hasilnya, atau unduh.

## Cara kerja

1. Tempel HTML, buka file .html, atau muat contoh.
2. Pilih lebar pratinjau dan tentukan apakah skrip boleh berjalan.
3. Rapikan, perkecil, atau inspeksi, lalu salin atau unduh hasilnya.

## Mengapa pratinjau dijalankan di sandbox

HTML yang ditempel bisa berisi skrip, formulir, dan tautan yang bukan Anda tulis. Pratinjau berjalan di iframe sandbox dengan origin buram (opaque) tersendiri, sehingga tidak ada isinya yang dapat membaca cookie situs ini atau sesi Anda, mengirim apa pun atas nama Anda, atau memindahkan halaman ini ke alamat lain. Skrip tetap nonaktif sampai Anda mengaktifkannya.

## Apa yang diperiksa inspeksi

Inspeksi membaca markup dengan parser HTML standar dan hanya melaporkan apa yang dilihatnya: tag yang dibuka tetapi tidak pernah ditutup, tag penutup tanpa tag pembuka, gambar tanpa teks alt, id ganda, tautan yang membuka tab baru tanpa rel="noopener", level heading yang terlewat, sumber daya yang dimuat lewat http://, dan pada halaman lengkap, doctype, title, lang, atau tag viewport yang hilang.

## Yang sengaja dibiarkan oleh pemeriksaan

Pemeriksaan melaporkan kesalahan, bukan gaya. Tag penutup yang boleh dihilangkan menurut standar HTML, seperti </p>, </li>, </td>, </tr>, dan </option>, tidak pernah dicatat sebagai belum ditutup, dan elemen kosong seperti <br>, <img>, dan <input> tidak perlu tag penutup. alt="" yang kosong dihitung sebagai teks alt, dan itu benar untuk gambar dekoratif. Tautan dengan target="_blank" lolos jika memakai rel="noopener" atau rel="noreferrer". Tautan http:// biasa di <a href> tidak dihitung tidak aman; hanya sumber yang dimuat seperti gambar, skrip, stylesheet, dan iframe. Kembali naik ke level judul yang lebih tinggi (h4 ke h2) tidak masalah; yang dilaporkan hanya lompatan turun yang melewati satu level (h2 ke h4). Pemeriksaan doctype, title, lang, dan viewport hanya berjalan jika yang ditempel adalah halaman utuh, yaitu punya doctype atau tag html, head, atau body, jadi blok email atau potongan CMS tidak dikurangi nilainya karena itu.

## Memeriksa email HTML sebelum dikirim

Lihat dulu di lebar Ponsel (375 px), karena banyak orang membuka email di ponsel, lalu di Tablet (768 px) dan Desktop (1280 px). Biarkan skrip mati: aplikasi email tidak menjalankan JavaScript, jadi pratinjau tanpa skrip lebih mirip dengan yang dilihat pembaca. Pakai URL gambar absolut dengan https://, karena pratinjau maupun aplikasi email penerima tidak bisa melihat file di komputer Anda. Perkecil menghapus komentar biasa tetapi mempertahankan komentar kondisional yang diawali <!--[if, seperti <!--[if mso]> ... <![endif]-->. Penutup <!--<![endif]--> dari pola <!--[if !mso]><!--> tidak dipertahankan, jadi jangan perkecil template yang memakainya, atau Outlook bisa menyembunyikan semua yang ada setelahnya. Pratinjau ini adalah tampilan browser; Outlook klasik untuk Windows menggambar email dengan mesin Word, jadi kirim email uji ke sana sebelum pengiriman besar.

## Pertanyaan

**Apakah HTML saya diunggah atau disimpan?**

Pratinjau, perapian, dan pengecilan terjadi di browser Anda. Hanya laporan inspeksi yang mengirim markup ke server, tempat markup diurai dan dijawab dalam respons yang sama: tidak ada yang ditulis ke disk atau dicatat di log, dan data penggunaan hanya menyimpan jumlah.

**Mengapa skrip saya tidak berjalan?**

Skrip nonaktif secara default karena kode yang ditempel tidak tepercaya. Centang "Jalankan skrip" dan pratinjau dimuat ulang dengan JavaScript aktif, tetap di dalam sandbox, lalu output konsol muncul di bawah pratinjau.

**Mengapa gambar atau stylesheet relatif tidak termuat?**

Pratinjau dibuat dari teks yang ditempel, bukan dari komputer atau server Anda, sehingga path relatif seperti images/logo.png dicari di situs ini dan tidak ditemukan. Gunakan URL absolut, atau tambahkan tag <base href="..."> yang menunjuk ke lokasi file yang sebenarnya.

**Apakah merapikan mengubah tampilan halaman?**

Hanya mengatur ulang indentasi di antara tag dan membiarkan isi pre, textarea, script, dan style apa adanya. Spasi di antara elemen inline sesekali bisa sedikit bergeser, jadi periksa pratinjau setelah memformat.

**Seberapa besar dokumen yang bisa ditangani?**

Laporan inspeksi menerima hingga 1.000.000 karakter dan menampilkan paling banyak 200 masalah. Pratinjau langsung berhenti di atas 200.000 karakter agar mengetik tetap lancar; tekan Segarkan atau Ctrl+Enter untuk memperbaruinya.

**Bisakah saya melihat pratinjau template email HTML?**

Bisa. Tempel HTML email atau buka file .html, ubah lebar ke Ponsel (375 px) dan Desktop (1280 px) untuk melihat kedua tata letak, lalu tekan Inspeksi untuk menemukan gambar tanpa teks alt dan sumber daya yang dimuat lewat http:// tanpa enkripsi. Pratinjau memakai mesin browser Anda, sedangkan setiap aplikasi email memakai mesinnya sendiri dan banyak yang membuang sebagian CSS, jadi pratinjau ini kurang lebih menunjukkan tampilan webmail di browser, bukan persis tampilan di setiap kotak masuk. Aplikasi email tidak menjalankan JavaScript, jadi biarkan Jalankan skrip mati. Sebelum pengiriman sungguhan, kirim email uji ke aplikasi yang dipakai pembaca Anda.

**Apakah aman membuka berkas HTML yang dikirim seseorang?**

Lebih aman daripada membukanya langsung. Buka berkas memuatnya ke editor di browser Anda, dan tidak ada yang dikirim ke server kecuali Anda menekan Inspeksi. Pratinjau berjalan di bingkai terisolasi dengan skrip dan pengiriman formulir mati, jadi halaman tidak bisa menjalankan kode, mengirim formulir, atau menjangkau cookie situs ini. Gambar dan stylesheet dengan alamat http(s) lengkap tetap dimuat, jadi pengirim bisa tahu berkas itu dibuka. Baca kodenya dulu, biarkan Jalankan skrip mati, dan jangan pernah mengetik kata sandi di halaman yang dikirim kepada Anda.

**Mengapa huruf beraksen berubah menjadi � setelah saya membuka berkas?**

Buka berkas selalu membaca berkas sebagai UTF-8 dan mengabaikan tag <meta charset> di dalamnya. Halaman yang disimpan sebagai Windows-1252 atau ISO-8859-1, umum pada editor dan ekspor Windows lama, menyimpan huruf seperti é, ü, dan £ sebagai byte yang bukan UTF-8 yang valid, sehingga masing-masing tampil sebagai karakter pengganti �. Buka berkas di editor Anda, simpan ulang sebagai UTF-8 (Notepad: Save as, Encoding UTF-8; VS Code: klik encoding di status bar, lalu Save with Encoding), lalu buka lagi di sini. Atau buka berkas di browser, lihat sumbernya, lalu tempel di sini, karena browser sudah mendekodenya dengan charset halaman itu sendiri.

**Mengapa formulir atau tautan yang membuka tab baru tidak melakukan apa pun di pratinjau?**

Sandbox tidak pernah mengizinkan pengiriman formulir atau pop-up, bahkan saat Jalankan skrip aktif, jadi menekan Kirim tidak mengirim apa pun dan tautan target="_blank" serta panggilan window.open() diblokir. Ini mencegah halaman yang ditempel mengirim data atau membuka situs lain. Tautan biasa terbuka di dalam bingkai pratinjau, dan situs yang menolak ditampilkan dalam bingkai akan tampak kosong atau ditolak. Untuk memeriksa formulir, baca action, method, dan kolomnya di sumber; Inspeksi juga mencantumkan setiap tautan target="_blank" tanpa rel="noopener". Uji pengiriman sebenarnya di server pengembangan Anda sendiri.

## Lainnya di Alat Pengembang

- [Kalkulator Subnet IP](https://discuvr.org/ip-subnet-calculator/?hl=id)
- [Enkode / Dekode](https://discuvr.org/encode-decode/?hl=id)
- [Konverter Timestamp Unix](https://discuvr.org/timestamp-converter/?hl=id)
- [Pembuat Diagram Sistem](https://discuvr.org/system-diagram/?hl=id)

## Sering dipakai bersama

- [Bandingkan Teks](https://discuvr.org/text-diff/?hl=id)
- [Pemindaian Keamanan Situs Web](https://discuvr.org/security-scan/?hl=id)

---

Part of Discuvr (https://discuvr.org/): Discuvr is a collection of free, focused tools for day-to-day professional work - office and data utilities, legal and compliance helpers, privacy and security checks, and developer formatters. Every tool has its own page, and most can also be called from ChatGPT or Claude over MCP.