Struktur kandungan HTML: panduan lengkap untuk membina halaman yang kukuh

Utama » Python » Struktur kandungan HTML: panduan lengkap untuk membina halaman yang kukuh

Mempelajari cara menstruktur kandungan dalam HTML ialah perbezaan antara halaman yang hanya "menunjukkan sesuatu pada skrin" dan halaman yang mudah dinavigasi, boleh diakses dan mesra SEO. Apabila HTML anda disusun dengan hierarki yang jelas, penyemak imbas, enjin carian dan teknologi bantuan serta-merta memahami maksud setiap bahagian dan cara semuanya sesuai bersama.

Daripada menganggap HTML sebagai cara untuk membuang teg pada halaman, ia membantu untuk melihatnya sebagai pelan tindakan dokumen anda. Dengan struktur yang kukuh anda mentakrifkan di mana kandungan utama anda berada, cara tajuk berkaitan, apakah itu navigasi, apakah itu maklumat sekunder dan bahagian mana yang menerangkan dokumen itu sendiri di kepala. Dalam panduan ini, kita akan mendalami struktur kandungan dalam HTML: daripada rangka global halaman, kepada tajuk, semantik, kebolehaksesan dan beberapa corak reka letak konkrit untuk halaman dunia sebenar.

1. Rangka global dokumen HTML

Setiap dokumen HTML bermula dengan struktur peringkat tinggi yang sama: doctype, html, head dan body. Ini mungkin kelihatan seperti boilerplate, tetapi setiap bahagian memainkan peranan penting dalam cara penyemak imbas menghuraikan dan memaparkan kandungan anda dan cara enjin carian mentafsir halaman anda.

Baris pertama ialah perisytiharan doctype, ditulis sebagai dalam HTML5. Arahan ini tidak menghasilkan output yang boleh dilihat; ia memberitahu penyemak imbas untuk menggunakan mod standard dan bukannya mod quirks, mengelakkan tingkah laku rendering warisan yang boleh memecahkan reka letak atau CSS anda sepenuhnya.

Sejurus selepas doctype muncul elemen akar , yang membungkus keseluruhan dokumen. Hampir segala-galanya—metadata dokumen dan halaman yang kelihatan—ada di dalam … . Di sini juga anda mengisytiharkan bahasa manusia dokumen dengan atribut lang, sebagai contoh untuk bahasa Inggeris atau untuk bahasa Sepanyol dari Sepanyol.

Mengisytiharkan bahasa dengan lang adalah penting untuk kebolehaksesan, SEO dan alatan terjemahan. Pembaca skrin menggunakannya untuk memilih peraturan sebutan yang betul, enjin carian dan penterjemah automatik menggunakannya untuk memahami bahasa utama, malah CSS boleh menyasarkan penggayaan khusus bahasa menggunakan pemilih seperti [lang|=”fr”] atau :lang(en).

Di dalam elemen html akar anda sentiasa mempunyai dua anak langsung: dan . Kepala mengandungi semua metadata dan sumber yang diperlukan untuk mentafsir dan mempersembahkan halaman (pengekodan, tajuk, CSS, ikon, URL berkanun, dll.), manakala badan mengandungi kandungan yang sebenarnya dilihat dan berinteraksi dengan pengguna dalam tetingkap penyemak imbas.

2. Apa yang terdapat dalam (dan mengapa ia penting)

Bahagian kepala tidak dapat dilihat oleh pelawat yang kelihatan, tetapi ia sangat penting untuk tingkah laku, prestasi dan kedudukan tapak anda. Maklumat yang anda letakkan di sini memandu enjin carian, platform sosial, penyemak imbas dan peranti tentang cara mengendalikan dan membentangkan halaman anda.

Salah satu perkara pertama di dalam hendaklah menggunakan pengisytiharan pengekodan aksara . UTF‑8 ialah standard untuk HTML5, menyokong hampir setiap aksara dan emoji serta memastikan tajuk, teks, CSS dan JavaScript anda ditafsirkan dengan betul tanpa mengira bahasa atau simbol yang anda gunakan.

