แนวทางปฏิบัติที่ดีที่สุดของ HTML5 องค์ประกอบส่วน / ส่วนหัว / กัน / บทความ

546

มีข้อมูลเพียงพอเกี่ยวกับ HTML5 บนเว็บ (และใน stackoverflow) แต่ตอนนี้ฉันอยากรู้เกี่ยวกับ "วิธีปฏิบัติที่ดีที่สุด" แท็กเช่นส่วน / ส่วนหัว / บทความเป็นของใหม่และทุกคนมีความคิดเห็นที่แตกต่างกันเกี่ยวกับเวลา / สถานที่ที่คุณควรใช้แท็กเหล่านี้ แล้วพวกคุณคิดอย่างไรกับเลย์เอาต์และรหัสต่อไปนี้?

รูปแบบเว็บไซต์

  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>

บรรทัด 7 sectionทั่วทั้งเว็บไซต์? หรือเพียงdiv?

บรรทัดที่ 8. แต่ละคนsectionเริ่มต้นด้วยheader?

บรรทัด 23. divถูกต้องไหม หรือนี้จะต้องเป็นsection?

สาย 24. Split ซ้าย / divคอลัมน์ด้านขวาด้วย

บรรทัด 25. สถานที่ที่เหมาะสมสำหรับarticleแท็ก?

บรรทัด 26. จำเป็นต้องใส่h1-tag ในheader-tag หรือไม่?

สาย 43. เนื้อหาจะไม่เกี่ยวข้องกับบทความหลักดังนั้นฉันตัดสินใจนี้เป็นและไม่ได้เป็นsectionaside

บรรทัด 44. H2 โดยไม่ต้อง header

บรรทัด 53. sectionโดยไม่ต้องheader

บรรทัด 63. Div กับรายการข่าวทั้งหมด (ไม่เกี่ยวข้อง)

บรรทัด 64 headerกับ h2

บรรทัดที่ 65 อืมdivหรือsection? หรือลบสิ่งนี้divและใช้เฉพาะarticle-tag

บรรทัดที่ 105. ส่วนท้าย :-)

html header article

— Bas van Dorst
แหล่งที่มา

456bereastreet.com/archive/201103/…

— Christophe Roussy

486

ที่จริงแล้วคุณค่อนข้างถูกเมื่อพูดถึงส่วนหัว / ส่วนท้าย ต่อไปนี้เป็นข้อมูลพื้นฐานเกี่ยวกับวิธีการใช้แท็ก HTML5 แต่ละแท็ก / ควรใช้ (ฉันขอแนะนำให้อ่านแหล่งข้อมูลเต็มลิงก์ด้านล่าง):

section - ใช้สำหรับจัดกลุ่มเนื้อหาที่เกี่ยวข้องกับหัวเรื่อง ฟังดูเหมือนองค์ประกอบ div แต่ไม่ใช่ div ไม่มีความหมายเชิงความหมาย ก่อนที่จะแทนที่ div ทั้งหมดของคุณด้วยองค์ประกอบหัวข้อให้ถามตัวเองเสมอว่า: "เนื้อหาทั้งหมดเกี่ยวข้องหรือไม่"

กัน - ใช้สำหรับเนื้อหาที่เกี่ยวข้องแทนเจนต์ เพียงเพราะเนื้อหาบางส่วนปรากฏที่ด้านซ้ายหรือขวาของเนื้อหาหลักนั้นไม่มีเหตุผลเพียงพอที่จะใช้องค์ประกอบด้านข้าง ถามตัวเองว่าเนื้อหาภายในสามารถลบออกได้โดยไม่ลดความหมายของเนื้อหาหลัก Pullquotes เป็นตัวอย่างของเนื้อหาที่เกี่ยวข้องแทนเจนต์

ส่วนหัว - มีความแตกต่างที่สำคัญระหว่างองค์ประกอบส่วนหัวและการใช้งานทั่วไปที่ยอมรับของส่วนหัว (หรือหัวเสา) โดยปกติจะมีเพียงหนึ่งส่วนหัวหรือ 'เสากระโดงเรือ' ในหน้า ใน HTML5 คุณสามารถมีได้มากเท่าที่คุณต้องการ ข้อมูลจำเพาะกำหนดว่าเป็น "กลุ่มของโรคเอดส์เบื้องต้นหรือการนำทาง" คุณสามารถใช้ส่วนหัวในส่วนใดก็ได้ในเว็บไซต์ของคุณ ที่จริงแล้วคุณควรใช้ส่วนหัวในส่วนของคุณ ข้อมูลจำเพาะอธิบายองค์ประกอบของส่วนว่า“ การจัดกลุ่มเนื้อหาโดยทั่วไปจะมีหัวเรื่อง”

nav - มีไว้สำหรับข้อมูลการนำทางที่สำคัญ กลุ่มของลิงก์ที่รวมกันไม่เพียงพอที่จะใช้องค์ประกอบ nav การนำทางทั่วทั้งไซต์ในอีกทางหนึ่งอยู่ในองค์ประกอบ nav

ท้ายกระดาษ - ฟังดูเหมือนคำอธิบายของตำแหน่ง แต่ไม่ใช่ องค์ประกอบส่วนท้ายประกอบด้วยข้อมูลเกี่ยวกับองค์ประกอบที่มี: ผู้เขียนลิขสิทธิ์ลิงก์ไปยังเนื้อหาที่เกี่ยวข้อง ฯลฯ ในขณะที่เรามักจะมีส่วนท้ายเดียวสำหรับเอกสารทั้งหมด HTML5 ช่วยให้เรามีส่วนท้ายได้ในส่วน

ที่มา : https://clzd.me/html5-section-aside-header-nav-footer-elements-not-as-obvious-as-they-sound/

นอกจากนี้นี่คือคำอธิบายเกี่ยวกับarticleไม่พบในแหล่งข้อมูลด้านบน:

