oleh

Ingat! Struktur Kode Situs Web Sangat Penting

Saat anda membuat tema WordPress anda sendiri atau mengadaptasi tema yang ada, perhatikan struktur kode dan semantik anda. Ini akan sangat menguntungkan situs web anda, ini juga akan meningkatkan SEO anda karena mesin pencari lebih tahu apa yang diharapkan di situs web anda. Ini juga akan meningkatkan aksesibilitas situs anda, artinya orang yang menggunakan teknologi bantu, dapat menggunakan situs web anda dengan lebih baik.

Mulai dari mana?

Tempat yang baik untuk memulai ketika anda berbicara tentang struktur situs, adalah tag HTML. Ada beberapa yang bisa anda gunakan dan disukai, <header><footer>atau <main>. Tag ini tersedia sejak HTML5 dan kami menyebutnya tag HTML semantik. Tag semantik menambahkan makna pada sepotong kode. Ini menentukan apa tujuan atau peran elemen HTML. Misalnya, untuk artikel blog, anda bisa menggunakan <article>. Anda akan menggunakan <aside>untuk bilah sisi dan <nav>untuk menu navigasi. Dan anda akan menggunakan <header>elemen yang disebutkan sebelumnya untuk tajuk situs web anda. Sebelum HTML5, anda biasanya menggunakan a <div>.

Menggunakan HTML semantik dapat memberi tahu mesin pencari atau teknologi bantuan apa setiap bagian dari situs web anda dan di mana bagian terpenting konten anda berada. Di MDN anda dapat menemukan semua tag HTML yang saat ini tersedia untuk digunakan di situs web anda.

Struktur situs web yang baik dengan tag HTML semantik yang benar dapat terlihat seperti ini. Kami memiliki tajuk di bagian atas situs web, diikuti oleh konten utama dan catatan kaki di bagian bawah halaman. Menu kami dibungkus dalam <nav>elemen dan bilah sisi dalam sebuah <aside>. Lalu akhirnya, konten blog terletak di sebuah artikel. 

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Example</title>
</head>

<body>
 <header>
     <h1>
         Yoast
     </h1>
     <nav>
         <ul>
             <li>
                 <a href="#">Home</a>
             </li>
             <li>
                 <a href="#">About</a>
             </li>
         </ul>
     </nav>
 </header>
 <main>
     <article>
         <h2>This is the title </h2>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
     </article>
     <aside>
         <h2>This is the sidebar</h2>
     </aside>
 </main>
 <footer>
       <p>© Yoast 2019</p>
 </footer>
</body>

</html>

Bagaimana jika Anda tidak melakukannya dengan benar?

Tidak menggunakan HTML semantik dalam banyak kasus tidak akan memengaruhi tampilan situs web anda secara visual. Header akan terlihat sama jika anda menggunakan div bukan header. Tapi, bot mesin pencari tidak akan tahu apa bagian terpenting dari situs web anda dan teknologi bantuan seperti pembaca layar juga tidak akan tahu. Orang yang mengandalkan ini, tidak dapat menavigasi situs web anda dengan benar atau kadang-kadang bahkan tidak dapat menggunakan situs web anda sama sekali. 

Hanya ketika CSS anda tidak dimuat, situs web anda akan terpengaruh secara visual, karena setiap browser memiliki beberapa style default yang berlaku untuk judul dan paragraf. 

Mode pembaca

Menggunakan elemen HTML yang benar untuk konten yang tepat memiliki lebih banyak manfaat tambahan, misalnya untuk orang yang suka menggunakan mode pembaca browser. Beberapa browser seperti Safari dan Firefox menawarkan mode pembaca, ini adalah tampilan situs web bebas gangguan yang memungkinkan anda membaca posting blog tanpa iklan, gambar, atau gangguan lainnya. Jika anda membaca posting blog ini di Firefox, ada ikon kecil di ujung bilah alamat yang memungkinkan anda memasuki Tampilan Pustaka. Chrome juga akan mendapatkan mode pembaca, tetapi itu masih di belakang bendera eksperimental saat ini. 

