Penting sekali untuk dipahami bahwa visual/UI tidak berdiri sendiri untuk memberikan makna, tapi kode penyusunnya juga turut berperan penting. Penggunaan Semantika ini membantu banyak hal mulai dari SEO hingga aksesibilitas.

Ini adalah salinan jawaban saya di Quora untuk pertanyaan Apa saja hal-hal yang perlu dipelajari tentang UI oleh developer pemula?.

In programming, Semantics refers to the meaning of a piece of code — for example “what effect does running that line of JavaScript have?”, or “what purpose or role does that HTML element have” (rather than “what does it look like?”.)

MDN web docs

Menurut MDN (the Mozilla Developer Network) web docs, Semantika merujuk kepada arti/makna dari sebuah baris kode, dan dalam HTML merujuk kepada tujuan atau peran dari elemen HTML yang digunakan ketimbang hanya bagaimana tampilannya. Sebagai contoh, tag H1 berperan untuk menyatakan judul yang memiliki hierarki paling tinggi dalam sebuah laman web.

Nah sayang sekali hal seperti ini sering luput bahkan di kalangan unicorn sekalipun.

Ini adalah kode yang umum ditemui di situs e-commerce lokal.

<div class="card"> 
<div class="image"><img src="{{Product Image}}"></div> 
<div class=“title”>{{Product Name}}</div> 
<div class=“description”>{{Product Description}}</div> 
<div class="button">Buy</div> 
</div> 

Kode ini tidak memiliki makna. Tidak percaya? Buka situs Tokopedia dan lihat kode penyusunnya.

Secara tampilan, laman pencarian “Asus ROG” di Tokopedia adalah seperti ini, tidak berbeda dengan berbagai situs e-commerce lainnya.

Namun, kalau dianalisa lebih lanjut, justru struktur konten di laman Tokopedia tersebut adalah seperti ini.

Coba bandingkan dengan Amazon.

Atau eBay.

Amazon mengesampingkan filter dan mengutamakan hasil pencarian produk.

eBay menampilkan hasil pencarian produk tapi penempatannya agak salah, harusnya hasil pencarian bisa ditampilkan lebih awal dan filternya ditempatkan kemudian.

Tokopedia? Hanya filternya saja yang ditampilkan. Hasil pencarian produk tidak ada sama sekali.

Kode amatir di atas bisa diperbaiki lebih lanjut.

<div class="card"> 
<img src="{{Product Image}}" alt="{{Product Image Alt}}"> 
<h2>{{Product Name}}</h2> <!-- Bisa H2 atau H3 atau H4, tergantung kebutuhan --> 
<p>{{Product Description}}</p> 
<a class="button" href="{{Product URL}}">Buy</a> 
</div> 

---

Nah, mengapa Semantika penting? Menurut MDN web docs, beberapa fungsinya adalah sebagai berikut.

1. Search engines will consider its contents as important keywords to influence the page’s search rankings.
2. Screen readers can use it as a signpost to help visually impaired users navigate a page.
3. Finding blocks of meaningful code is significantly easier than searching though endless divs with or without semantic or namespaced classes.
4. Suggests to the developer the type of data that will be populated.
5. Semantic naming mirrors proper custom element/component naming.

Poin nomor dua adalah hal yang paling menarik: aksesibilitas.

We all will have disabilities eventually, unless we die first.

Gregg Vanderheiden

Aksesibilitas, seperti dikutip dari Microsoft, adalah dua hal:

1. Sebuah kualitas yang menjamin pengalaman yang terbuka/setara bagi siapa saja (inklusif).
2. Sebuah bidang/disiplin profesional yang bertujuan untuk mencapai pengalaman yang setara.

Semantika adalah salah satu hal untuk mencapai aksesibilitas alias kualitas pengalaman pengguna yang setara.

26 people recommended this post