Struktur XHTML II: Kajian Kasus: Struktur Tanda W3school

Tidak kira apa, jangan melewatkan bab ini. Membaca bab ini akan meningkatkan kemampuan anda, mempertahankan halaman web anda, dan membuat anda memiliki pemahaman yang jelas tentang perbedaan antara tanda dan desain. Ide di bab ini mudah untuk dipelajari, tetapi dapat meningkatkan kinerja website, serta kemudahan merancang, membuat dan memperbarui website.

Dalam bab ini, anda akan belajar bagaimana menulis tanda yang logis dan padat, sehingga anda dapat mengurangi lalu lintas bandwidth sekitar 50%, mengurangi beban dan tekanan server serta mengurangi waktu pemuat website. Dengan menghapus elemen-elemen yang menunjukkan dan mengubah kebiasaan buruk yang tidak memberikan manfaat apapun, kita dapat mencapai tujuan di atas.

这些坏习惯折磨着网络中的许多站点，特别是那些将 CSS 代码与主要基于表格的布局混合在一起的站点。这种做法笨拙且不经济，即使是对于那些在其他领域很有经验的设计师来说。同时，出现这个问题的几率是均等的，不论是那些手写代码的站点，还是利用可见编辑工具，比如 Dreamweaver 和 GoLive，来创建的站点。

本节会提出这些常见的错误，这样你就可以识别和防范它们，并且学会如何改正错误。我们详细阐述唯一标识符属性 (id) - ，并展示它如何使你可以编写极其紧凑的 XHTML 代码，不论你创建的是混合布局还是纯粹的 CSS 布局。

每个元素都必须结构化吗？

正如上一节中我们讲到的那样，每个元素都可以被结构化，CSS 可使得一个有序或无序的列表显示为彻头彻尾的导航栏，其中还拥有反转按钮效果。文档的内容可以通过普通的元素进行标记，这些元素通过特定的结构化属性标志来指示出它们在网站设计中所扮演的语义角色。

我们在公元 2006 年创建了 CodeW3C.com 的第一个中文测试版，我们在一开始就使用了 CSS 进行布局，并使用 XHTML 来结构化文档。每一个其中的元素都是结构化的，从标题到列表，乃至段落。你可以在 CodeW3C 的每个页面看到具有反转效果的首页按钮和二级菜单按钮。下面是这两个组件的 XHTML 代码：

<div id="header"><h1><a href="/">codew3c在线教程</a></h1></div>
<div id="navfirst">
<ul id="menu">
<li id="h"><a href="/h.asp" title="html tutorian">html tutorian</a></li>
<li id="x"><a href="/x.asp" title="XML tutorian">XML tutorian</a></li>
<li id="b"><a href="/b.asp" title="browser script">browser script</a></li>
<li id="s"><a href="/s.asp" title="Skrip Server">Skrip Server</a></li>
<li id="d"><a href="/d.asp" title="Tutorial dot net">Tutorial dot net</a></li>
<li id="m"><a href="/m.asp" title="Tutorial Multimedia">Tutorial Multimedia</a></li>
<li id="w"><a href="/w.asp" title="Panduan Pembangunan Situs">Panduan Pembangunan Situs</a></li>
</ul>
</div>

div、id 和其他帮手

如果被正确地使用，div 可以成为结构化标记的好帮手，而 id 则是一种令人惊讶的小工具，它使你有能力编写极其紧凑的 XHTML，以及巧妙地利用 CSS，并通过标准文档对象模型 (DOM) 向站点添加复杂精巧的行为。

W3C 在其最新的 XHTML2 草案的 XHTML 结构模型中这样定义 div：

div 元素，通过与 id、class 及 role 属性配合，提供向文档添加额外结构的通用机制。这个元素不会将表现的风格定义于内容。所以，创作者可以通过将这个元素与样式表、xml:lang、属性等配合使用，使 XHTML 适应他们自身的需求和口味。

