Praktik terbaik HTML5; elemen bagian / header / samping / artikel

546

Ada cukup informasi tentang HTML5 di web (dan juga tentang stackoverflow), tetapi sekarang saya ingin tahu tentang "praktik terbaik". Tag seperti bagian / header / artikel adalah baru, dan setiap orang memiliki pendapat berbeda tentang kapan / di mana Anda harus menggunakan tag ini. Jadi apa yang kalian pikirkan tentang tata letak dan kode berikut?

Tata letak situs web

  1  <!doctype html>
  2      <head>
  3          <title>Website</title>
  4      </head>
  5  
  6      <body>
  7          <section>
  8              <header>
  9                  <div id="logo"></div>
 10                  <div id="language"></div>
 11              </header>
 12  
 13              <nav>
 14                  <ul>
 15                      <li>menu 1</li>
 16                      <li>menu 2</li>
 17                      <li>menu 3</li>
 18                      <li>menu 4</li>
 19                      <li>menu 5</li>
 20                  </ul>
 21              </nav>
 22  
 23              <div id="main">
 24                  <div id="main-left">
 25                      <article>
 26                          <header><h1>This is a title</h1></header>
 27  
 28                          <p>Lorem ipsum dolor sit amet, consectetur
 29                          adipiscing elit. Quisque semper, leo eget</p>
 30  
 31                          <p>Lorem ipsum dolor sit amet, consectetur
 32                          adipiscing elit. Quisque semper, leo eget</p>
 33  
 34                          <p>Lorem ipsum dolor sit amet, consectetur
 35                          adipiscing elit. Quisque semper, leo eget</p>
 36  
 37                          <p>Lorem ipsum dolor sit amet, consectetur
 38                          adipiscing elit. Quisque semper, leo eget</p>
 39                      </article>
 40                  </div>
 41  
 42                  <div id="main-right">
 43                      <section id="main-right-hot">
 44                          <h2>Hot items</h2>
 45                          <ul>
 46                              <li>Lorem ipsum</li>
 47                              <li>dolor sit</li>
 48                              <li>...</li>
 49                          </ul>
 50                      </section>
 51  
 52                      <section id="main-right-new">
 53                          <h2>New items</h2>
 54                          <ul>
 55                              <li>Lorem ipsum</li>
 56                              <li>dolor sit</li>
 57                              <li>...</li>
 58                          </ul>
 59                      </section>
 60                  </div>
 61              </div>
 62  
 63              <div id="news-items">
 64                  <header><h2>The latest news</h2></header>
 65  
 66                  <div id="item_1">
 67                      <article>
 68                          <header>
 69                              <img src="#" title="titel artikel" />
 70                              <h3>Lorem ipsum .....</h3>
 71                          </header>
 72                          <p>Lorem ipsum dolor sit amet,
 73                          adipiscing elit. Quisque semper, </p>
 74                          <a href="#">Read more</a>
 75                      </article>
 76                  </div>
 77  
 78  
 79                  <div id="item_2">
 80                      <article>
 81                          <header>
 82                              <img src="#" title="titel artikel" />
 83                              <h3>Lorem ipsum .....</h3>
 84                          </header>
 85                          <p>Lorem ipsum dolor sit amet,
 86                          adipiscing elit. Quisque semper, </p>
 87                          <a href="#">Read more</a>
 88                      </article>
 89                  </div>
 90  
 91  
 92                  <div id="item_3">
 93                      <article>
 94                          <header>
 95                              <img src="#" title="titel artikel" />
 96                              <h3>Lorem ipsum .....</h3>
 97                          </header>
 98                          <p>Lorem ipsum dolor sit amet,
 99                          adipiscing elit. Quisque semper, </p>
100                          <a href="#">Read more</a>
101                      </article>
102                  </div>
103              </div>
104  
105              <footer>
106                  <ul>
107                      <li>menu 1</li>
108                      <li>menu 2</li>
109                      <li>menu 3</li>
110                      <li>menu 4</li>
111                      <li>menu 5</li>
112                  </ul>
113              </footer>
114          </section>
115      </body>
116  </html>

baris 7. sectiondi seluruh situs web? Atau hanya div?

baris 8. Setiap sectionmulai dengan header?

baris 23. Apakah ini divbenar? atau haruskah ini menjadi section?

baris 24. Pisahkan kolom kiri / kanan dengan a div.

baris 25. Tempat yang tepat untuk articletag?

baris 26. Apakah harus memasukkan h1-tag di header-tag?

baris 43. Konten tidak terkait dengan artikel utama, jadi saya memutuskan ini adalah sectiondan bukan a aside.

baris 44. H2 tanpa header

baris 53. sectiontanpaheader

baris 63. Div dengan semua item berita (tidak terkait)

baris 64. headerdengan h2

baris 65. Hmm, divatau section? Atau hapus ini divdan hanya gunakan article-tag

baris 105. Footer :-)

html header article Bas van Dorst
sumber
456bereastreet.com/archive/201103/...
Christophe

Jawaban:

486

Sebenarnya, Anda benar ketika berbicara tentang header / footer. Berikut adalah beberapa informasi dasar tentang bagaimana masing-masing tag HTML5 utama dapat / harus digunakan (saya sarankan membaca sumber lengkap yang ditautkan di bagian bawah):

bagian - Digunakan untuk mengelompokkan konten yang terkait secara tematis. Kedengarannya seperti elemen div, tetapi tidak. Div tidak memiliki arti semantik. Sebelum mengganti semua div Anda dengan elemen bagian, selalu tanyakan pada diri sendiri: "Apakah semua konten terkait?"

