Panduan dasar membuat layout HTML untuk fondasi WordPress Theme

Written by Fikri Rasyid

Seperti yang telah saya bahas di artikel Tahapan Pembuatan WordPress Theme, setelah desain dan slicing, tahapan selanjutnya adalah layouting / membuat halaman HTML statis yang kemudian diselipkan tag-tag WordPress.

Secara praktikal, terdapat beberapa “panduan” / “tips dan trik” yang dapat memudahkan anda dalam membuat layout HTML statis ini. Semuanya berdasarkan pengalaman yang saya alami dan aplikasikan dari berbagai sumber yang dapat saya temukan & percaya. Jika anda menemukan kekurangan atau kesalahan, feel free add it and comment :)

Tag HTML yang kerap digunakan

Terlepas dari banyaknya html tags yang tersedia, tag yang umumnya digunakan di dalam <body> dalam kebanyakan pengembangan WordPress Theme adalah tag-tag berikut:

Tag-tag presentasional

  • <div> – mendefinisikan area dalam sebuah file HTML.
  • <span> – elemen yang tidak memiliki tampilan visual tertentu. Digunakan untuk “dikaitkan” dengan id / class yang lalu di-styling menggunakan CSS / diberi aksi tertentu oleh JavaScript.
  • <strong> – menebalkan (bold) text. Secara semantik berarti menunjukan penekanan teks yang berada diantara tag ini.
  • <em> – memiringkan (italic) text. Secara semantik berarti menunjukan penekanan teks yang berada diantara tag ini.
  • <small> – mengecilkan ukuran text

Tag-tag struktural

  • <h1> – heading 1. Berperan sebagai teks paling relevan dari sebuah halaman web. Secara SEO, akan semakin baik jika hanya terdapat satu <h1> pada sebuah halaman.
  • <h2> – heading 2. Subjudul dari <h1>
  • <h3> – heading 3. Subjudul dari <h2>
  • <h4> – heading 4. Subjudul dari <h3>
  • <h5> – heading 5. Subjudul dari <h4>
  • <h6> – heading 6. Subjudul dari <h5>
  • <p> – mendefinisikan paragraf.
  • <ul> – membuat unordered list / bulleted list. FYI, fitur navigasi / menu yang semantik menggunakan <ul>
  • <ol> – membuat ordered list / list item yang diurutkan secara numerik / alfabetis
  • <li> – list item / daftar item dari <ol> atau <ul>
  • <blockquote> – mendefinisikan quotation dari suatu teks dalam halaman web
  • <form> – mendefinisikan form
  • <input> - mendefinisikan informasi yang akan dikirim oleh form
  • <select> – digunakan untuk membuat dropdown yang terdiri dari <option>
  • <option> – mendefinisikan opsi yang berada dalam tag <select>

Tag-tag hypertext

  • <a> – mendefinisikan link / tautan ke halaman web lain atau ke area tertentu yang ditandai dengan elemen id dari area yang bersangkutan.
  • <img> – memuat gambar ke dalam halaman web

Yap, dari sedemikian banyak tag HTML, yang paling sering terlibat dalam pengembangan WordPress theme adalah tag-tag diatas. Tag-tag tersebut lalu diberi atribut id atau class yang lalu distyling menggunakan CSS atau diberi behaviour tertentu menggunakan JavaScript.

Tips dan trik dalam penulisan HTML

Terdapat banyak sekali tips dan trik dalam penulisan HTML. Namun yang paling “kena” bagi saya pribadi adalah apa yang ditulis oleh Nick La di Coding Clean and Semantic Templates, dan Chris Coyier di What Beautiful HTML Code Looks Like:

  • Minimalisir penggunaan <div>. Sebisa mungkin, gunakan <div> hanya untuk layouting area utama saja seperti wrapper, header, body, sidebar, footer.
  • Lebih tepat menggunakan tag semantik daripada <div> untuk konten
  • Tandai closing tag dengan komentar seperti <!-- /header --> untuk memudahkan pengeditan
  • Jangan pernah lupa untuk menutup tag dengan closing tag!
  • Atribut id dirender lebih cepat daripada class karena unique by default
  • Jangan tulis atribut yang tidak akan digunakan
  • Format HTML dengan menggunakan indentation agar lebih mudah dibaca
  • Gunakan CSS reset
  • Dalam kasus WordPress theme, akan lebih baik jika penamaan atribut id dan class disesuaikan dengan atribut yang digenerate oleh WordPress. Caranya? buka halaman WordPress yang ditampilkan menggunakan theme default, lalu view source.
  • Jangan gunakan <table> untuk layouting. Sangat ketinggalan zaman dan tidak semantik. Gunakan <div> untuk layouting.

Ada lagi yang memiliki tips tambahan? ;)

About The Author

Fikri Rasyid - I speak HTML + CSS + jQuery, breath in world wide WordPress-land, co-founded WPNest and currently pursuing my bachelor degree majoring English Education at Indonesia University of Education. Google my name for more information about me.

Connect & Subscribe

Keep in touch and get my latest content trough:

Categories

Post Info

2 Responses for This Thought

  1. Jauhari

    09 July 2010

    Mantap… this is what we need

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>