Div adalah singkatan untuk division. Division berarti pemisahan, area, atau kelompok. Misalkan, ketika Anda menggabungkan sejumlah tautan, hal ini membentuk division yang satu di dokumen.

Mekanisme Umum untuk Menentukan Struktur

Setiap penulis HTML yang ada mengetahui elemen yang biasa seperti paragraf dan judul, tetapi beberapa orang mungkin tidak begitu akrab dengan div. Dalam deskripsi W3C, kita dapat menemukan kunci untuk memahami elemen div, "Sebuah mekanisme umum untuk menambah struktur."

Di halaman utama situs ini, kami mengemaskan daftar katalog panduan dalam div, karena katalog panduan bukan bagian dari elemen utama. Dalam hal ini, elemen h2 menandai judul setiap panduan, sementara elemen daftar ul menandai daftar detil setiap panduan. Tetapi dalam makna yang lebih luas dan khusus, katalog panduan ini memainkan peran yang struktural, yaitu komponen navigasi tingkat kedua. Untuk menekankan peran ini, kami menggunakan id navsecond untuk menandai div ini.

<div id="navsecond">
<h2>Panduan HTML</h2>
<ul>
<li><a href="/html/index.asp" title="Panduan HTML">HTML</a></li>
<li><a href="/xhtml/index.asp" title="Panduan XHTML">XHTML</a></li>
<li><a href="/css/index.asp" title="Panduan CSS">CSS</a></li>
<li><a href="/tcpip/index.asp" title="Panduan TCP/IP">TCP/IP</a></li>
</ul>
<h2>Panduan XML</h2>
<ul>
<li><a href="/xml/index.asp" title="Panduan XML">XML</a></li>
<li><a href="/xsl/xsl_languages.asp" title="Bahasa XSL">XSL</a></li>
... ...
... ...
</div>

Anda boleh menggunakan mana-mana nama. "Gladys" dan "orangebox" sepenuhnya memenuhi aturan penamaan XHTML. Tetapi penamaan yang semantik (semantic) atau meta-structural adalah yang terbaik (yaitu yang dapat menggambarkan fungsi elemen di dalamnya).

Ketika pelanggan memutuskan untuk menggunakan biru, Anda akan merasa sangat bodoh untuk menamai bagian situs menjadi orangebox (kotak kuning). Dalam situasi di bawah ini, Anda akan merasa lebih bodoh, saat hanya enam bulan lagi untuk pengiriman akhir, Anda mulai mengatur gaya tabel, tetapi tak dapat ingat "Gladys" (nama wanita) sepertinya mewakili area navigasi, sidebar atau kotak pencarian.

Jadi, menandai id dengan "menu", "content" atau "searchform" akan membantu Anda ingat. Lebih lanjut, tanda tidak setara dengan desain; halaman yang berstruktur baik dapat disusun menjadi bentuk yang Anda inginkan. Akibatnya, apakah Anda menggunakan tata letak CSS penuh atau campuran, Anda akan sepenuhnya mengubah gaya berpikir dan kreatif menggunakan tanda pertunjukan.

id vs. class

atribut id untuk XHTML bukan hal yang asing; atribut class atau elemen div juga sama. Mereka dapat dijejak kembali ke masa HTML. Atribut id memberikan nama unik untuk elemen. Setiap nama hanya dapat digunakan sekali di halaman yang diberikan. (contoh, jika halaman Anda mengandung div dengan id content, maka div lain atau elemen lain tidak dapat menggunakan nama ini. Sebaliknya, atribut class dapat digunakan berulang-ulang di halaman (contoh, lima paragraf di halaman dapat menggunakan nama class "small" atau "footnote"). Tanda di bawah ini akan membantu mengelucidir perbedaan antara id dan class:

<div id="searchform">Komponen formulir pencarian disini. Ini
bagian halaman adalah unik.</div>
<div class="blogentry">
   <h2>Pos blog hari ini</h2>
   <p>Konten blog disini.</p>
   <p>Ini adalah paragraf lain dari konten blog.</p>
   <p>Sama seperti ada banyak paragraf di halaman, begitu pula
   ada banyak masukan di blog. Halaman blog dapat menggunakan
   berbagai instansia kelas "blogentry" (atau apa pun lainnya)
   class).</p>
