ความคิดเห็น: เนื่องจากขาดโครงสร้างแม้กระทั่งหน้า HTML ที่ดีก็ยากที่จะจัดการ ระดับของชื่อเรื่องจะต้องวิเคราะห์เพื่อดูว่าแต่ละส่วนแบ่งออกเป็นอย่างไร แถบด้านข้าง, ส่วนท้าย, ส่วนหัว, แถบนำทาง, พื้นที่เนื้อหาหลักและบทความแสดงโดยองค์ประกอบ Div ทั่วไป HTML 5 ได้เพิ่มองค์ประกอบใหม่เพื่อระบุโครงสร้างทั่วไปเหล่านี้: · Sectio
เนื่องจากขาดโครงสร้างแม้หน้า HTML ที่ดีก็ยากที่จะจัดการ ระดับของชื่อเรื่องจะต้องวิเคราะห์เพื่อดูว่าแต่ละส่วนแบ่งออกเป็นอย่างไร แถบด้านข้าง, ส่วนท้าย, ส่วนหัว, แถบนำทาง, พื้นที่เนื้อหาหลักและบทความแสดงโดยองค์ประกอบ Div ทั่วไป HTML 5 เพิ่มองค์ประกอบใหม่เพื่อระบุโครงสร้างทั่วไปเหล่านี้:
·ส่วน: นี่อาจเป็นบทหรือส่วนในหนังสือและจริง ๆ แล้วมันสามารถเป็นอะไรก็ได้ที่มีชื่อของตัวเองใน HTML 4
·ส่วนหัว: ส่วนหัวที่แสดงบนหน้า; มันแตกต่างจากองค์ประกอบหัว
ส่วนท้าย: ส่วนท้าย; สามารถแสดงลายเซ็นในอีเมลได้
NAV: ชุดลิงก์ไปยังหน้าอื่น ๆ
บทความ: บทความในบล็อก, นิตยสาร, การรวบรวมบทความ ฯลฯ
ลองพิจารณาโฮมเพจบล็อกทั่วไปซึ่งมีส่วนหัวที่ด้านบนและส่วนท้ายที่ด้านล่างรวมถึงบทความหลายแห่งพื้นที่นำทางและแถบด้านข้างดูรหัส 1 หน้าบล็อกทั่วไป
<html>
<head>
<title> Mokka MIT Schlag </title>
</head>
<body>
<div id = หน้า>
<div id = ส่วนหัว>
<h1> <a href => mokka mit schlag </a> </h1>
</div>
<div id = container>
<div id = center class = คอลัมน์>
<div class = post id = post-1000572>
<h2> <a href =
/บล็อก/การดูนก/2007/04/23/ฤดูใบไม้ผลิ -mes-and-goes-in-sussex-county/>
ฤดูใบไม้ผลิมา (และไป) ใน Sussex County </a> </h2>
<div class = entry>
<p> เมื่อวานนี้ฉันเข้าร่วมกับบรูคลินเบิร์ดคลับสำหรับของเรา
การเดินทางไปเวสเทิร์นนิวเจอร์ซีย์ประจำปีโดยเฉพาะไฮเปอร์โดยเฉพาะ
Humus ซึ่งเป็นจุดร้อนที่เพิ่งค้นพบเมื่อไม่นานมานี้ มัน
เริ่มต้นเป็นช่วงเช้าฤดูหนาวที่ดีเมื่อเรามาถึง
ที่ไซต์เวลา 7:30 น. ก้าวหน้าไปรอบ ๆ
10:00 น. และมาถึงช่วงต้นฤดูร้อนเวลา 10:15 น. </p>
</div>
</div>
<div class = post id = post-1000571>
<h2> <a href =
/blog/birding/2007/04/32/but-does-it-count-it-count-for-your-list-list/>
แต่มันนับรวมสำหรับรายการชีวิตของคุณหรือไม่ </a> </h2>
<div class = entry>
<p> ดูเหมือนว่าตอนนี้คุณไปได้แล้ว <A
href =
2007/04/cone_sf> ดูนกผ่านทางอินเทอร์เน็ต </a> ฉัน
ยังไม่สามารถทดสอบได้ (ผู้ใช้ 20 คน
เห็นได้ชัดว่า จำกัด ) แต่มันก็เจ๋งอย่างแน่นอน
โดยส่วนตัวฉันไม่สามารถจินตนาการได้ว่ามันจะเปลี่ยน
จริง ๆ แล้วออกไปในสนามโดยมีจำนวนเล็กน้อย
ในทางกลับกันฉันพบเสมอ
เศร้าที่ได้พบกับนกอาวุโสที่ไม่สามารถทำได้อีกต่อไป
ถือกล้องสองตาให้มั่นคงหรือไปที่สวนสาธารณะ ฉันทำได้
ลองนึกภาพว่านี่อาจเป็นที่สนใจของพวกเขา ที่
นกผู้สูงอายุอย่างน้อยหนึ่งคนทำทีวีครั้งใหญ่หลังจากนั้น
เขาไม่สามารถออกไปได้อีกต่อไป แน่นอน
ยอดที่ </p>
</div>
</div>
</div>
<div class = การนำทาง>
<div class = alignleft>
<a href =/blog/page/2/> « _fcksavedurl =/blog/page/2/> «รายการก่อนหน้า </a>
</div>
<div class = allignright> </div>
</div>
</div>
<div id = right class = คอลัมน์>
<ul id = แถบด้านข้าง>
<li> <h2> ข้อมูล </h2>
<ul>
<li> <a href =/blog/comment-policy/> ความคิดเห็น </a> </li>
<li> <a href =/blog/toDo-list/> รายการสิ่งที่ต้องทำ </a> </li>
</ul> </li>
<li> <h2> จดหมายเหตุ </h2>
<ul>
<li> <a href = '/blog/2007/04/'> เมษายน 2550 </a> </li>
<li> <a href = '/blog/2007/03/'> มีนาคม 2550 </a> </li>
<li> <a href = '/blog/2007/02/'> กุมภาพันธ์ 2007 </a> </li>
<li> <a href = '/blog/2007/01/'> มกราคม 2007 </a> </li>
</ul>
</li>
</ul>
</div>
<div id = footer>
<p> ลิขสิทธิ์ 2007 Elliotte Rusty Harold </p>
</div>
</div>
</body>
</html>
แม้จะมีการเยื้องที่ถูกต้อง divs ซ้อนเหล่านี้ยังคงรู้สึกสับสนมาก ใน HTML 5 องค์ประกอบเหล่านี้สามารถแทนที่ด้วยองค์ประกอบความหมายดูรหัส 2 หน้าบล็อกทั่วไปที่เขียนใน HTML5
<html>
<head>
<title> Mokka MIT Schlag </title>
</head>
<body>
<ส่วนหัว>
<h1> <a href => mokka mit schlag </a> </h1>
</header>
<section>
<บทความ>
<h2> <a href =
/บล็อก/การดูนก/2007/04/23/ฤดูใบไม้ผลิ -mes-and-goes-in-sussex-county/>
ฤดูใบไม้ผลิมา (และไป) ใน Sussex County </a> </h2>
<p> เมื่อวานนี้ฉันเข้าร่วมกับบรูคลินเบิร์ดคลับสำหรับของเรา
การเดินทางไปเวสเทิร์นนิวเจอร์ซีย์ประจำปีโดยเฉพาะไฮเปอร์โดยเฉพาะ
Humus ซึ่งเป็นจุดร้อนที่เพิ่งค้นพบเมื่อไม่นานมานี้ มัน
เริ่มต้นเป็นช่วงเช้าฤดูหนาวที่ดีเมื่อเรามาถึง
เว็บไซต์เวลา 7:30 น. ก้าวหน้าไปประมาณ 10:00 น
AM และมาถึงต้นฤดูร้อนเวลา 10:15 น. </p>
</บทความ>
<บทความ>
<h2> <a href =
/blog/birding/2007/04/32/but-does-it-count-it-count-for-your-list-list/>
แต่มันนับรวมสำหรับรายการชีวิตของคุณหรือไม่ </a> </h2>
<p> ดูเหมือนว่าตอนนี้คุณไปได้แล้ว <A
href =
2007/04/cone_sf> ดูนกผ่านทางอินเทอร์เน็ต </a> ฉัน
ยังไม่สามารถทดสอบได้ (ผู้ใช้ 20 คน
เห็นได้ชัดว่า จำกัด ) แต่มันก็เจ๋งอย่างแน่นอน
โดยส่วนตัวฉันไม่สามารถจินตนาการได้ว่ามันจะเปลี่ยน
จริง ๆ แล้วออกไปในสนามโดยมีจำนวนเล็กน้อย
ในทางกลับกันฉันพบเสมอ
เศร้าที่ได้พบกับนกอาวุโสที่ไม่สามารถทำได้อีกต่อไป
ถือกล้องสองตาให้มั่นคงหรือไปที่สวนสาธารณะ ฉันทำได้
ลองนึกภาพว่านี่อาจเป็นที่สนใจของพวกเขา ที่
นกผู้สูงอายุอย่างน้อยหนึ่งคนทำทีวีครั้งใหญ่หลังจากนั้น
เขาไม่สามารถออกไปได้อีกต่อไป แน่นอน
ยอดที่ </p>
</บทความ>
<av>
<a href =/blog/page/2/> « _fcksavedurl =/blog/page/2/> «รายการก่อนหน้า </a>
</av>
</section>
<av>
<ul>
<li> <h2> ข้อมูล </h2>
<ul>
<li> <a href =/blog/comment-policy/> ความคิดเห็น </a> </li>
<li> <a href =/blog/toDo-list/> รายการสิ่งที่ต้องทำ </a> </li>
</ul> </li>
<li> <h2> จดหมายเหตุ </h2>
<ul>
<li> <a href = '/blog/2007/04/'> เมษายน 2550 </a> </li>
<li> <a href = '/blog/2007/03/'> มีนาคม 2550 </a> </li>
<li> <a href = '/blog/2007/02/'> กุมภาพันธ์ 2007 </a> </li>
<li> <a href = '/blog/2007/01/'> มกราคม 2007 </a> </li>
</ul>
</li>
</ul>
</av>
<footer>
<p> ลิขสิทธิ์ 2007 Elliotte Rusty Harold </p>
</footer>
</body>
</html>
ตอนนี้ไม่จำเป็นต้องมี DIV คุณไม่จำเป็นต้องตั้งค่าแอตทริบิวต์คลาสด้วยตัวเองอีกต่อไปและคุณสามารถอนุมานความหมายของแต่ละส่วนจากชื่อองค์ประกอบมาตรฐาน สิ่งนี้มีความสำคัญอย่างยิ่งสำหรับเบราว์เซอร์เสียงเบราว์เซอร์มือถือและเบราว์เซอร์ที่ไม่ได้มาตรฐานอื่น ๆ
(จะดำเนินการต่อ)