บทความ - ใช้สำหรับองค์ประกอบที่ระบุเนื้อหาที่มีในตัวเองอิสระ บทความควรสมเหตุสมผลด้วยตัวมันเอง ก่อนที่จะแทนที่ div ทั้งหมดของคุณด้วยองค์ประกอบของบทความให้ถามตัวคุณเองเสมอว่า: "เป็นไปได้ไหมที่จะอ่านด้วยตนเองจากส่วนที่เหลือของเว็บไซต์"

— นาธาน JB
แหล่งที่มา

68

มันเป็นปริศนาสำหรับฉันว่าคำตอบนี้ได้รับคะแนนเสียงมากมาย: มันไม่ได้พูดถึง<article>องค์ประกอบมันไม่แตกต่างจากองค์ประกอบที่กล่าวถึงและไม่ได้จัดกลุ่มพวกเขา คำตอบไม่ได้ "วิธีปฏิบัติที่ดีที่สุด" และไม่ตอบคำถามที่ชัดเจนของ OP!

— Robert Siemer

2

@RobertSiemer สำหรับฉันแล้วมันยังเป็นปริศนาที่ความคิดเห็นของคุณได้รับ 24 upvotes และคำถามเพียง 6 downvotes ...

— Veger

@RobertSiemer เพราะมันดูดีมากคุณคิดยังไง? ฉันไม่รู้ว่ามันไม่ดีจนกว่าจะตรวจสอบความคิดเห็นของคุณและยืนยันด้วยคำตอบต่อไป

— เดช

238

น่าเสียดายที่คำตอบที่ให้มา (รวมถึงการโหวตมากที่สุด) มีทั้งสามัญเพียงแค่สามัญผิดหรือสับสนที่ดีที่สุด ไม่มีคำหลักที่สำคัญ¹ปรากฏขึ้น!

ฉันเขียน 3 คำตอบ:

เพื่อให้เข้าใจถึงบทบาทขององค์ประกอบ html ที่กล่าวถึงที่นี่คุณต้องรู้ว่าบางส่วนในเอกสาร แต่ละเอกสาร html สามารถแบ่งส่วนตามอัลกอริทึมเค้าร่าง HTML5สำหรับวัตถุประสงค์ในการสร้างเค้าร่าง - หรือ - สารบัญ (TOC) โดยทั่วไปเค้าร่างไม่สามารถมองเห็นได้ (วันนี้) แต่ผู้เขียนควรใช้ html ในลักษณะที่เค้าร่างผลลัพธ์สะท้อนถึงความตั้งใจของพวกเขา

คุณสามารถสร้างส่วนที่มีว่าองค์ประกอบเหล่านี้และไม่มีอะไรอื่น :

การสร้างส่วนย่อย (ชัดเจน)
- <section> ส่วน
- <article> ส่วน
- <nav> ส่วน
- <aside> ส่วน
การสร้างส่วนพี่น้องหรือส่วนย่อย
- ส่วนที่ไม่ระบุชนิดที่มี<h*>^² (ไม่ใช่ทั้งหมดดูที่ด้านล่าง)
เพื่อเพิ่มระดับให้ใกล้กับส่วนที่ชัดเจนในปัจจุบัน (ย่อย)

ส่วนสามารถตั้งชื่อ:

<h*> ชื่อส่วนที่สร้างขึ้นเอง
<section|article|nav|aside>ส่วนจะถูกตั้งชื่อตามชื่อแรก<h*>หากมี
- สิ่งเหล่านี้<h*>เป็นสิ่งเดียวที่ไม่สร้างส่วนเอง

มีอีกสิ่งหนึ่งที่จะเป็นส่วน: บริบทดังต่อไปนี้ (องค์ประกอบเช่น) สร้าง "ขอบเขตขอบเขต" สิ่งที่พวกเขามีส่วนเป็นส่วนตัวพวกเขา:

เอกสารด้วยตัวเอง <body>
เซลล์ตารางด้วย <td>
<blockquote>
<details>, <dialog>, <fieldset>และ<figure>
ไม่มีอะไรอื่น

หัวข้อ

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)

สิ่งนี้ทำให้เกิดคำถามสองข้อ:

ความแตกต่างระหว่าง<article>และ<section>คืออะไร?

ทั้งสองสามารถ:
- ซ้อนกัน
- ใช้ความคิดที่แตกต่างในบริบทหรือระดับการซ้อนที่แตกต่างกัน
<section>เป็นเหมือนบทหนังสือ
- พวกเขามักจะมีพี่น้อง (อาจอยู่ในเอกสารอื่น)
- พวกเขามีบางสิ่งที่เหมือนกันเหมือนตอนในหนังสือ
ผู้เขียนหนึ่งคน<article>อย่างน้อยหนึ่งคนที่ระดับต่ำสุด
- ตัวอย่างมาตรฐาน: ความคิดเห็นบล็อกเดียว
- รายการบล็อกเองก็เป็นตัวอย่างที่ดี
- รายการบล็อก<article>และความคิดเห็น<article>สามารถห่อด้วย<article>
- มันเป็นบางสิ่งที่ "สมบูรณ์" ไม่ใช่ส่วนหนึ่งในชุดที่คล้ายกัน
<section>ในเป็น<article>เหมือนบทในหนังสือ
<article>s in a <section>เป็นเหมือนบทกวีในเล่ม (ภายในชุด)

วิธีทำ<header>, <footer>และ<main>พอดีมีอะไรบ้าง?

มันไม่มีผลต่อการแบ่งส่วน
<header> และ <footer>
- มันช่วยให้คุณทำเครื่องหมายโซนของแต่ละส่วนได้
- แม้ในส่วนที่คุณสามารถมีได้หลายครั้ง
- เพื่อแยกความแตกต่างจากส่วนหลักในส่วนนี้
- จำกัด เฉพาะรสชาติของผู้เขียน
- <header>
  - อาจทำเครื่องหมายชื่อ / ชื่อของส่วนนี้
  - อาจมีโลโก้สำหรับส่วนนี้
  - ไม่จำเป็นต้องอยู่ที่ส่วนบนหรือส่วนบนของส่วน
