วิธีการและเมื่อใดควรใช้แท็กเน้นใน HTML

หนึ่งในแท็กที่คุณจะได้เรียนรู้ในช่วงต้นของการออกแบบเว็บคือคู่ของแท็กที่เรียกว่า "แท็กเน้น" ลองมาดูว่าแท็กเหล่านี้เป็นอย่างไรและใช้งานอย่างไรในการออกแบบเว็บในวันนี้

กลับไปที่ XHTML

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

และ

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

คุณสามารถวางแท็กเหล่านี้ได้และไม่สำคัญว่าแท็กภายนอกคืออะไร นี่คือตัวอย่างบางส่วน.

เน้นข้อความนี้ และเบราว์เซอร์ส่วนใหญ่จะแสดงเป็นตัวเอียง

ข้อความนี้ถูกเน้นย้ำอย่างมาก และเบราว์เซอร์ส่วนใหญ่จะแสดงเป็นตัวหนา

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

แข็งแรง { สี: แดง;}

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

แข็งแรง { แบบอักษร: หนา; สี: แดง;}

ตอนนี้คุณจะได้รับการรับประกันทั้งหมด แต่มีหน้าเว็บที่มีข้อความเป็นตัวหนา (และเป็นสีแดง) ถูกใช้

Double Up on เน้น

สิ่งหนึ่งที่ฉันสังเกตเห็นในช่วงหลายปีที่ผ่านมาคือสิ่งที่เกิดขึ้นถ้าคุณพยายามที่จะเพิ่มขึ้นสองเท่า ตัวอย่างเช่น:

ข้อความนี้ควรมีทั้ง ตัวเอียงและตัวเอียง ข้อความภายใน

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

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

หมายเหตุเกี่ยวกับตัวหนาและตัวเอียง

หนึ่งความคิดสุดท้าย - ในขณะที่ตัวหนา () และตัวเอียง () จะไม่แนะนำให้ใช้เป็นองค์ประกอบเน้นอีกต่อไปมีนักออกแบบเว็บบางรายที่ใช้แท็กเหล่านี้จัดรูปแบบบรรทัดในบรรทัดของข้อความ โดยทั่วไปพวกเขาใช้มันเช่น a ธาตุ. นี่เป็นสิ่งที่ดีเพราะแท็กสั้นมาก แต่ไม่แนะนำให้ใช้องค์ประกอบเหล่านี้ในลักษณะนี้ ฉันพูดถึงในกรณีที่คุณเห็นมันออกมีในบางเว็บไซต์ที่ใช้ไม่ได้สร้างข้อความตัวหนาหรือตัวเอียง แต่เพื่อสร้างเบ็ด CSS สำหรับประเภทอื่น ๆ จัดแต่งทรงผมภาพ

บทความต้นฉบับโดย Jennifer Krynin แก้ไขโดย Jeremy Girard เมื่อวันที่ 12/2/16