ตัวหนา (aka ตัวหนา) ถือเป็นการเน้นหนักในการพิมพ์ ใน HTML สมัยใหม่ มีองค์ประกอบ HTML สององค์ประกอบที่โดยค่าเริ่มต้นจะใช้น้ำหนักแบบอักษรตัวหนา (เรียกอีกอย่างว่า “ตัวหนา”) กับองค์ประกอบข้อความ (ในเบราว์เซอร์ส่วนใหญ่)
คุณสามารถใช้ <strong>
แท็กหรือ <b>
แท็กเช่นนี้:
<p>The strong tag is used to <strong>emphasize</strong> text.</p>
<p>The b tag is used to <b>emphasize</b> text.</p>
ใน HTML สมัยใหม่ (HTML5) ทั้ง <strong>
และ <b>
ถือเป็นความหมายและถูกต้อง แม้ว่าทั้งคู่จะมีรูปแบบการนำเสนอที่เป็นตัวหนาเหมือนกันในเบราว์เซอร์สมัยใหม่ แต่ก็ไม่ได้มีความหมายหรือจุดประสงค์เดียวกัน
แล้วการใช้ strong กับ b ต่างกันอย่างไร และคุณควรใช้อันไหนเพื่ออะไร
- The
<strong>
องค์ประกอบใช้สำหรับเนื้อหาที่มีความสำคัญอย่างยิ่ง (เช่นคำเตือน) - The
<b>
องค์ประกอบใช้เพื่อดึงดูดความสนใจ โดยไม่บอกความสำคัญ
ตัวอย่างการใช้ <b>
:
The Spanish word <b>idioma</b> means “language”. It originates from Greek.
ในตัวอย่างข้างต้น ฉันในฐานะนักพิมพ์ตัวอักษร ตัดสินใจที่จะเน้นคำว่า idioma ไม่ใช่เพราะมัน ยอดเยี่ยม สำคัญ แต่เนื่องจากเป็นคำต่างประเทศที่ไม่ใช่ภาษาอังกฤษ ฉันจึงอยากโดดเด่นจากข้อความที่อยู่รอบๆ เป็นการตัดสินใจแบบมีสไตล์มากกว่าที่จะต้องทำเพื่อสื่อความหมาย
ดังนั้น หากคุณต้องการดึงความสนใจไปที่บางสิ่ง โดยไม่มีความหมายเฉพาะเจาะจงเบื้องหลัง <b>
ในอดีต (ก่อน HTML5) จะถูกต้องในการใช้งาน ที่กล่าวว่าในยุคปัจจุบัน เราไม่ได้ใช้ HTML สำหรับการนำเสนอ เราใช้ CSS ซึ่งเป็นสาเหตุที่ผมไม่ใช้ <b>
ตัวอย่างการใช้ <strong>
:
In 2020, <strong>security</strong> and <strong>performance</strong> are are
crucial for your SEO.
ในตัวอย่างข้างต้น ฉันตัดสินใจเน้นย้ำถึงความปลอดภัย และประสิทธิภาพ เพราะหัวข้อเหล่านั้นมีความสำคัญอย่างยิ่งต่อ SEO (และ UX) ของเว็บไซต์ของคุณ
โดยค่าเริ่มต้น <strong>
และ <b>
จะใช้รูปแบบตัวหนาแบบเดียวกันกับข้อความในเบราว์เซอร์ส่วนใหญ่ ซึ่งทำให้เข้าใจได้ค่อนข้างมาก ทำไมต้องทำให้เหมือนกันทั้งๆ ที่เป็นเครื่องมือที่แตกต่างกันสำหรับกรณีการใช้งานที่แตกต่างกัน
ฉันเห็นด้วยกับคุณ. มันน่ารำคาญ
นี่คือเหตุผลที่คุณอาจต้องการแทนที่ค่าเริ่มต้นของเบราว์เซอร์และใช้รูปแบบที่แตกต่างกันไป
วิธีที่ดีในการแยกแยะระหว่าง <strong>
และ <b>
การนำเสนอคือการใช้น้ำหนักแบบอักษร 500 ถึง 900 (ขึ้นอยู่กับตระกูลแบบอักษร) กับ <strong>
ของคุณ องค์ประกอบด้วย CSS ชอบสิ่งนี้:
strong {
font-weight: 700;
}
แล้วใช้สไตล์อื่นสำหรับ <b>
, เช่น:
b {
font-weight: 400;
color: green;
}
ด้านบนนี้ไม่ใช่คำแนะนำรูปแบบ แต่เป็นตัวอย่างของวิธีที่คุณสามารถจดจำได้ง่ายขึ้นว่าคุณเคยใช้รูปแบบใดในการดูหน้าที่แสดงผลในเบราว์เซอร์ของคุณ
หากคุณใช้มาร์กดาวน์
หากคุณพยายามแปลง <b>
หรือ <strong>
ในการมาร์กดาวน์ในตัวแปลง HTML เป็น Markdown เช่น Browserling คุณจะสังเกตเห็นว่าทั้งคู่ได้รับ ** **
เดียวกัน — ซึ่งแสดงผลเป็น <strong>
ในเบราว์เซอร์
แล้วให้อะไร?
ฉันไม่แน่ใจ. ฉันไม่พบคู่มือ markdown ที่แสดงวิธีการแสดง <b>
ไปยังเบราว์เซอร์เมื่อใช้ markdown อย่างน้อยก็ไม่ใช้ไวยากรณ์ markdown
ไม่ต้องกังวล คุณยังสามารถใช้ไวยากรณ์ HTML ได้โดยตรงในไฟล์ markdown (ยกเว้นกรณีที่คุณใช้เวอร์ชันเก่า) ดังนั้นหากต้องการหรือจำเป็นต้องใช้ <b>
แทน <strong>
คุณสามารถเพิ่มได้ดังนี้:
Here is a line of text inside a <b>markdown</b> file which automatically gets wrapped by paragraph tags
ฉันกำลังเขียนบทช่วยสอนนี้ในมาร์กดาวน์ ตอนนี้ฉันจะเน้นข้อความนี้ ด้วย <b>
องค์ประกอบ. หากคุณทำเครื่องหมายและเลือกย่อหน้านี้แล้วคลิก "ตรวจสอบ" คุณจะเห็นว่าใช้ <b>
จริงๆ ธาตุ
สำคัญกับสิ่งที่คุณใช้จริงหรือไม่
เห็นได้ชัดว่าไม่ใช่ปัญหาชีวิตหรือความตาย หรือเบราว์เซอร์สมัยใหม่จะไม่แสดง <b>
และ <strong>
ด้วยสไตล์ตัวหนาแบบเดียวกัน
อย่างไรก็ตาม ในแง่ความหมาย มีความแตกต่าง ซึ่งเป็นข้อความที่ฉันต้องการจะสื่อ ดังนั้น หากคุณกำลังจะไปสัมภาษณ์งานที่พวกเขาสนใจ มาก เกี่ยวกับมาร์กอัปเชิงความหมาย สิ่งสำคัญคือต้องทราบความแตกต่าง
โดยสรุป:
<b>
ใช้เพื่อดึงความสนใจไปยังข้อความเฉพาะ<strong>
ใช้สำหรับข้อความสำคัญ- หากมีข้อสงสัย ให้ใช้
<strong>
.
หลักการที่ดีคือการหลีกเลี่ยงการเน้นย้ำในทางที่ผิด เมื่อคุณพยายามเน้นมากเกินไป การเน้นจะสูญเสียพลังไป ถ้าเน้นทุกอย่างก็ไม่เน้นอะไร (ฉันกำลังดูคุณอยู่ เว็บไซต์แลนดิ้งเพจการตลาดทั่วไป)