- <footer>
  - อาจทำเครื่องหมายเครดิต / ผู้แต่งของส่วนนี้
  - สามารถมาที่ด้านบนของส่วน
  - สามารถอยู่เหนือ <header>
<main>
- อนุญาตครั้งเดียวเท่านั้น
- ทำเครื่องหมายส่วนหลักของส่วนระดับบนสุด (เช่นเอกสาร<body>นั่นคือ)
- ส่วนย่อยไม่มีมาร์กอัปสำหรับส่วนหลัก
- <main>สามารถ "ซ่อน" ในส่วนย่อยของเอกสารในขณะที่เอกสาร<header>และ<footer>ไม่สามารถ (มาร์กอัปนั้นจะทำเครื่องหมายส่วนหัว / ส่วนท้ายของส่วนย่อยนั้น)
  - แต่ไม่อนุญาตใน<article>ส่วนที่³
- ช่วยแยกความแตกต่าง“ ของจริง” จากเอกสารที่ไม่ใช่ส่วนหัว, ส่วนท้าย, ไม่ใช่เนื้อหาหลัก, ถ้ามันสมเหตุสมผลในกรณีของคุณ ...

^{¹ในใจมา: เค้าร่างขั้นตอนวิธีการ sectioning นัย}
^{²ผมใช้<h*>เป็นชวเลข<h1>, <h2>, <h3>, <h4>, <h5>และ<h6>}
^{³ไม่เป็น<main>ที่อนุญาตใน<aside>หรือ<nav>แต่ที่เป็นที่น่าแปลกใจ - มีผล: <main>สามารถซ่อนเฉพาะในส่วน (ซ้อน) จากมากไปน้อย<section>หรือปรากฏที่ระดับบนสุดคือ<body>}

— Robert Siemer
แหล่งที่มา

33

คำตอบก็เหมือนบทกวีนั่นเอง ส่วนหนึ่งที่ฉันชอบคือ: sections in an article are like chapters in a book, articles in a section are like poems in a volume- ที่ดีที่สุดและง่ายที่สุดarticleเทียบกับsectionคำอธิบายที่ผมเคยเห็น!

— Sergey Lukin

1

นั่นเป็นความรู้ที่กว้างขวางโดยไม่ต้องใช้แผ่นสำเร็จรูปสรุปในหัวข้อย่อย ขอบคุณสำหรับการแชร์! บางครั้งคำตอบที่ดีที่สุดคือทั้งที่ยอมรับและไม่ได้คะแนนสูงสุด

3

ฉันรู้ว่ามันเป็นความคิดโบราณ แต่ "นี่ควรเป็นคำตอบที่ยอมรับได้!" เชิงอรรถและทุกสิ่ง! ขอบคุณ!

— ยูจีน

ยูจีนและฟุตหรือถูกต้อง จำไว้ว่าคุณสามารถลงคะแนนคำตอบที่ไม่สมบูรณ์และไม่ถูกต้องในขณะที่ลงคะแนนในคำตอบนี้ ไม่ใช่ความผิดของผู้เขียน แต่เป็นค่าใช้จ่ายในการตรวจสอบคำตอบที่ดีที่สุดก่อน นอกจากความคิดเห็นของโรเบิร์ตในคำตอบที่เลือกแล้วฉันไม่ชอบเพราะคัดลอกเนื้อหา (ไม่สมบูรณ์) จากที่อื่นในเว็บ

— IAmNaN

คำตอบที่มีรายละเอียดมากและทำให้หลายสิ่งชัดเจนขอบคุณ!

— Alaeddine

111

องค์ประกอบ div สามารถถูกแทนที่ด้วยองค์ประกอบใหม่: ส่วนหัว, nav, ส่วน, บทความ, ด้านข้างและส่วนท้าย

มาร์กอัพสำหรับเอกสารนั้นอาจมีลักษณะดังต่อไปนี้:

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

คุณอาจจะหาข้อมูลเพิ่มเติมในบทความนี้ในรายการนอกเหนือ

— cilerler
แหล่งที่มา

25

โครงสร้างหม้อไอน้ำนี้ไม่คุ้มค่ากับพื้นที่ในหน้านี้ 1) ไม่มีองค์ประกอบ HTML ที่กล่าวถึงที่เชื่อมโยงกับตำแหน่งใด ๆ ในเอกสาร 2) มันแปลว่า <header> และ <footer> เป็นองค์ประกอบระดับเอกสาร 3) มันหมายถึงเท็จว่า <section> ตั้งใจให้เป็น <article> - เด็กเท่านั้น @DanDascalescu

— Robert Siemer

2

ไม่สามารถยอมรับ @RobertSiemer เพิ่มเติมได้ นี่เป็นหนึ่งในความเข้าใจผิดที่พบบ่อยที่สุดเกี่ยวกับองค์ประกอบ HTML5 และกลายเป็นอุปสรรคต่อความหมายสำหรับภาษามาร์กอัปที่เรารัก

— kano

@RobertSiemer Re: 2) ไม่สามารถ<header>และ<footer>เป็นองค์ประกอบเอกสารระดับเช่นเดียวกับใน<section|article|nav|aside>ส่วน?

— Flimm

1

@Flimm ใช่พวกเขาทำได้ ประเด็นของฉันคือ: คำตอบไม่ผิด - แค่ตอบไม่มาก

— Robert Siemer

63

ฉันขอแนะนำให้อ่านหน้าW3 เกี่ยวกับการสร้าง HTML5 :

<header>ใช้เพื่อบรรจุเนื้อหาส่วนหัวของเว็บไซต์ <footer> มีเนื้อหาส่วนท้ายของไซต์ <nav>มีเมนูการนำทางหรือฟังก์ชั่นการนำทางอื่น ๆ สำหรับหน้า

<article> มีเนื้อหาที่เป็นเอกเทศ
เหมาะสมหากมีการรวบรวมเป็นรายการ RSS ตัวอย่างเช่นรายการข่าว

