Apa cara yang benar untuk menulis dalam html?

Ada banyak hal yang harus dipelajari—berbagai elemen, atribut, properti, nilai, dan lainnya—untuk menulis HTML dan CSS. Setiap pelajaran sampai saat ini memiliki tujuan utama untuk menjelaskan berbagai komponen HTML dan CSS ini, dengan harapan dapat membantu Anda memahami dasar-dasar inti dari kedua bahasa tersebut. Pelajaran ini mundur selangkah dan melihat gambaran HTML dan CSS yang lebih abstrak

Lebih khusus lagi, pelajaran ini berfokus pada praktik pengkodean terbaik untuk HTML dan CSS. Praktik pengkodean ini berfungsi sebagai kerangka kerja menyeluruh untuk menulis HTML dan CSS. Mereka berlaku untuk setiap pelajaran dan harus selalu diingat saat memprogram

Saat Anda meninjau praktik terbaik ini, pikirkan juga bagaimana praktik tersebut dapat digunakan di area lain atau bahasa pemrograman. Misalnya, penggunaan komentar untuk mengatur kode (seperti yang kita bahas dalam pelajaran ini) bermanfaat di semua bahasa pemrograman. Pertahankan pola pikir terbuka dan pertimbangkan bagaimana Anda dapat memanfaatkan sepenuhnya setiap latihan

Praktik Pengkodean HTML

Banyak praktik terbaik pengkodean yang menekankan agar kode tetap ramping dan tertata dengan baik. Praktik umum dalam HTML tidak berbeda. Tujuannya adalah untuk menulis markup yang terstruktur dengan baik dan sesuai standar. Pedoman yang dijelaskan di sini memberikan pengantar singkat tentang praktik pengkodean HTML;

Tulis Markup yang Sesuai Standar

HTML, pada dasarnya, adalah bahasa pemaaf yang memungkinkan kode yang buruk untuk dieksekusi dan dirender ke berbagai tingkat akurasi. Rendering yang berhasil, bagaimanapun, tidak berarti bahwa kode kita benar secara semantik atau menjamin bahwa itu akan divalidasi sesuai standar. Selain itu, kode yang buruk tidak dapat diprediksi, dan Anda tidak dapat memastikan apa yang akan Anda dapatkan saat merender. Kita harus benar-benar memperhatikan saat menulis HTML dan pastikan untuk menyarangkan dan menutup semua elemen dengan benar, menggunakan ID dan kelas dengan tepat, dan selalu memvalidasi kode kita

Kode berikut memiliki beberapa kesalahan, termasuk menggunakan nilai atribut ID

<h1>Welcome Back</h1>
<p>It has been a while. What have you been up to lately?</p>

<h1>Welcome Back</h1>
<p>It has been a while. What have you been up to lately?</p>

<h1>Welcome Back</h1>
<p>It has been a while. What have you been up to lately?</p>

<h1>Welcome Back</h1>
<p>It has been a while. What have you been up to lately?</p>

1
2
3
<p id="intro">New items on the menu today include <strong>caramel apple cider and breakfast crepes</p>.</strong>
<p id="intro">The caramel apple cider is delicious.
               Good Code
1
2
3
<p class="intro">New items on the menu today include <strong>caramel apple cider and breakfast crepes</strong>.</p>
<p class="intro">The caramel apple cider is delicious.</p>
Manfaatkan Elemen Semantik
Pustaka elemen dalam HTML cukup besar, dengan lebih dari 100 elemen tersedia untuk digunakan. Memutuskan elemen mana yang akan digunakan untuk mendeskripsikan konten yang berbeda mungkin sulit, tetapi elemen ini adalah tulang punggung semantik. Kita perlu meneliti dan memeriksa ulang kode kita untuk memastikan kita menggunakan elemen semantik yang tepat. Pengguna akan berterima kasih kepada kami dalam jangka panjang untuk membangun situs web yang lebih mudah diakses, dan HTML Anda bisa dibilang lebih mudah ditata. Jika Anda tidak yakin dengan kode Anda, cari teman untuk membantu dan lakukan peninjauan kode secara rutin
Di sini HTML tidak menggunakan judul dan elemen paragraf yang tepat; 
Bad Code
1
2
3
4
5
<span class="heading"><strong>Welcome Back</span></strong>
<br><br>
It has been a while. What have you been up to lately?
<br><br>
               Good Code