samping - Digunakan untuk konten yang terkait secara tangensial. Hanya karena beberapa konten muncul di kiri atau kanan konten utama tidak cukup alasan untuk menggunakan elemen samping. Tanyakan pada diri sendiri apakah konten di dalam samping dapat dihapus tanpa mengurangi arti konten utama. Pullquote adalah contoh konten yang terkait secara tangensial.

header - Ada perbedaan penting antara elemen header dan penggunaan header (atau masthead) yang diterima secara umum. Biasanya hanya ada satu tajuk atau 'masthead' di sebuah halaman. Di HTML5 Anda dapat memiliki sebanyak yang Anda inginkan. Spesifikasi mendefinisikannya sebagai "sekelompok alat bantu pengantar atau navigasi". Anda dapat menggunakan tajuk di bagian mana pun di situs Anda. Bahkan, Anda mungkin harus menggunakan tajuk di sebagian besar bagian Anda. Spesifikasi ini menjelaskan elemen bagian sebagai "pengelompokan konten tematik, biasanya dengan tajuk."

nav - Ditujukan untuk informasi navigasi utama. Sekelompok tautan yang dikelompokkan bersama tidak cukup alasan untuk menggunakan elemen nav. Navigasi seluruh situs, di sisi lain termasuk dalam elemen nav.

footer - Kedengarannya seperti deskripsi posisi, tetapi tidak. Elemen footer berisi informasi tentang elemen yang mengandungnya: siapa yang menulisnya, hak cipta, tautan ke konten terkait, dll. Sementara kami biasanya memiliki satu footer untuk seluruh dokumen, HTML5 memungkinkan kami juga memiliki footer di dalam bagian-bagian.

Sumber : https://clzd.me/html5-section-aside-header-nav-footer-elements-not-as-obvious-as-they-sound/

Selain itu, inilah uraian tentang article, tidak ditemukan dalam sumber di atas:

artikel - Digunakan untuk elemen yang menentukan konten mandiri dan mandiri. Artikel harus masuk akal sendiri. Sebelum mengganti semua div Anda dengan elemen artikel, selalu tanyakan pada diri sendiri: "Apakah mungkin untuk membacanya secara independen dari seluruh situs web?"

Nathan JB
sumber
68
Teka-teki bagi saya bagaimana jawaban ini mendapatkan begitu banyak suara: tidak berbicara tentang <article>elemen, tidak kontras dengan elemen yang disebutkan, juga tidak mengelompokkannya. Jawabannya tidak memberikan "praktik terbaik", juga tidak menjawab pertanyaan eksplisit OP!
Robert Siemer
2
@RobertSiemer Bagi saya itu juga teka-teki bagaimana komentar Anda mendapat 24 upvotes dan pertanyaannya hanya 6 downvotes ...
Veger
@RobertSiemer karena terlihat hebat, bagaimana? Saya tidak tahu itu buruk sampai memeriksa komentar Anda dan menegaskannya dengan jawaban berikutnya.
Det
238

Sayangnya jawaban yang diberikan sejauh ini (termasuk yang paling banyak dipilih) adalah "hanya" akal sehat, jelas salah atau paling membingungkan. Tidak ada kata kunci penting 1 yang muncul!

Saya menulis 3 jawaban:

  1. Penjelasan ini (mulai di sini).
  2. Jawaban konkret untuk pertanyaan OP.
  3. HTML detail yang ditingkatkan.

Untuk memahami peran elemen html yang dibahas di sini, Anda harus tahu bahwa beberapa di antaranya bagian dari dokumen. Setiap dan setiap dokumen html dapat dibagi sesuai dengan algoritma outline HTML5 untuk tujuan membuat outline —atau⁠atau daftar isi (TOC). Garis umumnya tidak terlihat (hari ini), tetapi penulis harus menggunakan html sedemikian rupa sehingga garis yang dihasilkan mencerminkan niat mereka.

Anda dapat membuat bagian dengan tepat elemen-elemen ini dan tidak ada yang lain :

  • membuat subbagian (eksplisit)
    • <section> bagian
    • <article> bagian
    • <nav> bagian
    • <aside> bagian
  • membuat bagian atau subbagian saudara kandung
    • bagian dengan tipe yang tidak ditentukan dengan <h*>2 (tidak semua melakukan ini, lihat di bawah)
  • untuk menaikkan tutup bagian eksplisit (sub) saat ini

Bagian dapat dinamai:

  • <h*> bagian nama dibuat sendiri
  • <section|article|nav|aside>bagian akan dinamai oleh yang pertama <h*>jika ada
    • ini <h*>adalah satu-satunya yang tidak membuat bagian sendiri

Ada satu hal lagi untuk bagian: konteks berikut (yaitu elemen) membuat "batas garis". Bagian apa pun yang dikandungnya bersifat pribadi untuk mereka:

  • dokumen itu sendiri dengan <body>
  • sel tabel dengan <td>
  • <blockquote>
  • <details>, <dialog>, <fieldset>, Dan<figure>
  • tidak ada yang lain

judul

example HTML
<body> <h3>if you want siblings at top level...</h3> <h3>...you have to use untyped sections with <h*>...</h3> <article> <h1>...as any other section will descent</h1> </article> <nav> <ul> <li><a href=...>...</a></li> </ul> </nav> </body> has this outline
1. if you want siblings at top level... 2. ...you have to use untyped sections with <h*>... 2.1. ...as any other section will descent 2.2. (unnamed navigation)









Ini menimbulkan dua pertanyaan:

