Desain Halaman Web Menggunakan Kode Semantik HTML5

Penulis：Eve Cole Waktu Pembaruan：2025-03-27 06:00:02

Pertama, kami ingin mendeklarasikan dan membuat jenis dokumen, kami tidak lagi menggunakan html 4 atau xhtml 1.0 seperti publik -// w3c // dtd xhtml 1.0 transisi ..... Deklarasi, kami dapat menulis dengan cara ini:

 <! Doctypehtml>

Lihatlah, sederhana dan jelas, tidak sensitif. Itu membuatnya lebih mudah untuk menjadi terbelakang. Setidaknya itu bisa menghemat waktu dalam mengetik.

Kami sekarang telah menentukan jenis untuk dokumen HTML 5. Semuanya berjalan dengan baik sejauh ini. Sekarang, mari kita lihat tag baru untuk HTML5. Sebelum kita menelusuri tab baru, mari kita lihat bagaimana kita biasanya menulis:

 <Html>
 <head>
 ...lainnya...
 </head>
 <body>
 <Divid = header>
 <H1> CSS3-HTML5 HOME </h1>
 </div>
 <Divid = nav>
 <ul>
 <li> Rumah </li>
 <li> Tentang </li>
 <li> Kontak </li>
 </ul>
 </div>
 <Divid = Content>
 <h1> judul </h1>
 <p> ... </p>
 </div>
 <Divid = footer>
 <p> Informasi Hak Cipta </p>
 </div>
 </body>
 </html>

Menggunakan <div> dalam contoh di atas adalah praktik yang sangat umum sekarang. Tujuannya adalah ganda. Pertama, ini menyediakan ID identitas unik yang dapat diterapkan secara khusus untuk bab halaman web. Kedua, identifikasi adalah sebagai struktur primitif, semantik semantik. Nama ID di setiap situs web mungkin berbeda, jadi sulit bagi kita untuk memahami apa arti ID -ID itu.

<Header> Tag:

Tag <Header> setara dengan yang biasanya kita tentukan dengan <v id = header>. Jika situs web Anda masih didefinisikan seperti ini dengan <Div ID = Header>, kami sekarang dapat menggantinya dengan <Header>.

Tag <av>:

<av> adalah tag navigasi, seperti yang biasanya kita gunakan:

<ul>

<li> Indeks </li>

<li> Berita </li>

...

</ul>

</div>

Sekarang gunakan <av>:

 <av>
 <ul>
 <li> <ahref = index.html> home </a> </li>
 <li> <ahref =/tentang/tentang/tentang </a> </li>
 <li> <ahref =/blog/> blog </a> </li>
 </ul>
 </sav>

Tag <section>: Tag <section> dapat berupa kelompok konten atau grup topik, biasanya dengan tag start dan tag akhir. Tentu saja, tag ini juga bisa bersarang.

Tag <TARTERTIST>: Mungkin ada bagian konten di dalam tag <Artikel>.

Tag <footer>: Tag <footer>, jika Anda tidak mengatakannya, Anda dapat memahami untuk apa ini. Mungkin juga ada banyak, biasanya di bagian bawah situs web.

Mari kita lihat kode terakhir:

 <! Doctypehtml>
 <Html>
 <head>
 ...hal-hal...
 </head>
 <body>
 <Header>
 <h1> mysite </h1>
 </teader>
 <av>
 <ul>
 <li> Rumah </li>
 <li> Tentang </li>
 <li> Kontak </li>
 </ul>
 </sav>
 <section>
 <h1> myarticle </h1>
 <martikel>
 <p> ... </p>
 </artikel>
 </section>
 <footer>
 <p> ... </p>
 </footer>
 </body>
 </html>

Melalui kode, lebih ringkas dan lebih mudah dipahami, bukan?