<b> และ <strong>, <i> และ <em> ต่างกันอย่างไร

อะไรคือความแตกต่างระหว่าง<b>และ<strong>, <i>และ<em>ใน HTML / XHTML? เมื่อใดที่คุณควรใช้แต่ละ

พวกเขามีผลเหมือนกันกับเอ็นจิ้นการแสดงผลเว็บเบราว์เซอร์ปกติแต่มีความแตกต่างพื้นฐานระหว่างพวกเขา

ตามที่ผู้เขียนเขียนในโพสต์รายการสนทนา :

คิดถึงสถานการณ์ที่แตกต่างกันสามสถานการณ์:

• เว็บเบราว์เซอร์
• คนตาบอด
• โทรศัพท์มือถือ

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

น่าเสียดายที่ไม่มีความหมายอะไรกับคนตาบอด สำหรับโทรศัพท์มือถือและ PDA อื่น ๆ ข้อความมีความหนาอยู่แล้วเนื่องจากความละเอียดหน้าจอเล็กมาก คุณไม่กล้าทำให้กล้าได้กล้าเสีย

<b>เป็นสไตล์ - เรารู้ว่า "ตัวหนา" ควรมีลักษณะอย่างไร

<strong>แต่เป็นข้อบ่งชี้ของวิธีการบางอย่างควรจะเข้าใจ "Strong" สามารถ (และบ่อยครั้ง) หมายถึง "ตัวหนา" ในเบราว์เซอร์ แต่อาจหมายถึงโทนเสียงต่ำสำหรับโปรแกรมการพูดเช่น Jaws (สำหรับคนตาบอด) หรือแสดงเป็นขีดเส้นใต้ (เนื่องจากคุณไม่สามารถ ตัวหนา) บน Palm Pilot

HTML ไม่เคยมีความหมายเกี่ยวกับสไตล์ ทำค้นหาบางสำหรับ"Tim Berners-Lee"และ"เว็บ semantic." <strong>มีความหมาย - มันอธิบายข้อความที่ล้อมรอบ (เช่น"ข้อความนี้ควรแข็งแกร่งกว่าส่วนที่เหลือของข้อความที่คุณแสดง" ) ตรงข้ามกับการอธิบายว่าข้อความที่ล้อมรอบควรแสดงอย่างไร (เช่น"ข้อความนี้ควรเป็น ตัวหนา " )

<b>และ<i>ชัดเจน - พวกเขาระบุตัวหนาและตัวเอียงตามลำดับ

<strong>และ<em>มีความหมาย - พวกเขาระบุว่าข้อความที่แนบมาควรเป็น "strong" หรือ "เน้น" ในบางวิธีโดยปกติจะเป็นตัวหนาและตัวเอียง แต่อนุญาตให้ควบคุมสไตล์ได้จริงผ่าน CSS ดังนั้นสิ่งเหล่านี้เป็นที่ต้องการในหน้าเว็บที่ทันสมัย

<strong>และ<em>เพิ่มความหมายพิเศษให้กับเอกสารของคุณ มันเกิดขึ้นจนพวกเขายังให้สไตล์ที่เป็นตัวหนาและตัวเอียงกับข้อความของคุณ

แน่นอนคุณสามารถแทนที่สไตล์ของพวกเขาด้วย CSS

<b>และ<i>ในอีกทางหนึ่งใช้การจัดแต่งแบบอักษรเท่านั้นและไม่ควรใช้อีกต่อไป (เพราะคุณควรจัดรูปแบบด้วย CSS และถ้าข้อความมีความสำคัญจริง ๆ แล้วคุณอาจจะทำให้มัน "แข็งแรง" หรือ "เน้น" ต่อไป!)

หวังว่ามันสมเหตุสมผล

นี่คือบทสรุปของคำจำกัดความพร้อมกับการใช้งานที่แนะนำ:

