วิธีการใช้ Span และ Div HTML Elements

ใช้ช่วงและ div ร่วมกับ CSS เพื่อให้ได้รูปแบบและการควบคุมรูปแบบมากขึ้น

หลายคนที่ยังใหม่กับการออกแบบเว็บและ HTML / CSS ใช้องค์ประกอบ และ

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

ใช้
องค์ประกอบ

องค์ประกอบ div กำหนดส่วนติดต่อทางตรรกะบนหน้าเว็บของคุณ

มันเป็นพื้นกล่องที่คุณสามารถวางองค์ประกอบ HTML อื่น ๆ ที่มีเหตุผลไปด้วยกัน ส่วนหนึ่งสามารถมีองค์ประกอบอื่น ๆ ในส่วนนี้เช่นย่อหน้าหัวเรื่องรายการลิงก์ภาพ ฯลฯ นอกจากนี้ยังสามารถมีส่วนอื่น ๆ ภายในเพื่อให้โครงสร้างและองค์กรเพิ่มเติมในเอกสาร HTML ของคุณ

หากต้องการใช้องค์ประกอบ div วางแท็ก

ที่เปิดอยู่ก่อนพื้นที่ของเพจที่คุณต้องการแยกเป็นส่วนและแท็ก หลังปิด:

เนื้อหาของ div

หากพื้นที่ของเพจของคุณต้องการข้อมูลเพิ่มเติมที่คุณจะใช้ในการกำหนดลักษณะด้วย CSS ในภายหลังคุณสามารถเพิ่มตัวเลือกรหัส (เช่น,

id = "myDiv">) หรือตัวเลือกชั้นเรียน (เช่น class = "bigDiv">) ทั้งสองคุณลักษณะเหล่านี้สามารถเลือกใช้ CSS หรือแก้ไขโดยใช้ JavaScript ได้ แนวทางปฏิบัติที่ดีที่สุดในปัจจุบันเกี่ยวกับการใช้ตัวเลือกระดับชั้นแทนรหัสเนื่องจากส่วนหนึ่งเป็นเพราะตัวระบุรหัสเฉพาะเจาะจงมีอยู่ ในความเป็นจริงคุณสามารถใช้อย่างใดอย่างหนึ่งและยังสามารถแบ่งส่วนทั้ง ID และตัวเลือกระดับ

เมื่อใช้

กับ

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

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

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

ใช้ องค์ประกอบ

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

นี่คือความแตกต่างหลักระหว่างช่วงและองค์ประกอบ div ดังกล่าวข้างต้นองค์ประกอบ div รวมถึงการแบ่งวรรคในขณะที่องค์ประกอบ span เท่านั้นบอกเบราว์เซอร์เพื่อใช้กฎสไตล์ CSS ที่เกี่ยวข้องกับสิ่งที่อยู่ในแท็ก :


ข้อความไฮไลต์ และข้อความที่ไม่เน้นข้อความ

เพิ่ม class = "highlight" หรือ class อื่นใน element span เพื่อจัดรูปแบบข้อความด้วย CSS (เช่น class = "highlight">)

องค์ประกอบ span ไม่มีแอตทริบิวต์ที่ต้องการ แต่ทั้งสามแบบมีประโยชน์มากที่สุดคือองค์ประกอบขององค์ประกอบ div:

  • สไตล์
  • ชั้น
  • รหัส

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

ตัวอย่างเช่นถ้าคุณต้องการให้คำที่สองของหัวข้อ h3 เป็นสีแดงคุณสามารถล้อมรอบคำนั้นด้วยองค์ประกอบ span ที่จะกำหนดให้เป็นคำว่า red text คำนี้ยังคงเป็นส่วนหนึ่งขององค์ประกอบ h3 แต่ตอนนี้ยังแสดงเป็นสีแดง:

นี่คือ My Awesome Headline

แก้ไขโดย Jeremy Girard เมื่อ 2/2/17