1
2
3
<h1>Welcome Back</h1>
<p>It has been a while. What have you been up to lately?</p>
Gunakan Struktur Dokumen yang Tepat
Seperti disebutkan sebelumnya, HTML adalah bahasa pemaaf dan, oleh karena itu, halaman akan dirender tanpa menggunakan doctype 
<h1>Welcome Back</h1>
<p>It has been a while. What have you been up to lately?</p>
6 atau 
<h1>Welcome Back</h1>
<p>It has been a while. What have you been up to lately?</p>
7, 
<h1>Welcome Back</h1>
<p>It has been a while. What have you been up to lately?</p>
8, dan 
<h1>Welcome Back</h1>
<p>It has been a while. What have you been up to lately?</p>
9. Tanpa doctype dan elemen struktural ini, halaman tidak akan ditampilkan dengan benar di setiap browser
Kita harus selalu memastikan untuk menggunakan struktur dokumen yang tepat, termasuk doctype 
<h1>Welcome Back</h1>
<p>It has been a while. What have you been up to lately?</p>
6, dan elemen 
<h1>Welcome Back</h1>
<p>It has been a while. What have you been up to lately?</p>
7, 
<h1>Welcome Back</h1>
<p>It has been a while. What have you been up to lately?</p>
8, dan 
<h1>Welcome Back</h1>
<p>It has been a while. What have you been up to lately?</p>
9. Melakukan hal itu membuat halaman kami sesuai dengan standar dan sepenuhnya semantik, dan membantu menjamin mereka akan dirender seperti yang kami inginkan
Bad Code
1
2
3
4
5
<html>
  <h1>Hello World</h1>
  <p>This is a web page.</p>
</html>
               Good Code
<p id="intro">New items on the menu today include <strong>caramel apple cider and breakfast crepes</p>.</strong>
<p id="intro">The caramel apple cider is delicious.
0
<p id="intro">New items on the menu today include <strong>caramel apple cider and breakfast crepes</p>.</strong>
<p id="intro">The caramel apple cider is delicious.
1
Jauhkan Sintaks Terorganisir
Seiring bertambahnya halaman, mengelola HTML bisa menjadi tugas yang cukup berat. Untungnya ada beberapa aturan cepat yang dapat membantu kita menjaga sintaks kita tetap bersih dan teratur. Ini termasuk yang berikut ini



Gunakan huruf kecil dalam nama elemen, atribut, dan nilai
Indent elemen bersarang
Gunakan tanda kutip ganda secara ketat, bukan tanda kutip tunggal atau dihilangkan sama sekali
Hapus garis miring ke depan di ujung elemen penutup sendiri
Hilangkan nilai pada atribut Boolean
Mematuhi aturan ini akan membantu menjaga kode kita tetap rapi dan terbaca. Melihat dua set HTML di sini, kode yang bagus lebih mudah dicerna dan dipahami
Bad Code
<p id="intro">New items on the menu today include <strong>caramel apple cider and breakfast crepes</p>.</strong>
<p id="intro">The caramel apple cider is delicious.
2
<p id="intro">New items on the menu today include <strong>caramel apple cider and breakfast crepes</p>.</strong>
<p id="intro">The caramel apple cider is delicious.
3               Good Code
<p id="intro">New items on the menu today include <strong>caramel apple cider and breakfast crepes</p>.</strong>
<p id="intro">The caramel apple cider is delicious.
2
<p id="intro">New items on the menu today include <strong>caramel apple cider and breakfast crepes</p>.</strong>
<p id="intro">The caramel apple cider is delicious.
5
Gunakan ID Praktis & Nilai Kelas
Membuat nilai ID dan kelas dapat menjadi salah satu bagian yang lebih sulit dalam menulis HTML. Nilai-nilai ini harus bersifat praktis, berkaitan dengan konten itu sendiri, bukan gaya konten. Menggunakan nilai 
1
2
3
4
5
_4 untuk mendeskripsikan teks berwarna merah tidaklah ideal, karena menjelaskan penyajian konten. Jika gaya teks perlu diubah menjadi biru, tidak hanya CSS yang harus diubah, tetapi juga HTML di setiap contoh di mana kelas 
1
2
3
4
5
4 ada
HTML di sini mengasumsikan bahwa pesan peringatan akan berwarna merah. Namun, jika gaya lansiran berubah menjadi oranye, nama kelas 
1
2
3
4
5
4 tidak lagi masuk akal dan kemungkinan akan menyebabkan kebingungan
Bad Code
<p id="intro">New items on the menu today include <strong>caramel apple cider and breakfast crepes</p>.</strong>
<p id="intro">The caramel apple cider is delicious.
6
<p id="intro">New items on the menu today include <strong>caramel apple cider and breakfast crepes</p>.</strong>
<p id="intro">The caramel apple cider is delicious.
7               Good Code
<p id="intro">New items on the menu today include <strong>caramel apple cider and breakfast crepes</p>.</strong>
<p id="intro">The caramel apple cider is delicious.
6
<p id="intro">New items on the menu today include <strong>caramel apple cider and breakfast crepes</p>.</strong>
<p id="intro">The caramel apple cider is delicious.
9
Gunakan Atribut Teks Alternatif pada Gambar
Gambar harus selalu menyertakan atribut 
1
2
3
4
5
_7. Pembaca layar dan perangkat lunak aksesibilitas lainnya mengandalkan atribut 
1
2
3
4
5
7 untuk menyediakan konteks gambar
Nilai atribut 
1
2
3
4
5
7 harus sangat deskriptif tentang isi gambar. Jika gambar tidak mengandung relevansi apa pun, atribut 
1
2
3
4
5
7 harus tetap disertakan; 
Selain itu, jika sebuah gambar tidak memiliki nilai yang berarti—mungkin itu adalah bagian dari antarmuka pengguna, misalnya—itu harus disertakan sebagai gambar latar CSS jika memungkinkan, bukan sebagai elemen 
<html>
  <h1>Hello World</h1>
  <p>This is a web page.</p>
