Penggunaan Brilliant Daftar HTML dalam Desain Web

Anda dapat menemukan daftar yang dirancang dengan baik di seluruh Internet. Desainer telah menggunakannya selama beberapa dekade untuk mengoordinasikan informasi dan tata letak halaman, dan di web saat ini Anda dapat melihat kreativitas luar biasa tentang cara desainer web menggunakan daftar. Ini termasuk menu navigasi, tautan profil, arsip, tugas / daftar periksa, dan banyak kegunaan lainnya!

Dalam posting ini saya akan memperkenalkan berbagai jenis daftar HTML, dengan tips untuk mendesainnya, terutama tentang cara melakukannya tambahkan keunggulan unik ke daftar Anda. Juga saya akan membawa Anda melalui beberapa contoh situs web dengan desain daftar yang fantastis, dan akhirnya Anda akan mendapatkan daftar situs web dengan daftar HTML yang dirancang dengan baik. Tidak ada lagi keraguan tentang bagaimana membuat daftar yang terlihat polos terlihat unik, dan mari kita mulai memanfaatkannya hari ini!

Elemen Daftar

Desainer web terus-menerus melompat dari satu kereta musik ke kereta musik berikutnya, sehingga menyebabkan gaya situs web berubah dari waktu ke waktu, tetapi daftar telah teruji oleh waktu dan mungkin ada di sekitar inovasi World Wide Web di masa mendatang..

Sebelum memeriksa contoh, saya ingin membahas beberapa poin dengan daftar HTML. Ada beberapa jenis daftar yang dapat Anda manfaatkan dalam karya desain Anda sendiri. Mayoritas desainer web fokus Daftar Tidak Berurutan yang dibuka dengan a

tag, tetapi ada juga dua variasi lain yang kurang populer: Daftar yang dipesan dan Definisi Data. Saya sudah masuk ke perincian lebih lanjut di bawah ini.

Daftar Tidak Berurutan (

)

Mungkin salah satu elemen yang paling sering digunakan dalam standar HTML4 / HTML5. Daftar yang tidak berurutan akan menampilkan data dengan cara yang sama seperti daftar yang dipesan, bagaimanapun Anda tidak akan melihat penanda numerik di samping. Sebaliknya setiap item diberikan a lingkaran kecil atau disk dan dipecah menjadi baris baru. Ikon ini juga bisa diubah dengan properti tipe-tipe-daftar ditemukan dalam CSS.

Di bawah ini adalah contoh kode dari daftar tidak berurutan:

 
 
Barang 1
 
Butir 2
 
Butir 3
 
 

Daftar tidak berurutan adalah obat sempurna untuk membangun tautan navigasi. Karena kamu bisa dengan mudah daftar seluruh sarang dalam setiap item daftar itu adalah masalah sederhana untuk membuat tautan sub-navigasi demikian juga. Setelah menghapus gaya daftar Anda akan dibiarkan dengan elemen item kosong. Dari sini Anda dapat membuat gaya tautan jangkar untuk tampil sebagai elemen blok pada halaman Anda, sehingga mengisi desain menu navigasi, dan dengan beberapa kode jQuery Anda dapat mengumpulkan tajuk yang indah untuk situs Anda.

Paling umum Anda akan menemukan daftar tidak berurutan di tengah artikel web atau instruksi instalasi. Perhatikan itu Google dan bot pencarian lainnya tidak memproses konten halaman Anda secara berbeda, jadi milikmu SEO tidak boleh terpengaruh terlepas dari jenis listing yang Anda pilih.

Daftar yang Dipesan (

)

Saat Anda perlu memesan satu set data, Anda dapat mengatur kerangka tata letak Anda sendiri dari awal, tetapi dengan cara ini Anda harus menambahkan setiap angka yang bertambah dengan tangan, yang bisa melelahkan. Daftar yang dipesan sangat bagus menjaga tugas bernomor sesuai tanpa gangguan. Urutan item daftar internal Anda (

• ) akan menentukan bagaimana data disajikan.

  Di bawah ini adalah contoh kode dari daftar yang diurutkan:

   
   
  Barang 1
   
  Butir 2
   
  Butir 3
   
   

  Itu juga mungkin ubah penghitung dari angka biasa ke beberapa opsi lain. Ini termasuk huruf alfabet dan angka Romawi, untuk beberapa nama. Desainer web akan menggunakan daftar yang dipesan untuk daftar spesifik konten. Resep data, tugas harian, favorit, atau pengguna login teratas / baru hanyalah beberapa contoh. Seringkali Anda akan melihat komentar blog dibangun menggunakan daftar yang dipesan untuk menjaga setiap komentar dalam urutan bernomor.

  Daftar Definisi Data (

  )

  Daftar definisi tidak terlihat terlalu sering lagi (tidak seperti yang pernah populer). Mereka dulu terlihat dengan desainer web membuat format tautan atau konten kotak yang rumit. Itu tag daftar data (

  ) sering disalahpahami oleh coders hari ini. Dalam HTML4.01 spesifikasi daftar data digunakan untuk pasangkan item dengan deskripsinya. Ini disebut daftar definisi.

  Di bawah ini adalah contoh kode dari daftar definisi data:

   
   
  Barang 1
   
  Deskripsi
   
  Butir 2
   
  Deskripsi
   
  Butir 3
   
  Deskripsi
   
   

  Namun dengan daftar spesifikasi HTML5 data baru telah diberikan transkripsi. Tidak ada perbedaan dengan sintaks dalam cara Anda menggunakan elemen, namun tujuannya telah diperbarui sebagai daftar deskripsi yang terdiri dari satu atau lebih istilah data (

  ) diikuti oleh satu atau lebih definisi data (

  ).

  Contoh kuat dari artikel Dokter HTML5 adalah a daftar diformat metadata. Di dalam satu dl daftar elemen yang Anda inginkan mendefinisikan suatu istilah, seperti nama Anda, lalu masing-masing berikutnya tag definisi dapat menggambarkan data tentang Anda, mungkin usia Anda, pekerjaan, kota saat ini, dll. Pada akhirnya setiap set data dengan pasangan kunci / nilai cocok dengan baik dalam daftar deskripsi. Anda dapat menggunakan lebih dari satu istilah data dalam daftar, tetapi W3C menyatakan itu setiap istilah harus unik dalam daftar.

  Sekarang kita telah menemukan 3 gaya daftar populer, mari kita beralih ke beberapa contoh! Desainer web menjadi sangat kreatif dengan daftar mereka selama beberapa tahun terakhir. Saya telah membuat katalog 7 situs web favorit saya di bawah ini dengan fokus khusus pada penggunaan daftar kreatif mereka.

  Navigasi Daftar Tidak Berurutan Sederhana

  Menu navigasi jauh lebih mudah dibangun dengan teknik CSS modern. Inilah sebabnya mengapa daftar tidak berurutan dan bahkan daftar yang dipesan telah menjadi pilihan populer. Salah satu contoh favorit saya tentang ini muncul di blog media sosial, Mashable.

  

  Ke bagian atas tajuknya Anda akan melihat 2 set tautan utama. Langsung ke bagian atas logo mereka adalah daftar kecil yang tidak berurutan yang berisi tautan komunitas seperti Top Stories, Trending Topics, dan People. Perancang telah menciptakan gaya hover ramping yang menampilkan latar belakang yang solid dan skema warna.

  Tepat di bawah ini Anda akan melihat tautan sub navigasi mereka. Menu navigasi ini mengarah ke kategori blog seperti Media Sosial atau Teknologi. Kedua daftar tidak berurutan terkandung dalam a HTML5