<section> ใช้เพื่อจัดกลุ่มบทความต่าง ๆ ลงในที่แตกต่างกัน
วัตถุประสงค์หรือวิชาที่หรือเพื่อกำหนดส่วนต่าง ๆ ของบทความเดียว

<aside> กำหนดบล็อกของเนื้อหาที่เกี่ยวข้องกับเนื้อหาหลักที่อยู่รอบ ๆ แต่ไม่เกี่ยวข้องกับการไหลของมัน

พวกเขามีภาพที่ฉันทำความสะอาดที่นี่:

HTML5

ในรหัสนี้ดูเหมือนว่า:
<body>
  <header></header>    
  <nav></nav>    
  <section id="sidebar"></section>    
  <section id="content"></section>    
  <aside></aside>    
  <footer></footer>
</body>
มาสำรวจองค์ประกอบ HTML5 บางส่วนโดยละเอียดยิ่งขึ้น

<section>

<section>องค์ประกอบสำหรับการที่มีพื้นที่ที่แตกต่างกันที่แตกต่างกันของการทำงานหรืออาสาสมัครในพื้นที่หรือทำลายบทความหรือเรื่องราวออกเป็นส่วนที่แตกต่างกัน ดังนั้นในกรณีนี้: "sidebar1" มีลิงค์ที่มีประโยชน์มากมายที่จะคงอยู่ในทุกหน้าของเว็บไซต์เช่น "สมัครสมาชิก RSS" และ "ซื้อเพลงจากร้านค้า" "main" มีเนื้อหาหลักของหน้านี้ซึ่งก็คือบล็อกโพสต์ ในหน้าอื่นของเว็บไซต์เนื้อหานี้จะเปลี่ยนไป มันเป็นองค์ประกอบทั่วไปเป็นธรรม <div>แต่ยังคงมีความหมายทางความหมายมากขึ้นกว่าเก่าธรรมดา

<article>

<article>มีความเกี่ยวข้องกับ<section>แต่มีความแตกต่างอย่างชัดเจน โดยที่<section>มีไว้สำหรับการจัดกลุ่มส่วนที่แตกต่างกันของเนื้อหาหรือฟังก์ชันการทำงานนั้น<article>มีไว้สำหรับการบรรจุเนื้อหาส่วนบุคคลแบบสแตนด์อโลนที่เกี่ยวข้องเช่นโพสต์บล็อกวิดีโอวิดีโอหรือรายการข่าว ลองใช้วิธีนี้ - ถ้าคุณมีเนื้อหาหลายรายการแต่ละรายการจะเหมาะสำหรับการอ่านด้วยตนเองและควรจัดระเบียบเป็นรายการแยกต่างหากในฟีด RSS ดังนั้น<article>จึงเหมาะสำหรับการทำเครื่องหมายขึ้น ในตัวอย่างของเรา<section id="main">มีรายการบล็อก แต่ละบล็อกจะเหมาะสำหรับการรวมเป็นไอเท็มในฟีด RSS และจะเหมาะสมเมื่ออ่านด้วยตนเองนอกบริบทดังนั้นจึง<article> เหมาะสำหรับพวกเขา:
<section id="main">
    <article></article>        
    <article></article>        
    <article></article>
</section>
งั้นเหรอ? โปรดระวังด้วยว่าคุณสามารถซ้อนส่วนของบทความไว้ในที่ ๆ เหมาะสมได้ ตัวอย่างเช่นหากแต่ละโพสต์บล็อกเหล่านี้มีโครงสร้างที่สอดคล้องกันของส่วนที่แตกต่างกันคุณสามารถใส่ส่วนต่างๆในบทความของคุณได้เช่นกัน อาจมีลักษณะเช่นนี้:
<article>
  <section id="introduction"></section>      
  <section id="content"></section>
  <section id="summary"></section>
</article>
<header> และ <footer>

ตามที่เราได้กล่าวไปแล้วข้างต้นจุดประสงค์ขององค์ประกอบ<header>และ <footer>เพื่อห่อเนื้อหาส่วนหัวและส่วนท้ายตามลำดับ ในตัวอย่างเฉพาะของเรา<header>องค์ประกอบนั้นมีภาพโลโก้และ<footer>องค์ประกอบนั้นมีประกาศลิขสิทธิ์ แต่คุณสามารถเพิ่มเนื้อหาที่ซับซ้อนมากขึ้นได้หากคุณต้องการ นอกจากนี้โปรดทราบว่าคุณสามารถมีส่วนหัวและส่วนท้ายได้มากกว่าหนึ่งรายการในแต่ละหน้าเช่นเดียวกับส่วนหัวและส่วนท้ายระดับบนสุดที่เราเพิ่งพูดถึงคุณอาจมีองค์ประกอบ<header>และ<footer>ซ้อนกันภายในแต่ละ <article>กรณีซึ่งพวกเขาจะใช้กับสิ่งนั้น บทความเฉพาะ การเพิ่มตัวอย่างข้างต้นของเรา:
<article>
  <header></header>    
  <section id="introduction"></section>      
  <section id="content"></section>      
  <section id="summary"></section>      
  <footer></footer>
</article>
<nav>

<nav>องค์ประกอบสำหรับการทำเครื่องหมายการเชื่อมโยงการนำทางหรือโครงสร้างอื่น ๆ (เช่นรูปแบบการค้นหา) ที่จะนำคุณไปยังหน้าต่างๆของเว็บไซต์ปัจจุบันหรือในพื้นที่ที่แตกต่างกันของหน้าปัจจุบัน ลิงค์อื่น ๆ เช่นลิงค์ผู้สนับสนุนจะไม่ถูกนับ แน่นอนคุณสามารถรวมส่วนหัวและองค์ประกอบโครงสร้างอื่น ๆ ไว้ภายใน<nav>แต่ไม่บังคับ

<aside>