</div>
<div class="blogentry">
   <h2>Pos blog kemarin</h2>
   Faktanya, di sini kami berada di dalam div lain dengan class
   "blogentry."
   Mereka berkembang seperti kambing celeng.
   Jika ada sepuluh artikel blog di halaman ini, mungkin
   ada sepuluh div dengan class "blogentry".
</div>

Dalam contoh ini, div yang bernama searchform digunakan untuk melingkapi area halaman yang mengandung formulir pencarian, sementara div class="blogentry" digunakan untuk melingkapi setiap masuk artikel di blog. Ada hanya satu formulir pencarian di halaman, jadi kita memilih untuk menandai komponen unik ini dengan id. Tetapi blog memiliki banyak masuk (artikel), jadi atribut class digunakan dalam situasi ini. Secara sama, situs berita biasanya memiliki banyak div, class div ini dapat dinamai "newsitem" atau lainnya.

Tetapi bukan semua situs memerlukan div. Situs blog dapat hanya menggunakan judul h1, H2, dan h2 serta paragraf <p>. Situs berita juga sama. Kita menunjukkan div dengan class blogentry disini bukan untuk mendorong Anda mengisi situs dengan banyak div, tetapi hanya untuk menunjukkan prinsip ini: Gunakan class beberapa kali di dalam dokumen HTML yang sama, tetapi hanya gunakan id sekali.

Teori stiker tebal

Menganggap atribut id seperti stiker tebal boleh membantu. Saya akan menempelkan stiker di es kran untuk mengingatkan saya untuk membeli susu, dan ada juga stiker di telepon untuk mengingatkan saya untuk menelepon pelanggan yang belum membayar. Ada yang lainnya, di lembaran buku tabungan, untuk mengingatkan saya tentang tagihan yang harus dibayar sebelum tanggal 15 ini.

id akan menggambarkan area khusus dalam dokumen, untuk mengingatkan Anda tempat mana yang perlu penanganan khusus, dalam hal ini, atribut id mirip dengan stiker tebal. Untuk mencapai penanganan khusus yang disebut, Anda perlu menggunakan id khusus ini untuk menulis beberapa aturan di tabel gaya, atau menambah beberapa baris kode di berkas JavaScript. Contohnya, ada beberapa aturan spesifik di berkas CSS Anda, aturan ini hanya berlaku untuk elemen di dalam div yang bernama searchform.

Ketika satu properti id digunakan seperti objek yang bergetar (magnet) untuk garisan aturan CSS khusus, ia disebut pemilih CSS. Ada banyakMembuat pemilihCara, tetapi id mudah digunakan, dan mempunyai banyak kegunaan.

Kekuatan id

Properti id sangat kuat. Dia memiliki keupayaan berikut:

  • Sebagai pemilih stylesheet, memberikan keupayaan untuk mencipta XHTML yang disingkat dan minim.
  • Sebagai penanda target hypertext, menggantikan properti lama name.
  • Sebagai cara untuk menempatkan elemen khusus dari skrip berdasarkan DOM.
  • Sebagai nama elemen objek.
  • Sebagai alat penggunaan umum (general purpose processing) (di contoh W3C, "dipergunakan sebagai alat pengenalan domain dalam situasi seperti mengekstrak data dari halaman HTML ke pangkalan data, atau mengkonversi dokumen HTML ke format lain").

Peraturan id

Nilai id mesti dimulai dengan huruf atau garis bawah; tidak boleh dimulai dengan nombor. Walaupun pengesahan W3C tidak akan menangkap kesalahan ini, tetapi pemecah XML akan. Sebagai tambahan, jika anda gunakan id dengan JavaScript dalam borang, maka nama dan nilai id mesti menjadi variabel JavaScript yang sah. Ruang dan tanda hubung, terutama tanda hubung, adalah tidak diizinkan. Selain itu, gunakan garis bawah untuk class atau id nama bukan idea yang baik, disebabkan oleh batasan di CSS2.0 (dan beberapa pelayar).