Apa perbedaan antara <article>dan <section>?

  • keduanya dapat:
    • saling bersarang
    • mengambil gagasan berbeda dalam konteks atau tingkat bertelur yang berbeda
  • <section>Ini seperti bab buku
    • mereka biasanya memiliki saudara kandung (mungkin dalam dokumen yang berbeda?)
    • bersama-sama mereka memiliki kesamaan, seperti bab dalam buku
  • satu penulis, satu <article>, setidaknya pada level terendah
    • contoh standar: satu komentar blog
    • entri blog itu sendiri juga merupakan contoh yang baik
    • entri blog <article>dan komentarnya <article>juga dapat dibungkus dengan<article>
    • itu beberapa hal "lengkap", bukan bagian dari serangkaian yang serupa
  • <section>s dalam <article>seperti bab dalam buku
  • <article>s dalam <section>seperti puisi dalam volume (dalam seri)

Bagaimana <header>, <footer>dan <main>cocok?

  • mereka tidak memiliki pengaruh pada pembagian
  • <header> dan <footer>
    • mereka memungkinkan Anda untuk menandai zona masing - masing dan setiap bagian
    • bahkan dalam suatu bagian Anda dapat memilikinya beberapa kali
    • untuk membedakan dari bagian utama di bagian ini
    • hanya dibatasi oleh selera penulis
    • <header>
      • dapat menandai judul / nama bagian ini
      • dapat berisi logo untuk bagian ini
      • tidak perlu berada di bagian atas atau atas dari bagian tersebut
    • <footer>
      • dapat menandai kredit / penulis bagian ini
      • bisa muncul di bagian atas
      • bahkan bisa di atas a <header>
  • <main>
    • hanya diizinkan satu kali
    • menandai bagian utama dari bagian tingkat atas (yaitu dokumen, <body>yaitu)
    • Subbagian itu sendiri tidak memiliki markup untuk bagian utama mereka
    • <main>bahkan bisa "bersembunyi" di beberapa subbagian dokumen, sedangkan dokumen <header>dan <footer>tidak bisa (markup itu akan menandai header / footer dari subbagian itu kemudian)
      • tetapi itu tidak diperbolehkan di <article>bagian 3
    • membantu membedakan "yang asli" dari konten non-header, non-footer, non-utama dokumen, jika itu masuk akal dalam kasus Anda ...

1 pikiran datang: garis besar, algoritma, sectioning implisit
2 Aku digunakan <h*>sebagai singkatan untuk <h1>, <h2>, <h3>, <h4>, <h5>dan <h6>
3 tidak adalah <main>diperbolehkan dalam <aside>atau <nav>, tapi itu tidak mengejutkan. - Efeknya: <main>hanya bisa bersembunyi di <section>bagian turun (bersarang) atau muncul di tingkat atas, yaitu<body>

Robert Siemer
sumber
33
Jawabannya seperti puisi itu sendiri. Bagian favorit saya adalah: sections in an article are like chapters in a book, articles in a section are like poems in a volume- Penjelasan terbaik dan paling intuitif articlevs yang sectionpernah saya lihat!
Sergey Lukin
1
Itu pengetahuan luas tanpa boilerplate yang dirangkum dalam beberapa poin. Terima kasih sudah berbagi! Terkadang pada SO, jawaban terbaik bukanlah jawaban yang diterima atau yang berperingkat tertinggi.
3
Saya tahu ini klise, tetapi, "Ini seharusnya jawaban yang diterima!". Catatan kaki dan semuanya! Terima kasih!
Eugene
Eugene dan kaki kanan. Ingat, Anda dapat memilih jawaban yang tidak lengkap dan salah saat memilih ini. Ini bukan pelanggaran bagi penulisnya, itu adalah biaya untuk memastikan jawaban terbaik terlihat pertama. Selain komentar robert pada jawaban yang dipilih saya juga tidak suka karena menjiplak konten (tidak lengkap) dari tempat lain di web.
IAmNaN
Ini jawaban yang sangat terperinci dan membuat banyak hal menjadi jelas, terima kasih!
Alaeddine
112

Elemen div dapat diganti dengan elemen baru: header, nav, bagian, artikel, samping, dan footer.

Markup untuk dokumen itu bisa terlihat seperti berikut:

<body>
     <header>...</header>
     <nav>...</nav>
     <article>
          <section>
               ...
          </section>
     </article>
     <aside>...</aside>
     <footer>...</footer>
</body>

Anda dapat menemukan informasi lebih lanjut dalam artikel ini di A List Apart .

cilerler
sumber
25
Struktur boilerplate ini tidak sebanding dengan ruang di halaman ini. 1) Tidak ada elemen HTML yang disebutkan terikat pada posisi apa pun dalam dokumen. 2) Ini secara tidak langsung menyatakan bahwa <header> dan <footer> adalah elemen level dokumen. 3) Ini secara tidak langsung menyatakan bahwa <section> dimaksudkan sebagai <article> -cild saja. @DanDascalescu
Robert Siemer
2
Tidak dapat menyetujui lebih banyak @RobertSiemer. Ini masih salah satu kesalahpahaman paling umum tentang elemen HTML5 dan menjadi cacat semantik untuk bahasa markup tercinta kita.
kano
@RobertSiemer Re: 2), Tidak bisakah <header>dan <footer>menjadi elemen tingkat dokumen, serta dalam <section|article|nav|aside>bagian?
Flimm
1
@ Flimm, ya mereka bisa. Maksud saya adalah: Jawabannya tidak salah - itu tidak banyak menjawab.
Robert Siemer
63