<b>... ช่วงของข้อความที่ถูกดึงความสนใจเพื่อวัตถุประสงค์ที่เป็นประโยชน์โดยไม่ต้องสื่อความสำคัญเป็นพิเศษและไม่มีความหมายของเสียงหรืออารมณ์ทางเลือกเช่นคำสำคัญในเอกสารนามธรรมชื่อผลิตภัณฑ์ในการตรวจสอบคำดำเนินการใน ซอฟแวร์ที่ขับเคลื่อนด้วยข้อความโต้ตอบหรือLede บทความ

<strong> ... ตอนนี้แสดงถึงความสำคัญมากกว่าการเน้นที่แข็งแกร่ง

<i>... ช่วงของข้อความในเสียงอื่นหรืออารมณ์หรือชดเชยจากร้อยแก้วปกติในลักษณะที่บ่งบอกถึงคุณภาพที่แตกต่างกันของข้อความเช่นการกำหนดหมวดหมู่เป็นระยะทางเทคนิคเป็นวลีสำนวนจากภาษาอื่นที่คิดหรือชื่อเรือในตำราตะวันตก

<em> ... บ่งบอกถึงความสำคัญ

(สิ่งเหล่านี้เป็นคำพูดโดยตรงจากแหล่ง W3C โดยที่ฉันให้ความสำคัญเพิ่มดู: https://rawgithub.com/whatwg/html-differences/master/Overview.html#changed-elementsและhttp://www.w3.org /TR/html401/struct/text.html#h-9.2.1สำหรับต้นฉบับ)

<b>และ<i>ทั้งสองเกี่ยวข้องกับสไตล์ในขณะที่<em>และ<strong>มีความหมาย ใน HTML 4 เป็นครั้งแรกที่จะจัดเป็นองค์ประกอบรูปแบบตัวอักษรและหลังเป็นองค์ประกอบวลี

ตามที่คุณระบุไว้อย่างถูกต้อง<i>และ<em>มักจะถือว่าคล้ายกันเพราะเบราว์เซอร์มักแสดงผลเป็นตัวเอียง แต่ตามข้อกำหนด<em> ระบุบ่งชี้ความสำคัญและ<strong> บ่งบอกถึงการเน้นที่แข็งแกร่งซึ่งค่อนข้างชัดเจน แต่มักตีความผิด ในทางตรงกันข้ามความแตกต่างระหว่างเวลาที่จะใช้<i>หรือ<b>เป็นเรื่องของสไตล์จริงๆ

ในขณะที่<strong>และ<em>แน่นอนถูกต้องมากขึ้นความหมายดูเหมือนมีเหตุผลที่ถูกต้องชัดเจนในการใช้<b>และ<i>แท็กสำหรับเนื้อหาที่เขียนโดยลูกค้า

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

นอกจากนี้เนื้อหาดังกล่าวอาจหมายถึงคำและวลีที่เป็นตัวหนาและตัวเอียงเพื่อสื่อความหมายเฉพาะ

ตัวอย่างจะเป็นคำถามสอบภาษาอังกฤษที่สั่งให้นักเรียนเปลี่ยนคำที่เป็นตัวหนา

<em>และ<strong>ใช้แบนด์วิธมากกว่าและ<i><b>

พวกเขายังต้องการการพิมพ์เพิ่มเติม (ถ้าไม่สร้างขึ้นโดยอัตโนมัติ)

พวกเขายังถ่วงหน้าจอแก้ไขด้วยข้อความเพิ่มเติม ฉันดูเหมือนจะจำได้ว่าโปรแกรมเมอร์ชอบไฟล์ต้นฉบับที่เล็กกว่าถ้ามันเหมือนกัน (และเป็นของจริงพวกเขาเหมือนกันใช่มีความแตกต่าง "ทางเทคนิค" (<i> ไอ </i>, อะแฮ่มแก้ตัวฉัน) แต่ส่วนใหญ่เป็นของปลอมที่จะเริ่มต้นด้วย)

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

ดังที่คนอื่น ๆ บอกว่า <b> และ <i> นั้นชัดเจน (เช่น "ทำให้ข้อความนี้เป็นตัวหนา") ในขณะที่ <strong> และ <em> นั้นมีความหมาย (เช่น "ควรเน้นข้อความนี้")

ในบริบทของเว็บเบราว์เซอร์ที่ทันสมัยมันยากที่จะเห็นความแตกต่าง (พวกเขาทั้งคู่ดูเหมือนจะให้ผลลัพธ์ที่เหมือนกันใช่มั้ย) แต่คิดเกี่ยวกับโปรแกรมอ่านหน้าจอสำหรับผู้บกพร่องทางสายตา หากโปรแกรมอ่านหน้าจอพบแท็ก <i> จะไม่ทราบว่าต้องทำอย่างไร แต่ถ้ามันเจอแท็ก <em> มันจะรู้ว่าสิ่งใดที่อยู่ภายในควรเน้นไปที่ผู้ฟัง และในนั้นคุณจะได้รับความแตกต่างในทางปฏิบัติ

<i>, <b>, <em>และ<strong>แท็กดำเนินการแบบดั้งเดิม แต่พวกเขาได้รับใหม่ความหมายในHTML5

<i>และ<b>ถูกใช้สำหรับรูปแบบตัวอักษรใน HTML4 <i>ใช้สำหรับตัวเอียงและ<b>ตัวหนา ใน HTML5 <i>แท็กมีความหมายความหมายใหม่ของ ' เสียงอื่นหรืออารมณ์และ<b>แท็กมีความหมายของการชดเชย stylistically

ตัวอย่างการใช้<i>แท็ก ได้แก่ - การจัดหมวดหมู่คำศัพท์ทางเทคนิควลีสำนวนจากภาษาอื่นการทับศัพท์ความคิดชื่อเรือในตำราตะวันตก เช่น -

<p><i>I hope this works</i>, he thought.</p>

ตัวอย่างการใช้งานของ<b>แท็กคือคำหลักในสารสกัดเอกสารชื่อผลิตภัณฑ์ในการตรวจสอบคำที่ดำเนินการได้ในซอฟต์แวร์ข้อความขับเคลื่อนโต้ตอบนำไปสู่บทความ

ย่อหน้าตัวอย่างต่อไปนี้ถูกชดเชยจากย่อหน้าที่ตามหลัง

<p><b class="lead">The event takes place this upcoming Saturday, and over 3,000 people have already registered.</b></p>

<em>และ<strong>มีความหมายของการเน้นและเน้นใน HTML4 แต่ใน HTML5 <em>วิธีการเน้นความสำคัญและ<strong>หมายถึงความสำคัญที่แข็งแกร่ง

ในตัวอย่างต่อไปนี้ควรมีการเปลี่ยนแปลงทางภาษาขณะที่อ่านคำก่อน ...

<p>Make sure to sign up <em>before</em> the day of the event, September 16, 2016</p>

ในตัวอย่างเดียวกันเราสามารถใช้<strong>แท็กดังต่อไปนี้ ..

<p>Make sure to sign up <em>before</em> the day of the event, <strong>September 16, 2016</strong></p>

เพื่อให้ความสำคัญกับเหตุการณ์วันที่

อ้างอิง MDN:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong

ดังที่คนอื่น ๆ ได้ระบุไว้ความแตกต่างคือ<b>และ<i>สไตล์ฟอนต์ของ hardcode ในขณะที่<strong>และ<em>กำหนดความหมายทางความหมายด้วยรูปแบบตัวอักษร (หรือการพูดเสียงสูงต่ำของเบราว์เซอร์หรือสิ่งที่มี พูด)

คุณสามารถคิดว่านี่เป็นความแตกต่างระหว่างรูปแบบตัวอักษร“ กายภาพ” และสไตล์“ เชิงตรรกะ” หากคุณต้องการ ในเวลาต่อมาคุณอาจต้องการเปลี่ยนวิธีการ<strong>และ<em>ข้อความที่จะแสดงพูดโดยการเปลี่ยนคุณสมบัติในสไตล์ชีตเพื่อเพิ่มการเปลี่ยนแปลงสีและขนาดหรือแม้กระทั่งการใช้ใบหน้าแบบอักษรที่แตกต่างกันโดยสิ้นเชิง หากคุณเคยใช้“ตรรกะ” มาร์กอัปแทน hardcoded“กาย” มาร์กอัปแล้วคุณก็สามารถเปลี่ยนคุณสมบัติการแสดงในสถานที่หนึ่งในแต่ละแผ่นสไตล์ของคุณและจากนั้นทั้งหมดของหน้าเว็บที่อ้างอิงว่าสไตล์ชีทได้รับการเปลี่ยนแปลงโดยอัตโนมัติโดยไม่ต้อง เคยมีการแก้ไข

สวยเนียนใช่มั้ย

นี่เป็นเหตุผลที่อยู่เบื้องหลังการกำหนดสไตล์ย่อย (อ้างอิงโดยใช้style=คุณสมบัติในแท็กข้อความ) สำหรับย่อหน้าเซลล์ตารางข้อความส่วนหัวคำอธิบายภาพ ฯลฯ และการใช้<div>แท็ก คุณสามารถกำหนดการเป็นตัวแทนทางกายภาพสำหรับสไตล์ลอจิคัลของคุณในสไตล์ชีทและการเปลี่ยนแปลงจะปรากฏขึ้นโดยอัตโนมัติในเว็บเพจที่อ้างอิงสไตล์ชีทนั้น ต้องการตัวแทนที่แตกต่างกันสำหรับซอร์สโค้ดหรือไม่ กำหนดแบบอักษรขนาดน้ำหนักระยะห่าง ฯลฯ สำหรับสไตล์ "รหัส" ของคุณ

หากคุณใช้ XHTML คุณยังสามารถกำหนดแท็ก semantic ของคุณเองและสไตล์ชีทของคุณจะทำการแปลงเป็นรูปแบบตัวอักษรและเลย์เอาต์ทางกายภาพสำหรับคุณ

ฉันใช้ทั้ง <strong> และ <b> ที่จริงด้วยเหตุผลที่กล่าวถึงในการตอบกระทู้นี้ มีบางครั้งที่การเผชิญหน้ากับข้อความบางอย่างดูดีขึ้น แต่ไม่จำเป็นต้องมีความหมายสำคัญกว่าประโยคอื่น ๆ นี่คือตัวอย่างจากหน้าที่ฉันกำลังทำงานอยู่ในขณะนี้:

"ดึงหนังสือ <strong> ทั้งหมด </strong> เกี่ยวกับ <b> ลาครอส </b>"

ในประโยคนั้นคำว่า "ทั้งหมด" มีความสำคัญมากและ "ลาครอส" น้อยกว่ามาก - ฉันแค่อยากให้มันกล้าเพราะมันหมายถึงคำค้นหาดังนั้นฉันจึงต้องการการแยกภาพ หากคุณกำลังดูหน้าเว็บด้วยโปรแกรมอ่านหน้าจอฉันไม่คิดว่ามันจะต้องไปเน้นที่คำว่า "ลาครอส"

ฉันมักจะคิดว่านักพัฒนาเว็บส่วนใหญ่ใช้อีกคนหนึ่ง แต่ทั้งคู่ใช้ได้ดี - <b> ไม่แน่นอนที่สุดเนื่องจากบางคนอ้างสิทธิ์ สำหรับฉันมันเป็นเพียงเส้นแบ่งระหว่างการดึงดูดสายตาและความหมาย

ใช้เฉพาะในกรณีที่ใช้ CSS สไตล์คลาสไม่ว่าจะด้วยเหตุผลใดหรือเป็นไปไม่ได้ (เช่นระบบบล็อกอนุญาตให้ใช้เพียงบางแท็กในโพสต์และสไตล์ที่ฝังในที่สุด) อีกเหตุผลหนึ่งคือการสนับสนุนเบราว์เซอร์ที่เก่ามาก (อุปกรณ์มือถือบางรุ่น?) หรือเครื่องมือค้นหาดั้งเดิม (ที่ให้คะแนน<b>หรือ<strong>แท็กแทนการวิเคราะห์สไตล์ CSS)

หากคุณสามารถกำหนดสไตล์ CSS ให้ใช้สไตล์เหล่านั้น

สำหรับข้อความที่เป็นตัวหนาโดยใช้ <b> แท็ก

สำหรับข้อความสำคัญที่ใช้ <strong> แท็ก

สำหรับข้อความสไตล์ตัวเอียงโดยใช้ <i> แท็ก

สำหรับข้อความที่เน้นการใช้ <em> แท็ก

<b>และ<i>ควรหลีกเลี่ยงเพราะอธิบายถึงลักษณะของข้อความ ให้ใช้<strong>และ<em>เพราะมันอธิบายความหมาย (ความหมาย) ของข้อความแทน

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

bหรือiหมายถึงคุณต้องการให้ข้อความแสดงผลเป็นตัวหนาหรือตัวเอียง strongหรือemหมายความว่าคุณต้องการให้ข้อความเรนเดอร์ในลักษณะที่ผู้ใช้เข้าใจว่า "สำคัญ" ค่าเริ่มต้นคือการแสดงผลที่แข็งแกร่งเป็นตัวหนาและ em เป็นตัวเอียง แต่วัฒนธรรมอื่น ๆ อาจใช้การทำแผนที่ที่แตกต่างกัน

เช่นเดียวกับสตริงในโปรแกรมbและiจะเป็น "hard coded" ในขณะที่strongและemจะเป็น "localized"

"พวกมันมีเอฟเฟกต์เหมือนกันอย่างไรก็ตาม XHTML ซึ่งเป็น HTML รุ่นใหม่กว่าแนะนำให้ใช้<strong>แท็ก Strong นั้นดีกว่าเพราะอ่านง่ายกว่า - ความหมายของมันนั้นชัดเจนยิ่งขึ้นนอกจากนี้<strong>บ่งบอกความหมาย - แสดงข้อความ อย่างยิ่ง - ในขณะที่<b>(สำหรับตัวหนา) บ่งบอกถึงวิธีการ - การทำให้ข้อความเป็นจริงด้วย strong รหัสของคุณยังคงสมเหตุสมผลถ้าคุณใช้สไตล์ชีท CSS เพื่อเปลี่ยนวิธีการทำให้ข้อความแข็งแรง

สิ่งเดียวกันนี้ก็เพื่อความแตกต่างระหว่าง<i>และ<em>"

Google dixit:

http://wiki.answers.com/Q/What_is_the_difference_between_HTML_tags_b_and_strong

องค์ประกอบการจัดรูปแบบ HTML:

HTML ยังกำหนดองค์ประกอบพิเศษสำหรับการกำหนดข้อความด้วยความหมายพิเศษ HTML ใช้องค์ประกอบเช่น <b> และ <i> สำหรับการจัดรูปแบบเอาต์พุตเช่นข้อความตัวหนาหรือตัวเอียง

การจัดรูปแบบ HTML เป็นตัวหนาและแข็งแรง:

องค์ประกอบ <b> <b> กำหนดข้อความตัวหนาโดยไม่มีความสำคัญเป็นพิเศษ

<b>This text is bold</b>

องค์ประกอบ HTML <strong> กำหนดข้อความที่แข็งแกร่งด้วยความสำคัญเพิ่ม "ความแข็งแกร่ง" ความหมาย

<strong>This text is strong</strong>

การจัดรูปแบบ HTML แบบเอียงและเน้น:

องค์ประกอบ HTML <i> กำหนดข้อความตัวเอียงโดยไม่มีความสำคัญเป็นพิเศษ

<i>This text is italic</i>

องค์ประกอบ <em> HTML กำหนดข้อความที่เน้นด้วยความสำคัญเพิ่มความหมาย

<em>This text is emphasized</em>

โดยทั่วไปคุณควรพยายามหลีกเลี่ยงและ<b> <i>พวกเขาได้รับการแนะนำสำหรับการจัดหน้า (เปลี่ยนวิธีการดู) ในรุ่น HMTL ก่อนหน้าการสร้าง CSS เช่นfontแท็กที่ลบออกในขณะเดียวกันและส่วนใหญ่ถูกเก็บไว้เพื่อความเข้ากันได้ย้อนหลังและเนื่องจากฟอรัมบางแห่งอนุญาตให้ใช้ HTML แบบอินไลน์ วิธีเปลี่ยนรูปลักษณ์ของข้อความ (เช่น BBCode ใช้[i]คุณสามารถใช้<i>และอื่น ๆ )

นับตั้งแต่การสร้าง CSS การจัดวางเป็นสิ่งที่ไม่ควรทำใน HTML อีกต่อไปนั่นเป็นสาเหตุที่ CSS ถูกสร้างขึ้นตั้งแต่แรก (HTML == โครงสร้าง CSS == โครงร่าง) แท็กเหล่านี้อาจหายไปในอนาคตหลังจากทั้งหมดคุณสามารถใช้ CSS และspanแท็กเพื่อทำให้ข้อความเป็นตัวหนา / ตัวเอียงหากคุณต้องการรูปแบบตัวอักษร "ไร้ความหมาย" HTML 5 ยังคงอนุญาต แต่ประกาศว่าการทำเครื่องหมายข้อความด้วยวิธีนั้นไม่มีความหมายความหมาย

<em>และ<strong>ในทางกลับกันเพียงแค่บอกว่ามีบางสิ่งที่ "เน้น" หรือ "เน้นหนัก" มันจะเปิดให้เบราว์เซอร์แสดงวิธีการทำให้สมบูรณ์ เบราว์เซอร์ส่วนใหญ่จะแสดงผลemเป็นตัวเอียงและstrongเป็นตัวหนาตามมาตรฐานที่แนะนำโดยค่าเริ่มต้น แต่ไม่บังคับให้ทำเช่นนั้น (อาจใช้สีขนาดตัวอักษรแบบอักษรอะไรก็ได้) คุณสามารถใช้ CSS เพื่อเปลี่ยนพฤติกรรมตามที่คุณต้องการ คุณสามารถทำให้เป็นemตัวหนาถ้าคุณชอบและstrongตัวหนาและสีแดงตัวอย่างเช่น

<strong>และ<em>เป็นนามธรรม (ซึ่งเป็นสิ่งที่ผู้คนหมายถึงเมื่อพวกเขาพูดว่าเป็นความหมาย) <b>และ<i>เป็นวิธีเฉพาะในการทำบางสิ่งที่ "แข็งแรง" หรือ "เน้น"

การเปรียบเทียบ:

ทั้งที่<strong>เป็น<b>และ<em>เป็น<i>

เช่น

"รถ" คือ "รถจี๊ป"

เราใช้<strong>แท็กสำหรับข้อความที่มีความสำคัญสูงสำหรับวัตถุประสงค์ของ SEO เช่นชื่อผลิตภัณฑ์ชื่อ บริษัท ฯลฯ ในขณะที่<b>ง่าย ๆ ก็ทำให้เป็นตัวหนา

ในทำนองเดียวกันเราใช้<em>ข้อความที่มีลำดับความสำคัญสูงสำหรับ SEO ในขณะ<i>ที่ทำให้ข้อความเป็นตัวเอียง