หนึ่งในแท็กที่คุณจะได้เรียนรู้ในช่วงต้นของการออกแบบเว็บคือคู่ของแท็กที่เรียกว่า "แท็กเน้น" ลองมาดูว่าแท็กเหล่านี้เป็นอย่างไรและใช้งานอย่างไรในการออกแบบเว็บในวันนี้
กลับไปที่ XHTML
หากคุณเรียนรู้ HTML ปีที่ผ่านมาก่อนการเพิ่มขึ้นของ HTML5 คุณอาจใช้ทั้งแท็กตัวหนาและตัวเอียง ตามที่คุณคาดหวังแท็กเหล่านี้จะเปลี่ยนองค์ประกอบเป็นตัวหนาหรือตัวเอียงตามลำดับ ปัญหาเกี่ยวกับแท็กเหล่านี้และเหตุใดพวกเขาจึงถูกผลักดันให้ไปหาองค์ประกอบใหม่ (ซึ่งเราจะมองไปในไม่ช้า) นั่นคือองค์ประกอบเหล่านี้ไม่ใช่องค์ประกอบความหมาย ทั้งนี้เป็นเพราะพวกเขากำหนดวิธีการที่ข้อความควรมีลักษณะมากกว่าข้อมูลเกี่ยวกับข้อความ โปรดจำไว้ว่า HTML (ซึ่งเป็นที่ที่แท็กเหล่านี้จะเขียน) เป็นเรื่องเกี่ยวกับโครงสร้างไม่ใช่รูปแบบภาพ! ภาพที่ได้รับการจัดการโดย CSS และแนวทางปฏิบัติที่ดีที่สุดในการออกแบบเว็บถือได้ว่าคุณควรมีรูปแบบและโครงสร้างที่ชัดเจนในหน้าเว็บของคุณ ซึ่งหมายความว่าไม่ใช้องค์ประกอบที่ไม่ใช่ความหมายและดูรายละเอียดมากกว่าโครงสร้าง ด้วยเหตุนี้แท็กตัวเอียงและตัวเอียงจึงถูกแทนที่ด้วยความแข็งแกร่ง (สำหรับตัวหนา) และเน้น (สำหรับตัวเอียง)
& lt; แข็งแกร่ง & gt; และ & lt; em & gt;
องค์ประกอบที่แข็งแกร่งและเน้นเพิ่มข้อมูลลงในข้อความโดยละเอียดเนื้อหาที่ควรได้รับการปฏิบัติแตกต่างออกไปและเน้นเมื่อพูดเนื้อหานั้น คุณใช้องค์ประกอบเหล่านี้แบบเดียวกับที่คุณเคยใช้เป็นตัวหนาและตัวเอียงในอดีต เพียงแค่ล้อมรอบข้อความของคุณด้วยแท็กเปิดและปิด ( และ เพื่อเน้นและ และ เพื่อเน้นความสำคัญ) และข้อความที่แนบมาจะถูกเน้นย้ำ
คุณสามารถวางแท็กเหล่านี้ได้และไม่สำคัญว่าแท็กภายนอกคืออะไร นี่คือตัวอย่างบางส่วน.
ข้อความนี้ถูกเน้น และเบราว์เซอร์ส่วนใหญ่จะแสดงเป็นตัวเอียง ข้อความนี้เน้นย้ำ และเบราว์เซอร์ส่วนใหญ่จะแสดงเป็นตัวหนาในทั้งสองตัวอย่างนี้เราไม่ได้กำหนดลักษณะภาพด้วย HTML ใช่รูปลักษณ์เริ่มต้นของแท็ก จะเป็นตัวเอียงและ จะเป็นตัวหนา แต่รูปลักษณ์เหล่านั้นอาจเปลี่ยนได้ง่ายใน CSS นี่คือสิ่งที่ดีที่สุดของทั้งสองโลก คุณสามารถใช้รูปแบบเบราว์เซอร์เริ่มต้นเพื่อให้ข้อความตัวเอียงหรือเป็นตัวหนาในเอกสารของคุณได้โดยไม่ต้องข้ามเส้นและโครงสร้างและรูปแบบการผสม สมมติว่าคุณต้องการให้ข้อความ ไม่เพียง แต่เป็นตัวหนาเท่านั้น แต่ยังเป็นสีแดงคุณสามารถเพิ่มเนื้อหานี้ลงใน CSS
แข็งแรง {
สี: แดง;
}
ในตัวอย่างนี้คุณไม่จำเป็นต้องเพิ่มพร็อพเพอร์ตี้สำหรับตัวอักษรตัวหนาเนื่องจากเป็นค่าดีฟอลต์ หากคุณไม่ต้องการทิ้งความเป็นไปได้ให้ทำอย่างไรก็ตามคุณสามารถเพิ่มได้เสมอใน:
แข็งแรง {
แบบอักษร: หนา;
สี: แดง;
}
ตอนนี้คุณจะรับประกันได้ว่าจะมีหน้าเว็บที่มีข้อความเป็นตัวหนา (และสีแดง) ที่ใดก็ตามที่ใช้แท็ก
Double Up on เน้น
สิ่งหนึ่งที่ฉันสังเกตเห็นในช่วงหลายปีที่ผ่านมาคือสิ่งที่เกิดขึ้นถ้าคุณพยายามที่จะเพิ่มขึ้นสองเท่า ตัวอย่างเช่น:
ข้อความนี้ควรมีทั้ง ตัวหนาและตัวเอียง ภายในตัวอักษรคุณคิดว่าบรรทัดนี้จะสร้างพื้นที่ที่มีข้อความเป็นตัวหนาและตัวเอียง บางครั้งเรื่องนี้เกิดขึ้นจริง แต่ฉันได้เห็นเบราว์เซอร์บางประเภทเท่านั้นที่ให้ความสำคัญกับรูปแบบการเน้นสองแบบที่สองซึ่งเป็นรูปแบบที่ใกล้เคียงกับข้อความจริงมากที่สุดและแสดงเป็นตัวเอียงเท่านั้น นี่คือเหตุผลหนึ่งที่ฉันไม่ได้เพิ่มแท็กเน้นสองครั้ง
อีกเหตุผลหนึ่งที่จะหลีกเลี่ยงปัญหานี้ "ทวีคูณ" ขึ้นอยู่กับวัตถุประสงค์ของโวหาร หนึ่งรูปแบบของการเน้นถ้ามักจะเพียงพอที่จะถ่ายทอดเสียงที่คุณต้องการตั้ง คุณไม่จำเป็นต้องเป็นตัวหนาตัวเอียดสีขยายและขีดเส้นใต้ข้อความเพื่อให้โดดเด่น ข้อความฉบับนี้จะเน้นความหรูหรากลายเป็นเรื่องหรูหรา ดังนั้นควรระมัดระวังเมื่อใช้แท็กเน้นหรือสไตล์ CSS เพื่อให้ความสำคัญและไม่หักโหมมากเกินไป
หมายเหตุเกี่ยวกับตัวหนาและตัวเอียง
หนึ่งความคิดสุดท้าย - ในขณะที่แท็กตัวหนา () และตัวเอียง () ไม่แนะนำให้ใช้เป็นองค์ประกอบเน้นอีกต่อไปแล้วมีนักออกแบบเว็บบางคนที่ใช้แท็กเหล่านี้จัดรูปแบบบรรทัดในบรรทัดของข้อความ โดยทั่วไปใช้เป็นองค์ประกอบ นี่เป็นสิ่งที่ดีเพราะแท็กสั้นมาก แต่ไม่แนะนำให้ใช้องค์ประกอบเหล่านี้ในลักษณะนี้ ฉันพูดถึงในกรณีที่คุณเห็นมันออกมีในบางเว็บไซต์ที่ใช้ไม่ได้สร้างข้อความตัวหนาหรือตัวเอียง แต่เพื่อสร้างเบ็ด CSS สำหรับประเภทอื่น ๆ จัดแต่งทรงผมภาพ
บทความต้นฉบับโดย Jennifer Krynin แก้ไขโดย Jeremy Girard เมื่อวันที่ 12/2/16