Setiap halaman juga mesti menentukan yang unik dan deskriptif unsur. Kandungan di dalam … muncul dalam tab penyemak imbas, penanda halaman, sejarah penyemak imbas dan, yang paling penting, sebagai tajuk utama yang boleh diklik dalam halaman hasil enjin carian melainkan ditimpa oleh teg meta tertentu. Dari sudut SEO, ini adalah salah satu daripada potongan teks bernilai tertinggi dalam dokumen anda.

Satu lagi elemen meta yang hampir wajib dalam susun atur moden ialah perisytiharan viewport. menggunakan anda memberitahu penyemak imbas mudah alih untuk mengukur reka letak kepada lebar peranti dan bukannya mengecilkan reka bentuk desktop menjadi skrin kecil, yang penting untuk reka bentuk responsif dan untuk lulus audit mudah alih dan kebolehaksesan asas.

Di luar set charset, tajuk dan port pandangan, kepala adalah tempat anda menentukan kebanyakan metadata, gaya dan pautan utama anda. Ini termasuk perihalan meta berorientasikan SEO, fail CSS, ikon tapak, versi bahasa ganti, URL kanonik, manifes web, prasambung dan banyak lagi. Kesemua bahagian ini menyumbang secara tidak langsung kepada cara struktur kandungan anda difahami dan rasa tapak anda boleh digunakan.

Metadata penting dan sumber struktur

CSS biasanya disambungkan di dalam menggunakan . Lembaran gaya luaran memastikan pembentangan berasingan daripada struktur, boleh dicache merentas halaman untuk prestasi yang lebih baik dan membantu mengekalkan satu sumber kebenaran untuk sistem reka bentuk anda.

Anda juga boleh memasukkan CSS dalam a block within , or even import additional stylesheets from there. Sebagai contoh, pembangun kadangkala menggunakan @import di dalam teg gaya untuk meletakkan helaian gaya ke dalam lapisan lata tertentu atau mengisytiharkan sifat tersuai CSS (pembolehubah) pada peringkat :root sebelum merujuknya ke seluruh tapak.

The elemen berfungsi lebih banyak tujuan daripada hanya helaian gaya. Dengan menukar atribut rel, anda boleh menunjuk ke favicon dengan rel=”icon”, tentukan versi bahasa ganti dengan rel=”alternate” dan hreflang, tentukan URL kanonik dengan rel=”canonical”, atau manifes apl rujukan dan pelayar dan perangkak perhubungan lain yang perlu ketahui.

Mentakrifkan ikon dengan memastikan jenama anda dikenali dalam tab penyemak imbas dan penanda halaman. Anda boleh menentukan saiz atau jenis yang berbeza (seperti PNG atau SVG), malah menyediakan ikon khas untuk platform seperti iOS dengan ikon rel="apple-touch-icon" atau topeng untuk tab yang disematkan dalam Safari.

Pautan alternatif adalah penting untuk persediaan berbilang bahasa atau pensindiketan kandungan. Apabila anda menggunakan , sebagai contoh, anda memberitahu enjin carian bahawa versi Perancis halaman yang sama wujud dan gabungan bahasa/rantau yang disasarkannya. Begitu juga, pautan ganti boleh menghala ke suapan RSS atau varian PDF jika anda menentukan jenis yang sesuai.

URL kanonik, skrip dan yang jarang digunakan

Pautan kanonik dengan rel="canonical" membantu menyelesaikan situasi kandungan pendua dengan menunjukkan URL mana yang merupakan sumber berwibawa. Jika artikel yang sama wujud di berbilang laluan, atau disiarkan silang pada domain lain, URL berkanun menyatukan isyarat kedudukan dan mengelakkan enjin carian meneka versi yang hendak diindeks.

JavaScript dilampirkan menggunakan element, which can either embed inline code or reference an external file through the src attribute. Oleh kerana JavaScript menyekat pemaparan secara lalai, banyak pembangun meletakkan teg skrip di hujung kandungan atau menggunakan atribut tangguh atau async supaya kandungan HTML boleh dipaparkan sebelum skrip dilaksanakan.