</html>
1
Bad Code
<p id="intro">New items on the menu today include <strong>caramel apple cider and breakfast crepes</p>.</strong>
<p id="intro">The caramel apple cider is delicious.
6
1
2
3
1               Good Code
<p id="intro">New items on the menu today include <strong>caramel apple cider and breakfast crepes</p>.</strong>
<p id="intro">The caramel apple cider is delicious.
6
1
2
3
3
Pisahkan Konten dari Gaya
Jangan pernah, gunakan gaya sebaris dalam HTML. Melakukan hal itu akan membuat halaman dimuat lebih lama, sulit dipelihara, dan menyebabkan sakit kepala bagi desainer dan pengembang. Alih-alih, gunakan lembar gaya eksternal, gunakan kelas untuk menargetkan elemen dan terapkan gaya seperlunya
Di sini, setiap perubahan gaya yang diinginkan dalam kode buruk harus dibuat dalam HTML. Akibatnya, gaya ini tidak dapat digunakan kembali, dan konsistensi gaya kemungkinan besar akan terganggu
Bad Code
<p id="intro">New items on the menu today include <strong>caramel apple cider and breakfast crepes</p>.</strong>
<p id="intro">The caramel apple cider is delicious.
6
1
2
3
5               Good Code
<p id="intro">New items on the menu today include <strong>caramel apple cider and breakfast crepes</p>.</strong>
<p id="intro">The caramel apple cider is delicious.
6
1
2
3
7
Hindari Kasus “Divitis”
Saat menulis HTML, mudah terbawa suasana dengan menambahkan elemen 
<html>
  <h1>Hello World</h1>
  <p>This is a web page.</p>
</html>
2 di sini dan elemen 
<html>
  <h1>Hello World</h1>
  <p>This is a web page.</p>
</html>
2 di sana untuk membuat gaya yang diperlukan. Meskipun berhasil, ini dapat menambah sedikit pembengkakan pada halaman, dan tidak lama kemudian kami tidak yakin apa yang dilakukan setiap elemen 
<html>
  <h1>Hello World</h1>
  <p>This is a web page.</p>
