HTML Semantik: Praktik Terbaik untuk 2019

Diterbitkan: 2019-08-31

HTML semantik sekarang lebih penting daripada sebelumnya, terutama karena Google mengubah algoritme peringkat halaman secara konstan. Posisi teratas di setiap kueri menjadi semakin kompetitif. Anda memerlukan senjata rahasia, dan HTML semantik adalah senjata yang bagus untuk dimiliki di gudang senjata Anda. Anda mungkin menggunakan beberapa kode semantik di situs web Anda, tetapi semakin banyak Anda dapat menyisipkan konten penting, semakin baik mesin pencari dapat merayapi situs Anda dan mengetahui apa yang Anda tawarkan kepada calon pengunjung.

Apa itu HTML Semantik?

Singkatnya, HTML semantik adalah HTML yang dapat dibaca dan dipahami manusia. Setiap manusia, bukan hanya pembuat kode dan pengembang, dan jika manusia dapat membacanya dengan lebih mudah, robot juga bisa. Jika robot dapat membaca struktur situs Anda dengan lebih mudah, maka mereka dapat membuat keputusan yang lebih tepat tentang seberapa baik situs Anda bertahan terhadap berbagai kueri penelusuran.

Pada dasarnya, Anda memberi tahu perayap mesin pencari "ini adalah posting blog" atau "ini adalah menu navigasi" atau "hei, ini hanya footer, jadi tolong jangan sakiti saya karena duplikat konten."

Tapi bagaimana cara melakukannya? Yah, itu menggunakan banyak tag HTML5 khusus yang sangat spesifik. Mari kita gali beberapa contoh, dan Anda bisa melihatnya sendiri.

Pemformatan Teks

Pemformatan teks adalah HTML semantik paling umum di luar sana, dan Anda melihatnya setiap hari. Sebelumnya, huruf tunggal digunakan untuk menunjukkan pemformatan, singkatan dari bold , italic , underline , dan seterusnya.

<p>This is <b>bold text</b></p>
<p>While <i>this is italics</i>, and this is <u>underlined</u>.</p>

Dengan HTML semantik, Anda menggunakan teks yang kuat ke tebal dan menunjukkan kepentingan yang kuat atau em untuk membuat miring (atau menekankan) teks. Menariknya, U masih digunakan untuk menggarisbawahi teks; namun, MDN menyarankan untuk menatanya melalui CSS dengan text-decoration: underline; untuk membedakannya.

<p>This is <strong>bold text</strong>, while <em>this is italics</em>.</p>
<p>This would be <u style=text-decoration: #222000 wavy underline;">underlined</u>.</p>

Kami juga menyukai del untuk menunjukkan ~~coret~~ teks yang dihapus.

<p>We are also fond of <em>del</em> to show <del>strikethrough</del> deleted text.</p>

Dan kami pikir kami akan mengakhiri pandangan kami pada pemformatan teks HTML semantik dengan sorotan. Secara harfiah. Jika Anda menggunakan tanda di sekitar teks, maka Anda akan menyorot apa pun yang Anda sertakan.

<p>Make sure that you remember <strong>this term for your test</strong>.
<p>But you should remember <mark>this information about how to use it in context</mark>.</p> 
<p>If you do that, you will be fine.</p>

MDN mengatakan ini tidak untuk digunakan dengan cara yang sama seperti Anda menggunakan strong . Anda menggunakan strong untuk menunjukkan sesuatu yang penting dalam teks, dan Anda menggunakan tanda untuk menyoroti sesuatu yang relevan dengan pemahamannya.

Bagian, Header, dan Menu

Mungkin cara terbaik untuk memulai adalah menggunakan header dan footer. Anda tahu, bagian favorit semua orang dari situs web untuk dibuat dan ditangani. Dengan HTML tradisional, Anda mungkin memiliki header yang dikodekan seperti ini:

<div>
  <h1>Page Title Goes here</h1>
    <p>Tagline!</p>
  <div>
  	<ul>
  	  <li><a href="example.com">Home Page Link</a></li>
  	  <li><a href="example.com">Blog Page Link</a></li>
  	  <li><a href="example.com">Podcast Page Link</a></li>
  	</ul>
   </div>
</div>

Melihat kode itu, Anda dapat melihat apa semuanya. Namun, itu hanya jika Anda tahu apa yang Anda lihat. Anda memiliki beberapa div (wadah) bersarang yang memisahkan judul, tagline, dan menu (sangat mendasar). Tidak ada yang salah dengan pengaturan ini, tetapi juga tidak ada yang benar- benar benar. Jika Anda melangkah lebih jauh, Anda dapat menggunakan id CSS dan markup kelas untuk membuat semuanya lebih mudah dibaca.

 <div class="header" id="hero-section">
  <h1 class="page-title">Page Title Goes here</h1>
    <p>Tagline!</p>
  <div class="header-menu">
  	<ul>
  	  <li><a href="example.com">Home Page Link</a></li>
  	  <li><a href="example.com">Blog Page Link</a></li>
  	  <li><a href="example.com">Podcast Page Link</a></li>
  	</ul>
   </div>