คุณอาจสังเกตเห็นว่าเราใช้<aside>องค์ประกอบเพื่อทำเครื่องหมายแถบด้านข้างที่ 2: องค์ประกอบที่มีกิ๊กล่าสุดและรายละเอียดการติดต่อ นี่คือความเหมาะสมอย่างสมบูรณ์เช่นเดียวกับ<aside>การทำเครื่องหมายชิ้นส่วนของข้อมูลที่เกี่ยวข้องกับการไหลหลัก แต่ไม่พอดีกับมันโดยตรง และเนื้อหาหลักในกรณีนี้คือทั้งหมดที่เกี่ยวกับวงดนตรี! ตัวเลือกที่ดีอื่น ๆ สำหรับ<aside>ข้อมูลเกี่ยวกับผู้แต่งโพสต์บล็อกชีวประวัติวงดนตรีหรือรายชื่อวงดนตรีพร้อมลิงก์สำหรับซื้ออัลบั้มของพวกเขา

มันจะไปจาก<div>ไหน?

ดังนั้นด้วยองค์ประกอบใหม่ที่ยอดเยี่ยมเหล่านี้เพื่อใช้ในหน้าของเราวันที่ต่ำต้อย<div>จะถูกนับแน่นอน? NO ในความเป็นจริง<div> ยังคงมีการใช้งานที่ถูกต้องสมบูรณ์ คุณควรใช้เมื่อไม่มีองค์ประกอบอื่นที่เหมาะสมสำหรับการจัดกลุ่มเนื้อหาซึ่งมักจะเป็นเมื่อคุณใช้องค์ประกอบเพื่อจัดกลุ่มเนื้อหาเนื้อหาร่วมกันเพื่อจัดแต่งทรงผม / ภาพ ตัวอย่างทั่วไปคือการใช้<div>เพื่อตัดเนื้อหาทั้งหมดในหน้าจากนั้นใช้ CSS เพื่อจัดวางเนื้อหาทั้งหมดในหน้าต่างเบราว์เซอร์หรือใช้ภาพพื้นหลังเฉพาะกับเนื้อหาทั้งหมด

— จัสติน
แหล่งที่มา

1

อย่างไรก็ตามสำหรับส่วนที่ซ้อนกันจะไม่เหมาะสม<section class="summary">กว่า<section id="summary">หรือไม่ หากคุณมีบทความหลายบทความในหนึ่งหน้าวิธีหลังจะส่งผลให้มี ID ซ้ำกันในหน้าเดียวกันนั่นคือ HTML faux-pas ขวา?

— JP Lew

ใช่ฉันอาจใช้คลาสแทนในกรณีนั้น

— Justin

1

แท็กทั้งหมดที่คุณพูดถึงไม่ควรห่อด้วย "หลัก" ซึ่งจะรวมอยู่ใน "เนื้อหา"

— Francisco Aguilera

1

mainแท็กจะดีที่จะเพิ่ม ตำแหน่งที่จะวางไว้นั้นจะถูกตัดสินโดยขึ้นอยู่กับเนื้อหาที่ไม่ซ้ำกันในหน้า sectionในตัวอย่างนี้ผมคิดว่าผมก็จะใส่มันรอบศูนย์กลาง อ่านเพิ่มเติม: w3.org/TR/2012/WD-html-main-element-20121217 "ส่วนเนื้อหาหลักของเอกสารมีเนื้อหาที่ไม่ซ้ำกับเอกสารนั้นและไม่รวมเนื้อหาที่ทำซ้ำในชุดเอกสารเช่นไซต์ ลิงก์การนำทางข้อมูลลิขสิทธิ์โลโก้ของไซต์และแบนเนอร์และฟอร์มการค้นหา "

— Justin

มันยังคลุมเครือเช่นเดียวกับเอกสาร MDN

— oldboy

23

[ คำอธิบายใน“ คำตอบหลัก” ของฉัน ]

บรรทัด 7 ส่วนทั่วทั้งเว็บไซต์? หรือdivเท่านั้น?

ทั้ง สำหรับการจัดแต่งทรงผม: ใช้<body>มันมันมีอยู่แล้ว สำหรับการแบ่งส่วน / อรรถศาสตร์: ตามรายละเอียดในตัวอย่าง HTML ของฉันผลกระทบนั้นตรงกันข้ามกับประโยชน์ การห่อเพิ่มเติมสำหรับเนื้อหาที่ห่อแล้วไม่มีการปรับปรุง แต่เสียงรบกวน

บรรทัดที่ 8. แต่ละส่วนเริ่มต้นด้วยส่วนหัว?

ไม่เป็นทางเลือกของผู้เขียนที่จะนำเนื้อหาสรุปโดยทั่วไปเป็น“ ส่วนหัว” <header>และถ้าเกิดว่าส่วนหัวของเนื้อหาเป็นที่จดจำได้อย่างชัดเจนโดยไม่ต้องเสริมการทำเครื่องหมายมันสมบูรณ์อาจจะอยู่ได้โดยไม่ต้อง นี่ก็เป็นทางเลือกของผู้เขียน

บรรทัด 23. divนี้ใช่ไหม หรือนี้จะต้องเป็นส่วน ?

<div>อาจจะไม่ถูกต้อง มันขึ้นอยู่กับความตั้งใจ: มันเป็นเพียงการจัดแต่งทรงผมมันอาจจะถูกต้อง ถ้ามันเพื่อวัตถุประสงค์ความหมายมันเป็นความผิดมันควรจะเป็น<article>แทนตามที่ปรากฏในคำตอบอื่น ๆ ของฉัน <article>มันก็ถูกต้องถ้ามันเป็นทั้งการจัดแต่งทรงผมและการแบ่งส่วนที่รวมกัน

<section>ดูผิดที่นี่เนื่องจากไม่มีส่วนที่คล้ายกันก่อนหรือหลังส่วนนี้เช่นบทในหนังสือ (นี่คือจุดประสงค์ของ<section>)

สาย 24. Split ซ้าย / คอลัมน์ด้านขวามีdiv

ไม่ทำไม?

บรรทัด 25. สถานที่ที่เหมาะสมสำหรับแท็กบทความ ?

ใช่เข้าท่า