Saya sarankan membaca halaman w3 Wiki tentang penataan HTML5 :

<header>Digunakan untuk memuat konten tajuk situs. <footer> Berisi konten footer dari suatu situs. <nav>Berisi menu navigasi, atau fungsi navigasi lainnya untuk halaman tersebut.

<article>Berisi konten mandiri yang
masuk akal jika disindikasikan sebagai item RSS, misalnya item berita.

<section>Digunakan untuk mengelompokkan artikel yang berbeda menjadi
tujuan atau subjek yang berbeda , atau untuk menentukan bagian yang berbeda dari satu artikel.

<aside> Menentukan blok konten yang terkait dengan konten utama di sekitarnya, tetapi tidak menjadi pusat aliran konten.

Termasuk gambar yang sudah saya bersihkan di sini:

html5

Dalam kode, ini terlihat seperti ini:

<body>
  <header></header>    
  <nav></nav>    
  <section id="sidebar"></section>    
  <section id="content"></section>    
  <aside></aside>    
  <footer></footer>
</body>

Mari kita telusuri beberapa elemen HTML5 dengan lebih detail.

<section>

The <section>unsur adalah untuk mengandung berbagai bidang yang berbeda dari fungsi atau subjek daerah, atau melanggar sebuah artikel atau cerita menjadi bagian yang berbeda. Jadi dalam hal ini: "sidebar1" berisi berbagai tautan berguna yang akan tetap ada di setiap halaman situs, seperti "berlangganan RSS" dan "Beli musik dari toko". "main" berisi konten utama halaman ini, yaitu posting blog. Di halaman lain situs ini, konten ini akan berubah. Ini adalah elemen yang cukup umum, tetapi masih memiliki makna yang jauh lebih besar daripada yang lama <div>.

<article>

<article>terkait dengan <section>, tetapi jelas berbeda. Sedangkan <section>untuk pengelompokan bagian yang berbeda dari konten atau fungsionalitas, <article>adalah untuk berisi potongan konten tersendiri terkait individu, seperti posting blog individu, video, gambar atau item berita. Pikirkan seperti ini - jika Anda memiliki sejumlah item konten, yang masing-masing akan cocok untuk dibaca sendiri, dan masuk akal untuk melakukan sindikasi sebagai item terpisah dalam umpan RSS, maka <article>cocok untuk menandai mereka. Dalam contoh kami, <section id="main">berisi entri blog. Setiap entri blog akan cocok untuk sindikasi sebagai item dalam umpan RSS, dan akan masuk akal ketika dibaca sendiri, di luar konteks, oleh karena itu <article> sangat cocok untuk mereka:

<section id="main">
    <article><!-- first blog post --></article>        
    <article><!-- second blog post --></article>        
    <article><!-- third blog post --></article>
</section>

Sederhana ya Ketahuilah bahwa Anda juga dapat membuat sarang di dalam artikel, di mana masuk akal untuk melakukannya. Misalnya, jika masing-masing posting blog ini memiliki struktur yang konsisten dari bagian yang berbeda, maka Anda dapat memasukkan bagian di dalam artikel Anda juga. Itu bisa terlihat seperti ini:

<article>
  <section id="introduction"></section>      
  <section id="content"></section>
  <section id="summary"></section>
</article>

<header> dan <footer>

seperti yang telah kami sebutkan di atas, tujuan dari <header>dan <footer>elemen adalah untuk membungkus konten header dan footer, masing-masing. Dalam contoh khusus kami, <header>elemen tersebut berisi gambar logo, dan <footer>elemen tersebut berisi pemberitahuan hak cipta, tetapi Anda bisa menambahkan konten yang lebih rumit jika diinginkan. Perhatikan juga bahwa Anda dapat memiliki lebih dari satu header dan footer pada setiap halaman - serta header dan footer tingkat atas yang baru saja kita bahas, Anda juga dapat memiliki <header>dan <footer>elemen bersarang di dalam setiap halaman <article>, dalam hal ini mereka hanya akan berlaku untuk itu artikel tertentu. Menambahkan ke contoh kami di atas:

<article>
  <header></header>    
  <section id="introduction"></section>      
  <section id="content"></section>      
  <section id="summary"></section>      
  <footer></footer>
</article>

<nav>

The <nav>unsur adalah untuk menandai link navigasi atau konstruksi (misalnya form pencarian) lain yang akan membawa Anda ke halaman yang berbeda dari situs ini, atau daerah yang berbeda dari halaman saat ini. Tautan lain, seperti tautan sponsor, tidak masuk hitungan. Tentu saja Anda dapat memasukkan judul dan elemen penataan lainnya di dalam <nav>, tetapi itu tidak wajib.

<aside>

Anda mungkin telah memperhatikan bahwa kami menggunakan <aside>elemen untuk menandai sidebar ke-2: elemen yang mengandung pertunjukan terbaru dan detail kontak. Ini sangat tepat, seperti <aside>untuk menandai potongan informasi yang terkait dengan aliran utama, tetapi tidak cocok untuk itu secara langsung. Dan konten utama dalam hal ini adalah tentang band! Pilihan bagus lainnya <aside>adalah informasi tentang penulis posting blog, biografi band, atau diskografi band dengan tautan untuk membeli album mereka.

Di mana itu pergi <div>?