Atribut tangguh memberitahu penyemak imbas untuk memuat turun skrip tanpa menyekat pemaparan dan melaksanakannya selepas HTML dihuraikan sepenuhnya. Sebaliknya, async juga mengelak daripada menyekat semasa muat turun tetapi menjalankan skrip sebaik sahaja ia bersedia, berpotensi mengganggu aliran parse, yang boleh menjadi masalah apabila skrip bergantung pada elemen DOM yang ditakrifkan kemudian dalam dokumen.

The elemen, yang hanya muncul di kepala, mentakrifkan URL asas dan sasaran lalai untuk semua pautan relatif. Dengan menetapkan anda memberitahu penyemak imbas dengan berkesan bahawa setiap URL relatif pada halaman harus diselesaikan daripada akar tersebut dan, secara pilihan, dibuka dalam konteks penyemakan imbas tertentu seperti tetingkap baharu atau bingkai peringkat atas.

Walaupun boleh menjadi hebat, ia mempunyai kesan sampingan, terutamanya untuk sauh dalam halaman dan laluan sumber relatif. Hanya satu elemen asas dibenarkan bagi setiap dokumen, ia mesti muncul sebelum mana-mana URL relatif, dan ia mengubah sauh mudah seperti permintaan URL penuh dengan serpihan yang dilampirkan pada href asas.

3. Lapisan kandungan yang boleh dilihat: dan susun atur semantik

Semua pengguna sebenarnya melihat dan berinteraksi dengan kehidupan di dalam unsur. Di sinilah anda menyusun kandungan anda dengan elemen semantik yang menerangkan peranan setiap bahagian halaman: navigasi, kandungan utama, artikel, bar sisi, pengaki dan banyak lagi.

HTML5 memperkenalkan satu set elemen susun atur semantik yang menggantikan generik bekas dalam banyak situasi. Elemen seperti , , , , , dan huraikan makna dan bukannya penampilan semata-mata, yang membantu teknologi bantuan dan enjin carian membina peta mental halaman anda.

biasanya mengandungi kandungan pengenalan atau navigasi untuk halaman atau untuk bahagian tertentu. Ini mungkin termasuk logo, tajuk tapak, menu utama atau tajuk wira. Anda boleh mempunyai pengepala peringkat halaman berhampiran bahagian atas kandungan dan pengepala tambahan di dalam bahagian atau artikel apabila anda memerlukan sub-pengenalan.

didedikasikan untuk blok navigasi dan biasanya digunakan untuk menu utama atau kumpulan pautan penting. Anda mungkin meletakkan navigasi utama di dalam pengepala, tetapi nav juga boleh muncul di tempat lain, contohnya dalam bar sisi atau pengaki, selagi ia digunakan untuk navigasi dan bukan koleksi generik pautan yang tidak berkaitan.

menandakan kandungan utama halaman yang unik dan sepatutnya muncul sekali sahaja bagi setiap dokumen. Di dalam utama anda biasanya akan menyusun kandungan anda menggunakan untuk blok tematik, untuk karya bebas seperti catatan blog atau item berita, dan untuk maklumat berkaitan tetapi sekunder seperti nota sampingan, iklan atau navigasi pelengkap.

Bahagian, artikel, sisi dan pengaki

mewakili blok kandungan yang berbeza secara tema, biasanya dengan tajuknya sendiri. Ini boleh menjadi bab dalam artikel yang panjang, blok "Ciri" pada halaman produk atau sebahagian daripada halaman utama anda seperti "Testimoni" atau "Harga". Bahagian membantu memecahkan dokumen yang kompleks kepada bahagian logik.

digunakan untuk kandungan serba lengkap yang boleh berdiri sendiri di luar konteks sekeliling. Contohnya termasuk catatan blog, entri dokumentasi, ulasan pengguna, cerita berita atau mesej forum. Artikel selalunya termasuk pengepalanya sendiri (dengan tajuk, pengarang dan tarikh) dan pengaki (dengan teg, kongsi pautan atau metadata).

dikhaskan untuk kandungan yang berkaitan secara tangensial dengan aliran utama, seperti bar sisi, petikan tarik, pautan berkaitan atau blok pengiklanan. Oleh kerana tujuannya adalah tambahan, pembaca skrin dan alatan lain boleh merawatnya dengan sewajarnya, dan pengguna boleh dengan lebih mudah membezakan naratif teras daripada tambahan sekunder.

