Struktur dokumen organisasi HTML5

Bagian dokumen, bagian tubuh, berisi konten yang dapat dilihat pengunjung. Dokumen HTML tradisional biasanya mengatur struktur dokumen melalui elemen div, dan ditambah dengan tabel gaya yang sesuai. Namun, masalah div adalah informasi semantik. Terutama jika struktur jaringan halaman HTML tidak baik, itu akan dengan mudah menyebabkan kebingungan. Dalam hal ini, banyak elemen semantik ditambahkan ke HTML5 untuk menggantikan elemen div dan semantik dan presentasi yang terpisah.

Semua elemen semantik memiliki karakteristik yang signifikan: mereka tidak benar -benar melakukan apa pun, mereka memiliki sedikit dampak pada konten pada penampilan, dan bahkan tidak berpengaruh sama sekali. Ada beberapa alasan untuk keberadaan elemen semantik:

1) Mudah dimodifikasi dan dipelihara. Melalui elemen semantik HTML5, informasi terstruktur tambahan dapat disampaikan, yang memudahkan orang untuk memahami keseluruhan tata letak dokumen dan peran blok yang berbeda.

2) Non -obstacle. Tema penting dari desain web modern adalah memungkinkan siapa saja untuk mengakses halaman web tanpa hambatan, yaitu, orang yang menggunakan pembaca layar dan alat tambahan lainnya dapat menavigasi dengan bebas di halaman.

3) Optimalisasi Mesin Pencari. Menggunakan HTML5 memungkinkan mesin pencari untuk lebih memahami situs web Anda dan memungkinkan mereka untuk mengumpulkan lebih banyak informasi di halaman indeks mereka.

4) Fungsi di masa depan. Browser baru dan alat pengeditan web pasti akan menggunakan elemen semantik di masa depan. Misalnya: Bagian utama dari dokumen disajikan.

Yang paling penting adalah bahwa jika Anda menggunakan elemen semantik dengan benar, Anda dapat membuat struktur halaman yang lebih jelas, dan Anda dapat beradaptasi dengan tren pengembangan browser di masa depan dan alat desain web. Berikut ini akan memperkenalkan elemen semantik untuk struktur dokumen organisasi.

Halaman HTML lama menggunakan elemen div, ditambah dengan tabel gaya yang sesuai, tetapi masalah elemen div adalah tidak mencerminkan informasi apa pun yang terkait dengan halaman. Halaman HTML5 adalah untuk mengganti elemen div ini dengan elemen semantik deskriptif. Contoh berikut berisi elemen semantik utama yang digunakan dalam HTML5 untuk menggambarkan struktur dokumen.

 <dayer> <Header> <hgroup> <h1> Hal -hal yang saya sukai </h1> <h2> oleh Adam Freeman </h2> </hgroup> <sideal> Pertanyaan dan komentar? > </dreace> <av> <h1> Isi </h1> <li> <a href =#fruitsilike> buah yang saya suka </a> </li> <ul> <li> <a href =#morefruit> tambahan dari </a> </li> </ul> <li> <a href =#aktivitas yang saya suka </a> </li> <li> <li> <li> <li> <li> <li > <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li Li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <ul> <li> <li> <li> <ul > <li> <li> <li> <li> <a href =#tritypes> jenis triathlon </a> </li> <li> <a href =#mytri> jenis triathlon yang saya tuju untuk <a href =#mytri> /a> </li></ul> </ul> </av> </teader> <Ruang Utama = Main> <Artadicle> <Header> ...... </teader> <sendeng> <h1 > Mengapa dari itu sehat </h1> <section> di sini adalah tiga alasan setiap orang harus makan lebih banyak buah: <l> <li> Buah mengandung banyak vitamin </li> <li> Buah adalah sumber serat </li> <li> Buah berisi Callies </li> </l> <section> << Section> <p> Saya suka berenang, bersepeda dan lari /p> <ringkasan> Jenis triathlon </summary> Ada berbagai jenis triathlon -sprint, lympic dan sebagainya. Li> <li> Siklus 40km </li> <li> 10km Jalankan </li> </ol> </sincian> </siction> </artikel> </pain> <av> Informasi lebih lanjut: <a href = http: // buah .org> Pelajari lebih lanjut tentang buah </a> <a href = http://triatathlon.org> Pelajari lebih lanjut tentang trithlons </a> </av> <foloter id = mainfooter> © 2011, Adam Freeman.

Dokumen di atas berisi banyak elemen HTML5.

