Bagaimana Anda menyederhanakan kode html?

Memiliki pertanyaan-pertanyaan itu adalah normal dan bagus, terutama jika Anda tidak ingin berakhir dengan menulis kode spageti yang berantakan, campur aduk, ceroboh yang terlihat seperti

Menulis kode bersih harus menjadi salah satu perhatian terbesar Anda karena sebagian besar halaman web disajikan melalui HTML. Anda tidak ingin mengacaukan fondasi situs Anda. Itu salah dan memalukan

Di sini Anda akan menemukan 8 praktik hebat untuk melupakan keraguan tersebut dan menulis HTML yang bersih dan benar yang akan mengesankan semua orang yang membacanya

Dengan serius. Hal terpenting yang Anda perlukan untuk menulis kode yang baik adalah keinginan Anda untuk melakukan sesuatu dengan benar. Menulis kode HTML yang bersih itu mudah, tetapi Anda harus peduli dan memberi banyak perhatian

“Kode bersih adalah kode yang ditulis oleh seseorang yang peduli” —Michael Feathers

Kode Anda mencerminkan jenis pengembang Anda. Anda dapat mengetahui apakah seseorang bersemangat tentang pengkodean atau jika dia tidak peduli hanya dengan membaca beberapa baris kode HTML-nya. Bukan suatu kebetulan bahwa orang malas yang tidak profesional adalah orang yang menulis kode yang buruk dan tidak terorganisir

Kode indentasi lebih mudah dibaca, lebih mudah dipahami, lebih mudah dimodifikasi, dan lebih mudah dipelihara. Lihat saja betapa sulitnya memahami hubungan orangtua-anak antar elemen ketika kode tidak diindentasi dengan benar

Bad HTML Code:  <footer id="footer-bottom">
<div class="container">
 <div class="row">
 <div id="footer-copyrights" class="col-md-6">
<p> &copy; 2018 All Rights Reserved.</p>
  </div>
  <div id="footer-menu" class="col-md-6">
  <ul><li>Home</li>
  <li>Team</li>
  <li>Pricing</li></ul>
</div>
</div>
</div>
  </footer>Better HTML Code:<footer id="footer-bottom">
  <div class="container">
    <div class="row">
      <div id="footer-copyrights" class="col-md-6">
        <p> &copy; 2018 All Rights Reserved.</p>
      </div>
      <div id="footer-menu" class="col-md-6">
        <ul>
          <li>Home</li>
          <li>Team</li>
          <li>Pricing</li>
        </ul>
      </div>
    </div>
  </div>
</footer>

Berapa banyak ruang yang harus Anda gunakan untuk lekukan?

Saranku? . Yang benar-benar penting adalah…

Menulis kode HTML yang bersih tidak selalu tentang memilih praktik yang baik dan menghindari yang buruk. Sering kali Anda dapat menggunakan pendekatan yang berbeda untuk menulis baris kode yang sama

Sebagai contoh

• Anda dapat menggunakan tanda hubung atau garis bawah untuk id dan kelas
• Anda dapat menggunakan argumen kutip tunggal atau kutip ganda
• Anda dapat membuat indentasi dengan 2 atau 4 spasi

Konsisten saja. Ketika Anda menemukan praktik tertentu yang Anda sukai, patuhi dan gunakan di mana saja. Inkonsistensi membuat kode Anda sangat membingungkan bagi Anda dan jiwa malang yang harus membacanya

"Divitis" adalah nama lucu untuk masalah umum dalam HTML. Kami sering menggunakan div secara berlebihan, terutama karena kami ingin membungkus dan menargetkan semua elemen untuk penataan di CSS. Kemudian kami akhirnya memiliki daftar div abadi yang sama sekali tidak diperlukan

Bad HTML Code:<div id="content">
  <div class="headline">Headline</div>
  <div class="subtitle">Subtitle</div>
  <div class="post">Post Content</div>
  <div class="list"> 
    <ul> 
      <li>Element 1</li> 
      <li>Element 2</li>
    </ul> 
  </div>
