Rata-rata pengunjung website anda tidak mungkin melihat dalam produk
jadi, tetapi untuk web developer, potongan kecil dari HTML dan CSS code
adalah merupakan produk jadi. HTML5 dan CSS3 memberikan pengembang web
tool bahkan lebih yang dapat digunakan untuk mengekspresikan dirinya
sendiri, di sini adalah gambaran dasar dari apa yang mereka buat dalam
membangun website.
The Navigation Tag
Ini adalah suatu yang sering diabaikan dari HTML5. Singkatnya, anda
harus selalu berusaha untuk membungkus link yang relevan di tag Nav
(“<nav>”). Ini tidak tampak seperti kebanyakan, tetapi ke elemen
sendiri ketika anda mempertimbangkan prospek SEO untuk website anda.
SEO (search engine optimization) adalah semua tentang membuat mesin
pencari yang populer yakin, biasanya Google, akan mengambil website anda
dalam daftar mereka. Semakin tinggi anda muncul dalam daftar ini,
semakin banyak lalu lintas online anda cenderung untuk menerima dan
bisnis yang lebih dari anda harapkan.
Google melihat link internal untuk membantu menentukan apa permintaan
pencarian anda harus ditemukan. Link dalam navigasi anda cenderung
menjadi indikasi yang baik bagi crawler dan menggunakan tag Nav berarti
anda secara eksplisit mengatakan “ini adalah link yang paling penting
pada website” dan membantu bot untuk memahami apa situs anda adalah
sesuatu. Ini tidak berarti anda akan memerlukan untuk tidak menggunakan
tag Nav, tetapi anda harus berusaha untuk melakukan segala upaya untuk
membantu crawler mesin pencari dalam cara apapun yang anda bisa.
Headers and Footers
Tag ini cukup sederhana, tetapi melayani tujuan penting. Header dan
footer (“<header>” dan “<footer>” masing-masing) bekerja
dengan baik dengan SEO. Tag memisahkan header dan footer item dari copy
utama.
Header dan Footer keduanya berbeda dengan tag <div> sederhana,
dengan menjadi diidentifikasi sebagai sesuatu yang berbeda, mesin
pencari dapat membedakan informasi dari konten lainnya dan peringkat
website anda sesuai tag tag tersebut.
Video, Audio and Output
Multimedia menjadi semakin populer dengan pengguna dan pergi adalah
hari-hari di mana pengunjung hanya dapat mengkonsumsi informasi dengan
teks. Tags untuk video (“<video>”) dan audio (“<audio>”)
mudah untuk menerapkan dan HTML5 memungkinkan kustomisasi penuh dengan
JavaScript dan berbagai codec – sehingga anda dapat dengan mudah
mendapatkan konten yang bekerja dengan cara yang anda inginkan.
Dalam cara yang sama, menggunakan HTML5 output (“<output>”) tag
untuk kustomisasi yang lebih baik. Dengan keluaran untuk JavaScript,
anda dapat lebih nyaman mengedit dan mengubah apapun elemen JavaScript
yang Aanda miliki di halaman, dari pada mencoba untuk melakukannya
melalui HTML. Kedengarannya cukup sederhana dan itu benar-benar membuat
proses lebih mudah untuk menyelesaikan.
Menawarkan pengunjung anda pilihan dalam bagaimana mereka
mengkonsumsi konten anda adalah penting jika anda ingin semua jenis
konsumen. Bagi mereka yang suka artikel yang baik, ada tag article
(“<article>”).
Developer dapat menggunakan tag article untuk menandai
potongan-potongan individual konten seperti posting blog, mengurangi
kebutuhan untuk tag Div tak berujung. Selanjutnya memisahkan teks utama
dari sebuah situs web setelah header dan footer sebelum anda menggunakan
tag article berarti kode lebih jelas dan optimasi potensial untuk mesin
pencari.
Tag article ini mungkin salah satu tag yang paling membantu dalam hal
SEO. Meskipun tidak ada yang diatur sebelumnya, ada kemungkinan bahwa
crawler mesin pencari akan menggunakan tag ini untuk memahami konten di
situs anda dan berat dalam algoritma sesuai. Google mencintai konten dan
dengan membungkus teks dalam tag article, anda mengatakan Google bahwa
anda memiliki konten di situs, yang akan membantu situs anda untuk
peringkat lebih tinggi. Bisa juga bahwa kata kunci / jangkar teks dalam
tag Pasal akan dilakukan pembobotan lebih dari kata kunci di luar tag
Pasal seperti anda mengatakan bots mesin pencari anda telah menulis
konten spesifik tentang istilah pencarian. anda juga dapat membantu
usaha SEO anda dengan memberikan Judul artikel (“<title>”) atribut
untuk alasan yang sama.
Canvas
Digunakan untuk memasukkan berbagai grafis, tag kanvas
(“<canvas>”) adalah fitur yang lebih modern dari HTML 5. Hal ini
memungkinkan kustomisasi yang lebih besar dalam desain, sebagai tag
tertentu dapat membungkus mana grafis dimaksudkan, gambar atau grafik
pergi untuk membuat desain website yang lebih jelas dan kode anda jadi
tidak berantakan.
Figures and Captions
Kedua berjalan beriringan dan membuat proses yang panjang jauh lebih
pendek. Dengan menggunakan tag figure (“<figure>”) anda dapat
mengisolasi grafik atau gambar. Sebuah keterangan (“<figcaption>”)
tag kemudian dapat digunakan untuk menyediakan teks captioning untuk
angka tertentu. Hal ini membuat tugas menggabungkan teks yang relevan
dengan gambar jauh lebih mudah, karena tag keterangan membantu
menentukan mana judul harus (dekat gambar, jelas).
Anda juga dapat menggunakan tag dalam tujuan yang sama dengan header, footer, dan bagian artikel.
Details
Jika anda belum pernah mendengar tag ini, itu karena itu masih bukan
fitur pokok tetapi tetap menjadi lebih dan lebih umum. Singkatnya,
detail (“<details>”) memungkinkan untuk mudah drop down teks untuk
dimasukkan. Lihat contoh
disini.
Manfaat dari drop down text banyak. Mereka menyimpan halaman dan
melihat yang berantakan, sehingga anda dapat fokus pada hanya menjaga
informasi yang relevan pada halaman. Anda bahkan bisa menangkap berapa
banyak pengunjung mencari informasi lebih lanjut dengan beberapa
JavaScript dan menyesuaikan upaya pemasaran anda berdasarkan pada data.
Utilising CSS3
Cascading Style Sheets, atau CSS, adalah lembar
bahasa style yang dapat digunakan bersama HTML5. CSS2 saat ini digunakan
oleh World Wide Web Consortium ( dikenal sebagai W3C) – sebuah
organisasi yang memvalidasi yang terbaik dari apa kode yang digunakan
secara online. Snapshot stabil terbaru dalam perkembangan mereka dari
CSS adalah pada tahun 2010. Namun, W3C saat ini bekerja dengan
mengadopsi CSS3, dengan beberapa modul yang sudah disetujui.
CSS3 memungkinkan anda untuk lebih fokus pada sisi penyajian website,
meninggalkan HTML5 untuk struktur umum. CSS3 menawarkan keuntungan
terbaru dalam font, warna dan berbagai latar belakang dan fitur border.
Namun, perlu dicatat bahwa tidak semua browser yang kompatibel dengan
CSS3. Beberapa efektif dengan modul tertentu, sedangkan beberapa yang
tidak. Firefox, misalnya, saat ini tidak dapat mendukung refleksi.
Safari dan Chrome, di sisi lain, mendukung segala sesuatu kecuali
bergulir melimpah, sayangnya, tidak ada web browser utama saat menerima
modul ini.
Di bagian bawah skala, Internet Explorer mendukung modul sangat
sedikit, meskipun versi terbaru yang menunjukkan perbaikan dalam hal
ini. Berikut ini merupakan tabel rinci
browser support untuk CSS3.
Pseudo Class Selectors and Attributes
Penyeleksi Pseudo class dapat digunakan untuk menambahkan informasi
tambahan fitur untuk tag dan divisi. Mereka mudah dikenali karena mereka
didahului oleh titik. Hover, misalnya, adalah pemilih sederhana yang
dapat menambahkan teks layar ketika mouse melayang di atas sebuah tag
yang diberikan.
Pada CSS3, anda dapat menentukan root (“: root:”) elemen dalam
dokumen. Dalam HTML, ini selalu menjadi “<html>” tapi fitur ini
sekarang lebih sangat ditampilkan dalam CSS3. Selektor class tambahan di
CSS3 memungkinkan lebih besar pertandingan-kontrol antara siblings. Ini
datang dikombinasikan dengan fleksibilitas yang lebih besar yang
memungkinkan untuk fungsi-fungsi yang lebih besar antara unsur-unsur
terkait. Hal ini membuat seluruh proses lebih intuitif dan saling
terkait, sehingga membuat hasil keseluruhan jauh lebih mengesankan.
Demikian juga, penyeleksi atribut baru memberikan kontrol yang lebih
besar bit tertentu yang berbeda dari elemen anda. Anda dapat memeriksa
untuk pertandingan dengan unsur-unsur lain, atau menetapkan atribut
untuk menciptakan efek ini. Format berikut ini digunakan untuk memilih
atribut: “elemen [att ^ = val]“
Jadi contoh nyata bisa terlihat seperti:
Selector ini menemukan setiap paragraf (“<p>”) dengan judul
(“<title>”) atribut yang dimulai dengan (“^”) SEO (“” SEO “”) dan
perubahan warna teks menjadi biru (“color:blue;”)
Substring Matching Attribute Selectors
Saya telah menyinggung kekuatan CSS3 dengan pemilih substring atribut
yang sesuai dimulai dengan (“^”). Pada kenyataannya, anda dapat
memanfaatkan “berakhir dengan” substring pemilih (“$”) dan “berisi”
substring pemilih (“*”) untuk lebih mempersempit apa atribut yang anda
pilih untuk styling.
