whytodesign.blogspot.com: html

Tampilkan postingan dengan label html. Tampilkan semua postingan

Kali ini saya akan membahas Pentingnya Semantik Element untuk meningkatkan SEO website anda Sebelumnya saya akan membahas dulu Apa itu Semantik Element?

Apa itu Semantik Element ?

Semantik Element adalah element yang menggambarkan arti atau makna sebenarnya dari element tersebut. Makna yang diberikan semantik yaitu nilai dari sebuah kontent pada document.

Lebih jelasnya, jika kita menulis sebuah Tag html misalnya <table></table>. Tag table langsung menggambarkan arti atau nilai cari kontent tersebut. berbeda jika kita menulis tag <div></div>
tag ini tidak serta merta menggambarkan arti dari kontent HTMLnya.

Lebih jauh tentang semantik

HTML5 didukung dengan berbagai element semantik, salah satunya <article></article>. Sayangnya kemajuan teknologi ini berbanding terbalik dengan pengembangan web pada sisi front end. kebanyakan developer tidak terlalu perduli dengan semantik element.
mereka cenderung menggunakan tag <div></div>

sebagai pemisah antara content yang satu dengan yang lainnya.

Lalu apa masalahnya?
Mari kita berfikir jauh kedepan.

Perkembangan dunia website mengalami peningkatan yang jauh signifikan. dan isu belakangan ini yang sedang heboh adalah pengembangan web 3.0 yang lebih terarah kepada semantik website.

Muncul pertanyaan lainnya yaitu apa itu semantik website?

Semantik website adalah website yang dibuat/dikembangkan sebagai partner kita, sebagai assistent kita, dan seolah dia adalah pelayan pribadi kita.

biar saya jelaskan. mungkin diantara kalian ada yang pernah berada disuatu kota dan anda menginginkan suatu makanan seperti fried rice tapi anda tidak mengetahui dimana tempat makan tersebut, anda pasti merasa kecewa. Lalu anda berfikir untuk mencarinya diinternet.
Search enggine langsung menampilkan daftar restoran/ blog yang merefrensikan tempat makan tersebut. dan andapun mencoba ke tempat tersebut dan anda mengalami kekecewaan yang lain dimana fried rice yang anda makan tidak sesuai dengan keinginan anda kejadian seperti ini tentu membuat anda tidak percaya akan search enggine/ internet lagi. Dan anda mungkin akan berfikir untuk mencari informasi dari mulut-kemulut.Begitulah sekilas masalah yang mendasari web 3.0 dibangun.

Jadi bagaimana web semantik bekerja? web semantik akan bekerja seperti asisten pribadi kita. Jika kita menginginkan a delicious fried rice in this town maka web 3.0 akan menampilkannya. seolah kita berbicara kepada asisten kita "can you tell me where is the delicious fried rice in this town?".

Mengapa perlu semantik element dalam website kita?

Seperti yang saya katakan tadi. bukankah lebih baik bagi kita untuk mempersiapkan dari pada membuatnya ditengah jalan?. dengan mempersiapkan element semantik pada website/blog kita, itu artinya kita sudah mempersiapkan website/blog kita 'bertempur' di era web 3.0

kurang jelas tentang permasalahan pada artikel kali ini, atau munggkin anda memiliki pertanyaan?
Kami akan senantiasa menjawab pertanyaan anda.