</html>
2
Kita perlu melakukan yang terbaik untuk menjaga agar kode kita tetap ramping dan untuk mengurangi markup, mengikat banyak gaya ke satu elemen jika memungkinkan. Selain itu, kita harus menggunakan elemen struktural HTML5 jika sesuai
Bad Code
1
2
3
8
1
2
3
9               Good Code
1
2
3
8
<p class="intro">New items on the menu today include <strong>caramel apple cider and breakfast crepes</strong>.</p>
<p class="intro">The caramel apple cider is delicious.</p>
1
Terus-menerus Refactor Kode
Seiring waktu, situs web dan basis kode terus berevolusi dan tumbuh, meninggalkan sedikit kekurangan. Ingatlah untuk menghapus kode dan gaya lama seperlunya saat mengedit halaman. Mari luangkan waktu juga untuk mengevaluasi dan memfaktorkan ulang kode kita setelah kita menulisnya, mencari cara untuk memadatkannya dan membuatnya lebih mudah dikelola



Praktek Pengodean CSS
Mirip dengan HTML, praktik pengkodean untuk CSS fokus pada menjaga kode tetap ramping dan tertata dengan baik. CSS juga memiliki beberapa prinsip tambahan mengenai cara bekerja dengan beberapa seluk-beluk bahasa
Atur Kode dengan Komentar
File CSS bisa menjadi sangat luas, mencakup ratusan baris. File besar ini dapat membuat pencarian dan pengeditan gaya kita hampir tidak mungkin dilakukan. Mari jaga agar gaya kita teratur dalam kelompok logis. Kemudian, sebelum masing-masing grup, mari berikan komentar yang mencatat apa yang berkaitan dengan gaya berikut
Jika kita mau, kita juga dapat menggunakan komentar untuk membuat daftar isi di bagian atas file kita. Melakukannya akan mengingatkan kita—dan orang lain—apa persisnya yang terkandung di dalam file dan di mana letak gaya
Bad Code
<p class="intro">New items on the menu today include <strong>caramel apple cider and breakfast crepes</strong>.</p>
<p class="intro">The caramel apple cider is delicious.</p>
2
<p class="intro">New items on the menu today include <strong>caramel apple cider and breakfast crepes</strong>.</p>
<p class="intro">The caramel apple cider is delicious.</p>
3               Good Code
<p class="intro">New items on the menu today include <strong>caramel apple cider and breakfast crepes</strong>.</p>
<p class="intro">The caramel apple cider is delicious.</p>
4
<p class="intro">New items on the menu today include <strong>caramel apple cider and breakfast crepes</strong>.</p>
<p class="intro">The caramel apple cider is delicious.</p>
5
Tulis CSS Menggunakan Banyak Baris & Spasi
Saat menulis CSS, penting untuk menempatkan setiap pemilih dan deklarasi pada baris baru. Kemudian, di dalam setiap pemilih, kami ingin mengindentasi deklarasi kami
Setelah pemilih dan sebelum deklarasi pertama muncul kurung kurawal pembuka, 
<html>
  <h1>Hello World</h1>
  <p>This is a web page.</p>
</html>
5, yang harus diberi spasi sebelum itu. Dalam deklarasi, kita perlu memberi spasi setelah titik dua, 
<html>
  <h1>Hello World</h1>
  <p>This is a web page.</p>
</html>
6, yang mengikuti properti dan mengakhiri setiap deklarasi dengan titik koma, 
<html>
  <h1>Hello World</h1>
  <p>This is a web page.</p>