HTML mendefinisikan sistem elemen berjudul, dari H1 ke H6, dan H1 adalah yang tertinggi. Judul level yang sama biasanya digunakan untuk membagi konten menjadi beberapa bagian, setiap bagian dari satu tema. Judul di semua tingkatan biasanya digunakan untuk mewakili semua aspek dari tema yang sama. Mereka bersama -sama merupakan garis besar dokumen, sehingga pengguna awalnya dapat memahami perawatan dan struktur mereka selama mereka menelusuri judul dokumen, dan pengguna dapat dengan cepat menavigasi konten minat melalui sistem judul.

 <hody> <h1> buah yang saya suka </h1> ...... </body>

Elemen hgroup dapat digunakan sebagai pemrosesan keseluruhan (jika elemen hgroup tidak digunakan, judul utama dan subtitle akan digunakan sebagai dua judul, dan setelah menggunakan hgroup, judul dan subtitle akan diperlakukan sebagai judul) untuk menghindari garis besar dari mengganggu dokumen HTML.

 <hody> <hgroup> <h1> buah yang saya suka </h1> <h2> bagaimana saya belajar mencintai jeruk </h2> </hgroup> ...... </body> </body> </body >

Di sini, bagaimana saya belajar mencintai jeruk ada sebagai sub -judul buah yang saya sukai.

Biasanya hanya ada satu bagian dari halaman yang mewakili konten utamanya.

 <body> ...... <role utama = main> <sartlicle> ...... </artikel> </pain> ...... </body>

Peran = Utama dapat membantu area utama halaman penentuan posisi pembaca layar.

Elemen artikel mewakili konten independen dalam elemen HTML. Artikel dapat bersarang di artikel lain. Satu halaman dapat memiliki beberapa elemen artikel, setiap artikel dapat dibentuk secara independen, dan satu artikel dapat berisi satu atau lebih elemen bagian (lihat bagian selanjutnya).

 <body> ...... <role utama = main> <t Artadicle> <teader> ...... </header> <sandak> ... </sugure> <section> ... ... </siction> </artikel> <tarttern <tartader> ...... </header> <sandak> ...... </sugure> <section> .../bagian> </artikel>. .. </pain> ...... </body>

Elemen bagian baru ditambahkan HTML5 untuk mewakili bagian dalam dokumen. Tidak ada spesifikasi yang jelas untuk menggunakan elemen bagian, tetapi biasanya elemen bagian harus digunakan untuk memasukkan yang harus dimasukkan dalam garis besar dokumen atau direktori. Bagian dapat menjadi bagian dari artikel tertentu, dan sebuah artikel dapat berisi satu atau lebih bagian. Elemen bagian biasanya berisi satu atau lebih paragraf dan satu judul, tetapi judulnya tidak diperlukan.

 <section> <section <Hgroup> <h1> buah yang saya suka </h1> <h2> Bagaimana saya belajar untuk mencintai jeruk </h2> </hgroup> Saya suka apel dan jeruk. , Mangga, ceri, aprikot, plum, buah persik dan anggur.

Di atas mendefinisikan 3 bagian, lapisan bersarang, judul masing -masing bagian adalah H1. Namun, pada browser yang berbeda, penampilan default dari struktur hierarkis bagian akan berbeda, dan masalah ini dapat diselesaikan dengan menciptakan gaya khusus. Perbedaan antara bagian dan artikel adalah bahwa bagian ini lebih terorganisir dan struktural pada dasarnya dan dapat dianggap sebagai paragraf independen, sedangkan artikel mewakili wadah yang terkandung.

Elemen header mewakili bagian pertama, yang dapat mencakup header dan logo. Elemen header biasanya berisi elemen judul atau elemen hgroup, dan juga dapat berisi elemen navigasi bagian ini. Halaman dapat berisi jumlah elemen header yang sewenang -wenang, dan artinya dapat berbeda sesuai dengan konteksnya.

Elemen FOOS mewakili ekor bagian, yang biasanya berisi informasi ringkasan bagian, dan juga dapat mencakup pengenalan penulis, informasi hak cipta, tautan ke konten terkait, logo dan pernyataan pembebasan.

 <body> <Header> <hgroup> <h1> Hal yang saya sukai </h1> <h2> oleh Adam Freeman </h2> </hgroup> </header> <teader> <hgroup> <h1> buah saya suka </header> <seader> <hgroup> /h1> <h2> Bagaimana saya belajar mencintai jeruk </h2> </hgroup> </ header> ...... </section> <teader> <h1> aktivitas yang saya sukai </h1> </header > ...... <section> <ID FOLTER = MainFooter> © 2011, Adam Freeman.

Contoh ini mendefinisikan 3 elemen header. Elemen header elemen tubuh adalah yang pertama dari seluruh dokumen.

Catatan: Anda tidak dapat bersarang dengan header atau footer lain di footer, juga tidak dapat bersarang di header atau elemen alamat.