บรรทัด 26. จำเป็นต้องใส่h1 -tag ในheader -tag หรือไม่?

ไม่<h*>องค์ประกอบที่โดดเดี่ยวอาจไม่จำเป็นต้องไปอยู่ใน<header>(แต่ถ้าทำได้) เนื่องจากเป็นที่ชัดเจนแล้วว่าเป็นหัวข้อที่จะเกิดขึ้น - มันสมเหตุสมผลถ้า<header>รวมถึงสโลแกน (ทำเครื่องหมายด้วย<p>) เช่นกัน

สาย 43. เนื้อหาจะไม่เกี่ยวข้องกับบทความหลักดังนั้นฉันตัดสินใจนี้เป็นส่วนและไม่ได้เป็นกัน

มันเป็นความเข้าใจผิดที่<aside>จะต้องมี " เกี่ยวข้อง tangential " เนื้อหา ประเด็นคือ: ใช้<aside>ถ้าเนื้อหานั้น“ มีความเกี่ยวข้องเชิงสัมผัส ” หรือไม่เลย!

อย่างไรก็ตามนอกเหนือจาก<aside>การเป็นตัวเลือกที่ดี<article>อาจยังดีกว่า<section>"รายการยอดนิยม" และ "รายการใหม่" ที่ไม่ควรอ่านเหมือนสองบทในหนังสือ คุณสามารถไปหาหนึ่งในนั้นได้อย่างสมบูรณ์แบบและไม่เหมือนกับอีกอย่างหนึ่งคือการเรียงลำดับทางเลือกของบางสิ่งไม่เหมือนสองส่วนโดยรวม

บรรทัดที่ 44. H2ไม่มีส่วนหัว

ดีมาก.

บรรทัด 53. ส่วนที่ไม่มีส่วนหัว

ไม่มีไม่มี<header>แต่ส่วน<h2>หัวใบค่อนข้างชัดเจนซึ่งส่วนในส่วนนี้เป็นส่วนหัว

บรรทัด 63. Divกับรายการข่าวทั้งหมด (ไม่เกี่ยวข้อง)

<article>หรือ<aside>อาจจะดีกว่า

บรรทัดที่ 64. ส่วนหัวพร้อมh2

พูดคุยกันแล้ว

บรรทัดที่ 65. อืมdivหรือส่วนใด? หรือลบdivนี้และใช้เฉพาะบทความ -tag

แน่นอน! <div>ลบ

บรรทัดที่ 105. ส่วนท้าย :-)

สมเหตุสมผลมาก

— Robert Siemer
แหล่งที่มา

การแยกคำตอบหนึ่งข้อเป็น 3 ข้อไม่สมบูรณ์ไม่เป็นประโยชน์

— Christian Strempfer

6

@ChristianStrempfer จริงๆแล้วมันมีประโยชน์เพราะหลายคนไม่ได้มาที่นี่เพื่ออ่านคำตอบเฉพาะสำหรับคำถามเฉพาะของ OP (คำตอบนี้) แต่เพื่ออ่านเพิ่มเติมเกี่ยวกับหัวข้อที่อยู่ในมือ (คำตอบหลักของฉัน) - ฉันเชื่อด้วยคำตอบ tldr ขนาดใหญ่ฉันจะไม่ได้รับคะแนนจากคำตอบหลักของฉันเพียงอย่างเดียว - คุณแนะนำอะไร?

— Robert Siemer

ฉันขอแนะนำให้รวมพวกเขาเป็นคำตอบเดียว คะแนนการรวบรวมไม่ได้เป็นอาร์กิวเมนต์ที่ดีสำหรับการแยกพวกเขา โดยเฉพาะคำตอบที่สามไม่สามารถยืนอยู่คนเดียวในขณะที่คุณอ้างถึงคำตอบหลักของคุณ

— Christian Strempfer

@ChristianStrempfer นั่นคงจะนานเกินไปสำหรับรสนิยมของฉัน - ผมทำงานเกี่ยวกับการปรับปรุงตาราง แต่ ...

— โรเบิร์ต Siemer

20

ตามคำอธิบายใน "หลัก" ของฉันตอบเอกสารที่เป็นปัญหาควรถูกทำเครื่องหมายตามโครงร่าง

ในสองตารางต่อไปนี้ฉันแสดง:

HTML ดั้งเดิมและเค้าร่างของมัน
โครงร่างที่เป็นไปได้และ HTML ที่ทำเช่นนั้น

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.

ตารางต่อไปนี้แสดงข้อเสนอของฉันสำหรับรุ่นที่ปรับปรุง ฉันใช้มาร์กอัปต่อไปนี้:

~~<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
แหล่งที่มา

ขอบคุณสำหรับคำตอบรายละเอียดที่ยอดเยี่ยมมันเป็นความสว่างมาก ฉันต้องการเรียนรู้เพิ่มเติมเกี่ยวกับหัวข้อดังนั้นฉันหวังว่าคุณจะสามารถอธิบายทางเลือกบางอย่างซึ่งดูแปลกสำหรับฉัน ฉันจะโพสต์พวกเขาเป็นความคิดเห็นของแต่ละบุคคล

— gorn

1. ส่วนหัวข้าง ๆ > div [id = logo]ดูเหมือนจะไม่เกี่ยวข้องกับฉัน ปัจจุบันเป็นส่วนหัว แต่ไม่มีความหมาย div ภาษาอาจเป็นการนำทางบางอย่างและโลโก้อาจเป็นส่วนหัวของเว็บไซต์ทั้งหมด แต่ไม่ได้อยู่ที่หน้าเว็บ

— gorn

2. <ARTICLE id = main>ดูเหมือนเป็นเพียงการนำเสนอเท่านั้น มันไม่มีสิ่งที่เกี่ยวข้องภายใน (เช่นเดียวกับ <ARTICLE id = main-right> แต่สามารถป้องกันได้มากกว่านั้น (เช่น "ข่าวและร้อนแรง")) ฉันแนะนำให้ใช้ div หรือ main ที่แย่ที่สุด

— สาบาน

