ใช้ช่วงและ div ร่วมกับ CSS เพื่อให้ได้รูปแบบและการควบคุมรูปแบบมากขึ้น
หลายคนที่ยังใหม่กับการออกแบบเว็บและ HTML / CSS ใช้องค์ประกอบ และ องค์ประกอบ div กำหนดส่วนติดต่อทางตรรกะบนหน้าเว็บของคุณ มันเป็นพื้นกล่องที่คุณสามารถวางองค์ประกอบ HTML อื่น ๆ ที่มีเหตุผลไปด้วยกัน ส่วนหนึ่งสามารถมีองค์ประกอบอื่น ๆ ในส่วนนี้เช่นย่อหน้าหัวเรื่องรายการลิงก์ภาพ ฯลฯ นอกจากนี้ยังสามารถมีส่วนอื่น ๆ ภายในเพื่อให้โครงสร้างและองค์กรเพิ่มเติมในเอกสาร HTML ของคุณ หากต้องการใช้องค์ประกอบ div วางแท็ก เนื้อหาของ div div> หากพื้นที่ของเพจของคุณต้องการข้อมูลเพิ่มเติมที่คุณจะใช้ในการกำหนดลักษณะด้วย CSS ในภายหลังคุณสามารถเพิ่มตัวเลือกรหัส (เช่น, id = "myDiv">) หรือตัวเลือกชั้นเรียน (เช่น class = "bigDiv">) ทั้งสองคุณลักษณะเหล่านี้สามารถเลือกใช้ CSS หรือแก้ไขโดยใช้ JavaScript ได้ แนวทางปฏิบัติที่ดีที่สุดในปัจจุบันเกี่ยวกับการใช้ตัวเลือกระดับชั้นแทนรหัสเนื่องจากส่วนหนึ่งเป็นเพราะตัวระบุรหัสเฉพาะเจาะจงมีอยู่ ในความเป็นจริงคุณสามารถใช้อย่างใดอย่างหนึ่งและยังสามารถแบ่งส่วนทั้ง ID และตัวเลือกระดับ เมื่อใช้ องค์ประกอบ div แตกต่างจากองค์ประกอบส่วน HTML5 เนื่องจากไม่ได้ให้เนื้อหาที่ล้อมรอบด้วยความหมายเชิงนัยใด ๆ ถ้าคุณไม่แน่ใจว่าบล็อกเนื้อหาควรเป็น div หรือส่วนใดให้คิดถึงวัตถุประสงค์ขององค์ประกอบและเนื้อหาเพื่อช่วยในการตัดสินใจว่าจะใช้: ในท้ายที่สุดทั้ง div และส่วนจะมีลักษณะเหมือนกันและคุณสามารถให้ค่าแอตทริบิวต์ทั้งสองแบบและจัดรูปแบบด้วย CSS เพื่อดูไซต์ของคุณที่คุณต้องการ ทั้งสองอย่างนี้เป็นองค์ประกอบระดับบล็อก องค์ประกอบ span เป็นองค์ประกอบแบบไลน์โดยค่าเริ่มต้น ชุดนี้แยกออกจากส่วน div และส่วน องค์ประกอบ span มักใช้เพื่อตัดส่วนเนื้อหาโดยเฉพาะข้อความปกติเพื่อให้เป็น "เบ็ด" เพิ่มเติมที่สามารถจัดรูปแบบได้ในภายหลัง ใช้กับ CSS สามารถเปลี่ยนรูปแบบของข้อความที่ล้อมรอบได้ แต่โดยไม่มีแอตทริบิวต์สไตล์ใดองค์ประกอบ span เพียงอย่างเดียวไม่มีผลต่อข้อความเลย นี่คือความแตกต่างหลักระหว่างช่วงและองค์ประกอบ div ดังกล่าวข้างต้นองค์ประกอบ div รวมถึงการแบ่งวรรคในขณะที่องค์ประกอบ span เท่านั้นบอกเบราว์เซอร์เพื่อใช้กฎสไตล์ CSS ที่เกี่ยวข้องกับสิ่งที่อยู่ในแท็ก : ข้อความไฮไลต์ span> และข้อความที่ไม่เน้นข้อความ p> เพิ่ม class = "highlight" หรือ class อื่นใน element span เพื่อจัดรูปแบบข้อความด้วย CSS (เช่น class = "highlight">) องค์ประกอบ span ไม่มีแอตทริบิวต์ที่ต้องการ แต่ทั้งสามแบบมีประโยชน์มากที่สุดคือองค์ประกอบขององค์ประกอบ div: ใช้ช่วงเมื่อคุณต้องการเปลี่ยนรูปแบบเนื้อหาโดยไม่กำหนดเนื้อหาดังกล่าวเป็น องค์ประกอบ ระดับบล็อก ใหม่ในเอกสาร ตัวอย่างเช่นถ้าคุณต้องการให้คำที่สองของหัวข้อ h3 เป็นสีแดงคุณสามารถล้อมรอบคำนั้นด้วยองค์ประกอบ span ที่จะกำหนดให้เป็นคำว่า red text คำนี้ยังคงเป็นส่วนหนึ่งขององค์ประกอบ h3 แต่ตอนนี้ยังแสดงเป็นสีแดง: แก้ไขโดย Jeremy Girard เมื่อ 2/2/17 ใช้
ใช้ องค์ประกอบ
div> นี่คือ My Awesome Headline