muncul di penghujung bahagian atau di bahagian bawah keseluruhan halaman. Pengaki peringkat halaman biasanya mengandungi notis hak cipta, maklumat hubungan, navigasi sekunder, pautan undang-undang atau kredit tapak, manakala pengaki peringkat artikel mungkin mengandungi bios pengarang, kategori, tarikh kemas kini atau siaran berkaitan.

Fleksibiliti unsur-unsur ini bermakna anda boleh mencampur dan menyarangkannya supaya sepadan dengan reka bentuk anda, tetapi berpegang pada maksud yang dimaksudkan memastikan HTML anda mudah alih dan mudah difahami. Sebagai contoh, anda boleh meletakkan nav secara sah di dalam pengepala atau di tempat lain dalam badan, tetapi anda tidak boleh menggunakan nav untuk set rawak pautan yang bukan sebahagian daripada navigasi, atau menggunakan utama berbilang kali setiap halaman.

4. Hierarki tajuk dan struktur teks

Tajuk ialah tulang belakang struktur kandungan anda, mentakrifkan hierarki topik dan subtopik di seluruh dokumen. HTML menyediakan enam peringkat tajuk, daripada (paling penting) hingga ke (paling penting), dan cara anda menyusunnya mempengaruhi pembaca manusia dan enjin carian.

Biasanya terdapat satu yang menyatakan subjek utama halaman, diikuti dengan untuk bahagian primer dan - untuk subseksyen yang lebih mendalam. Apabila dua tajuk berkongsi tahap yang sama, ia mewakili bahagian adik-beradik, manakala tajuk peringkat rendah memperkenalkan subseksyen bersarang dalam peringkat lebih tinggi sebelumnya.

Perenggan dan kandungan lain yang mengikuti tajuk tergolong dalam bahagian yang ditakrifkan oleh tajuk tersebut. Apabila tajuk baharu pada tahap yang sama muncul, bahagian sebelumnya dianggap tertutup dan bahagian baharu bermula. Struktur tersirat inilah yang digunakan oleh teknologi bantuan untuk membina garis besar yang boleh dilalui oleh pengguna dengan cepat.

Melangkau tahap dengan sewenang-wenangnya—seperti melompat dari h1 terus ke h4—boleh mengelirukan kedua-dua alatan automatik dan pembaca. Pengesyoran umum adalah untuk bergerak langkah demi langkah dalam hierarki: dari h1 ke h2 untuk subseksyen, kemudian secara pilihan kepada h3, dan seterusnya, hanya menurun satu tahap pada satu masa apabila kandungan bersarang lebih dalam.

Penyemak imbas biasanya menggunakan gaya lalai pada tajuk: saiz fon yang lebih besar, berat tebal dan jarak menegak tambahan. Gaya terbina dalam ini sudah menjadikan struktur kelihatan jelas, tetapi anda boleh memperhalusi pembentangan dengan CSS sambil mengekalkan hierarki semantik yang mendasari utuh.

Perenggan, senarai dan semantik sebaris

Kandungan teks biasa masuk ke dalam elemen, setiap satu mewakili perenggan yang berasingan. Mengekalkan satu idea utama setiap perenggan meningkatkan kebolehbacaan dan selaras dengan cara teknologi bantuan membolehkan pengguna menavigasi melalui blok teks.

Senarai tersusun ( ) dan senarai tidak tertib ( ) dengan item sesuai untuk maklumat berkumpulan seperti langkah, ciri atau Soalan Lazim. Senarai tersusun menyampaikan urutan atau keutamaan, manakala senarai tidak tersusun hanya mengumpulkan item berkaitan tanpa menyiratkan pesanan; kedua-duanya sangat membantu untuk menstrukturkan penjelasan yang kompleks.

Elemen sebaris seperti , , dan lain-lain memperkayakan kandungan tanpa melanggar aliran perenggan. menyampaikan kepentingan yang kuat (dan biasanya kelihatan tebal), menekankan teks (selalunya condong) dan mencipta hiperpautan yang menghubungkan dokumen merentas tapak anda atau ke sumber luaran.