3. <ARTICLE id = รายการข่าว>ดูเหมือนว่าเป็นกรณีทั่วไปที่ฉันจะใช้ มันไม่มีอะไรเกี่ยวข้องกับบทความหลักมันเป็นเพียงฟีดข่าว และฉันยอมรับว่ามันมีข่าวเป็นบทความ "เล็ก ๆ " แต่ละรายการ

— gorn

1

พิจารณาการแก้ไขข้อเสนอของคุณคำตอบ "เชิงทฤษฎี" ของคุณเขียนได้ดีมาก แต่ฉันคิดว่าผู้เริ่มต้นส่วนใหญ่จะดูตัวอย่างโค้ดและพวกเขาอาจสับสนจริง ๆ เพราะมันไม่สอดคล้องกับส่วนทางทฤษฎี

— gorn

17

ข้อผิดพลาดหลัก: คุณมี "divitis" ในเอกสารทั้งหมด
ทำไมจึงเป็นเช่นนี้

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

แทน:

<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>

หากต้องการจัดระเบียบส่วนหัวนี้ให้ใช้ลำดับชั้น CSS: body> section> header> h1, body> section> header> h2

เพิ่มเติม, ... บรรทัดที่ 63: ทำไมส่วนหัวจึงตัดคำ h2 หากคุณไม่รวมองค์ประกอบใด ๆ เพิ่มเติมภายในส่วนหัวเพียงแค่ใช้ h2 เดียว
โปรดจำไว้ว่าโครงสร้างของคุณไม่ใช่เอกสารที่มีสไตล์ แต่สร้างเอกสารที่อธิบายตัวเองได้

ใช้สิ่งนี้กับเอกสารที่เหลือ; โชคดี ;)

— Covi
แหล่งที่มา

4

@superUntitled <hgroup> ไม่ได้เป็นส่วนหนึ่งของ HTML5 อีกต่อไปแล้ว

— bradley.ayers

role = "banner" ควรอยู่บน h1 เองไม่ใช่ส่วนหัวทั้งหมดหรือไม่ ด้วยวิธีนี้ชี้ไปที่ข้อความชิ้นเดียวที่โปรแกรมอ่านหน้าจอจะประกาศไม่ใช่ HTML

— enigment

11

การใช้ h1 และ h2 สำหรับโลโก้และภาษาไม่สมเหตุสมผลสำหรับฉัน ปุ่มภาษาเล็ก ๆ ทางขวาควรเป็นเนื้อหา / ข้อมูลที่สำคัญที่สุดลำดับที่สองในหน้านี้? และถ้าคุณวางโลโก้ของคุณใน h1 มากกว่าบอทการค้นหาจะพบว่าเนื้อหาหลักของทุกหน้าเหมือนกัน (น่าเบื่อในใจ) ดูที่ @MeanEYE คำตอบสำหรับการใช้ h1 และ h2 นอกเหนือจาก IDs นั้นไม่ใช่ความหมายใช้ RDFa หากคุณต้องการซีแมนทิกส์ วิธีของคุณทำให้ตัวเลือก CSS ช้าลง: developers.google.com/speed/docs/best-practices/…

— F Lekschas

10

ทำไมไม่มี item_1, item_2, ฯลฯ รหัสในบทความแท็กตัวเอง? แบบนี้:

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

ดูเหมือนว่าไม่จำเป็นต้องเพิ่ม divs wrapper ค่า ID ไม่มีความหมายเชิงความหมายใน HTML ดังนั้นฉันคิดว่ามันจะถูกต้องสมบูรณ์ในการทำเช่นนี้ - คุณไม่ได้บอกว่าบทความแรกคือ item_1 เสมอเพียงแค่ item_1 ในบริบทของหน้าปัจจุบัน รหัสไม่จำเป็นต้องมีความหมายใด ๆ ที่เป็นอิสระจากบริบท

สำหรับคำถามของคุณในบรรทัดที่ 26 ฉันไม่คิดว่าจำเป็นต้องมีแท็ก <header> และฉันคิดว่าคุณสามารถละเว้นได้เนื่องจากแท็ก <header> ของตัวเอง หากอยู่ในรายการหลักของบทความคุณอาจต้องการรวมแท็ก <header> เพื่อความสอดคล้อง

— แมตต์บราวน์
แหล่งที่มา

2

ฉันแค่ทำตามตัวอย่างดั้งเดิมและแสดงวิธีการทำสิ่งเดียวกันให้สำเร็จโดยไม่ต้องใช้กระดาษห่อที่ไม่จำเป็น รหัสอาจมีสาเหตุหลายประการ ... ประการหนึ่งอาจมีจุดยึดลิงก์ที่ชี้ไปยังพวกเขา

— Matt Browne

5

ส่วนควรจะใช้เพื่อห่อส่วนภายในเอกสาร (เช่นบทและที่คล้ายกัน)
ด้วยแท็กส่วนหัว : NO แท็กส่วนหัวหมายถึงเสื้อคลุมสำหรับส่วนหัวของหน้าและไม่ให้สับสนกับ H1, H2 และอื่น ๆ
div ไหน : D
ใช่
จากโรงเรียน W3C:

แท็กกำหนดเนื้อหาภายนอก เนื้อหาภายนอกอาจเป็นบทความข่าวจากผู้ให้บริการภายนอกหรือข้อความจากบันทึกการใช้เว็บ (บล็อก) หรือข้อความจากฟอรัมหรือเนื้อหาอื่น ๆ จากแหล่งภายนอก
ไม่แท็กส่วนหัวมีการใช้งานอื่น H1, H2 และอื่น ๆ เป็นชื่อเอกสาร H1 ที่สำคัญที่สุด

ฉันไม่ได้ตอบคำถามอื่นเพราะมันยากที่จะเดาว่าคุณหมายถึงอะไร หากมีคำถามเพิ่มเติมโปรดแจ้งให้เราทราบ

— MeanEYE
แหล่งที่มา

1