Elemen NAV mewakili area navigasi dalam dokumen, yang berisi tautan ke bagian lain dari halaman lain atau bagian lain dari halaman yang sama. Tidak semua tautan perlu ditempatkan di elemen NAV.

 <tody> <Header> <hgroup> <h1> Hal yang saya sukai </h1> <h2> oleh Adam Freeman </h2> </hgroup> <rav> <h1> Konten </h1> <ul> <li> <A href =#fruitsilie> buah yang saya suka </a> </li> <ul> <li> <a href =#morefruit> buah tambahan </a> </li> </ul> <li> <a href =#activityilike> aktivitas yang saya suka </a> </li> <li> <a href =#tritypes> jenis triathlon </a> </li> <li> <a href =#mytri> jenisnya Triathlon saya bertujuan untuk </a> </li> </ul> </ul> </bav> </header> <section> ...... </section> <section> .. ... . > </av> <footer ID = MainFooter> ...... </footer> </body>

Dua elemen NAV digunakan di sini.

Berhati -hatilah untuk tidak menempatkan semua tautan di blok NAV, NAV biasanya hanya boleh digunakan di area navigasi terbesar dan terpenting di halaman. Misalnya, navigasi dokumen yang diberikan di atas diperlukan untuk meletakkannya di blok NAV, tetapi jika itu hanya beberapa informasi tentang lisensi dan informasi kontak, tidak perlu memasukkannya ke dalam blok NAV.

Elemen samping digunakan untuk menunjukkan konten yang sedikit diwarnai dengan konten di sekitarnya, mirip dengan bilah sisi dalam buku atau majalah. konten utama.

 <body> <teader> ...... </teader> <t Artadicle> <Header> ...... </teader> <sander> <h1> Mengapa buah sehat </h1> <section> di sini AR Threee Realekeryone shuld makan lebih banyak buah: <l> <li> Buah mengandung banyak vitamin </li> <li> Buah adalah sumber serat </li> <li> Buah mengandung beberapa ca lories </li> </li> ol> <section> </sside> ...... </artikel> <footer id = Mainfooter> ...... </footer> </body>

Anda dapat menggunakan elemen samping seperti bilah catatan dalam materi cetak, Anda dapat memperkenalkan topik terkait lainnya, atau menjelaskan sudut pandang yang diusulkan dalam dokumen utama. Anda juga dapat menggunakan elemen samping untuk menyimpan iklan, tautan konten terkait, dll.

Elemen alamat digunakan untuk mewakili informasi kontak dokumen atau elemen artikel. Jika elemen alamat adalah sub -elemen dari elemen artikel, informasi kontak yang diberikannya dianggap sebagai artikel; Elemen alamat tidak dapat digunakan untuk mewakili alamat di luar informasi kontak dokumen atau artikel, seperti: tidak dapat digunakan untuk mewakili alamat pelanggan atau pengguna.

 <tody> <teader> ...... <dressule> Pertanyaan dan komentar?> ...... </body>

Detail elemen menghasilkan area dalam dokumen, dan pengguna dapat memulainya untuk memahami detail lebih lanjut tentang suatu tema. Elemen detail biasanya berisi elemen ringkasan untuk menghasilkan label deskripsi atau judul untuk area detail.

 <body> <teader> ...... </header> <sartcticle> <teader> ....... Pelatihan untuk triathlon pertama saya, tetapi ini adalah kerja keras. : <Ol> <li> Renang 1.5km </li> <li> Siklus 40km </li> <li> 10km Jalankan </li> </ol> </section> </spection> </artikel> </body>

Detail elemen memiliki penampilan default di browser.

Detail elemen akan dilipat secara default.

 <Detail Open> <ringkasan> Jenis triathlon </summary> Ada berbagai jenis triathlon -sprint, Olympic dan sebagainya. /Li> <li> 10km Run </li> </ol> </defails>

Efeknya adalah sebagai berikut:

Elemen semantik HTML5 didefinisikan berdasarkan penemu pada studi halaman web yang ada. Jika Anda tertarik, Anda dapat melihatnya di sini (situs Google, Anda tidak dapat langsung melihatnya).

Saat ini, elemen semantik HTML5 telah didukung pada semua browser modern, tetapi untuk beberapa versi lama browser (terutama diperlukan penjelajah internet IE9), beberapa langkah perbaikan diperlukan. Karena elemen semantik itu sendiri tidak melakukan apa pun, mereka perlu mendukung mereka, selama browser diizinkan untuk memperlakukan mereka sebagai elemen div biasa, dan sisa pekerjaannya adalah menambahkan beberapa aturan gaya untuk mereka. bermasalah. Untungnya, karya modernr ini telah membantu Anda mencapainya.