Dalam tutorial sebelumnya di Jaringan Pengajaran Halaman Web, telah berkali-kali ditekankan untuk membuat file HTML halaman web menjadi semantik. Kita harus memilih tag HTML atau XHTML yang paling sesuai berdasarkan struktur dokumen HTML halaman web, daripada memilihnya berdasarkan tampilannya. Gunakan tag P untuk mendefinisikan paragraf daripada menggunakannya untuk mendapatkan efek jeda baris. Kami menggunakan tag h1-h6 untuk menandai judul, daripada menggunakannya untuk mencapai ukuran teks dan efek tebal.
Misalnya, untuk sebuah judul, kita dapat menggunakan h1 untuk mendefinisikannya:
<h1>Tulis teks judul artikel di sini</h1>
Daripada mendefinisikannya dengan cara lain:
<p style="font-size:16px; font-weight:bold;">Tulis teks judul artikel di sini</p>
Pada artikel sebelumnya di Web Teaching Network, kami mencantumkan semua tag yang diizinkan oleh XHTML1.0. Kami juga dapat menemukan bahwa sebenarnya hanya ada sedikit tag elemen yang dapat kami pilih. Namun kami juga menyadari dengan jelas bahwa tanda elemen yang disempurnakan ini juga memiliki arti yang lebih jelas. Jika Anda benar-benar tidak dapat menemukan elemen yang tepat untuk diberi tag, Anda dapat menggunakan tag div dan span umum.
Penggunaan tag div dan span di halaman adalah masalah baru, dan kita cenderung menggunakannya terlalu sering. Penggunaan div yang diperlukan dan wajar dapat meningkatkan struktur dokumen secara signifikan. Jika Anda melihat dokumen HTML Anda dan menemukan banyak div dan span, maka Anda harus melihat masalahnya dari sudut pandang yang berbeda. Apakah ada penanda yang lebih baik untuk menggantikannya? Jika h1 dapat mewakili konten yang ditandai dengan lebih baik, maka Anda harus melepaskan p atau span untuk mendefinisikannya.
Mungkin ini adalah sepasang kontradiksi, dan sulit bagi kita untuk memahami bagaimana menggunakannya dengan benar, atau mungkin kita tidak bisa mendapatkan jawaban yang jelas sama sekali. Namun satu hal yang perlu diperjelas, kita harus membuat dokumen memiliki struktur logis yang jelas dan membuatnya lebih mudah untuk menerapkan gaya. Kita dapat menganggap div hanya sebagai wadah, atau "bagian" dari dokumen. Kami menggunakan terlalu banyak wadah, dan ini bukanlah pola yang bijaksana. Dan wadah yang tepat dan posisinya wajar dapat membuat keseluruhan dokumen tampak terorganisir.
Kode berikut lebih masuk akal dan efektif:
| Berikut isi kutipannya: <div id="tajuk"> |