Mode pembaca akan mencoba menampilkan semua yang ada di dalam <div>atau <p>, tetapi anda tidak ingin semuanya ditampilkan. Header atau bilah menu biasanya tidak diperlukan untuk artikel yang ingin dibaca seseorang. Dengan membungkus navigasi <nav>, itu tidak akan dimasukkan dalam mode pembaca. Dan dengan menggunakan tag heading yang benar untuk judul anda, anda dapat memastikan ini akan ditampilkan dengan tepat dalam mode pembaca. 

Baca juga...  Bagi Pemula Pada Wordpress, Hindari Kesalahan Umum Ini!

Bandingkan dua screenshot di bawah ini, meninggalkan situs yang hanya menggunakan div dan paragraf, di sebelah kanan website dengan tag HTML5 yang tepat, seperti <header><nav><main>dan <article>. Gaya ini juga didasarkan pada default browser.

Dua contoh mode pembaca, dibiarkan tanpa HTML semantik, kanan dengan struktur yang benar

Selain memberikan makna pada suatu elemen, tag HTML juga dapat menambahkan beberapa fungsionalitas ke situs web anda. <input type="tel">akan memberi pengguna pada smartphone akses ke papan tombol angka khusus sementara bidang input tertentu itu memiliki fokus. Dan dengan <details>dan <summary>anda memiliki elemen dilipat asli untuk digunakan di browser yang lebih baru untuk membuat misalnya sebuah FAQ.

Apa yang salah?

Sebenarnya banyak. Contoh paling umum untuk penyalahgunaan elemen HTML adalah tombol dan tautan. Untuk tautan ke halaman lain, anda harus menggunakan <a href="">. Jika anda menggunakan <button>elemen atau lainnya dengan onclick JavaScript untuk mengirim orang ke halaman lain, itu dapat mengurangi pengalaman pengguna karena tautan anda mungkin tidak dapat dikenali. Orang-orang dengan teknologi bantuan mungkin tidak dapat mengklik tautan anda dan mesin pencari tidak akan dapat menjelajah tautan seperti ini.

Jadi, kapan anda harus menggunakan tombol? Untuk tindakan yang sebagian besar akan membiarkan anda tetap di halaman yang sama. Pikirkan tentang tombol kirim untuk formulir kontak. Saat anda menggunakan <button>atau <input type="submit">, pengguna anda dapat mengirimkan formulir dengan menekan enter pada keyboard mereka.

Struktur dalam CSS

HTML Anda bukan satu-satunya tempat untuk memikirkan struktur situs anda. Tahukah anda browser anda membaca aturan CSS anda dari kanan ke kiri? Dengan baris berikut dalam CSS anda: ul a, browser anda pertama-tama akan mencari setiap <a>elemen di situs web anda, kemudian mencari elemen – elemen yang berada di a <li>, diikuti dengan kueri untuk elemen – elemen <li>di a <ul>. Idealnya, anda ingin memberikan ini <a>atau <li>nama kelas dan menargetkan ini di file CSS anda. 

Penting juga untuk diingat ketika menyusun CSS anda adalah bahwa dalam kasus duplikat gaya CSS, kejadian terakhir adalah yang akan ditetapkan. Ini bisa berguna ketika anda perlu menimpa gaya untuk kasus penggunaan yang lebih spesifik, tetapi perlu diingat bahwa itu berbeda dari cara kerjanya dalam HTML. Jika anda memiliki tag meta rangkap, baris pertama akan berlaku, bukan yang terakhir. 

Periksa apa yang Anda lakukan

Jika anda ingin tahu bagaimana keadaan anda saat ini, ada beberapa alat yang dapat anda gunakan. Di Alat Pengembang Google di Google Chrome anda dapat menjalankan audit Lighthouse, yang memeriksa situs web anda untuk aksesibilitas dan SEO, antara lain. Untuk menjalankan audit, buka alat pengembang dengan menekan F12 dan pilih tab audit. Anda dapat memilih pengaturan yang berbeda dan menjalankan audit untuk melihat bagaimana skor situs web anda. 

Untuk CSS anda, ada Project Wallace, alat analitis untuk file CSS anda. Perhatikan bahwa alat ini tidak akan memberi anda jaminan situs web anda benar-benar sempurna, yang masih memerlukan audit manual, tetapi itu akan membantu dan memberi anda indikasi tentang apa yang akan anda lakukan.

Komentar

Tinggalkan Balasan Anda dan Terima Kasih Atas Kunjungannya...

Artikel Terbaru