5 hal yang tidak Anda ketahui dapat Anda lakukan dengan HTML

Sep 11, 2025

Bagaimana caranya

Mari kita hadapi itu, pengembangan web dapat dengan mudah menjadi berantakan. HTML, CSS dan Javascript. Semuanya berevolusi dari asal yang rendah hati selama bertahun-tahun, dan sebagian besar samar-samar dalam hal bagaimana Anda harus menggunakannya. Akibatnya, semuanya terlalu mudah untuk membuat kekacauan yang tidak bisa dimakan. Mengikuti standar dan mengambil keuntungan dari perbaikan terbaru dalam spesifikasi tidak menjamin kode yang baik, tetapi tentu saja dapat membantu.

Dalam segala jenis pengembangan perangkat lunak, modularitas adalah Raja dalam hal membangun kode yang dapat dipelihara. Akibatnya, Anda ingin mengawasi komponen web. Dukungan browser tidak bagus, tetapi jika Anda mengambil sendiri Polyfills. , Anda bisa maju dari kurva dan mulai memanfaatkan elemen khusus untuk menyusun kode Anda segera. Gaya pembangunan ini adalah masa depan, jadi layak untuk terbiasa dengan itu sekarang.

Keep code streamlined for clearer understanding — Simpan kode yang disederhanakan untuk pemahaman yang lebih jelas

HTML5 itu sendiri memperkenalkan sejumlah elemen baru (dan tidak ada waktu yang usang) untuk membantu mendorong praktik pengkodean yang baik. Anda mungkin pernah mendengar markup semantik, yang mengacu pada penggunaan elemen deskriptif HTML5 seperti & lt; artikel & gt; dan & lt; Gambar & gt; untuk menunjukkan jenis konten yang dikandungnya.

Ini benar-benar dapat membantu dengan kebersihan kode Anda, karena elemen HTML akan segera mengidentifikasi, misalnya, bagian mana yang mewakili bilah menu, bagian konten Anda, footer dan sebagainya.

Ini juga akan membantu jika Anda memanfaatkan standar JavaScript terbaru. Javascript juga bisa menjadi berantakan, tetapi menjadi lebih mudah untuk bekerja dalam beberapa tahun terakhir. Sintaks ES6 didukung secara luas di browser, dan fitur-fitur seperti fungsi panah dan kelas dapat membuat hidup Anda lebih mudah - namun banyak pengembang tidak terbiasa dengan atau waspada menggunakannya.

Melanjutkan tema pengembangan modular, JavaScript juga sekarang mendukung pemuatan modul, yang dapat membantu Anda mengelola dependensi Anda dengan bersih.

01. Kenali dan sintesis pidato

The sound of things to come — Suara yang akan datang (Kredit Gambar: Foto oleh Jason Rosewell pada Unsplash)

Ini sekali akan menjadi fungsi yang kompleks yang membutuhkan perangkat lunak khusus, tetapi mereka sekarang sedang dibangun langsung ke browser. API ucapan web memiliki komponen yang mendukung text-to-speech dan speech-to-text. Yang terakhir ini akan menggunakan layanan online (Chrome menggunakan Google Cloud Speech API) atau layanan pengenalan ucapan asli perangkat. Berharap untuk melihat ini digunakan secara luas pada perangkat seluler di masa depan.

02. Menampilkan pemetik warna

Choosing the right colour — Memilih warna yang tepat (Kredit Gambar: Foto oleh Scott Webb pada Unsplash)

Sepele karena mungkin terdengar, ini adalah contoh yang bagus tentang bagaimana HTML5 menyederhanakan tugas-tugas umum yang sebelumnya akan memerlukan pengkodean khusus komponen UI yang cukup kompleks. & lt; input type = "color" & gt; akan menampilkan pemilih warna visual ketika diklik, menggunakan pemilih warna asli perangkat. Ini bisa sangat berguna dengan kanvas HTML. Ini didukung secara luas dengan pengecualian Safari di ponsel.

03. Rekolori UI browser

Colour themes for browsers — Tema warna untuk browser (Kredit Gambar: Foto oleh Marko Blažević pada Unsplash)

Ini dapat menawarkan sentuhan estetika yang bagus pada platform seluler. & lt; meta name = "tema-warna" konten = "# ffffff" / & gt; dirancang untuk menginstruksikan browser untuk mengandalkan bilah alat saat melihat situs Anda. Sayangnya, ini agak tidak terstandarisasi, jadi sementara "Warna tema" Bekerja dengan Chrome, Firefox dan Opera, di iOS yang Anda perlukan "Apple-Mobile-Web-App-Status-State-Style" (hanya berfungsi dalam mode layar penuh).

04. Gambar berbeda untuk layar yang berbeda

Specifying the image and the resolution — Menentukan gambar dan resolusi (Kredit Gambar: Foto oleh Tran Mau Tri Tam pada Unsplash)

Semoga Anda sudah menerapkan desain responsif, dalam hal ini gambar Anda akan mengubah ukuran sesuai dengan viewport. Ini tidak sempurna, karena Anda akan memaksa pengguna untuk mengunduh versi gambar terbesar kemudian downsampling. Masukkan HTML5. & lt; gambar & gt; Elemen, yang memungkinkan Anda menentukan gambar yang berbeda untuk ditampilkan tergantung pada resolusi layar situs yang sedang dilihat.

05. Vibrate ponsel Anda

Shakin' all over — Shakin 'Seluruh (Kredit Gambar: Foto oleh Gilles Lambert pada Unsplash)

API getaran bernama bernama memaparkan satu fungsi, bergetar (), yang akan melakukan persis apa yang dikatakan pada perangkat yang mendukungnya. Fungsi ini mengambil daftar yang menggambarkan pola getaran sebagai argumennya. Ini akan bekerja pada Chrome, Firefox dan Opera, meskipun Anda kurang beruntung di tepi atau safari. Dilaporkan bahwa beberapa iklan menggunakan ini untuk menarik perhatian pengguna, jadi juri keluar apakah itu sebenarnya ide yang bagus.

Artikel ini awalnya muncul di Desainer web Masalah 266. Beli di sini .

Artikel terkait:

10 desain template HTML5 terbaik
20 templat HTML untuk memberikan proyek desain web Anda headstart
Kuku HTML Anda dengan lembar curang ini

5 hal yang tidak Anda ketahui dapat Anda lakukan dengan HTML

01. Kenali dan sintesis pidato

02. Menampilkan pemetik warna

03. Rekolori UI browser

04. Gambar berbeda untuk layar yang berbeda

05. Vibrate ponsel Anda

Bagaimana caranya - Artikel Terpopuler

Buat stylus Anda sendiri dengan hanya 4 item rumah tangga (Serius)

Cara membuat interior dengan Blender's Eevee

Gunakan ruang negatif untuk menarik tangan yang lebih baik

Tambahkan warna digital ke gambar pensil

Cara menggambar hidung

Cara Memilih Alat Prototyping yang Tepat

Cara Membuat Geofilter Snapchat di Photoshop

Gabungkan keterampilan tradisional dan digital untuk membuat penutup komik

Kategori