Imej dengan dianggap sebagai elemen yang diganti dan tidak membalut kandungan, tetapi mereka masih mengambil bahagian dalam struktur semantik melalui atribut seperti alt. Atribut alt amat penting untuk kebolehaksesan dan SEO, kerana ia menerangkan imej kepada pengguna yang tidak dapat melihatnya dan kepada enjin carian yang hanya menghuraikan teks.

Menggabungkan elemen peringkat blok dan sebaris dengan teliti membolehkan anda menyatakan hierarki, perhubungan dan penekanan semata-mata melalui HTML, meninggalkan butiran visual seperti warna, fon dan jarak kepada CSS. Pengasingan kebimbangan ini memastikan markup anda bersih dan menjadikan perubahan reka bentuk lebih mudah di kemudian hari.

5. Kebolehcapaian dan bahasa dalam struktur kandungan

Dokumen HTML yang tersusun dengan baik bukan hanya tentang kelihatan kemas; ia adalah prasyarat untuk kebolehcapaian. Orang yang bergantung pada pembaca skrin, navigasi papan kekunci atau teknologi bantuan lain bergantung pada semantik HTML anda untuk memahami dan bergerak melalui kandungan dengan cekap.

Mengisytiharkan bahasa dokumen dengan lang pada elemen ialah salah satu langkah kebolehcapaian pertama. Apabila bahasa itu eksplisit, pembaca skrin memilih sebutan dan kamus yang betul, dan alat terjemahan automatik mengendalikan kandungan anda dengan lebih tepat merentas wilayah dan dialek.

Anda juga boleh menandakan perubahan bahasa di dalam badan menggunakan lang pada elemen seperti atau . Apabila serpihan bertukar kepada bahasa lain, tetapkan lang=”fr-CA” atau lang=”pt-BR” pada coretan itu memberi isyarat kepada alat bantu yang peraturan sebutan dan bacaan harus berubah hanya untuk bahagian itu.

Di luar bahasa, tajuk, tanda tempat dan teks alternatif membentuk teras struktur yang boleh diakses. Hierarki tajuk yang jelas, penggunaan utama, navigasi, pengepala, pengaki, bahagian dan tepi yang betul, serta atribut alt yang bermakna pada imej, membolehkan teknologi bantuan membina garis besar dan menyediakan navigasi mercu tanda seperti "lompat ke kandungan utama" atau "pergi ke navigasi".

Penggayaan warna dan visual sahaja tidak boleh menjadi satu-satunya cara untuk menyampaikan maklumat penting. Kontras tinggi, saiz fon boleh dibaca, keadaan fokus untuk elemen interaktif dan teks pautan deskriptif seperti "Baca lebih lanjut tentang pencegahan kebakaran" dan bukannya "Klik di sini" semuanya adalah sebahagian daripada menjadikan kandungan berstruktur anda boleh digunakan untuk seberapa ramai orang yang mungkin.

Mengesahkan HTML anda dan menjalankan semakan kebolehaksesan menggunakan alat automatik dan ujian manual membantu mendedahkan isu struktur lebih awal. Alat boleh mengesan atribut alt yang tiada, sarang yang tidak sah, urutan tajuk yang rosak atau penggunaan tanda tempat yang salah, semuanya boleh dibetulkan terus dalam penanda anda sebelum ia memberi kesan kepada pengguna sebenar.

6. Merancang struktur kandungan laman web

Sebelum anda menulis satu teg, anda perlu merancang struktur logik tapak dan halaman anda. Berfikir dari segi bahagian, keutamaan maklumat dan aliran navigasi membawa kepada HTML yang lebih mudah untuk diselenggara, dikembangkan dan dioptimumkan untuk enjin carian.

Titik permulaan yang biasa ialah melakar peta tapak atau gambar rajah struktur tapak web. Ini biasanya termasuk halaman peringkat teratas seperti Laman Utama, Perihal, Perkhidmatan, Blog, Kenalan, dan kemudian mana-mana subhalaman atau kategori yang bercabang daripada halaman tersebut, menunjukkan cara pengguna akan menavigasi antara mereka.

