หนึ่งในข้อผิดพลาดที่พบบ่อยที่สุดในการใช้ฉลากคือการเทียบเท่า <section> ของ HTML5 ที่ Will <div>-โดยเฉพาะมันถูกใช้โดยตรงเป็นทางเลือก (สำหรับสไตล์) ใน XHTML หรือ HTML4 เรามักจะเห็นรหัสนี้:
<!-รหัส 4 สไตล์ html-> <div id = wrapper> <div id = ส่วนหัว> <h1> หน้าสุดยอดของฉัน </h1> เนื้อหาส่วนหัว </div> <div id = เนื้อหาหน้าหลัก> > <div id = secondary> เนื้อหารอง </div> <div id = footer> เนื้อหาส่วนท้าย </div> </div>
และตอนนี้ใน HTML5 มันจะเป็นเช่นนี้:
โปรดอย่าคัดลอกรหัสเหล่านี้! มันผิด!
<ส่วน ID = wrapper> <ส่วนหัว> <H1> หน้าสุดยอดของฉัน </h1> <!-ส่วนหัวเนื้อหา-> </header> <ส่วน id = main> <!-page content-> </</</</</</</</</</</</</ </</</</</</</</</</</section> <ส่วน ID = รอง> <!-เนื้อหารอง-> </ส่วน> <footer> <!-เนื้อหาส่วนท้าย-> </footer > </section>
สิ่งนี้ไม่ถูกต้อง: **
ไม่ใช่คอนเทนเนอร์สไตล์ ** องค์ประกอบส่วนแสดงถึงส่วนความหมายที่ใช้ในเนื้อหาเพื่อช่วยสร้างบทสรุปเอกสาร ควรมีหัว หากคุณต้องการค้นหาองค์ประกอบสำหรับคอนเทนเนอร์หน้า (เช่น HTML หรือ XHTML) ให้พิจารณาตามที่ Kroc Camen พูดและเขียนสไตล์ลงในองค์ประกอบของร่างกายโดยตรง หากคุณยังต้องการคอนเทนเนอร์สไตล์พิเศษให้ใช้ DIV ต่อไป
จากแนวคิดข้างต้นสิ่งต่อไปนี้คือการใช้ HTML5 ที่ถูกต้องและคุณสมบัติบางอย่างของ ARIA (โปรดทราบว่าตามการออกแบบของคุณเองคุณอาจต้องเข้าร่วม DIV)
<body> <ส่วนหัว> <h1> หน้าสุดยอดของฉัน </h1> <!-เนื้อหาส่วนหัว-> </header> <div role = main> <!-page content-> </div> > <!-เนื้อหาทุติยภูมิ-> </side> <footer> <!-เนื้อหาส่วนท้าย-> </footer> </body>ประการที่สองใช้ส่วนหัวและ hgroup เมื่อจำเป็น
ป้ายกำกับที่ไม่จำเป็นต้องเขียนนั้นไม่มีความหมายแน่นอน น่าเสียดายที่ฉันมักจะเห็นส่วนหัวและการละเมิดที่ไม่มีความหมายของ Hgroup คุณสามารถอ่านสองบทความเกี่ยวกับส่วนหัวและองค์ประกอบ Hgroup เพื่อทำความเข้าใจอย่างละเอียด
เนื่องจากส่วนหัวสามารถใช้งานได้หลายครั้งในเอกสารจึงอาจทำให้สไตล์รหัสนี้ยินดีต้อนรับ:
โปรดอย่าคัดลอกรหัสนี้! ฉันไม่ต้องการส่วนหัว->
<ส่วนหัว> <H1> โพสต์บล็อกของฉัน </h1> </header> <!-บทความเนื้อหา-> </บทความ>
หากองค์ประกอบส่วนหัวของคุณมีองค์ประกอบหัวเดียวเท่านั้นให้ทิ้งองค์ประกอบส่วนหัว เนื่องจากองค์ประกอบของบทความรับประกันได้ว่าหัวจะปรากฏในบทสรุปเอกสารและส่วนหัวไม่สามารถมีหลายองค์ประกอบ (ตามที่กำหนดไว้ข้างต้น) ทำไมฉันควรเขียนโค้ดส่วนเกิน เพียงแค่เขียนแบบนี้:
<Tartlicle> <H1> โพสต์บล็อกที่ดีที่สุดของฉัน </h1> <!-บทความเนื้อหา-> </บทความ>
การใช้ข้อผิดพลาด
ในชุดรูปแบบของส่วนหัวฉันมักจะเห็นข้อผิดพลาดของ HGroup บางครั้งไม่ควรใช้ในเวลาเดียวกัน HGroup และส่วนหัว:
คำถามแรกโดยทั่วไปเป็นเช่นนี้:
โปรดอย่าคัดลอกรหัสนี้!
ในตัวอย่างนี้ลบ hgroup โดยตรงและปล่อยให้ส่วนหัวทำงาน
<ส่วนหัว> <H1> โพสต์บล็อกที่ดีที่สุดของฉัน </h1> <p> โดย Rich Clar </p> </header>
ปัญหาที่สองเป็นอีกตัวอย่างที่ไม่จำเป็น:
โปรดอย่าคัดลอกรหัสนี้!
<Hgroup> <h1> บริษัท ของฉัน </h1> <h2> ก่อตั้ง 1893 </h2> </hgroup> </header>
ถ้าส่วนหัวย่อยเพียงอย่างเดียวคือ HGroup แล้วส่วนหัวคือม้าของพระเจ้า? หากไม่มีองค์ประกอบอื่น ๆ (เช่น Hgroup หลายตัว) ในส่วนหัวให้ลบส่วนหัวออกโดยตรง
<Hgroup> <h1> บริษัท ของฉัน </h1> <h2> ก่อตั้ง 1893 </h2> </hgroup>3. อย่าใส่รายการลิงก์ทั้งหมดใน NAV
ในฐานะที่เป็น HTML5 แนะนำองค์ประกอบใหม่ 30 รายการ (เมื่อการเปิดตัวต้นฉบับ) ตัวเลือกของเราในการสร้างฉลากความหมายและโครงสร้างได้กลายเป็นอุบัติเหตุเล็กน้อย กล่าวอีกนัยหนึ่งเราไม่ควรใช้องค์ประกอบของการสร้างความหมายอย่างยิ่งยวด น่าเสียดายที่ NAV เป็นตัวอย่างการละเมิด ข้อมูลจำเพาะขององค์ประกอบ NAV มีการอธิบายดังนี้:
องค์ประกอบ NAV แสดงถึงบล็อกที่เชื่อมโยงบนหน้าหรือส่วนอื่น ๆ ของหน้าหรือส่วนอื่น ๆ ของหน้านี้
หมายเหตุ: ลิงก์ทั้งหมดในทุกหน้าไม่จำเป็นต้องวางไว้ในองค์ประกอบ NAV-องค์ประกอบนี้ใช้เป็นบล็อกการนำทางหลัก สำหรับตัวอย่างที่เฉพาะเจาะจงมักจะมีลิงก์จำนวนมากในส่วนท้ายเช่นเงื่อนไขการบริการหน้าแรกหน้าประกาศลิขสิทธิ์และอื่น ๆ องค์ประกอบส่วนท้ายนั้นเพียงพอที่จะรับมือกับสถานการณ์เหล่านี้
คำสำคัญคือการนำทางหลัก แน่นอนว่าเราสามารถฉีดพ่นกันวันหลักคืออะไร และฉันเองก็กำหนดสิ่งนี้:
เพื่ออำนวยความสะดวกในการเข้าถึงคุณจะเพิ่มลิงค์ไปยังฉลาก NAV นี้ในการกระโดดอย่างรวดเร็วหรือไม่?
หากคำตอบสำหรับคำถามเหล่านี้ไม่ได้โค้งคำนับแล้วออกไปคนเดียว
ประการที่สี่ข้อผิดพลาดทั่วไปในองค์ประกอบรูปการใช้งานที่ถูกต้องและ Figcaption นั้นยากที่จะควบคุม ลองมาดูข้อผิดพลาดทั่วไป
ภาพทั้งหมดไม่ใช่รูป
ในข้างต้นฉันได้บอกคุณว่าอย่าเขียนรหัสที่ไม่จำเป็น เช่นเดียวกับข้อผิดพลาดนี้ ฉันเห็นเว็บไซต์หลายแห่งที่เขียนรูปภาพทั้งหมดเป็นรูป ดูรูปภาพของรูปภาพโปรดอย่าเพิ่มฉลากเพิ่มเติม คุณเพียงแค่ทำไข่ของคุณเองและคุณไม่สามารถทำให้เนื้อหาหน้าของคุณชัดเจนขึ้น
ข้อมูลจำเพาะอธิบายรูปเป็นเนื้อหาที่ไหลและบางครั้งมีคำอธิบายชื่อที่มีอยู่ในตัวเอง โดยทั่วไปในสตรีมเอกสารจะใช้เป็นข้อมูลอ้างอิงหน่วยอิสระ นี่คือความงามของรูป-มันสามารถย้ายจากหน้าเนื้อหาหลักไปยังแถบด้านข้างโดยไม่ส่งผลกระทบต่อการไหลของเอกสาร
ปัญหาเหล่านี้รวมอยู่ในผังงาน HTML5 Element ที่กล่าวถึงก่อนหน้านี้
หากเป็นเพียงภาพล้วนๆและไม่ได้อ้างถึงในส่วนอื่น ๆ ของเอกสารแล้วมันก็ไม่แน่นอน
แก่นแท้ ขึ้นอยู่กับสถานการณ์คุณสามารถถามตัวเองในตอนแรก: ภาพนี้เกี่ยวข้องกับบริบทหรือไม่? ถ้าไม่อาจไม่ใช่ (อาจจะ) ดำเนินการต่อ: ฉันสามารถย้ายไปยังภาคผนวกได้หรือไม่? หากปัญหาทั้งสองตอบสนองอาจเป็น
โลโก้ไม่ใช่รูป
นอกจากนี้โลโก้ไม่เหมาะสำหรับรูป นี่คือบางส่วนของชิ้นส่วนรหัสทั่วไปของฉัน:
<!-โปรดอย่าคัดลอกรหัสนี้! > </header> <!-โปรดอย่าคัดลอกรหัสนี้!
ไม่มีอะไรจะพูด นี่เป็นข้อผิดพลาดธรรมดามาก เราสามารถพ่นกันเพื่อโลโก้เพื่อกลับบ้านสำหรับฉลาก H1 แต่นี่ไม่ใช่จุดสนใจของการสนทนาของเรา ปัญหาที่แท้จริงคือการใช้องค์ประกอบของตัวเลขในทางที่ผิด รูปที่ควรอ้างอิงในเอกสารหรือถูกล้อมรอบด้วยองค์ประกอบส่วน ฉันคิดว่าโลโก้ของคุณไม่น่าจะอ้างด้วยวิธีนี้ ง่ายมากอย่าใช้รูป คุณต้องทำเช่นนี้เท่านั้น:
<ส่วนหัว> <h1> ชื่อ บริษัท ของฉัน </h1> <!-สิ่งของเพิ่มเติมในที่นี่-> </header>
รูปไม่ได้เป็นเพียงภาพ
ความเข้าใจผิดทั่วไปอีกประการหนึ่งเกี่ยวกับรูปคือมันถูกใช้โดยรูปภาพเท่านั้น รูปที่สามารถเป็นวิดีโอ, เสียง, ชาร์ต, ย่อหน้าของข้อความ, รูปแบบ, รหัส, ย่อหน้าของร้อยแก้วและชุดอื่น ๆ อย่า จำกัด รูปเป็นรูปภาพ ความรับผิดชอบของมาตรฐานเว็บคือการอธิบายเนื้อหาด้วยฉลากอย่างถูกต้อง
5. อย่าใช้แอตทริบิวต์ประเภทที่ไม่จำเป็นนี่เป็นปัญหาที่พบบ่อย แต่ไม่ใช่ความผิดพลาด
ใน HTML5 แอตทริบิวต์ประเภทไม่จำเป็นสำหรับองค์ประกอบสคริปต์และสไตล์อีกต่อไป อย่างไรก็ตามสิ่งเหล่านี้มีแนวโน้มที่จะถูกเพิ่มโดย CMS ของคุณโดยอัตโนมัติดังนั้นจึงไม่ง่ายเลยที่จะลบออก แต่ถ้าคุณเป็นรหัสมือหรือคุณสามารถควบคุมเทมเพลตของคุณได้ไม่มีเหตุผลที่จะรวมแอตทริบิวต์ประเภท เบราว์เซอร์ทั้งหมดคิดว่าสคริปต์เป็น JavaScript และสไตล์คือสไตล์ CSS
<!-โปรดอย่าคัดลอกรหัสนี้! </script>
อันที่จริงคุณต้องเขียนสิ่งนี้เท่านั้น:
<link rel = stylesheet href = css/styles.css/> <script src = js/scripts/> </script>
แม้แต่รหัสของชุดอักขระก็สามารถละเว้นได้ Mark Pilgrim อธิบายในความหมายของการดำน้ำใน HTML5
6. ข้อผิดพลาดของแอตทริบิวต์ FERMHTML5 แนะนำคุณลักษณะใหม่ของแบบฟอร์ม
แอตทริบิวต์โบเออร์
องค์ประกอบมัลติมีเดียบางอย่างและองค์ประกอบอื่น ๆ ก็มีคุณสมบัติบูลีน กฎที่กล่าวถึงในที่นี้ก็มีผลบังคับใช้เช่นกัน
แอตทริบิวต์รูปแบบใหม่บางอย่างเป็นบูลีนซึ่งหมายความว่าตราบใดที่ปรากฏในฉลากพวกเขามั่นใจว่ามีการตั้งค่าพฤติกรรมที่สอดคล้องกันแล้ว คุณลักษณะเหล่านี้รวมถึง:
พูดตรงไปตรงมาฉันไม่ค่อยเห็นสิ่งนี้ ใช้เป็นตัวอย่าง
<!-โปรดอย่าคัดลอกรหัสนี้! >
พูดอย่างเคร่งครัดนี่ไม่ใช่เรื่องใหญ่ ตราบใดที่ตัวแยกวิเคราะห์ HTML ของเบราว์เซอร์เห็นคุณสมบัติที่ต้องการจะปรากฏในฉลากฟังก์ชั่นของมันจะถูกนำไปใช้ แต่ถ้าคุณเขียนด้วยวิธีอื่นล่ะ?
<!-โปรดอย่าคัดลอกรหัสนี้!
ตัวแยกวิเคราะห์จะยังคงปฏิบัติต่อคุณสมบัติที่ต้องการอย่างมีประสิทธิภาพและดำเนินการพฤติกรรมที่สอดคล้องกันแม้ว่าคุณจะพยายามบอกว่าจะไม่ดำเนินการ เห็นได้ชัดว่าไม่ใช่สิ่งที่คุณต้องการ
มีสามวิธีที่มีประสิทธิภาพในการใช้แอตทริบิวต์บูลีน (สองหลังใช้ได้เฉพาะใน xthml)
การเขียนที่ถูกต้องของตัวอย่างข้างต้นควรเป็น:
<ประเภทอินพุต = ชื่ออีเมล = จำเป็นต้องใช้อีเมล />สรุป
ข้างต้นคือวิธีที่ฉันแนะนำให้คุณทราบถึงความเข้าใจผิด 6 ประการ HTML5 ทั่วไป ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Vevb Wulin!