Apakah teg semantik HTML? Senarai lengkap teg semantik HTML biasa

<strong>1. Apakah itu teg semantik HTML

Teg semantik direka untuk memberi teg maknanya sendiri.

<p>一行文字</p><span>一行文字</span>

Seperti yang ditunjukkan dalam kod di atas, salah satu perbezaan antara teg <code>p dan teg <code>span ialah maksud teg <code>p ialah: perenggan. Teg <code>span tidak mempunyai makna yang unik.

2. Kelebihan tag semantik

<li>

Struktur kod jelas, mudah dibaca dan kondusif untuk pembangunan pasukan.

<li>

Dihuraikan dengan mudah oleh peranti lain (seperti pembaca skrin, pembaca buta, peranti mudah alih) untuk memaparkan halaman web dalam cara yang semantik.

<li>

Baik untuk pengoptimuman enjin carian (SEO).

3. Tag semantik biasa

Oleh itu, semasa menulis struktur halaman, kita harus cuba menggunakan tag HTML semantik

<li>

<code><title>: Kandungan utama halaman.

<li>

<code><hn>: h1~h6, tajuk hierarki, penyelarasan <code><h1> dan <code><title> bermanfaat untuk pengoptimuman enjin carian.

<li>

<code><ul>: Senarai tidak tersusun.

<li>

<code><li>: senarai pesanan.

<li>

<code><header>: Pengepala biasanya termasuk logo tapak web, navigasi utama, pautan seluruh tapak dan kotak carian.

<li>

<code><nav>: tanda navigasi, hanya digunakan untuk kumpulan pautan penting dalam dokumen.

<li>

<code><main>: Kandungan utama halaman, yang hanya boleh digunakan sekali pada halaman. Jika ia adalah aplikasi web, kelilingi fungsi utamanya.

<li>

<code><article>: Mentakrifkan kandungan luaran yang bebas daripada seluruh dokumen.

<li>

<code><section>: Tentukan bahagian (bahagian, bahagian) dalam dokumen. Seperti bab, pengepala, pengaki atau bahagian lain dokumen.

<li>

<code><aside>: Mentakrifkan kandungan di luar kandungannya. Seperti bar sisi, satu set pautan ke artikel, iklan, pautan mesra, senarai produk berkaitan, dsb.

<li>

<code><footer>: Pengaki, hanya apabila ibu bapa adalah badan, ia adalah pengaki bagi keseluruhan halaman.

<li>

<code><small>: Paparkan kesan fon kecil, nyatakan butiran, masukkan penafian, anotasi, tandatangan dan hak cipta.

<li>

<code><strong>: Seperti tag <code>em, ia digunakan untuk menekankan teks, tetapi ia menekankan teks dengan lebih kuat.

<li>

<code><em>: Nyatakan teks sebagai kandungan yang ditekankan, dinyatakan dalam huruf condong.

<li>

<code><mark>: Gunakan kuning untuk menyerlahkan sebahagian daripada teks.

<li>

<code><figure>: Menentukan kandungan aliran bebas (imej, carta, foto, kod, dll.) (margin lalai ialah kira-kira 40px).

<li>

<code><figcaption>: Mentakrifkan tajuk elemen <code>figure, yang sepatutnya diletakkan pada kedudukan elemen anak pertama atau terakhir elemen <code>figure.

<li>

<code><cite>: Menunjukkan bahawa teks yang terkandung merujuk kepada rujukan, seperti tajuk buku atau majalah.

<li>

<code><blockquoto>: Tentukan rujukan blok, yang mempunyai ruang tersendiri.

<li>

<code><q>: Petikan ringkas (isu merentas pelayar, cuba elakkan daripada menggunakannya).

<li>

<code><time>: Atribut datetime mengikut format tertentu Jika atribut ini diabaikan, kandungan teks mestilah dalam format tarikh atau masa yang sah.

<li>

<code><abbr>: Singkatan atau singkatan.

<li>

<code><dfn>: Unsur istilah definisi, yang mesti bersebelahan dengan takrifan serta-merta dan boleh digunakan dalam elemen dl senarai penerangan.

<li>

<code><address>: Maklumat hubungan (alamat e-mel, pautan ke halaman hubungan) untuk pengarang, orang atau organisasi yang berkaitan.

<li>

<code><del>: Kandungan dialih keluar.

<li>

<code><ins>: Menambah kandungan.

<li>

<code><code>: kod teg.

<li>

<code><meter>: Mentakrifkan ukuran skalar dalam julat yang diketahui atau nilai pecahan. (Internet Explorer tidak menyokong tag meter)

<li>

<code><progress>: Mentakrifkan kemajuan berjalan (proses).

Untuk lebih banyak tutorial berkaitan, sila lawati Tutorial video HTML5