</html>
7
Melakukannya membuat kode mudah dibaca dan juga diedit. Ketika semua kode ditumpuk menjadi satu baris tanpa spasi, sulit untuk memindai dan membuat perubahan
Bad Code
<p id="intro">New items on the menu today include <strong>caramel apple cider and breakfast crepes</p>.</strong>
<p id="intro">The caramel apple cider is delicious.
6
<p class="intro">New items on the menu today include <strong>caramel apple cider and breakfast crepes</strong>.</p>
<p class="intro">The caramel apple cider is delicious.</p>
7               GOOD CODE
<p class="intro">New items on the menu today include <strong>caramel apple cider and breakfast crepes</strong>.</p>
<p class="intro">The caramel apple cider is delicious.</p>
8
<p class="intro">New items on the menu today include <strong>caramel apple cider and breakfast crepes</strong>.</p>
<p class="intro">The caramel apple cider is delicious.</p>
9
Komentar & Spasi
Kedua rekomendasi ini, mengatur kode dengan komentar dan menggunakan banyak baris dan spasi, tidak hanya berlaku untuk CSS, tetapi juga untuk HTML atau bahasa lainnya. Secara keseluruhan, kita perlu menjaga agar kode kita tetap teratur dan terdokumentasi dengan baik. Jika bagian tertentu dari kode kita lebih kompleks, mari kita jelaskan cara kerjanya dan penerapannya di dalam komentar. Melakukan hal itu membantu orang lain bekerja pada basis kode yang sama, serta diri kita sendiri ketika kita meninjau kembali kode kita sendiri di kemudian hari
Gunakan Nama Kelas yang Tepat
Nama kelas (atau nilai) harus modular dan harus berkaitan dengan konten dalam elemen, bukan penampilan, sebanyak mungkin. Nilai-nilai ini harus ditulis sedemikian rupa sehingga menyerupai sintaks bahasa CSS. Oleh karena itu, nama kelas harus semuanya huruf kecil dan harus menggunakan pembatas tanda hubung
Bad Code
<p id="intro">New items on the menu today include <strong>caramel apple cider and breakfast crepes</p>.</strong>
<p id="intro">The caramel apple cider is delicious.
6
1
2
3
4
5
1               Good Code
<p id="intro">New items on the menu today include <strong>caramel apple cider and breakfast crepes</p>.</strong>
<p id="intro">The caramel apple cider is delicious.
6
1
2
3
4
5
3
Bangun Selector Mahir
Selektor CSS bisa lepas kendali jika tidak dipelihara dengan hati-hati. Mereka dapat dengan mudah menjadi terlalu panjang dan terlalu spesifik lokasi
Semakin panjang sebuah pemilih dan semakin banyak prakualifikasi yang disertakan, semakin tinggi spesifisitas yang dikandungnya. Dan semakin tinggi spesifisitasnya, semakin besar kemungkinan pemilih untuk memecahkan kaskade CSS dan menyebabkan masalah yang tidak diinginkan



Juga sejalan dengan menjaga kekhususan pemilih kami serendah mungkin, jangan gunakan ID di dalam pemilih kami. ID terlalu spesifik, dengan cepat meningkatkan kekhususan pemilih, dan cukup sering merusak kaskade dalam file CSS kami. Kontra jauh lebih besar daripada pro dengan ID, dan kami bijaksana untuk menghindarinya
Mari gunakan pemilih yang lebih pendek dan terutama langsung. Sarang mereka hanya sedalam dua hingga tiga tingkat, dan hapus sebanyak mungkin pemilih yang memenuhi syarat berdasarkan lokasi
Bad Code
1
2
3
1
2
3
4
5
5               Good Code
1
2
3
1
2
3
4
5
7
Gunakan Kelas Khusus Bila Diperlukan
Ada kalanya pemilih CSS terlalu panjang dan spesifik sehingga tidak masuk akal lagi. Ini menciptakan kelambatan kinerja dan berat untuk dikelola. Dalam hal ini, disarankan menggunakan kelas saja. Sementara menerapkan kelas ke elemen yang ditargetkan dapat membuat lebih banyak kode dalam HTML, itu akan memungkinkan kode untuk merender lebih cepat dan akan menghilangkan hambatan pengelolaan apa pun.
Misalnya, jika elemen 
<html>
  <h1>Hello World</h1>
  <p>This is a web page.</p>
</html>
8 bersarang di dalam elemen 
<html>
  <h1>Hello World</h1>
  <p>This is a web page.</p>
</html>
9 di dalam elemen 
<p id="intro">New items on the menu today include <strong>caramel apple cider and breakfast crepes</p>.</strong>
<p id="intro">The caramel apple cider is delicious.
00, dan semua itu bersarang di dalam elemen 
<p id="intro">New items on the menu today include <strong>caramel apple cider and breakfast crepes</p>.</strong>
<p id="intro">The caramel apple cider is delicious.
01, pemilih mungkin terlihat seperti selain h1 em. Jika elemen 
<html>
  <h1>Hello World</h1>
  <p>This is a web page.</p>
</html>
_8 dipindahkan dari elemen 
<html>
  <h1>Hello World</h1>
  <p>This is a web page.</p>
</html>
9, gaya tidak akan diterapkan lagi. Pemilih yang lebih baik dan lebih fleksibel akan menggunakan kelas, seperti teks-offset, untuk menargetkan elemen 
<html>
  <h1>Hello World</h1>
  <p>This is a web page.</p>