Jadi, dengan semua elemen baru yang hebat ini untuk digunakan di halaman kita, hari-hari orang-orang yang rendah hati <div>sudah dihitung, tentunya? TIDAK. Bahkan, <div> masih memiliki penggunaan yang benar-benar valid. Anda harus menggunakannya ketika tidak ada elemen lain yang lebih cocok tersedia untuk mengelompokkan area konten, yang sering terjadi ketika Anda murni menggunakan elemen untuk mengelompokkan konten bersama untuk keperluan penataan / visual. Contoh umum menggunakan a <div>untuk membungkus semua konten pada halaman, dan kemudian menggunakan CSS untuk memusatkan semua konten di jendela browser, atau menerapkan gambar latar belakang spesifik untuk seluruh konten.

Justin
sumber
1
Namun untuk bagian bersarang, bukankah lebih masuk akal untuk digunakan <section class="summary">daripada <section id="summary">? Jika Anda memiliki banyak artikel di satu halaman, maka metode yang terakhir akan menghasilkan duplikat ID di halaman yang sama — kecacatan HTML. Baik?
JP Lew
Ya, saya mungkin akan menggunakan kelas sebagai gantinya.
Justin
1
Bukankah semua tag yang Anda sebutkan dibungkus dalam "utama" yang kemudian dibungkus dalam "tubuh"?
Francisco Aguilera
1
The maintag akan baik untuk menambahkan. Tempat meletakkannya akan diputuskan berdasarkan konten unik apa pada halaman tersebut. Dalam contoh ini, saya pikir saya akan meletakkannya di tengah section. Baca selengkapnya: w3.org/TR/2012/WD-html-main-element-20121217 "Bagian konten utama dari sebuah dokumen termasuk konten yang unik untuk bahwa dokumen dan tidak termasuk konten yang diulang di satu set dokumen seperti situs tautan navigasi, informasi hak cipta, logo dan spanduk situs dan formulir pencarian. "
Justin
masih sangat ambigu seperti dokumentasi MDN
oldboy
23

[ penjelasan dalam "jawaban utama" saya ]

baris 7. bagian di seluruh situs web? Atau hanya div ?

Tidak juga. Untuk penataan: gunakan <body>, sudah ada di sana. Untuk sectioning / semantik: sebagaimana dirinci dalam HTML contoh saya efeknya bertentangan dengan kegunaan. Pembungkus ekstra untuk konten yang sudah dibungkus tidak ada perbaikan, tetapi kebisingan.


baris 8. Setiap bagian dimulai dengan tajuk?

Tidak, itu adalah pilihan penulis tempat meletakkan konten yang biasanya diringkas sebagai "header". Dan jika konten tajuk itu dapat dikenali dengan jelas tanpa tanda tambahan, itu mungkin akan tetap ada <header>. Ini juga pilihan penulis.


baris 23. Apakah div ini benar? atau haruskah ini bagian ?

Itu <div>mungkin salah. Itu tergantung pada niat: apakah hanya untuk penataan, itu mungkin benar. Jika itu untuk tujuan semantik itu salah: itu harus menjadi <article>bukan seperti yang ditunjukkan dalam jawaban saya yang lain . <article>juga tepat jika itu untuk kombinasi style dan sectioning.

<section>terlihat salah di sini, karena tidak ada bagian yang serupa sebelum atau sesudah ini, seperti bab dalam buku. (Ini tujuan dari <section>).


baris 24. Pisahkan kolom kiri / kanan dengan div .

Tidak Memangnya kenapa?


baris 25. Tempat yang tepat untuk tag artikel ?

Ya, masuk akal.


baris 26. Apakah harus meletakkan h1 -tag di header -tag?

Tidak. Satu-satunya <h*>elemen mungkin tidak perlu masuk <header>(tetapi bisa jika Anda mau) karena sudah jelas bahwa itu adalah judul dari apa yang akan datang. - Masuk akal jika itu <header>juga mencakup tagline (ditandai dengan <p>), misalnya.


baris 43. Konten tidak terkait dengan artikel utama, jadi saya memutuskan ini adalah bagian dan bukan samping .

Ini adalah kesalahpahaman bahwa <aside>harus " berhubungan secara tangensial " dengan konten di sekitar. Intinya adalah: gunakan <aside>jika konten hanya " terkait secara tangensial " atau tidak sama sekali!

Namun demikian, selain <aside>sebagai pilihan yang layak, <article>mungkin masih lebih baik daripada <section>"item panas" dan "item baru" tidak dibaca seperti dua bab dalam buku. Anda dapat dengan sempurna memilih salah satu dari mereka dan tidak yang lain menyukai alternatif penyortiran sesuatu, tidak seperti dua bagian dari keseluruhan.


baris 44. H2 tanpa header

Bagus.


baris 53. bagian tanpa tajuk

Yah, tidak ada <header>, tapi <h2>-heading meninggalkan bagian mana yang jelas di bagian ini adalah header.


baris 63. Div dengan semua item berita (tidak terkait)

<article>atau <aside>mungkin lebih baik.


baris 64. header dengan h2

Sudah dibahas.


baris 65. Hmm, div atau bagian ? Atau hapus div ini dan hanya gunakan artikel -tag

Persis! Hapus <div>.


baris 105. Footer :-)

Sangat masuk akal

Robert Siemer
sumber
Membagi satu jawaban menjadi 3 tidak lengkap tidak membantu.
Christian Strempfer
6
@ChristianStrempfer Sebenarnya sangat membantu, karena banyak orang tidak datang ke sini untuk membaca jawaban spesifik untuk pertanyaan spesifik OP (jawaban ini), tetapi untuk membaca lebih banyak tentang topik yang sedang dibahas (jawaban utama saya). - Saya percaya dengan satu jawaban tldr besar saya bahkan tidak akan mendapatkan suara yang saya miliki di jawaban utama saya sendiri. - Apa yang Anda sarankan?
Robert Siemer
Saya sarankan menggabungkannya menjadi satu jawaban. Suara koleksi bukanlah argumen yang baik untuk memisahkan mereka. Terutama jawaban ketiga tidak bisa berdiri sendiri, karena Anda merujuk jawaban utama Anda.
Christian Strempfer
@ChristianStrempfer Itu akan terlalu lama untuk seleraku. - Aku sedang berusaha memperbaiki tabel, ...
Robert Siemer
20