Assalamu'alaikum. buat agan-agan pembaca setia, walau blog ini sekarang masih di reconstruksi u r da real MVP :'(

ok, Back to topic. agan-agan pasti pernah suatu hari berfikir untuk Membuat element baru pada HTML 5 yups, pemikikiran yang Briliant sekarang bukan hal yang mustahil untuk membuat tag baru. berikut saya kasih contohnya.

kita akan mencoba membuat tagbaru bernama <wtd> kerenkan gan tagnya

<!DOCTYPE html>
<html>

<head>
  <title>Membuat Element Baru</title>
  <script>document.createElement("wtd")</script>
  <style>
  wtd{
    display: block;
    background-color: #ddd;
    padding: 50px;
    font-size: 30px;
  }
  </style>
</head>

<body>

<h1>
My First Heading</h1>
My first paragraph.
<wtd>My First Hero</wtd>

</body>
</html>

Nah, gampangkan gan? Eits tapi jangan seneng dulu. seorang designer/ UI developer yang baik selalu melihat sesuatu yang baru dari sudut pandang yang berdeda dan akan memunculkan pertanyaan seperti "Apakah tag baru ini akan work di semua browser?" dan kalau ente bukan orang yang suka menjelajah dunia maya. maka ide agan Membuat element baru pada HTML 5 hanya akan jadi Isapan jempol belaka.

ingat gan

Setiap Penyakit pasti ada obatnya

itu bagi seorang dokter dan pasien tapi bagi seorang programmer

Setiap Bug pasti ada jalan keluarnya

dan inilah saatnya kalian diperkenalkan kepada HTML5shiv. Apa itu HTML5shiv ? jawabannya ada di tulisan selanjutnya.. :p

Terimakasih kepada agan yang telah berkunjung. tunggu pembahasan menarik berikutnya.
Wassalam WR WB

Assalamu'alaikum mas/mba di perkembangan zaman yang makin maju dan etika moral yang makin amburadul ini (apa pula.. xD). perkembangan web semakin maju dengan berbagai tools, plugin dan pengembangan bahasa markah itu sendiri, bahasa markah? yups ituloh kang HTML bahasa markah yang digunakan untuk membuat/mendesain rangka website.

apa yang baru dari HTML 5 ? jika kamu tidak mengupdate bahasa markah yang 1 ini, kamu bagaikan im legend(baca, manusia primitif) ditengah kota newyork. kenapa sih kita harus belajar HTML 5 dan apa yang baru dari HTML 5 ?. banyak banget keuntungan yang bisa kita ambil dari HTML 5 ini sob. kalo ente masih bingung perbedaannya oke ane jelasin sob cekidot.

di HTML 5 kita harus menambahkan DOCTYPE intinya inilah yang membuat mesin browser mengetahui kalo yang ente tulis itu HTML 5 cmiiw.

<!DOCTYPE html>

Selanjutnya ente juga harus menambahkan charset apa itu charset, charset adalah tag meta yang akan menjaga tampilan huruf yang ente tulis. maksudnya? jadi tampilan hurufnya akan tetap latin walau web ente dibuka di Jazirah Arab, China, Nyanmar, Thailand, dll cmiiw.

<meta charset="UTF-8">

Jadi Struktur dasarnya berubah gan jadi seperti ini:

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>

<body>
Content of the document......
</body>
</html>

Nah, strukturnya berbeda dengan yang kita pelajari dulu di struktur dasar html. Oke, sekian dulu dari saya kurang lebih mohon maaf.

orang baik selalu meninggalkan Komeng gan!!

Wassalam Wr. Wb

Assalamu'Alaikum..

Dalam menulis document HTML sangat penting bagi seorang Designer website untuk mengetahui Struktur dasar HTML, bahkan ini adalah hal yang paling mendasar saat pertama kali seseorang ingin merancang/mendesain website.Berikut adalah struktur dasarnya:

Pastikan dalam merancang sebuah website, anda jangan sampai lupa untuk merancang struktur HTML seperti gambar diatas, walau tanpa tag seperti diatas html masih dapat berjalan. namun jika sudah masuk ke Hosting/ di onlinekan, tag diatas akan sangat berpengaruh, kesalahan kecil saja dapat membuat website anda di rating bawah. oleh karena itu penting bagi kita untuk merancang Html mengikuti struktur dasarnya,

Sekian Posting dari saya semoga bermanfaat, tunggu posting-posting berikutnya yang akan membahas Design website lebih mendalam sampai pada tingkat Master. dan bagaimana membuat website kita compatible dengan semua device yang di era modern ini makin "Bejibun" mulai dari Lepi, Tablet, Android. DLL dimana Setiap Device mempunyai settingan sendiri dari segi lebar device, pixel per inch dll. kita akan membahas pelan-pelan semuaya.

Salamu'Alaikum.