</html>
8
Bad Code
<p id="intro">New items on the menu today include <strong>caramel apple cider and breakfast crepes</p>.</strong>
<p id="intro">The caramel apple cider is delicious.
6
1
2
3
4
5
9               Good Code
<p id="intro">New items on the menu today include <strong>caramel apple cider and breakfast crepes</p>.</strong>
<p id="intro">The caramel apple cider is delicious.
6
<span class="heading"><strong>Welcome Back</span></strong>
<br><br>
It has been a while. What have you been up to lately?
<br><br>
1
Gunakan Properti dan Nilai Singkatan
Salah satu fitur CSS adalah kemampuan untuk menggunakan properti dan nilai steno. Sebagian besar properti dan nilai memiliki alternatif steno yang dapat diterima. Sebagai contoh, daripada menggunakan empat deklarasi properti dan nilai berbasis 
<p id="intro">New items on the menu today include <strong>caramel apple cider and breakfast crepes</p>.</strong>
<p id="intro">The caramel apple cider is delicious.
05 yang berbeda untuk mengatur margin di sekitar keempat sisi elemen, gunakan satu deklarasi properti dan nilai 
<p id="intro">New items on the menu today include <strong>caramel apple cider and breakfast crepes</p>.</strong>
<p id="intro">The caramel apple cider is delicious.
05 tunggal yang menetapkan nilai untuk keempat sisi sekaligus. Menggunakan alternatif steno memungkinkan kita mengatur dan mengidentifikasi gaya dengan cepat
Namun, saat kami hanya menetapkan satu nilai, alternatif steno tidak boleh digunakan. Jika kotak hanya membutuhkan bagian bawah 
<p id="intro">New items on the menu today include <strong>caramel apple cider and breakfast crepes</p>.</strong>
<p id="intro">The caramel apple cider is delicious.
_05, gunakan properti 
<p id="intro">New items on the menu today include <strong>caramel apple cider and breakfast crepes</p>.</strong>
<p id="intro">The caramel apple cider is delicious.
08 saja. Melakukan hal itu memastikan bahwa nilai margin lain tidak akan ditimpa, dan kita dapat dengan mudah mengidentifikasi sisi mana 
<p id="intro">New items on the menu today include <strong>caramel apple cider and breakfast crepes</p>.</strong>
<p id="intro">The caramel apple cider is delicious.
05 diterapkan tanpa banyak upaya kognitif
Bad Code
<p id="intro">New items on the menu today include <strong>caramel apple cider and breakfast crepes</p>.</strong>
<p id="intro">The caramel apple cider is delicious.
2
<span class="heading"><strong>Welcome Back</span></strong>
<br><br>
It has been a while. What have you been up to lately?
<br><br>
3               Good Code
<span class="heading"><strong>Welcome Back</span></strong>
<br><br>
It has been a while. What have you been up to lately?
<br><br>
4
<span class="heading"><strong>Welcome Back</span></strong>
<br><br>
It has been a while. What have you been up to lately?
<br><br>
5
Gunakan Nilai Warna Heksadesimal Singkatan
Jika tersedia, gunakan nilai warna heksadesimal steno tiga karakter, dan selalu gunakan karakter huruf kecil dalam nilai warna heksadesimal apa pun. Idenya, sekali lagi, adalah untuk tetap konsisten, mencegah kebingungan, dan merangkul sintaks bahasa yang digunakan untuk menulis kode
Bad Code
1
2
3
4
5
<span class="heading"><strong>Welcome Back</span></strong>
<br><br>
It has been a while. What have you been up to lately?
<br><br>
7               Good Code
1
2
3
4
5
<span class="heading"><strong>Welcome Back</span></strong>
<br><br>
It has been a while. What have you been up to lately?
<br><br>
9
Jatuhkan Unit dari Nilai Nol
Salah satu cara untuk dengan mudah mengurangi jumlah CSS yang kita tulis adalah menghapus unit dari nilai nol mana pun. Apa pun satuan panjang yang digunakan—piksel, persentase, em, dan sebagainya—nol selalu nol. Menambahkan unit tidak diperlukan dan tidak memberikan nilai tambah
Bad Code
1
2
3
8
1
2
3
1               Good Code
1
2
3
8
1
2
3
3
Kelompokkan & Sejajarkan Prefiks Vendor
Dengan CSS3, awalan vendor mendapatkan popularitas, menambahkan sedikit kode ke file CSS. Pekerjaan tambahan menggunakan prefiks vendor seringkali sepadan dengan gaya yang dihasilkan; . Sesuai dengan tujuan penulisan kode yang mudah dibaca dan dimodifikasi, yang terbaik adalah mengelompokkan dan membuat indentasi masing-masing awalan vendor sehingga nama properti menumpuk secara vertikal, seperti halnya nilainya.
Tergantung di mana awalan vendor ditempatkan, pada properti atau nilai, perataan dapat bervariasi. Misalnya, kode bagus berikut membuat properti 
<p id="intro">New items on the menu today include <strong>caramel apple cider and breakfast crepes</p>.</strong>
<p id="intro">The caramel apple cider is delicious.
_10 sejajar ke kiri, sedangkan fungsi 
<p id="intro">New items on the menu today include <strong>caramel apple cider and breakfast crepes</p>.</strong>
<p id="intro">The caramel apple cider is delicious.
11 yang diawali dengan indentasi untuk menjaga nilainya ditumpuk secara vertikal. Kemudian, properti 
<p id="intro">New items on the menu today include <strong>caramel apple cider and breakfast crepes</p>.</strong>
<p id="intro">The caramel apple cider is delicious.
_12 yang diawali dengan indentasi seperlunya untuk menjaga properti dan nilai 
<p id="intro">New items on the menu today include <strong>caramel apple cider and breakfast crepes</p>.</strong>
<p id="intro">The caramel apple cider is delicious.
12 ditumpuk secara vertikal
Seperti biasa, tujuannya adalah untuk membuat gaya lebih mudah dibaca dan diedit