Semantik markah dan kebolehgunaan

Sekarang, kami telah membincangkan elemen XHTML yang digunakan secara luas (terutama div dan id), sekarang mari kita lihat contoh tentang halaman utama laman ini. Pertama, mari kita kembali ke menu yang berada di tempat tajuk laporan ini:

<div id="navfirst">
<ul id="menu">
<li id="h"><a href="/h.asp" title="html tutorian">html tutorian</a></li>
<li id="x"><a href="/x.asp" title="XML tutorian">XML tutorian</a></li>
<li id="b"><a href="/b.asp" title="browser script">browser script</a></li>
<li id="s"><a href="/s.asp" title="Skrip Server">Skrip Server</a></li>
<li id="d"><a href="/d.asp" title="Tutorial dot net">Tutorial dot net</a></li>
<li id="m"><a href="/m.asp" title="Tutorial Multimedia">Tutorial Multimedia</a></li>
<li id="w"><a href="/w.asp" title="Panduan Pembangunan Situs">Panduan Pembangunan Situs</a></li>
</ul>
</div>

Kami memiliki tujuh tautan, setiap tautan ditugaskan id untuk menggantikan konten yang relevan: misalnya id yang dinamai 'h' untuk tutorial HTML, dan seterusnya. Dan tautan ini di-wrap dalam elemen daftar yang dinamai 'menu', id 'menu' menandai fungsi daftar ini - daftar menu, dan div yang berada di luar dinamai 'navfirst' digunakan untuk menandai bagian ini di halaman, untuk membedakannya dari elemen seperti konten utama (maincontent), sidebar, dan footer.

Elemen div dan ul menyediakan struktur yang nyata, yaitu menandai fungsi konten di dalamnya (menu navigasi) dan posisinya dalam dokumen (lokasi header halaman). Sedangkan tata letak tabel tradisional tidak dapat menyediakan informasi semantik tentang data, dan dengan mudah mengebut tiga kali bandwidth.

Perhatikan bahwa tanda-tanda ini tidak mengandung tag img, jadi tidak berhubungan dengan properti seperti width, height, background, atau border, dan tidak menggunakan sel tabel, jadi tidak berhubungan dengan properti yang berhubungan. Ini sangat bersih dan kecil, serta menyediakan semua informasi yang dapat dipahami tentang itu.

Dengan kerjasama CSS, tanda-tanda ini menyediakan layout yang dapat di-load dengan cepat dan yang dapat dipercaya bagi pengunjung situs. Selain itu, hal ini juga memberikan kemungkinan untuk menciptakan外观 yang lebih fleksibel dan beragam bagi pengunjung. Dan dalam lingkungan tanpa CSS, tanda-tanda struktural yang baik tetap dapat menyediakan semua konten tanpa gangguan.

Pembaca yang tajam mungkin sudah menemukan bahwa teks yang disertakan dalam elemen 'a' belum ditampilkan oleh peramban, hal ini disebabkan karena kerjasama sempurna antara penanda struktural dan CSS, yang memungkinkan kita untuk mendefinisikan mekanisme yang diaktifkan hanya beberapa baris aturan CSS, ketika pengguna menggunakan peramban grafis, mereka akan melihat tombol navigasi yang indah, dan saat pengguna menggunakan pembaca teks bersifat hanya teks, mereka tetap dapat mendapatkan seluruh teks, sehingga, untuk semua pengguna, konten tetap sama.

Dan, kerana tanda tidak mengandungi imej dan sel tabel, komponen pemanduan ini boleh diambil di mana saja di dalam halaman situs tanpa mengubah struktur, serta memberikan daya tampilan yang berbeza. Secara ringkas, melalui pengelompokan kode, kita meningkatkan penggunaan ulang kode.