</div>

Dengan HTML semantik, hal terlihat jauh lebih bersih dan lebih mudah dibaca, Anda tidak harus bergantung pada divs, dan kelas-kelas dan id yang Anda pilih bisa semata-mata untuk styling.

<header>
  <h1>Page Title Goes Here</h1>
    <p>Tagline!</p>
  <nav>
    <a href="example.com">Home Page Link</a>
    <a href="example.com">Home Page Link</a>
    <a href="example.com">Home Page Link</a>
  </nav>
</header>

Bukankah lebih mudah untuk membaca dan menceritakan apa yang terjadi? Anda memiliki tag header yang memungkinkan Anda mengetahui bahwa ini adalah header halaman dan tag nav yang menunjukkan menu navigasi. (Bahkan cukup pintar untuk tidak memerlukan gaya ekstra untuk membuat daftar entri secara horizontal.)

Secara teknis Anda juga dapat menggunakan kode berikut, jika ingin memastikan gaya Anda diterapkan dengan benar, serta memiliki cara untuk menautkan ke bagian tertentu dari situs web. Dalam hal ini, tag bagian bekerja mirip dengan cara kerja tag div pada contoh sebelumnya. Kecuali, tentu saja, itu dapat dibaca dan masuk akal bagi mata manusia.

<section id="hero-section">
  <header>
    <h1>Page Title Goes Here</h1>
      <p>Tagline!</p>
    <nav>
      <a href="example.com">Home Page Link</a>
      <a href="example.com">Home Page Link</a>
      <a href="example.com">Home Page Link</a>
    </nav>
  </header>
</section>

Selain itu, perhatikan penggunaan id=”hero-section” , yang merupakan langkah opsional ke langkah opsional, tetapi Anda dapat menata bagian sebagai pemilih CSS sendiri.

Takeaways

Gunakan bagian di tempat Anda mungkin tergoda untuk menggunakan div luar.
Gunakan dapat menggunakan tajuk untuk menunjukkan bagian halaman mana yang menjadi tajuk Anda. Anda juga dapat menggunakan ini di artikel atau posting untuk menunjukkan tajuk posting itu, yang terpisah dari situs web itu sendiri.
Gunakan nav saat Anda mengatur menu navigasi utama untuk situs. Nav bukanlah cara bagi mesin telusur untuk menemukan tautan, tetapi untuk menemukan cara utama pengguna dapat menavigasi situs Anda. Kumpulan tautan apa pun (seperti remah roti, dll.) juga dapat disertakan dalam nav

catatan kaki

Tidak banyak yang perlu dikatakan tentang footer, tetapi kami harus menyebutkannya. Dalam banyak hal, ini adalah analog langsung ke header. Footer dasar tradisional mungkin terlihat seperti ini:

<div class="site-footer>
    <p>Designed by <a href="elegantthemes.com">Elegant Themes</a></p>
    <a href="example.com/contact">Contact Us!</a>
    <img src="/logo.png">
</div>

Sedangkan footer semantik mungkin terlihat seperti ini:

<footer>
    <p>Designed by <a href="elegantthemes.com">Elegant Themes</a></p>
    <a href="example.com/contact">Contact Us!</a>
    <img src="/logo.png">
</footer>

Memang, tidak ada banyak perbedaan di sini dalam pengaturan dasar, tetapi robot yang melihat situs Anda akan menghargai klarifikasi. Ingatlah juga bahwa Anda dapat menggunakan footer untuk footer halaman, posting, atau situs.

Utama, Artikel, dan Tambahan

Komponen utama lain dari HTML semantik adalah tag artikel . Selain itu, samping juga. Kedua hal ini memungkinkan Anda menyusun konten sebenarnya dari situs Anda sehingga mesin telusur mengetahui apa teks utama, yang pada gilirannya memungkinkan mereka fokus pada masalah yang Anda pecahkan dan topik yang Anda fokuskan.

Biasanya, posting atau halaman blog adalah dokumen HTML sederhana, tetapi header, footer, konten, bilah sisi, sisipan, dll. semuanya dapat disatukan.

<body>
  <div class="post-header>
    <h1>Article title</h1>
  </div>
  <div class="post-content>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
      <div class="article-aside">
        <p>Text block</p>
      </div>
  </div>
 <div class="post-footer">
    <img src="/subscribe.png">
  </div>
</body>

Sekarang, itu bukan kode yang cantik, tetapi berfungsi. Namun, itu tidak cantik, dan membutuhkan jumlah CSS yang lumayan untuk membuat tampilan mendekati mudah dibaca saat dirender. Dengan menggunakan main , article , dan samping , Anda dapat dengan mudah menyusun halaman agar lebih mudah dibaca.