Menurut penjelasan dalam jawaban "utama" saya , dokumen yang dimaksud harus ditandai sesuai dengan garis besar.

Dalam dua tabel berikut saya tunjukkan:

  • HTML asli dan garis besarnya
  • garis besar yang mungkin dimaksudkan dan HTML melakukan itu

original html (shortened)
<body> <section> <header> <div id=logo></div> <div id=language></div> </header> <nav> ... </nav> <div id=main> <div id=main-left> <article> <header> <h1>The real thing</h1> </header> </article> </div> <div id=main-right> <section id=main-right-hot> <h2>Hot items</h2> </section> <section id=main-right-new> <h2>New items</h2> </section> </div> </div> <div id=news-items> <header> <h2>The latest news</h2> </header> <div id=item_1> <article> <header> <h3>...</h3> </header> <a>read more</a> </article> </div> <div id=item_2> <article> <header> <h3>...</h3> </header> <a>read more</a> </article> </div> <div id=item_3> <article> <header> <h3>...</h3> </header> <a>read more</a> </article> </div> </div> <footer> <ul><li>...</ul> </footer> </section>

original html relevant for outline
<body> <section> // logo and language <nav> ... </nav> <article> <h1>The real thing</h1> </article> <section> <h2>Hot items</h2> </section> <section> <h2>New items</h2> </section> <h2>The latest news</h2> <article> <h3>...</h3> </article> <article> <h3>...</h3> </article> <article> <h3>...</h3> </article> // footer links </section>












































resulting outline
1. (untitled document) 1.1. (untitled section) 1.1.1. (untitled navigation) 1.1.2. The real thing (h1) 1.1.3. Hot items (h2) 1.1.4. New items (h2) 1.1.5. The latest news (h2) 1.1.6. news item_1 (h3) 1.1.7. news item_2 (h3) 1.1.8. news item_3 (h3)


The outline of the original is
definitively not what was intended.

































































Tabel berikut menunjukkan proposal saya untuk versi yang ditingkatkan. Saya menggunakan markup berikut:

  • <removed>
  • <NEW_OR_CHANGED_ELEMENT>
  • <element MOVED_ATTRIBUTE=1>

possible intended outline
1. (main) 1.1. The real thing 1.2. (hot&new) 1.2.1. Hot items 1.2.2. New items 2. The latest news 2.1. news item_1 2.2. news item_2 2.3. news item_3










































































modified html
<body>  <section> <header> <ASIDE> <div id=logo></div> <div id=language></div> </ASIDE> </header> <nav> ... </nav> <ARTICLE id=main>   <div id=main-left> <article ID=main-left> <header> <h1>The real thing</h1> </header> </article>   </div> <ARTICLE id=main-right> <ARTICLE id=main-right-hot> <h2>Hot items</h2> </ARTICLE> <ARTICLE id=main-right-new> <h2>New items</h2> </ARTICLE> </ARTICLE> </ARTICE> <ARTICLE id=news-items> <header> <h2>The latest news</h2> </header>   <div id=item_1> <article ID=item_1> <header> <h3>...</h3> </header> <a>read more</a> </article>   </div>   <div id=item_2> <article ID=item_2> <header> <h3>...</h3> </header> <a>read more</a> </article>   </div>   <div id=item_3> <article ID=item_3> <header> <h3>...</h3> </header> <a>read more</a> </article>   </div> </ARTICLE> <footer> <NAV> <ul><li>...</ul> </NAV> </footer>  </section>``

resulting outline
1. (untitled document) 1.1. (untitled logo and lang) 1.2. (untitled navigation) 1.3. (untitled main) 1.3.1 The real thing 1.3.2. (untitled hot&new) 1.3.2.1. Hot items 1.3.2.2. New items 1.4. The latest news 1.4.1. news item_1 1.4.2. news item_2 1.4.3. news item_3 1.5. (untitled footer nav)


The modified HTML reflects the
intended outline way better than
the original.
































































Robert Siemer
sumber
Terima kasih atas jawaban terinci yang luar biasa, ini sangat mencerahkan. Saya ingin belajar lebih banyak tentang topik ini, jadi saya harap Anda dapat menjelaskan beberapa pilihan, yang terasa aneh bagi saya. Saya akan mempostingnya sebagai komentar individu.
gorn
1. sundulan di sekitar> div [id = logo] tampaknya tidak relevan bagi saya. Biasanya itu adalah tajuk, tetapi secara semantik tidak. Bahasa div mungkin semacam navigasi dan logo mungkin semacam tajuk ke seluruh situs tetapi jelas tidak ke halaman.
gorn
2. <ARTICLE id = main> tampaknya benar-benar hanya presentasi. Tidak mengandung apa pun yang terkait di dalamnya. (Hal yang sama berlaku tentang <ARTICLE id = main-right> tetapi jauh lebih bisa dipertahankan di sana (sebagai "berita dan panas").) Saya sarankan menggunakan div atau main paling buruk.
gorn
3. <ARTICLE id = news-items> menurut saya adalah kasus yang biasa saya gunakan. Itu tidak ada hubungannya dengan artikel utama, itu hanya umpan berita. Dan saya setuju bahwa itu memuat berita sebagai artikel "kecil" individual.
gorn
1
Pertimbangkan mengedit proposal Anda, jawaban "teoretis" Anda ditulis dengan sangat baik, tetapi saya pikir sebagian besar pemula hanya akan melihat contoh kode dan mereka mungkin benar-benar bingung, karena tidak sejalan dengan bagian teoretis.
Gorn
17

