ใช้ Span และ Div HTML Elements กับ CSS ใน Web Design

#5 สร้างเว็บไซต์ด้วย html : การใช้แท็ก div (เมษายน 2025)

:

ใช้
ธาตุ
) ทั้งสองคุณลักษณะเหล่านี้สามารถเลือกใช้ CSS หรือแก้ไขโดยใช้ JavaScript ได้ แนวทางปฏิบัติที่ดีที่สุดในปัจจุบันเกี่ยวกับการใช้ตัวเลือกระดับชั้นแทนรหัสเนื่องจากส่วนหนึ่งเป็นเพราะตัวระบุรหัสเฉพาะเจาะจงมีอยู่ ในความเป็นจริงคุณสามารถใช้อย่างใดอย่างหนึ่งและยังสามารถแบ่งส่วนทั้ง ID และตัวเลือกชั้นเมื่อต้องการใช้
กับ
ใช้ ธาตุ
นี่คือ My Awesome Headline

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

องค์ประกอบใน interchangeably ขณะที่พวกเขาสร้างออกจากหน้าเว็บ อย่างไรก็ตามความเป็นจริงคือแต่ละองค์ประกอบ 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 ที่เกี่ยวข้องกับสิ่งที่ล้อมรอบด้วย Tags:

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

เพิ่ม

class = "ไฮไลท์"
หรือคลาสอื่น ๆ ในส่วน span เพื่อจัดรูปแบบข้อความด้วย CSS (เช่น

class = "ไฮไลท์">
) องค์ประกอบ span ไม่มีแอตทริบิวต์ที่ต้องการ แต่ทั้งสามอย่างมีประโยชน์มากที่สุดก็เหมือนกับองค์ประกอบ div:

สไตล์

ชั้น

รหัส

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

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

นี่คือ My Awesome Headline