</div> <!-- end content div -->Better HTML Code:<div id="content">
  <h1>Headline</h1>
  <h2>Subtitle</h2>
  <p>Post Content</p>
  <ul> 
    <li>Element 1</li> 
    <li>Element 2</li>
  </ul> 
</div>

Sama seperti penulis mengedit draf mereka berkali-kali selama proses penulisan, Anda harus terus memfaktorkan ulang atau menulis ulang HTML Anda. Kurangi jumlah div dan bersihkan kode Anda dengan menghapus semua elemen yang tidak perlu

HTML bukan bahasa pemrograman, komentar tidak diperlukan karena markup HTML sudah sangat jelas. Jika Anda sering mengomentari HTML Anda, Anda harus meninjau referensi elemen HTML

“Jangan mengomentari kode yang buruk. Tulis ulang. ” —Brian W. Kernighan

Kode Anda tidak akan lebih mudah dipahami hanya karena Anda menambahkan komentar di mana-mana. Anda dapat menggunakannya untuk memperjelas sesuatu (misalnya, untuk menunjukkan bahwa Anda menutup div setelah banyak baris kode). Tapi jangan mengomentari hal-hal yang jelas atau kode yang ditulis dengan buruk

Apa artinya kelas = "wpr"?

Paragraf Lebar? . Kode HTML yang bersih seharusnya tidak terlihat seperti permainan trivia

Gunakan nama yang bermakna untuk ID dan Kelas Anda. Mereka harus pendek, deskriptif dan hanya mewakili satu konsep. Ini akan membuat HTML Anda lebih jelas dan proses penataan lebih mudah

Tidakkah menurut Anda akan lebih baik jika Anda menamai kelas Anda "wrapper" daripada "wpr"?

Banyak orang menulis kode yang dihancurkan bersama tanpa menggunakan spasi putih. Hasil?

Hell:<body>
<h1>Table</h1><table><tr><th>Data 1</th><th>Data 2</th></tr>
<tr><td>Calcutta</td><td>Orange</td></tr></table></body>Better Code:<body><h1>Table</h1><table>
  <tr>
    <th>Data 1</th>
    <th>Data 2</th>
  </tr>
  <tr>
    <td>Calcutta</td>
    <td>Orange</td>
  </tr>
</table></body>

Gunakan spasi putih. lekukan, baris kosong, jeda baris. Manusia lain (termasuk Anda) harus dapat membaca kode Anda di masa mendatang tanpa pusing. Tidak apa-apa mengecilkan file Anda untuk membuatnya lebih kecil SETELAH Anda menulis kode HTML yang mudah dibaca

Seniman terbaik di dunia mempelajari keahlian mereka dengan mereplikasi karya orang yang mereka kagumi. Anda dapat menggunakan strategi yang sama untuk menulis kode HTML yang bersih (yang juga merupakan proses yang cukup kreatif). Cara termudah untuk mempelajari cara menulis kode bersih yang cantik itu sederhana. baca kode bersih yang indah, lalu replikasi

“Mereka yang tidak ingin meniru apapun, tidak menghasilkan apapun. “—Salvador Dali

Kamu bisa

• Jelajahi proyek Sumber Terbuka. Salah satu alasan mereka ada adalah, agar kita semua bisa belajar dan memperbaiki diri dalam melihat pekerjaan masing-masing
• Baca blog dan artikel yang mengajarkan Anda praktik pengkodean terbaik
• Ambil Kursus Pengembang Udemy. Pilih yang memiliki ulasan luar biasa

Anda akan menemukan bahwa tidak ada cara pasti yang tepat untuk melakukan sesuatu… tetapi Anda juga akan menemukan bahwa ada perbedaan BESAR antara kode HTML yang bersih dan berantakan

Apa itu HTML yang disederhanakan?

Bagaimana cara membuat kode HTML sederhana?

Bagaimana Anda menulis kode CSS HTML yang bersih?

Apa halaman HTML paling sederhana?