Kesalahan utama: Anda memiliki "divitis" di seluruh dokumen.
Kenapa ini?

<header>
    <div id="logo"></div>
    <div id="language"></div>
</header>

Dari pada:

<header role="banner">
    <!-- Not the best -->
    <h1 id="logo"></h1> <!-- or <figure> and <figcaption>, or <h1> and <p>... -->
    <h2 id="language"></h2>

    <!-- Better, if the IDs have not semantic sense -->
    <h1></h1>
    <h2></h2>
</header>

Untuk mengubahsuaikan tajuk ini, gunakan hierarki CSS: body> section> header> h1, body> section> header> h2

Lebih lanjut, ... baris 63: mengapa header membungkus h2 ?? Jika Anda tidak menyertakan elemen lagi di dalam header, cukup gunakan h2 tunggal.
Perlu diingat, struktur Anda bukan untuk membuat stylize dokumen, tetapi membuat dokumen sendiri.

Terapkan ini ke seluruh dokumen; Semoga berhasil ;)

Covi
sumber
4
@superUntitle <hgroup> bukan lagi bagian dari HTML5
bradley.ayers
Haruskah role = "banner" berada di h1 itu sendiri, bukan seluruh header? Dengan cara itu menunjuk ke satu bagian teks yang akan diumumkan pembaca layar, bukan gumpalan HTML.
enigment
11
Menggunakan h1 dan h2 untuk logo dan bahasa tidak masuk akal bagi saya. Tombol bahasa kecil mungil di sebelah kanan harus menjadi konten / info terpenting kedua di halaman ini? Dan jika Anda menempatkan logo Anda di dalam h1 daripada bot pencarian akan mengetahui bahwa konten utama dari setiap halaman adalah sama (cukup membosankan dalam pikiran saya). Lihat juga jawaban @MeanEYE untuk penggunaan h1 dan h2. Selain itu, ID adalah non-semantik, gunakan RDFa jika Anda membutuhkan semantik. Cara Anda membuat pemilih CSS lambat: developers.google.com/speed/docs/best-practices/…
F Lekschas
10

Mengapa tidak memiliki item_1, item_2, dll. ID pada tag artikel sendiri? Seperti ini:

<article id="item_1">
...
</article>
<article id="item_2">
...
</article>
...

Tampaknya tidak perlu menambahkan div pembungkus. Nilai ID tidak memiliki arti semantik dalam HTML, jadi saya pikir ini akan sangat valid untuk melakukan ini - Anda tidak mengatakan bahwa artikel pertama selalu item_1, cukup item_1 dalam konteks halaman saat ini. ID tidak diharuskan untuk memiliki makna yang independen dari konteks.

Selain itu, untuk pertanyaan Anda pada baris 26, saya tidak berpikir tag <header> diperlukan di sana, dan saya pikir Anda dapat menghilangkannya karena itu sendiri di div "main-left". Jika ada di daftar utama artikel Anda mungkin ingin memasukkan tag <header> hanya demi konsistensi.

Matt Browne
sumber
2
Saya hanya mengikuti contoh asli dan menunjukkan cara menyelesaikan hal yang sama tanpa divs pembungkus yang tidak perlu. ID bisa ada di sana untuk sejumlah alasan ... untuk satu hal, mungkin ada tautan jangkar menunjuk ke mereka.
Matt Browne
5
  1. Bagian harus digunakan hanya untuk membungkus bagian di dalam dokumen (seperti bab dan sejenisnya)
  2. Dengan tag tajuk : TIDAK. Tag header mewakili pembungkus untuk tajuk halaman dan tidak perlu bingung dengan H1, H2, dll.
  3. Div yang mana? : D
  4. Iya
  5. Dari Sekolah W3C:

    Tag mendefinisikan konten eksternal. Konten eksternal dapat berupa artikel-berita dari penyedia eksternal, atau teks dari log web (blog), atau teks dari forum, atau konten lain dari sumber eksternal.

  6. Tidak, tag tajuk memiliki penggunaan yang berbeda. H1, H2, dll. Mewakili judul dokumen H1 yang paling penting

Saya tidak menjawab yang lain karena agak sulit untuk menebak apa yang Anda maksud. Jika ada pertanyaan lagi, beri tahu saya.

MeanEYE
sumber
1
Terima kasih atas jawaban Anda! Pada poin 3; Maaf, nomor barisnya tidak benar. Itu harus line_23, bukan titik 3; lihat juga perubahan baris dalam posting saya.
Bas van Dorst
Ya, saya melakukan hal yang sama di situs saya. Umumnya DIV akan digunakan untuk membuat struktur situs. Memperkenalkan tag header, footer dan sejenisnya di HTML5 hanya untuk membuat hal-hal sedikit lebih mudah dibaca. Mereka berperilaku sama seperti DIV.
MeanEYE
3
Periksa sumber Anda. Situs sekolah w3c tidak menentukan secara articlepasti dari sumber eksternal . w3schools.com/html5/tag_article.asp
chharvey
Hm, saya bahkan tidak berpikir bahwa artikel itu akan digunakan dari sumber eksternal. Ini keluar dari jawaban lama, saya hampir tidak ingat tentang apa itu. :)
MeanEYE
Saya setuju dengan # 1. Saya pikir elemen BAGIAN itu lebih masuk akal sebagai ASIDE.
Andy
3

