Clean HTML Code

https://cdn2.iconfinder.com/data/icons/seo-internet-marketing-4/256/Clean_Code-512.png

Dalam mengembangkan perangkat lunak, khususnya aplikasi berbasis web, pasti menggunakan HTML. Pada dasarnya, menulis kode memiliki beberapa aturan supaya kode yang dihasilkan bersih dan mudah dibaca oleh developer lain. Begitu juga dengan HTML.

Sebelum saya menuliskan beberapa poin penting dalam menulis dalam HTML, saya ingin menyinggung sedikit aturan clean code pada bahasa pemrograman secara umum.

Komentar yang Efisien

Komentar dibutuhkan apabila kode yang ditulis sulit dimengerti. Namun, penulisan komentar tidak boleh membuat kode secara keseluruhan berantakan. Gunakan kata-kata yang paling representativ untuk menjelaskan blok kode tertentu.

Penamaan yang Baik

Berikan nama pada variabel, fungsi dan kelas yang merepresentasikan isi dari variabel, fungsi atau kelas tersebut. Biasanya penamaan fungsi menggunakan kata kerja, sedangkan penamaan variabel menggunakan kata benda.

Penulisan fungsi yang simple dan efektif

Idealnya, satu fungsi hanya melakukan satu tugas. Hindari membuat fungsi yang memiliki side effect contohnya seperti mengubah dengan tidak sengaja variabel global.

Error Handling

Ketika menuliskan kode, jangan lupa untuk mengidentifikasi kemungkinan error/sesuatu yang tidak diinginkan.

Dont Repeat Yourself

Jangan melakukan duplikasi kode. Buatlah sebuah fungsi yang modular dan terstruktur rapi. Terapkan paradigma pemrograman yang digunakan seperti Object Oriented.

Lalu, bagaimana dengan penulisan kode HTML?

Saya menggunakan referensi dari artikel yang ditulis Sergi Marquez (2018) yang berjudul 8 Best Practices to Write Clean HTML Code. Berikut penjelasannya:

Indentation

Ketika menulis HTML, penting untuk menggunakan identasi walaupun indentasi tidak menyebabkan syntax error seperti Python. Penggunaan indentasi bertujuan html code lebih mudah dibaca. Besar indentasi bermacam-macam, 2 spaces atau 4 spaces.

source: Sergi Marquez (2018)
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>

Consistent

Hal yang terpenting dari menulis HTML adalah konsisten. Konsisten yang dimaksud bervariasi, diantaranya:

1. Menulis id atau class dengan dash (-) atau underscore(_).
2. Menggunakan indentasi sebesar 2 spaces atau 4 spaces.
3. Menggunakan single quote atau double quote.

Apabila kita telah menentukan suatu style tertentu, konsisten hingga akhir agar mudah dibaca.

Overused divs

Terkadang kita menggunakan div untuk melakukan wrap suatu block tertentu. Namun, menggunakan terlalu banyak div akan membingungkan. Akan lebih mudah dibaca dan dipahami apabila kita menggunakan div yang cukup.

source: Sergi Marquez (2018)
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>

Hindari komentar berlebihan

Pada dasarnya, HTML telah memiliki tag yang cukup jelas/readable. Oleh karena itu, apabila kita memberikan komentar yang terlalu banyak akan membuat kode HTML kita menjadi berantakan. Tips untuk menghindari komentar adalah memberikan nama pada id atau class yang deskriptif.

Clear name class & id

Gunakan nama class atau id yang deskriptif dan merepresentasikan satu konsep. Hindari penamaan yang asal dan berupa kode yang tidak dapat dimengerti developer lain.

We can conclude…

Pada akhirnya, konsep clean code yang kita gunakan memiliki 1 tujuan yaitu menghasilkan kode yang efisien dan mudah dibaca. Karena dalam mengembangkan suatu perangkat lunak, waktu akan terbuang untuk membaca kode dari developer lain sehingga penulisan yang jelas akan mengurangi waktu tersebut.

Reference

Jeker E. (2017). https://www.arcanys.com/blog/the-importance-of-clean-code

Marquez S. (2018). https://medium.com/@sergimarquez/8-best-practices-to-write-clean-html-code-1cd407e2a7ec