ขอบคุณสำหรับคำตอบ! บนจุด 3; ฉันขอโทษหมายเลขบรรทัดไม่ถูกต้อง จะต้องเป็น line_23 แทนที่จะเป็นจุด 3 ดูการเปลี่ยนแปลงของบรรทัดในโพสต์ของฉันด้วย

— Bas van Dorst

ใช่ฉันทำสิ่งเดียวกันในเว็บไซต์ของฉัน โดยทั่วไปจะใช้ DIV เพื่อสร้างโครงสร้างของไซต์ การแนะนำส่วนหัวท้ายกระดาษและแท็กที่คล้ายกันใน HTML5 เป็นเพียงการทำให้อ่านง่ายขึ้น พวกเขาทำงานในลักษณะเดียวกันกับ DIV

— MeanEYE

3

ตรวจสอบแหล่งที่มาของคุณ ไซต์โรงเรียน w3c ไม่ได้ระบุว่าarticleจำเป็นต้องมาจากแหล่งภายนอก w3schools.com/html5/tag_article.asp

— chharvey

อืมฉันไม่คิดว่าจะใช้บทความจากแหล่งข้อมูลภายนอก นี่เป็นการออกจากคำตอบเก่า ๆ ฉันแทบจะจำไม่ได้ว่ามันเกี่ยวกับอะไร :)

— MeanEYE

ฉันเห็นด้วยกับ # 1 ฉันคิดว่าองค์ประกอบของส่วนเหล่านั้นเหมาะสมกว่าในฐานะ ASIDE

— Andy

3

นี่คือตัวอย่างของฉันที่ฉันทำงาน

ป้อนคำอธิบายรูปภาพที่นี่

— อีวาน
แหล่งที่มา

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

— ЮрийСветлов
แหล่งที่มา

1

ฉันไม่คิดว่าคุณควรใช้แท็กในสรุปรายการข่าว (บรรทัดที่ 67, 80, 93) คุณสามารถใช้ส่วนหรือเพียงแค่มี div ล้อมรอบ

บทความจะต้องสามารถยืนได้ด้วยตัวเองและยังคงมีเหตุผลหรือสมบูรณ์ เนื่องจากไม่สมบูรณ์หรือเป็นเพียงส่วนแยกเท่านั้นจึงไม่สามารถเป็นบทความได้

เมื่อคุณคลิก 'อ่านเพิ่มเติม' หน้าต่อไปสามารถ

— conordarcy
แหล่งที่มา

1

แก้ไข: น่าเสียดายที่ฉันต้องแก้ไขตัวเอง

อ้างอิงด้านล่างhttps://stackoverflow.com/a/17935666/2488942สำหรับลิงก์ไปยังข้อมูลจำเพาะของ w3 ซึ่งมีตัวอย่าง (ไม่เหมือนกับที่ฉันเคยดูก่อนหน้านี้)

แต่แล้ว .... ที่นี่เป็นบทความที่ดีเกี่ยวกับเรื่องนี้ขอบคุณ @Fez

คำตอบเดิมของฉันคือ:

วิธีการกำหนดรายละเอียด w3:

4.3.4 ส่วน

4.3.4.1 องค์ประกอบร่างกาย

4.3.4.2 องค์ประกอบส่วน

4.3.4.3 องค์ประกอบ nav

4.3.4.4 องค์ประกอบของบทความ

....

แสดงให้เห็นว่าฉันว่าเป็นระดับที่สูงกว่าsection articleดังที่ได้กล่าวไว้ในคำตอบนี้ sectionจัดกลุ่มเนื้อหาที่เกี่ยวข้องกับเนื้อหา เนื้อหาภายในบทความที่อยู่ในความคิดของฉันที่เกี่ยวข้องกับใจอยู่แล้วเพราะฉะนั้นเรื่องนี้กับผมอย่างน้อยแล้วยังแสดงให้เห็นว่ากลุ่มในระดับที่สูงเมื่อเทียบกับsectionarticle

ฉันคิดว่ามันควรจะใช้แบบนี้:

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

หรือสำหรับเว็บไซต์ข่าว:

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
แหล่งที่มา

1

„ บรรทัด 23. div นี้ใช่ไหม หรือนี่ต้องเป็นส่วน?“

ไม่มี - มีmainแท็กสำหรับวัตถุประสงค์นั้นซึ่งอนุญาตเพียงหนึ่งครั้งต่อหน้าเท่านั้นและควรใช้เป็น wrapper สำหรับเนื้อหาหลัก (ตรงกันข้ามกับแถบด้านข้างหรือส่วนหัวทั้งไซต์)

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

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

— feeela
แหล่งที่มา

0

ฉันต้องการที่จะชี้แจงคำถามนี้อย่างแม่นยำมากขึ้นแก้ไขให้ฉันถ้าฉันผิดปล่อยให้เป็นตัวอย่างของ Facebook Wall

1. ทั้งหมดอยู่ภายใต้แท็ก "ส่วน" ซึ่งระบุว่าแยกจากหน้า

2. โพสต์ทั้งหมดอยู่ภายใต้แท็ก "บทความ"

3. จากนั้นเรามีโพสต์เดี่ยวซึ่งอยู่ภายใต้แท็ก "ส่วน"

3. เรามีหัวข้อ "ผู้ใช้ X โพสต์นี้" สำหรับสิ่งนี้เราสามารถใช้แท็ก "หัวเรื่อง"

4. จากนั้นภายในโพสต์เรามีสามส่วนหนึ่งคือรูปภาพ / ข้อความปุ่มชอบแบ่งปันความคิดเห็นและกล่องแสดงความคิดเห็น

5. สำหรับกล่องความคิดเห็นเราสามารถใช้แท็กบทความ

— ตวัดกอร์
แหล่งที่มา

0

ตามที่คำตอบของนาธานนี้ทำให้รู้สึกดี (สำหรับชิ้นส่วนสีแดงและสีส้ม, บางทีคุณอาจจะใช้div's และ / หรือ headerและfooterตามลำดับ):

— Alejandro Nava
แหล่งที่มา