Dalam satu halaman, anda boleh memetakan struktur HTML masa depan anda sebagai satu siri blok semantik. Sebagai contoh, anda mungkin mentakrifkan pengepala dengan logo dan navigasi, kawasan utama dengan beberapa bahagian (wira, ciri, testimoni, harga), bahagian tambahan untuk kandungan sekunder dan pengaki yang mengandungi maklumat hubungan dan pautan undang-undang.

Menetapkan tajuk pada blok tersebut lebih awal memastikan hierarki h1-h6 anda koheren. Anda memutuskan terlebih dahulu apakah h1 tunggal itu, bahagian mana yang layak mendapat tajuk h2, dan subtajuk yang lebih mendalam seperti h3 atau h4 diperlukan untuk menerangkan topik yang rumit tanpa membebankan pembaca.

Dari perspektif SEO dan UX, adalah bijak untuk meletakkan kandungan utama dan bahagian penting lebih awal dalam DOM. Enjin carian biasanya memberi lebih perhatian kepada kandungan berhampiran bahagian atas dokumen dan pengguna menghargai mencari maklumat utama dengan cepat daripada menatal melepasi intro panjang atau elemen hiasan.

Amalan terbaik untuk struktur HTML yang boleh diselenggara

Gunakan nama dan ID kelas deskriptif untuk melabel elemen struktur apabila perlu, tetapi elakkan div bersarang berlebihan. Kelas seperti .main-nav, .site-header atau .sidebar memberitahu anda sepintas lalu perkara yang dilakukan oleh komponen, menjadikan HTML dan CSS anda lebih mudah dibaca beberapa bulan kemudian.

Pastikan HTML anda serata mungkin sambil tetap menyatakan hierarki tulen. Bekas bersarang dalam yang wujud hanya untuk penggayaan selalunya boleh digantikan dengan CSS yang lebih bijak, menghasilkan penanda yang lebih bersih dan ringan yang lebih mudah untuk digunakan oleh semua orang.

Himpunkan kandungan berkaitan di dalam elemen semantik dan bukannya menyebarkannya ke seluruh halaman. Sebagai contoh, catatan blog harus berada di dalam artikel, dengan tajuk, tarikh, pengarang dan kandungannya bersama-sama, manakala catatan yang berkaitan atau bio pengarang boleh disimpan di tepi atau dalam pengaki artikel, dipisahkan dengan jelas daripada naratif utama.

Lawati semula struktur anda setiap kali anda memanjangkan halaman atau mereka bentuk semula bahagian. Dokumen HTML mudah untuk mengumpul pembalut sekali sahaja dan elemen ad-hoc dari semasa ke semasa, jadi memfaktorkannya semula secara berkala ke dalam bentuk semantik yang koheren membuahkan hasil dalam kebolehselenggaraan, prestasi dan kebolehaksesan.

Mendokumentasikan corak struktur anda—seperti cara anda membina pengepala, bahagian, artikel dan pengaki—membantu memastikan pasukan yang besar konsisten. Garis panduan dalaman kecil yang menerangkan elemen yang hendak digunakan untuk navigasi, cara menyusun tajuk dan cara menanda komponen berulang boleh menghalang pangkalan kod anda daripada bertukar menjadi tampalan struktur.

7. Corak struktur praktikal untuk jenis halaman biasa

Jenis halaman yang berbeza cenderung untuk berkongsi corak struktur yang boleh anda gunakan semula dan sesuaikan merentas projek. Mengenali corak ini akan membantu anda mereka bentuk struktur kandungan yang dirasakan semula jadi kepada pengguna dan mudah untuk dilaksanakan dalam HTML.

Halaman utama biasa mungkin bermula dengan global mengandungi logo dan primer . Ini sering diikuti oleh a dengan berbilang blok: bahagian wira dengan h1 dan seruan tindak, bahagian ciri, mungkin bahagian untuk testimoni dan bahagian akhir yang menjemput pengguna untuk berhubung atau mendaftar.