<main>
  <article>
    <header>
      <h1>Article title</h1>
    </header>
      <p>Paragraph 1</p>
      <p>Paragraph 2</p>
      <p>Paragraph 3</p>
      <aside>
        <p>Text block</p>
      </aside>
    <footer>
      <img src="/subscribe.png">
    </footer>
  </article>
</main>

Namun, Anda harus mencatat bahwa Anda hanya dapat menunjukkan konten utama halaman satu kali. Artinya Anda hanya dapat menggunakan satu halaman utama per halaman. Anda dapat menyarangkan beberapa artikel di bawah satu induk untuk menunjukkan daftar isi atau direktori konten mandiri (Anda bahkan dapat menggunakan beberapa tag H1 dengan cara ini untuk menunjukkan kepada mesin pencari bahwa posting tersebut berdiri sendiri.

Takeaways

Gunakan satu tag utama per halaman
Beberapa tag artikel dapat digunakan per halaman untuk mengidentifikasi konten mandiri yang terpisah (termasuk beberapa H1 per halaman)
Selain dapat digunakan sebagai sidebar atau menyisipkan dalam posting atau halaman

Elemen Lainnya yang Jarang Digunakan

Harus diakui, elemen dan tag yang kita bahas di atas adalah bagian HTML semantik yang paling sering digunakan. Lagi pula, hampir setiap situs web di internet mengandung beberapa kombinasi di antaranya, sedangkan tag semantik yang didukung lainnya lebih spesifik dan terbatas. Mereka, bagaimanapun, tidak kurang berguna ketika melayani tujuan mereka, dan mereka sangat membantu dengan interaksi dan pengindeksan pencarian.

Detail dan Ringkasan

Detail dan elemen ringkasan membuat lapisan konten yang diperluas yang dapat disembunyikan ke pengguna kecuali mereka secara khusus mengaktifkannya (seperti modul akordeon di Divi atau pembuat halaman lainnya).

<details>
  <summary>Headline that will be shown and clicked on</summary>
    <p>Content that will be hidden</p>
    <a href="example.com">Link that will be hidden</a>
</details>

Setiap turunan dari ringkasan akan disembunyikan dan dapat diperluas, dan Anda dapat menambahkan teks tambahan dengan menutup elemen detail .

Gambar dan Keterangan Gambar

Ini cukup jelas. Gambar adalah semacam bantuan visual dalam posting Anda. Foto, grafik, video YouTube yang disematkan, mungkin. figcaption , maka, adalah keterangan yang Anda tambahkan untuk menjelaskan penggunaan gambar di atas. Meskipun bersifat teknis untuk penggunaan semantik, Anda dapat menggunakan ini untuk konten apa pun yang ingin Anda indeks secara khusus sebagai bantuan di pos atau halaman utama.

<figure>
  <img src="/chart.jpg">
    <figcaption>Explanation of this chart in short text</figcaption>
</figure>

Tag ini adalah cara terbaik untuk mendapatkan cuplikan unggulan di Google, misalnya, karena Anda secara khusus menunjukkan solusi atau penjelasan suatu masalah. Kami menyarankan untuk menggunakan ini karena tidak hanya mengurangi kode yang Anda gunakan untuk menambahkan keterangan dan gaya, tetapi juga menjaga gambar dan keterangan sebagai satu elemen halaman, bukan yang terpisah.

Waktu

Waktu adalah salah satu tag yang lebih jarang digunakan, tetapi ketika Anda memiliki acara atau acara khusus di mana Anda secara khusus membutuhkan mesin pencari untuk mengetahui ada waktu atau tanggal yang terlibat, gunakan ini daripada hanya menebalkan atau menekankan teks.

<article>
  <h1>Title</h1>
   <p>The event will begin on <time datetime="2019-12-25">December 25th</time> and last for <time datetime="PT12H30M0S">12 and a half hours</time>.</p>
</article>

Menggunakan datetime dengan elemen waktu memberi pengembangan Anda pengait waktu yang jauh lebih baik, yang kemudian akan memungkinkan Anda untuk berintegrasi dengan kalender dan berbagai API lainnya. Anda akan dapat mengirim pengingat dari situs Anda, dan orang-orang akan kembali lebih sering.

Kesimpulan

Meskipun tidak salah menggunakan HTML non-semantik, jika Anda membiasakan diri saat bekerja, peringkat mesin pencari Anda akan meningkat. Itu penting, tetapi yang mungkin lebih penting, adalah Anda akan menghemat waktu Anda dalam menyusun dan menata situs Anda, serta mencegah banyak masalah dan utang teknis bagi orang-orang yang datang setelah Anda dalam proyek. .

Praktik terbaik apa untuk HTML semantik yang Anda ikuti?

Gambar unggulan artikel oleh whiteMocca / shutterstock.com