A Look Into Semantic HTML5 yang Sempurna

Jika anda merancang dengan teliti struktur dokumen HTML anda, anda boleh membantu komputer memahami makna kandungan anda. Sintaks yang betul adalah pasti, tetapi pada asasnya hanya menyediakan parser, enjin carian, dan techonologies bantuan dengan sekumpulan data yang tidak bermakna.

Sekiranya anda meningkatkan aliran kerja hadapan anda dengan memperhatikan semantik, anda boleh mencipta kandungan berkualiti tinggi yang menarik lebih ramai pelawat. Semantik adalah belajar makna, dalam konteks yang lebih luas itu cawangan logik dan linguistik.

Dalam dunia pembangunan web kita bercakap tentang kandungan semantik apabila komputer memahami struktur dokumen, dan peranan unsur-unsur di dalamnya. Sekiranya kita ingin mewujudkan semantik yang betul, kita perlu mendalam memahami strukturnya kandungan kami dan kemampuan teknologi frontend.

Jadi apa faedah ketara? Semantik yang betul bermakna a lebih banyak kandungan yang boleh dicari yang membawa kepada a kedudukan enjin carian yang lebih baik. Kami juga meningkatkan aksesibiliti, seperti teknologi bantuan seperti pembaca skrin lebih baik boleh mentafsirkan makna kandungan kami.

Terdapat banyak teknik pembangunan front-end yang membolehkan pemaju mencapai struktur halaman semantik. Siaran ini akan memberikan anda intro ringkas ke tag HTML semantik dan konsep garis besar dokumen.

Tags HTML Semantik dan Bukan Semantik

Konsep semantik tidak sama seperti yang baru muncul, ia wujud sebelum era HTML5. Istilah web semantik dicipta seawal 2001 oleh Sir Tim Berners-Lee. Di bawah “web semantik” dia bermaksud web data yang boleh diproses oleh mesin.

Ini terutamanya bermakna bahawa elemen HTML yang berasingan perlu mempunyai peranan struktur yang boleh dibezakan. Mengikut definisi W3C “elemen semantik jelas menerangkan maksudnya kepada penyemak imbas dan pemaju”.

Unsur Semantik Sebelum HTML5

Unsur-unsur semantik telah wujud sebelum HTML5 juga, dalam kebanyakan kes pemaju tidak menyedarinya beberapa tag yang mereka gunakan sebenarnya adalah semantik. Fikirkanlah

atau tag.

Peranan mereka jelas bagi kami dan ejen pengguna:

hanya mengandungi satu bentuk, sama seperti mengandungi imej. Tiada siapa yang akan meletakkan meja atau tajuk di dalam dan tag (atau sekurang-kurangnya mari berharap demikian).

The

elemen, dan tag berkaitannya seperti baris jadual, sel jadual, dan lain-lain juga tag semantik yang ada sebelum HTML5, namun disebabkan tata letak berdasarkan tabel yang banyak digunakan selama bertahun-tahun, kebanyakan pemaju tidak menggunakannya dalam cara semantik. Ini membawa kepada web yang mengorbankan struktur logik untuk susun atur.

Mengarahkan dan senarai tidak teratur, perenggan, tag tajuk h1-h6 adalah semua elemen semantik yang mendahului HTML5.

Elemen Bukan Semantik

Unsur non-semantik tidak mempunyai makna yang istimewa, hubungan hierchical antara mereka hanyalah ilusi. Contoh yang paling banyak digunakan dalam tag HTML bukan semantik ialah

dan juga tag.

Jika laman web anda pernah menangkap penyakit dahsyat divitis, anda tahu apa yang saya cakap. Yep. Divs tidak semestinya salah, tetapi divitis perlu berjuang jika kita mahu menulis kod HTML yang boleh dipelihara, modular dan bermakna.

Majalah Smashing dengan indah menerangkan apa masalah sebenar dengan penggunaan yang berlebihan dan tidak munasabah

tag. Intipati adalah bahawa jika kita termasuk div di dalam div, ia kelihatan seolah-olah div luar akan menjadi elemen induk dalam batin, sementara pada hakikatnya ini tidak berlaku.

Tiada hubungan antara keduanya, sama seperti dalam kes tag yang berfungsi dengan cara yang sama, hanya pada tahap sebaris.

Jangan panik sekiranya anda masih terikat

-s dan -s walaupun, sebagai anda tidak perlu menyusutnya sepenuhnya. Mereka masih merupakan pilihan terbaik untuk mengumpul kandungan semata-mata untuk tujuan gaya dan dalam kes-kes yang lain.

Teks Semantik dalam HTML5

HTML5 memperkenalkan banyak unsur semantik baru yang memudahkan organisasi kandungan mudah. Mereka bukan sahaja membantu anda menyusun kandungan pada tahap keseluruhan dokumen (lihat butiran dalam bahagian seterusnya), tetapi juga di dalam blok teks, sebagai teg sebaris.

Mungkin tag semantik teks yang paling popular adalah dan , tetapi mereka juga wujud sebelum HTML5. Antara elemen semantik inline yang baru boleh dijumpai contohnya , tag untuk tarikh yang boleh dibaca manusia, dan untuk teks yang diserlahkan.

Lihat senarai ini untuk semua elemen semantik peringkat teks yang sedang digunakan.

Garisan Dokumen dalam HTML5

Garis besar dokumen adalah struktur dokumen HTML. Ia menunjukkan bagaimana elemen berkaitan dengan satu sama lain. Garis besar dokumen telah dihasilkan semata-mata oleh unsur-unsur pemetaan, seperti tajuk, tajuk jadual, tajuk bentuk, dan lain-lain dalam HTML versi terdahulu seperti HTML4.01 dan XHTML.

