หากคุณดูมาร์กอัป HTML สำหรับหน้าเว็บใด ๆ ในวันนี้คุณจะเห็นองค์ประกอบ HTML ที่อยู่ในองค์ประกอบ HTML อื่น ๆ องค์ประกอบเหล่านี้ "ภายใน" ของสิ่งอื่น ๆ เป็นสิ่งที่เรียกว่า "องค์ประกอบที่ซ้อนกัน" และมีความจำเป็นสำหรับการสร้างหน้าเว็บใด ๆ ในวันนี้
ความหมายของการวางแท็ก HTML คืออะไร?
วิธีที่ง่ายที่สุดในการทำความเข้าใจการทำรังคือการพิจารณาแท็ก HTML เป็นกล่องที่เก็บเนื้อหาของคุณ เนื้อหาของคุณสามารถรวมข้อความภาพ ฯลฯ แท็ก HTML คือกล่องที่อยู่รอบ ๆ เนื้อหา บางครั้งคุณจำเป็นต้องวางกล่องไว้ภายในกล่องอื่น ๆ กล่อง "ภายใน" เหล่านี้ซ้อนอยู่ภายในของผู้อื่น
ถ้าคุณมีข้อความที่คุณต้องการให้เป็นตัวหนาภายในย่อหน้าคุณจะมีองค์ประกอบ HTML สองชิ้นรวมทั้งข้อความด้วย
ตัวอย่าง: นี่คือ a ประโยค ของข้อความ
ข้อความดังกล่าวเป็นสิ่งที่เราจะใช้เป็นตัวอย่างของเรา นี่เป็นวิธีที่จะเขียน
ตัวอย่าง: นี่คือประโยคของข้อความ
เนื่องจากคุณต้องการให้คำว่า "ประโยค" เป็นตัวหนาคุณจึงควรเพิ่มการเปิดและปิดแท็กตัวหนาก่อนและหลังคำนั้น
ตัวอย่าง: นี่คือ a ประโยค ของข้อความ
อย่างที่คุณเห็นเรามีกล่อง (ย่อหน้า) หนึ่งกล่องซึ่งมีเนื้อหา / ข้อความของประโยครวมทั้งช่องที่สอง (คู่แท็กที่แข็งแกร่ง) ซึ่งจะทำให้คำนั้นเป็นตัวหนา
เมื่อคุณทำรังแท็กเป็นสิ่งสำคัญอย่างยิ่งที่คุณต้องปิดแท็กตามลำดับที่คุณเปิดไว้ คุณเปิด
แรกตามด้วย ซึ่งหมายความว่าคุณย้อนกลับและปิด แล้ว
.อีกวิธีหนึ่งที่จะคิดถึงเรื่องนี้คือการใช้ความคล้ายคลึงกันของกล่องอีกครั้งหนึ่ง ถ้าคุณวางกล่องไว้ในกล่องอื่นคุณต้องปิดกล่องด้านในก่อนจึงจะสามารถปิดกล่องด้านนอกหรือกล่องบรรจุได้
การเพิ่มแท็กที่ซ้อนกันเพิ่มเติม
จะทำอย่างไรถ้าคุณต้องการคำหนึ่งหรือสองคำที่จะเป็นตัวหนาและอีกชุดหนึ่งจะเป็นตัวเอียง? นี่คือวิธีการทำเช่นนั้น
ตัวอย่าง: นี่คือ a ประโยค ของข้อความและก็ยังมีบ้าง ตัวเอียง เกินไป.
คุณสามารถเห็นได้ว่ากล่องด้านนอกของเรา
, ตอนนี้มีสองแท็กที่ซ้อนกันอยู่ภายใน - และ . พวกเขาทั้งสองต้องถูกปิดก่อนที่กล่องบรรจุที่สามารถปิดได้
ตัวอย่าง: นี่คือ a ประโยค ของข้อความและก็ยังมีบ้าง ตัวเอียง เกินไป.
นี่คือย่อหน้าอื่น
ในกรณีนี้เรามีกล่องด้านในของกล่อง! กล่องออกมากที่สุดคือ
ทำไมคุณถึงสนใจเกี่ยวกับการทำรัง
เหตุผลอันดับหนึ่งที่คุณควรดูแลเกี่ยวกับการทำรังคือถ้าคุณจะใช้ CSS Cascading Style Sheets พึ่งพาแท็กที่ซ้อนกันอยู่ภายในเอกสารอย่างต่อเนื่องเพื่อให้สามารถบอกลักษณะที่เริ่มต้นและสิ้นสุดได้ หากคุณตั้งค่ารูปแบบที่ควรมีผลต่อลิงก์ "ทั้งหมดที่อยู่ภายในส่วนที่มีเนื้อหาหลัก" เนื้อหาหลัก "บนหน้าการทำรังไม่ถูกต้องทำให้เบราว์เซอร์ไม่สามารถรู้ได้ว่าต้องใช้สไตล์เหล่านี้ในที่ใด ลองดูที่ HTML บาง:
ตัวอย่าง: นี่คือ a ประโยค ของข้อความและก็ยังมีบ้าง ตัวเอียง เกินไป.
นี่คือย่อหน้าอื่น
ใช้ตัวอย่างที่ฉันได้กล่าวเพียงถ้าฉันต้องการเขียนสไตล์ CSS ที่จะส่งผลกระทบต่อการเชื่อมโยงภายในส่วนนี้และมีเพียงลิงค์ (ซึ่งต่างไปจากการเชื่อมโยงอื่น ๆ ในส่วนอื่น ๆ ของหน้า) ฉันจะต้องใช้ ทำรังเพื่อเขียนสไตล์ของฉันเช่น:
เนื้อหาหลัก { สี: # F00;}
เหตุผลอื่น ๆ รวมถึงการเข้าใช้งานและความเข้ากันได้ของเบราเซอร์ หาก HTML ของคุณถูกซ้อนไม่ถูกต้องจะไม่สามารถเข้าถึงผู้อ่านหน้าจอและเบราว์เซอร์ที่เก่ากว่าได้และอาจทำให้รูปลักษณ์ของหน้าเว็บดูสมบูรณ์ได้หากเบราว์เซอร์ไม่สามารถอธิบายได้ว่าต้องการสร้างหน้าเว็บอย่างถูกต้องเนื่องจากองค์ประกอบและแท็ก HTML อยู่นอกสถานที่
สุดท้ายหากคุณพยายามเขียนโค้ด HTML ที่ถูกต้องและถูกต้องคุณจะต้องใช้การทำรังที่ถูกต้อง มิเช่นนั้นเครื่องมือตรวจสอบทุกตัวจะตั้งค่าสถานะ HTML ของคุณว่าไม่ถูกต้อง