หากคุณเคยดูรายชื่อองค์ประกอบ HTML คุณอาจพบว่าตัวเองถามว่า "บล็อกคืออะไร" องค์ประกอบ Blockquote เป็นคู่แท็ก HTML ที่ใช้เพื่อกำหนดราคาเสนอที่ยาว นี่คือความหมายขององค์ประกอบนี้ตามข้อกำหนด W3C HTML5:
องค์ประกอบ Blockquote แสดงถึงส่วนที่ยกมาจากแหล่งอื่น
วิธีการใช้ Blockquote บนหน้าเว็บของคุณ
เมื่อคุณเขียนข้อความในเว็บเพจและสร้างเค้าโครงของหน้าเว็บบางครั้งคุณต้องการเรียกข้อความในรูปแบบใบเสนอราคา
นี่อาจเป็นคำพูดจากที่อื่นเช่นคำรับรองจากลูกค้าที่มาพร้อมกับกรณีศึกษาหรือเรื่องราวความสำเร็จของโครงการ นี่อาจเป็นการออกแบบที่ซ้ำกับข้อความสำคัญ ๆ จากบทความหรือเนื้อหา ในการเผยแพร่นี้บางครั้งเรียกว่า pull-quote ในการออกแบบเว็บหนึ่งในวิธีการเพื่อให้บรรลุสิ่งนี้ (และวิธีที่เราครอบคลุมในบทความนี้) เรียกว่า blockquote
ลองมาดูวิธีที่คุณจะใช้แท็ก blockquote เพื่อกำหนดราคาที่ยาวเช่นข้อความที่ตัดมาจาก "Jabberwocky" โดย Lewis Carroll:
Twas brillig และ Slithey Toves
มี gyre และ gimble ใน wabe:
ทั้งหมด mimsy ถูก borogoves,
และ mome raths outgrabe
(โดย Lewis Carroll)
ตัวอย่างการใช้แท็ก Blockquote
แท็ก blockquote เป็นแท็ก semantic ที่บอกเบราว์เซอร์หรือเอเจนต์ผู้ใช้ว่าเนื้อหาเป็นคำพูดแบบยาว ดังนั้นคุณจึงไม่ควรใส่ข้อความที่ไม่ใช่คำพูดไว้ในแท็ก blockquote โปรดจำไว้ว่าคำพูด "quotation" มักเป็นคำที่คนพูดหรือข้อความจากแหล่งข้อมูลภายนอก (เช่นข้อความ Lewis Carroll ในบทความนี้) แต่ นอกจาก นี้ยัง สามารถ เป็นแนวคิด pullquote ที่เรากล่าวถึงก่อนหน้านี้
เมื่อคุณคิดเกี่ยวกับเรื่องนี้ pullquote นั้นเป็นข้อความของข้อความมันก็เกิดขึ้นจากบทความเดียวกันกับที่คำพูดอ้างถึงตัวเอง
เว็บเบราเซอร์ส่วนใหญ่จะเพิ่มการเยื้องบางส่วน (ประมาณ 5 ช่องว่าง) ลงในทั้งสองด้านของบล็อกเพื่อให้โดดเด่นจากข้อความโดยรอบ เบราว์เซอร์เก่าบางรุ่นอาจทำให้ข้อความที่ยกมาเป็นตัวเอียง
โปรดจำไว้ว่านี่เป็นเพียงรูปแบบเริ่มต้นขององค์ประกอบ Blockquote เท่านั้น ด้วย CSS คุณสามารถควบคุมการบล็อกโควต้าของคุณได้ทั้งหมด คุณสามารถเพิ่มหรือลบเยื้องออกเพิ่มสีพื้นหลังหรือเพิ่มขนาดตัวอักษรเพื่อโทรออกใบเสนอราคา คุณสามารถลอยข้อความนั้นไปที่ด้านใดด้านหนึ่งของหน้าและมีข้อความห่อหุ้มไว้รอบ ๆ ซึ่งเป็นรูปแบบภาพธรรมดาที่ใช้สำหรับการดึงข้อมูลในนิตยสารที่พิมพ์ คุณสามารถควบคุมรูปลักษณ์ของบล็อกได้ด้วย CSS บางสิ่งบางอย่างที่เราจะกล่าวถึงในไม่ช้า ตอนนี้เรามาดูวิธีเพิ่มคำพูดลงในมาร์กอัพ HTML ของคุณต่อ
หากต้องการเพิ่มแท็ก Blockquote ลงในข้อความของคุณเพียงแค่ล้อมรอบข้อความที่เป็นคำพูดกับคู่แท็กต่อไปนี้ -
ตัวอย่างเช่น:
Twas brillig และ Slithey Toves
มี gyre และ gimble ใน wabe:
ทั้งหมด mimsy ถูก borogoves,
และ mome raths outgrabe
อย่างที่คุณเห็นคุณสามารถเพิ่มคู่ของแท็ก blockquote ลงในเนื้อหาของคำพูดได้ ในตัวอย่างนี้เราใช้แท็กแบ่ง (
) เพื่อเพิ่มการแบ่งบรรทัดเดี่ยวที่เหมาะสมภายในของข้อความ เนื่องจากเรากำลังสร้างเนื้อหาใหม่จากบทกวีโดยที่ช่วงเวลาเฉพาะเจาะจงเหล่านี้มีความสำคัญ หากคุณกำลังสร้างข้อความรับรองจากลูกค้าและบรรทัดไม่จำเป็นต้องแบ่งเฉพาะบางส่วนคุณจะไม่ต้องการเพิ่มแท็กแบ่งเหล่านี้และอนุญาตให้เบราว์เซอร์ห่อหุ้มและแบ่งตามที่ต้องการตามขนาดหน้าจอ
อย่าใช้ Blockquote เพื่อเยื้องข้อความ
หลายปีที่ผ่านมาผู้คนใช้แท็ก blockquote หากต้องการแทรกข้อความในหน้าเว็บของตนแม้ว่าจะเป็นข้อความที่ไม่ดึงข้อมูล นี่เป็นการปฏิบัติที่ไม่ดี! คุณไม่ต้องการใช้ความหมายของข้อความบล็อก แต่เพียงอย่างเดียวด้วยเหตุผลภาพ ถ้าคุณต้องการเยื้องข้อความของคุณคุณควรใช้สไตล์ชีทไม่ใช่แท็ก blockquote (ยกเว้นกรณีที่คุณกำลังพยายามเยื้องเป็นคำพูด!) ลองใส่รหัสนี้ในหน้าเว็บของคุณหากคุณกำลังพยายามเพิ่มเพียงเยื้อง:
นี่เป็นข้อความที่เว้นไว้
จากนั้นคุณจะกำหนดเป้าหมายไปที่ชั้นเรียนด้วยสไตล์ CSS
.indented {
padding: 0 10px;
}
การเพิ่มช่องว่างภายใน 10 พิกเซลลงในด้านใดด้านหนึ่งของย่อหน้า
บทความต้นฉบับโดย Jennifer Krynin แก้ไขโดย Jeremy Girard เมื่อวันที่ 5/8/17