Dalam HTML5 algoritma menggariskan telah dipertingkatkan oleh elemen seksyen baru, iaitu:

untuk bahagian dikelompokkan di sekitar tema tertentu
untuk komposisi lengkap atau serba lengkap seperti postingan blog atau widget
untuk blok navigasi
untuk kandungan pelengkap seperti sidebars.

Terdapat elemen seksyen kelima dalam HTML5, tetapi bukan baru, itu sahaja tag. The

dan tag juga baru, tetapi mereka tidak menghasilkan bahagian baru dalam dokumen, mereka membahagikan kandungan di dalam bahagian. Ini bermakna itu setiap elemen seksyen (badan, artikel, seksyen, nav dan sebagainya) boleh mempunyai header dan footer sendiri.

Tips Untuk Sematan Kandungan Berstruktur

Sekiranya kita ingin membuat garis panduan dokumen yang berstruktur, kita perlu memberi perhatian kepada peraturan berikut:

1. Unsur seksyen terluar adalah sentiasa tag.

2. Seksyen dalam HTML5 boleh bersarang.

3. Setiap bahagian mempunyai hierarki tajuknya sendiri. Setiap daripada mereka (walaupun bahagian bersarang paling dalam) boleh mempunyai h1 tag.

4. Walaupun garis besar dokumen ditakrifkan terutamanya oleh 5 elemen seksyen, ia juga memerlukan tajuk yang sesuai untuk setiap bahagian.

5. Ia sentiasa menjadi elemen tajuk pertama (biarkan ia h1 atau tag tajuk yang lebih rendah) yang mentakrifkan tajuk bahagian yang diberikan. Tag tajuk berikut di dalam bahagian yang sama perlu relatif kepada perkara ini. (Jika tajuk pertama adalah h3 di dalam elemen seksyen, jangan letak h3 selepas itu.)

6. Bahagian yang ditakrifkan oleh

, dan juga tag tidak tergolong dalam garisan utama dokumen HTML, mereka biasanya tidak diberikan pada mulanya oleh teknologi bantuan.

7. Setiap bahagian (badan, seksyen, artikel, selain, nav) boleh mempunyai mereka sendiri

dan tag, yang mentakrifkan tajuk (seperti logo, nama penulis, tarikh, maklumat meta, dan lain-lain) dan footer (hak cipta, nota, pautan, dll.) bahagian itu.

Contoh: Garis Besar Semantik

Mari lihat contoh untuk garis besar dokumen semantik untuk melihat lebih jelas bagaimana ia berfungsi. Kod contoh kami akan menghasilkan struktur dokumen berikut:

Dan inilah kod yang mengandungi seksyen semantik yang betul:

   Selamat Datang Di Laman Web Kami!
 Inilah logo dan slogan kita.
 
   Pilih Faedah Anda
 
  Menu 1
 Menu 2
 Menu 3
 
 
   Tajuk Artikel
 Tajuk Artikel
 
  Bahagian Logik Pertama (cth. "Teori")
 Perenggan 1 di bahagian pertama
 Beberapa Subzero Lain dalam Bahagian Pertama
 Perenggan 2 di bahagian pertama
 
  Bahagian Logik Kedua (mis. "Amalan")
 Perenggan 1 dalam seksyen kedua
 Perenggan 2 di bahagian kedua
 
  Pengarang Bio
 Perenggan dalam Footer Perkara
 
 
  Dapatkan Tahu Kami Lebih Baik
  Post Popular
 ... 
 
  Rakan kongsi
 ... 
 
  Testimoni
 ... 
 
 
   hak cipta
 Pautan Media Sosial

Sekiranya anda melihat potongan kod di atas, anda akan melihat bahawa tajuk dan pengaki adalah pilihan, kami bebas memilih jika kami mahu menggunakannya atau tidak, tetapi ia sangat disyorkan untuk sentiasa memasukkan tajuk untuk setiap bahagian, sebaliknya bahagian itu akan menjadi “Tidak bertajuk” dalam garis besar dokumen.

Nasib baik terdapat banyak alat hebat di seluruh internet yang membolehkan kita menyemak garis besar dokumen, kali ini kita akan menggunakan alat Outliner html5.org.

Jika kami memasukkan coretan kod kami ke dalam bentuk yang disediakan oleh pihak luar, dan klik “Gariskan ini!” butang, kita akan melihat hasil berikut:

Ini adalah garuk dokumen kod sampel kami, ini adalah bagaimana enjin carian melihatnya, dan pembaca skrin membacanya kepada pengguna cacat penglihatan mereka. Ia semantik, berstruktur, dan tidak ada yang jahat “Tidak bertajuk” bahagian di dalamnya.

Jika anda ingin melihat bagaimana bahagian Untitled kelihatan seperti di Outliner hanya memadamkan beberapa teg tajuk dalam kod contoh.

Aspek Semantik Web lain

Tag HTML Semantik dan garis besar dokumen hanya sebahagian kecil daripada semantik web. Kandungan laman web boleh dibuat lebih bermakna dengan bantuan protokol kebolehaksesan WAI-ARIA, dan data berstruktur yang boleh digunakan bersama dengan protokol RDFa, microdata, atau markup JSON-LD.

A Look Into Animated Graphics Vector Scalable (SVG) Animation

A Look into Graphics Vector Scalable (SVG)

A Look Into Plugin WordPress Premium