Inilah contoh saya di mana saya bekerja

masukkan deskripsi gambar di sini

Ivan
sumber
2 
<body itemscope itemtype="http://schema.org/Blog">
 <header>
  <h1>Wake up sheeple!</h1>
  <p><a href="news.html">News</a> -
     <a href="blog.html">Blog</a> -
     <a href="forums.html">Forums</a></p>
  <p>Last Modified: <span itemprop="dateModified">2009-04-01</span></p>
  <nav>
   <h1>Navigation</h1>
   <ul>
    <li><a href="articles.html">Index of all articles</a></li>
    <li><a href="today.html">Things sheeple need to wake up for today</a></li>
    <li><a href="successes.html">Sheeple we have managed to wake</a></li>
   </ul>
  </nav>
 </header>
 <main>
  <article itemprop="blogPosts" itemscope itemtype="http://schema.org/BlogPosting">
   <header>
    <h1 itemprop="headline">My Day at the Beach</h1>
   </header>
   <div itemprop="articleBody">
    <p>Today I went to the beach and had a lot of fun.</p>
    ...more content...
   </div>
   <footer>
    <p>Posted <time itemprop="datePublished" datetime="2009-10-10">Thursday</time>.</p>
   </footer>
  </article>
  ...more blog posts...
 </main>
 <footer>
  <p>Copyright ©
   <span itemprop="copyrightYear">2010</span>
   <span itemprop="copyrightHolder">The Example Company</span>
  </p>
  <p><a href="about.html">About</a> -
     <a href="policy.html">Privacy Policy</a> -
     <a href="contact.html">Contact Us</a></p>
 </footer>
</body>

https://www.w3.org/TR/2014/REC-html5-20141028/sections.html#the-nav-element

Юрий Светлов
sumber
1

Saya tidak berpikir Anda harus menggunakan tag pada ringkasan item berita (baris 67, 80, 93). Anda dapat menggunakan bagian atau hanya memiliki div terlampir.

Artikel harus bisa berdiri sendiri & masih masuk akal atau lengkap. Karena tidak lengkap atau hanya ekstrak, itu tidak bisa berupa artikel, ini lebih merupakan bagian.

Ketika Anda mengklik 'baca lebih lanjut', halaman selanjutnya dapat

kesesuaian
sumber
1

EDIT: Sayangnya saya harus memperbaiki diri sendiri.

Lihat di bawah https://stackoverflow.com/a/17935666/2488942 untuk tautan ke spesifikasi w3 yang menyertakan contoh (tidak seperti yang saya lihat sebelumnya).

Tapi kemudian .... Ini adalah artikel yang bagus tentang ini berkat @Fez.

Tanggapan asli saya adalah:

Cara spesifikasi w3 disusun:

4.3.4 Bagian

4.3.4.1 Elemen tubuh

4.3.4.2 Elemen bagian

4.3.4.3 Elemen nav

4.3.4.4 Elemen artikel

....

menyarankan kepada saya bahwa itu sectionadalah tingkat yang lebih tinggi dari article. Sebagaimana disebutkan dalam jawaban ini section mengelompokkan konten terkait tematis. Konten dalam sebuah artikel menurut saya tetap terkait secara tematis, karenanya ini, setidaknya bagi saya, kemudian juga menyarankan bahwa sectionkelompok pada tingkat yang lebih tinggi dibandingkan dengan article.

Saya pikir itu dimaksudkan untuk digunakan seperti ini:

section: Chapter 1
    nav: Ch. 1.1
         Ch. 1.2

    article: Ch. 1.1
             some insightful text

    article: Ch. 1.2
             related to 1.1 but different topic

atau untuk situs web berita:

section: News
    article: This happened today
    article: this happened in England

section: Sports
    article: England - Ukraine 0:0
    article: Italy books tickets to Brazil 2014
pandita
sumber
1

„Baris 23. Apakah div ini benar? atau haruskah ini menjadi bagian? "

Tidak ada - ada maintag untuk tujuan itu, yang hanya diperbolehkan sekali per halaman dan harus digunakan sebagai pembungkus untuk konten utama (berbeda dengan sidebar atau header situs-lebar).

<main>
    <!-- The main content -->
</main>

http://www.w3.org/html/wg/drafts/html/master/grouping-content.html#the-main-element

feeela
sumber
0

Saya ingin mengklarifikasi pertanyaan ini dengan lebih tepat, koreksi saya jika saya salah. Mari kita ambil contoh Facebook Wall

1.Wall berada di bawah tag "bagian", yang menunjukkan itu terpisah dari halaman.

2. Semua posting berada di bawah tag "artikel".

3.Kemudian kami memiliki satu posting, yang berada di bawah tag "bagian".

3.Kami memiliki judul "X posting pengguna ini" untuk ini kita dapat menggunakan tag "heading".

4.Kemudian di dalam postingan kita memiliki tiga bagian satu yaitu Gambar / teks, seperti tombol share-comment dan kotak komentar.

5.Untuk kotak komentar kita dapat menggunakan tag artikel.

Goresan film
sumber
0

Menurut jawaban Nathan , ini masuk akal (untuk bagian merah dan oranye, mungkin Anda bisa menggunakan div's dan / atau masing header- footermasing):

masukkan deskripsi gambar di sini

Alejandro Nava
sumber