Unsur -unsur HTML5 semantik dapat meningkatkan akses dan kesan SEO. Titik utama khusus adalah seperti berikut: 1.

Penggunaan elemen HTML5 semantik sebenarnya bukan hanya untuk membuat kod kelihatan lebih "profesional", ia dapat membantu penyemak imbas, enjin carian dan peranti tambahan lebih memahami struktur halaman. Jika digunakan dengan betul, ia boleh meningkatkan akses dan kesan SEO.

Mari kita bercakap tentang beberapa perkara utama berdasarkan keperluan struktur yang sama.

1. Gunakan <header></header> dan <footer></footer> dengan betul

Kedua -dua tag ini bukan sahaja tersedia di bahagian atas dan bawah halaman, mereka juga boleh muncul dalam artikel atau modul. Contohnya:

 <header>
  <h1> Blog saya </h1>
  <Av> ... </nav>
</header>

<sountic>
  <header>
    <h2> Tajuk artikel </h2>
    <p> Pengarang: Xiao Ming </p>
  </header>
  <!-Kandungan artikel->
</artikel>

<footer> Begitu juga, ia boleh digunakan sebagai halaman keseluruhan atau bersarang di <article> atau <section> .

2. Gunakan <nav> untuk membungkus kawasan navigasi utama

Tidak semua pautan sesuai untuk penempatan dalam <nav> . Tag ini lebih sesuai untuk struktur menu utama seperti navigasi global dan navigasi sidebar.

Amalan Biasa:

 <av>
  <ul>
    <li> <a href = "/"> home </a> </li>
    <li> <a href = "/about"> tentang </a> </li>
  </ul>
</nav>

Dengan cara ini, pembaca skrin akan mengenalinya sebagai kawasan navigasi, yang akan memudahkan pengguna untuk melompat dengan cepat.

3. Gunakan <main> dan <aside> untuk membezakan antara kandungan primer dan sekunder

Kandungan utama keseluruhan halaman hendaklah dibungkus dalam tag <main> , dan halaman umumnya hanya mempunyai satu <main> . Ia digunakan bersempena dengan <aside> untuk membiarkan penyemak imbas tahu yang merupakan kandungan utama dan yang merupakan maklumat tambahan (seperti iklan bar sisi, cadangan yang berkaitan).

Struktur Contoh:

 <tain>
  <sountic>
    <h2> Tajuk artikel </h2>
    <p> Kandungan badan ... </p>
  </artikel>
</main>

<sepet>
  <h3> Membaca yang disyorkan </h3>
  <ul>
    <li> <a href = "#"> artikel lain1 </a> </li>
  </ul>
</selain>

NOTIS:

4. Gunakan <section> dan <article> untuk membahagikan blok kandungan

Ramai orang cenderung mengelirukan kedua -dua label ini. Ringkas:

Contohnya:

 <section>
  <h2> tentang kami </h2>
  <p> Kami adalah pasukan yang didedikasikan untuk pembangunan front-end. </p>
</seksyen>

<sountic>
  <h2> Berita terkini </h2>
  <p> Kami mengeluarkan versi baru minggu ini. </p>
</artikel>

Jika anda tidak pasti mana yang hendak digunakan, anda boleh bertanya kepada diri sendiri: Bolehkah perenggan ini dikeluarkan secara berasingan dan digunakan semula? Sekiranya anda boleh, ia mungkin <article> .

Pada dasarnya itu sahaja. Penggunaan tag semantik tidak rumit, tetapi mereka mudah diabaikan. Penggunaan rasional <header></header> , <footer></footer> , <nav> , <main>