Halaman web semantik xhtml tag semantik

Aspek penting lainnya dari struktur dan representasi yang memisahkan adalah penggunaan markup semantik untuk membangun konten dokumen. Keberadaan elemen XHTML berarti bahwa bagian dari konten yang ditandai memiliki makna terstruktur yang sesuai, dan tidak ada alasan untuk menggunakan tag lain. Dengan kata lain, jangan biarkan CSS membuat satu elemen HTML terlihat seperti elemen HTML lainnya, seperti menggunakan <div> alih -alih judul tag <p>.

Pertama -tama, ini adalah tentang perbedaan antara semantik dan gaya default. Gaya default adalah ekspresi dari beberapa tag yang umum digunakan yang ditetapkan oleh browser. Saya pribadi berpikir bahwa tujuan utamanya adalah untuk membiarkan semua orang secara intuitif memahami penggunaan dan fungsi tag dan atribut. Jelas bahwa seri HX terlihat sangat mirip dengan judul karena memiliki ukuran font yang berani dan lebih besar. <strong>, <em> digunakan untuk membedakannya dari kata lain dan memainkan peran penekanan. Adapun daftar dan meja, jelas untuk memberi tahu Anda apa yang mereka lakukan.

Kedua, hal terpenting tentang halaman web semantik adalah mereka ramah pada mesin pencari. Dengan struktur dan semantik yang baik, konten halaman web Anda secara alami mudah dirangkak oleh mesin pencari, dan promosi situs web Anda dapat menghemat banyak upaya.

Semantik dan penggunaan spesifik telah dijelaskan dalam referensi tag XHTML1.0. Beberapa tag dan atribut yang mudah dilupakan atau disamakan akan ditambah di sini.

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>, digunakan sebagai judul dan dikurangi sesuai dengan pentingnya. <h1> adalah level tertinggi.

Misalnya:

Kode:

<Div class = title> judul dokumen </div>, atau <span class = title> judul dokumen </span>. Jelas bahwa mesin pencari tidak akan menganggapnya sebagai judul untuk yang terakhir.

Paragraf menandai, mengetahui <p> ​​sebagai paragraf, Anda tidak akan lagi menggunakan <br/> untuk memecahkan garis, dan Anda tidak perlu membedakan antara paragraf dan paragraf. Teks di <p> ​​</p> akan membungkus secara otomatis, dan efek pembungkus lebih baik daripada <br>. Kesenjangan antara paragraf juga dapat dikontrol menggunakan CSS, membuatnya mudah dan jelas untuk membedakan paragraf dari paragraf. Akan sempurna jika Anda dapat dengan mudah mendefinisikan jarak perjalanan dan kemudian menentukan efek tenggelam karakter pertama menggunakan ketinggian garis.

Misalnya: Salin konten ke clipboard

Kode:

</p>

<p> Selama bertahun-tahun, konten Blue Ideal telah terus diperkaya, dan telah disorot oleh beberapa situs web domestik dan media tradisional yang terkenal. Telah dikumpulkan oleh situs pencarian utama seperti Google, Baidu, Yahoo, Sohu, Sina, dan Excite. Ini peringkat pertama dalam pencarian desain situs web dan pengembangan kata kunci Cina yang disederhanakan di antara tiga mesin pencari utama Google, Baidu dan Yahoo. Sekarang Blue Ideal telah berkembang menjadi salah satu situs web profesional paling berpengaruh dalam desain dan pengembangan situs web di Cina. </p> <ul>, <Ol>, <li>

<ul> Daftar yang tidak tertib sangat umum dan banyak digunakan. <Ol> Daftar yang tidak tertib juga cukup umum digunakan. Selama proses standardisasi web, <ul> juga digunakan lebih banyak untuk bilah navigasi. Awalnya, bilah navigasi adalah daftar, yang benar -benar benar untuk melakukannya. Ketika browser Anda tidak mendukung CSS, tautan navigasi masih sangat bagus, tetapi sedikit kurang indah.

Misalnya: Salin konten ke clipboard

Kode:

<li> Proyek 1 </li>

<li> Proyek 2 </li>

<li> Proyek 3 </li>

</ul> Salin konten ke clipboard

Kode:

<li> Bab 1 </li>

<li> Bab 2 </li>

<li> Bab 3 </li>

</l> <ll>, <dt>, <dd>

DL adalah daftar definisi. Misalnya, penjelasan dan definisi kata -kata dalam kamus dapat digunakan dalam daftar ini.

Misalnya: Salin konten ke clipboard

Kode:

<dt> anjing </dt>

<dd> mamalia karnivora dari keluarga Canidae. </dd>

</ll> Salin konten ke clipboard

Kode:

<dt> Pantai Shanghai </dt>

<dd> "Shanghai Bund" ini, difilmkan pada tahun 1980, adalah drama paling sukses dan klasik dalam sejarah Hong Kong TV.

Setelah disiarkan di Hong Kong tahun itu, itu menyebabkan sensasi besar. </dd>

<dt> chow yun-fat </dt>