Bad Code
<p class="intro">New items on the menu today include <strong>caramel apple cider and breakfast crepes</strong>.</p>
<p class="intro">The caramel apple cider is delicious.</p>
4
1
2
3
5               Good Code
<p class="intro">New items on the menu today include <strong>caramel apple cider and breakfast crepes</strong>.</p>
<p class="intro">The caramel apple cider is delicious.</p>
4
1
2
3
7
Prefiks Vendor
Saat menggunakan awalan vendor, kami perlu memastikan untuk menempatkan versi tanpa awalan dari properti dan nilai kami di akhir, setelah versi awalan apa pun. Melakukan hal itu memastikan bahwa browser yang mendukung versi tanpa awalan akan merender gaya tersebut sesuai dengan penempatannya di dalam kaskade, membaca gaya dari atas file ke bawah
Kabar baiknya adalah sebagian besar browser beralih dari penggunaan prefiks vendor. Seiring waktu hal ini akan menjadi kurang memprihatinkan; 
Modularisasi Gaya untuk Digunakan Kembali
CSS dibangun untuk memungkinkan gaya digunakan kembali, khususnya dengan penggunaan kelas. Untuk alasan ini, gaya yang ditetapkan ke kelas harus modular dan tersedia untuk dibagikan ke seluruh elemen jika diperlukan
Jika bagian berita disajikan dalam kotak yang mencakup batas, warna latar belakang, dan gaya lainnya, kelas 
<p id="intro">New items on the menu today include <strong>caramel apple cider and breakfast crepes</p>.</strong>
<p id="intro">The caramel apple cider is delicious.
14 mungkin tampak seperti pilihan yang bagus. Namun, gaya yang sama tersebut mungkin juga perlu diterapkan ke bagian acara mendatang. Kelas 
<p id="intro">New items on the menu today include <strong>caramel apple cider and breakfast crepes</p>.</strong>
<p id="intro">The caramel apple cider is delicious.
_14 tidak cocok dalam kasus ini. Kelas 
<p id="intro">New items on the menu today include <strong>caramel apple cider and breakfast crepes</p>.</strong>
<p id="intro">The caramel apple cider is delicious.
_16 akan lebih masuk akal dan dapat digunakan secara luas di seluruh situs web
Bad Code
<p id="intro">New items on the menu today include <strong>caramel apple cider and breakfast crepes</p>.</strong>
<p id="intro">The caramel apple cider is delicious.
0
1
2
3
9               Good Code
1
2
3
8
<h1>Welcome Back</h1>
<p>It has been a while. What have you been up to lately?</p>
1
Sumber Daya dan Tautan Tambahan
Setiap pelajaran dilengkapi dengan beberapa sumber daya untuk pembelajaran dan penemuan tambahan. Diuraikan di bawah ini adalah daftar sumber daya yang lebih panjang, serta tautan yang bermanfaat
HTML & CSS
Jaringan Pengembang Mozilla melalui Mozilla
Opera. Pengembang melalui Opera
Tutorial HTML dan CSS melalui HTML Dog
DevDocs — Pencarian dokumentasi instan
Inspirasi Desain
Menggiring bola
Piksel Premium
Kerangka Kerja & Panduan Gaya
Panduan Gaya Web
Bootstrap
Dasar
Kerangka Kerangka
Panduan Gaya Google HTML/CSS
Panduan Gaya GitHub
Ikon
Helveticons melalui Goodbye Horses
Ikon Ion melalui Ben Sperry
Ikon Fugue melalui Yusuke Kamiyamane
Ikon Sutra famfamfam melalui Mark James
Pictos melalui Drew Wilson
Picon
Proyek Noun
Aneka ragam
COLOURlovers — Tren dan palet warna
ColorHexa — Ensiklopedia warna
Modernizr — Pustaka deteksi fitur JavaScript
jQuery — Pustaka JavaScript yang kaya fitur
Pustaka yang Dihosting Google — Jaringan distribusi konten untuk pustaka JavaScript
Salin Tempel Karakter — Menyalin karakter "tersembunyi".
Ringkasan
Semoga prinsip-prinsip penulisan HTML dan CSS yang indah mulai menjadi jelas di sini. Meskipun setiap bahasa memiliki kerumitannya sendiri, sebagian besar praktik ini dapat digunakan bersama dalam dua bahasa—dan banyak bahasa komputer lainnya
Secara individu kita perlu melakukan yang terbaik untuk menjunjung praktik ini, dan saat bekerja dalam tim, kita juga perlu melakukan yang terbaik untuk membantu mengedukasi tim tentang praktik ini. Demikian pula, tim kita mungkin memiliki saran dan praktik berharga yang harus kita ikuti bersama
Untuk menyoroti beberapa tema menyeluruh dari pelajaran ini, HTML dan CSS kita harus selalu
Terorganisir dengan baik, sehingga mudah dibaca, diedit, dan dipelihara
Bersifat modular dan fleksibel, memungkinkan kami untuk menggunakan kembali kode dan pola seperlunya
Terlihat seolah-olah satu orang yang menulisnya, meskipun beberapa orang berkontribusi
Praktik ini hanyalah permulaan, dan seiring berkembangnya bahasa dan kami menulis lebih banyak HTML dan CSS, kami akan mengembangkan yang baru. Itu semua adalah bagian dari keindahan mengetahui HTML dan CSS
Anda sekarang dilengkapi dengan beberapa pengetahuan yang sangat kuat tentang cara membuat situs web dengan HTML dan CSS, dan saya senang melihat apa yang Anda lakukan dengannya. Terus beri tahu saya bagaimana kelanjutannya, dan selamat membangun
 

			
Apa cara yang benar untuk menulis HTML?
			
Editor HTML . 
 
Langkah 1. Buka Notepad (PC) Windows 8 atau yang lebih baru.  .  
 
Langkah 1. Buka TextEdit (Mac) Buka Finder > Applications > TextEdit.  .  
 
Langkah 2. Tulis Beberapa HTML. Tulis atau salin kode HTML berikut ke Notepad.  .  
 
Langkah 3. Simpan Halaman HTML. Simpan file di komputer Anda.  .  
 
Langkah 4. Lihat Halaman HTML di Browser Anda
 
		
			
Bagaimana kode HTML ditulis?
			
Tag HTML ditulis  di dalam kurung sudut, dan cenderung berpasangan —jadi, keduanya terdiri dari tag pembuka dan penutup. Misalnya, tag 
		
			
Bagaimana Anda menulis teks dalam HTML?
			
HTML berisi beberapa elemen untuk mendefinisikan teks dengan arti khusus.  . 
 
 - Teks tebal
 
 - Teks penting
 
 - Teks miring
 
 - Teks yang ditekankan
 
 - Teks yang ditandai
 
 - Teks lebih kecil
 
 - Teks yang dihapus
 
 - Teks yang disisipkan