Di bawah kandungan utama, a biasanya menyediakan maklumat global dan navigasi tambahan. Pautan kepada dasar privasi, syarat perkhidmatan, pilihan hubungan, rangkaian sosial dan menu sekunder ada di sini, menjadikannya mudah dicari tanpa mengalihkan perhatian daripada kandungan utama di atas.

Halaman catatan blog adalah calon yang sempurna untuk unsur. Artikel itu biasanya mengandungi pengepalanya sendiri dengan tajuk siaran (selalunya h1 halaman), tarikh penerbitan dan butiran pengarang, diikuti dengan badan siaran, dipecahkan kepada bahagian dengan tajuk h2/h3, dan akhirnya pengaki artikel yang mengandungi tag, butang kongsi atau pautan kandungan yang berkaitan.

Bar sisi atau panel sekunder secara semula jadi diwakili oleh elemen. Ia mungkin termasuk senarai siaran terbaharu, penapis kategori, borang pendaftaran surat berita atau bantuan kontekstual. Oleh kerana diketepikan secara semantik ditandakan sebagai kandungan pelengkap, teknologi bantuan boleh membentangkannya sedemikian kepada pengguna.

Halaman hubungan dan halaman perkhidmatan menggunakan semula blok binaan yang sama tetapi menekankan kejelasan dan kemudahan interaksi. Tajuk yang jelas, perenggan ringkas, kawalan borang yang dilabelkan dengan betul dan susunan bacaan yang logik memastikan pengguna dapat mencari cara untuk menghubungi anda atau memahami tawaran anda tanpa meneka.

8. Elemen HTML, atribut dan peranannya dalam struktur

Di bawah semua corak ini, segala-galanya dalam HTML bermuara kepada elemen, tag dan atribut. Memahami cara ia berfungsi bersama memberi anda kawalan terperinci ke atas struktur kandungan, cangkuk pembentangan dan gelagat anda.

Elemen HTML terdiri daripada teg pembuka, atribut pilihan, sesetengah kandungan dan, dalam kebanyakan kes, teg penutup. Sebagai contoh, Ini adalah perenggan. termasuk tag permulaan , nod teks dan teg akhir , yang kesemuanya bersama-sama mewakili elemen perenggan.

Atribut muncul di dalam teg pembuka dan memberikan maklumat tambahan tentang elemen. Ia datang sebagai pasangan name="value", seperti class="highlight", id="intro" atau href="/contact". Sesetengah atribut adalah global dan boleh muncul pada mana-mana elemen (seperti kelas, id, lang), manakala yang lain adalah khusus untuk teg tertentu (seperti src untuk img atau jenis untuk input).

Kelas amat penting untuk menstruktur dan menggayakan dokumen yang lebih besar. Dengan memperuntukkan kelas yang sama kepada berbilang elemen—katakan, class=”penting”—anda boleh menggunakan peraturan CSS biasa atau menyasarkannya dalam JavaScript, memastikan struktur anda fleksibel sementara masih boleh diurus.

Tidak semua elemen memerlukan tag penutup; ada yang merupakan unsur kosong (kosong) yang tidak mempunyai kandungan. Elemen seperti , , dan termasuk dalam kategori ini. Mereka masih mengambil bahagian dalam struktur anda, tetapi hanya melalui atribut mereka, kerana mereka tidak membungkus sebarang teks dalaman atau kanak-kanak.

World Wide Web Consortium (W3C) mengekalkan spesifikasi yang mentakrifkan cara semua elemen dan atribut ini berfungsi bersama. Mengikuti piawaian tersebut memastikan halaman anda saling beroperasi merentas penyemak imbas dan peranti, dan memastikan struktur kandungan anda yang direka bentuk dengan teliti berkelakuan boleh diramal untuk setiap pelawat.

Mengamalkan semua ini bermakna menganggap HTML sebagai tulang belakang semantik tapak anda: garis besar dokumen yang jelas, penggunaan tajuk yang tepat, reka letak yang bernas dengan utama, bahagian, artikel, tepi dan pengaki, metadata boleh diakses di kepala dan atribut bermakna pada setiap elemen secara kolektif menjadikan kandungan anda lebih mudah dibaca, dinavigasi dan diberi kedudukan yang baik dalam enjin carian.