<dd> Seperti semua bintang film hebat, Chow Yun-Fat mengkonfirmasi sebuah era, zaman keemasan film-film Hong Kong.

Mantel angin, kacamata hitam, senjata ganda berdarah dingin, dan senyum cerah semuanya disegel dalam film. Ketika kita melihat ke belakang, fa ge telah diukir sebagai koordinat era. </dd>

</ll> <cite>, CITE, <Q>, <BLOCKQUOTE>

Forum dan blog sering menggunakan kutipan dari orang lain, menggunakan <Q> untuk menandai kutipan barisan pendek. Browser Web akan secara otomatis mengenali konten antara <Q>. Sayangnya, IE tidak dapat mengenali, dan kadang -kadang <Q> dapat menyebabkan beberapa masalah aksesibilitas. Karena itu, beberapa orang merekomendasikan untuk tidak menggunakan <Q> dan secara manual memasukkan tanda referensi. Tambahkan satu baris konten referensi ke <span> yang berisi kelas yang sesuai, maka Anda dapat menggunakan CSS untuk menata referensi, tetapi ini tidak memiliki makna semantik. Anda dapat membaca tampilan tag Q (http://diveintomark.org/archives/2002/05/04/the_q_tag) tentang penanganan <Q> Masalah terkait yang ditulis oleh Mark Pilgrim.

Untuk kutipan panjang dari satu atau beberapa paragraf, <Blockquote> harus digunakan. CSS dapat digunakan untuk menentukan gaya referensi. Perhatikan bahwa sebuah artikel tidak dapat ditempatkan langsung di <BlockQuote>, dan konten yang dikutip juga harus dimasukkan dalam elemen, biasanya <p>. Kutipan atribut dapat digunakan dengan <Q> atau <Blockquote> untuk memberikan alamat sumber dari konten yang direferensikan. Perlu dicatat bahwa jika Anda menggunakan <span> alih -alih konten referensi tag, maka Anda tidak dapat menggunakan atribut CITE.

Misalnya: Salin konten ke clipboard

Kode:

Kode:

Kode:

struct/text.html#H-9.2.1> Presentasi elemen frasa

Salin konten ke clipboard

Kode:

<p> Sebagian besar dari kita memiliki pengalaman mendalam. Setiap kali versi browser arus utama ditingkatkan, situs web yang baru saja kami bangun dapat usang.

Kita perlu meningkatkan atau membangun kembali situs web. Misalnya, perang browser khas dari tahun 1996 hingga 1999,

Agar kompatibel dengan Netscape dan IE, situs web harus menulis kode yang berbeda untuk dua browser ini. Demikian pula,

Setiap kali teknologi jaringan baru dan perangkat interaktif muncul, kita juga perlu membuat versi baru untuk mendukung teknologi baru atau perangkat baru ini.

Misalnya, teknologi WAP yang mendukung akses internet seluler. Ada banyak pertanyaan serupa: kode situs web membengkak dan rumit, yang membuang banyak bandwidth kami;

DHTML Efek khusus untuk browser tertentu memblokir beberapa pelanggan potensial; Kode yang sulit digunakan, orang cacat tidak dapat menelusuri situs web, dll.

Ini adalah lingkaran setan dan limbah besar. </p>

</blockquote> <em>, <strong>

<em> digunakan untuk penekanan, <strong> digunakan untuk penekanan. Sebagian besar browser menggunakan huruf miring untuk menampilkan konten yang disorot dan tebal untuk menampilkan konten yang disorot. Namun, ini tidak perlu. Jika ingin menentukan bagaimana penekanan ditampilkan, cara terbaik adalah dengan menggunakan CSS untuk menentukan kinerja mereka. Jangan gunakan penekanan saat yang Anda inginkan hanyalah efek visual. Dan jika Anda ingin menekankan tetapi masih merasa bahwa berani atau miring tidak terlalu baik dalam efek visual, terutama huruf miring untuk bahasa Cina, maka Anda dapat sepenuhnya mendefinisikan beberapa gaya lain yang lebih menarik untuk mencapai efek penekanan.

Misalnya: Salin konten ke clipboard

Kode:

Namun, teks dengan penekanan khusus biasanya ditunjukkan dalam huruf tebal. </p> <able>, <td>, <t th>, <laption>, ringkasan

Tabel dalam xhtml tidak boleh ditata. Namun, jika ingin menandai data daftar, tabel harus digunakan. <t th> adalah judul tabel, ringkasan atribut adalah ringkasan, tag <comption> adalah deskripsi header, tag <head> adalah header, tag <tbody> adalah konten utama tabel, dan tag <tfoot> adalah ujung tabel.

Ini juga dapat digunakan untuk mengganti atribut header dan menandai sel yang berisi informasi header, di mana konten masing -masing nilai adalah sebagai berikut:

Baris menunjukkan sel saat ini, memberikan informasi header yang relevan untuk baris yang berisi sel saat ini.

COL menunjukkan sel saat ini, memberikan informasi header yang sesuai untuk kolom yang ditentukan sesuai dengan sel saat ini.

RowGroup menunjukkan sel saat ini, memberikan informasi header yang relevan untuk kelompok baris yang tersisa yang berisi sel saat ini.

ColGroup menunjukkan sel saat ini, memberikan informasi header yang sesuai untuk kelompok kolom yang tersisa yang ditentukan berdasarkan sel saat ini.

ABBR digunakan untuk mendefinisikan nama singkatan dalam sel header. Jika properti ini tidak ditentukan, konten sel default dihilangkan.

Misalnya: Salin konten ke clipboard

Kode:

<caption> Tabel 1: Spesifikasi Teknologi Power Mac G5 </class>

<tr>

<TH SCOPE = COL ABBR = Konfigurasi Kelas = Nobg> Konfigurasi </th>

<TH SCOPE = col ABBR = ganda 1.8> ganda 1.8GHz </th>

<TH SCOPE = COL ABBR = Dual 2> Dual 2GHz </t>

<TH SCOPE = COL ABBR = Dual 2.5> Dual 2.5GHz </t>

</tr>

<tr>

<TH SCOPE = ROW ABBR = Model Class = Spec> Model </th>

<td> m9454ll/a </td>

<td> m9455ll/a </td>

<td> m9457ll/a </td>

</tr>

<tr>

<TH SCOPE = ROW ABBR = G5 Processor Class = Specalt> G5 Processor </t th>

<td class = alt> ganda 1.8GHz powerpc g5 </td>

<td class = alt> dual 2GHz powerpc g5 </td>

<td class = alt> dual 2.5GHz powerpc g5 </td>

</tr>

<tr>

<TH scope = row abbr = frontside bus class = spec> frontside bus </th>

<td> 900MHz per prosesor </td>

<td> 1GHz per prosesor </td>

<td> 1.25GHz per prosesor </td>

</tr>

<tr>

<TH SCOPE = ROW ABBR = L2 Cache Class = Specalt> Level2 Cache </th>

<td class = alt> 512k per prosesor </td>

<td class = alt> 512k per prosesor </td>

<td class = alt> 512k per prosesor </td>

</tr>

</boable> Efek Melihat: http://www.blueidea.com/articleimg/2006/02/3228/csstables.htm

Kode:

Jika Anda tahu Del, jangan gunakan <s> sebagai serangan lagi. Menggunakan Del jelas lebih semantik. Selain itu, DEL juga dilengkapi dengan CITE dan DATETIME untuk menunjukkan alasan penghapusan dan waktu penghapusan. Ins berarti penyisipan, dan ada atribut seperti itu.

Misalnya: Salin konten ke clipboard

Kode:

Itu berarti kode komputer. Gaya default adalah font. Ini sering ditemui di forum dan blog teknis.

Misalnya: Salin konten ke clipboard

Kode:

Tag <bbr> mewakili singkatan pada halaman web, dan tag <RACKONYM> adalah singkatan. (Catatan: Di sini kami memisahkan singkatan dan singkatan. Kisaran singkatan lebih besar dari singkatan, sehingga mengambil singkatan dari huruf pertama

Tulis dengan tag <Acronym>) Browser di bawah Windows IE6.0 tidak mendukung tag <brbs ABBR>. Di IE, Anda dapat menerapkan CSS ke <Arptronim> tetapi tidak untuk <abbr> tag.

IE akan menampilkan prompt untuk atribut judul tag <RACKONYM>, tetapi akan mengabaikan tag <brbs.

Lihat: http://www.w3cn.org/article/translate/2005/115.html

Misalnya: Salin konten ke clipboard

Kode:

Kode:

Atribut judul digunakan untuk memberikan instruksi tambahan untuk atribut judul elemen dapat digunakan pada semua tag kecuali base, Basefont, head, html, meta, param, skrip dan judul. Tapi itu tidak perlu.

Properti ALT adalah agen pengguna (UA) yang tidak dapat menampilkan gambar, formulir, atau applet, dan menentukan teks pengganti. Bahasa teks pengganti ditentukan oleh atribut Lang. Salin konten ke clipboard

Kode:

Kode:

Gaya default:

http://www.w3cn.org/article/tips/2005/116.html

http://www.w3.org/tr/css21/sample.html

Semantik:

http://www.456bereAstreet.com/lab/develeving_with_web_standards/zh

http://www.456bereAstreet.com/lab/develdin_with_web_standards

http://www.w3cn.org/article/translate/2005/114.html

http://www.w3cn.org/article/translate/2005/114.html

http://www.junchenwu.com/2005/11/html_tags.html

http://brainstormsandraves.com/articles/semantics/struktur/

http://www.w3.org/tr/html401/struct/text.htm

http://www.simplebits.com/bits/simplequiz/

Tag yang buruk:

http://www.htmldog.com/guides/htmlinceriate/badtags/

Tag Q.

http://diveintomark.org/archives/2002/05/04/the_q_tag

Html, xhtml, semantik dan masa depan web

http://www.westciv.com/style_master/house/good_oil/xhtml/index.html