วิธีที่ 1: มันสมเหตุสมผลหรือไม่?
<span class="heading">ชื่อบทความ</span>
แม้ว่า <span> อาจเป็นแท็กที่สะดวกในบางสถานการณ์ แต่ก็ไม่ได้สื่อถึงความหมายที่สมบูรณ์ของชื่อ ข้อดีอย่างหนึ่งของการใช้วิธีการนี้คือเราสามารถแนบกฎ CSS เข้ากับมันและกำหนดคลาสส่วนหัวเพื่อทำให้ข้อความดูเหมือนเป็นชื่อเรื่องได้
.หัวเรื่อง {
ขนาดตัวอักษร: 24px;
น้ำหนักตัวอักษร: ตัวหนา;
สี: สีฟ้า;
-
ตกลง ตอนนี้ส่วนหัวทั้งหมดจะถูกทำเครื่องหมายด้วยคลาสส่วนหัวด้วยแบบอักษรตัวหนาขนาดใหญ่และเป็นสีน้ำเงิน มหัศจรรย์! แต่นี่เป็นสิ่งที่ถูกต้องหรือไม่? จะเกิดอะไรขึ้นถ้ามีคนดูด้วยเบราว์เซอร์ที่ไม่รองรับ CSS
ตัวอย่างเช่น จะเกิดอะไรขึ้นหากกฎของสไตล์ชีตภายนอกที่เราตั้งไว้ไม่รองรับเบราว์เซอร์เวอร์ชันเก่า หรือจะเป็นอย่างไรหากผู้ที่มีความบกพร่องทางการมองเห็นใช้โปรแกรมอ่านหน้าจอเพื่ออ่านหน้านี้ สิ่งที่ผู้เยี่ยมชมเห็น (หรือได้ยิน) ผ่านวิธีการเหล่านี้ไม่ควรแตกต่างจากข้อความปกติบนหน้าเว็บ
แม้ว่า class="heading" จะเพิ่มความหมายเล็กน้อยให้กับแท็ก แต่ <span> ยังคงเป็นเพียงแท็กธรรมดาที่สามารถแก้ไขได้ด้วยสไตล์เริ่มต้นของเบราว์เซอร์ส่วนใหญ่
เครื่องมือค้นหาจะเพิกเฉยต่อแท็ก <span> เมื่อรวบรวมข้อมูลหน้านี้ ราวกับว่าไม่มีอยู่ และจะไม่ให้ความสนใจเป็นพิเศษกับคำหลักที่อาจมี เราจะพูดถึงความสัมพันธ์ระหว่างเครื่องมือค้นหาและชื่อเพิ่มเติมในภายหลัง
สุดท้ายนี้ เนื่องจากแท็ก <span> เป็นองค์ประกอบแบบอินไลน์ เราอาจจำเป็นต้องซ้อนมันไว้ในองค์ประกอบระดับบล็อกเพิ่มเติม เช่น แท็ก <p> หรือแท็ก <div> เพื่อที่จะทำให้มันแยกบรรทัด ซึ่งจะทำให้แท็กของคุณเกะกะด้วยโค้ดที่ไม่จำเป็น แท็กเพิ่มเติมเหล่านี้จำเป็นเพื่อให้เบราว์เซอร์ที่ไม่รองรับ CSS สามารถแสดงข้อความเดียวกันได้
วิธีที่ 2: การรวมกันของ <p> และ <b>
<p><b>ชื่อบทความ</b></p>
การใช้แท็กย่อหน้าจะทำให้เราแสดงผลระดับบล็อก และ <b> จะทำให้ข้อความเป็นตัวหนา แต่เมื่อใช้วิธีนี้เพื่อทำเครื่องหมายชื่อที่สำคัญ เราก็ต้องเผชิญกับผลลัพธ์ที่ไร้ความหมายเช่นเดียวกัน
แท็ก <b> ต่างจากวิธี A ตรงที่ทำให้ข้อความเป็นตัวหนาในเบราว์เซอร์แบบภาพ แม้แต่เบราว์เซอร์ที่ไม่รองรับ CSS ก็ตาม แต่เช่นเดียวกับแท็ก <span> เครื่องมือค้นหาจะไม่ให้ความสำคัญสูงกว่าเพียงเพราะมีบางสิ่งเป็นตัวหนาในย่อหน้า
ยากที่จะมีสไตล์
การใช้ <p> และ <b> ร่วมกันแบบปกติยังนำมาซึ่งข้อบกพร่องอีกประการหนึ่ง - เป็นไปไม่ได้ที่จะออกแบบชื่อนี้ให้แตกต่างจากย่อหน้าอื่น เราอาจต้องการใช้สไตล์พิเศษเพื่อเน้นชื่อเพื่อทำให้เนื้อหาของหน้าชัดเจนและมีโครงสร้างมากขึ้น แต่วิธีนี้ทำให้ดูเป็นตัวหนาเท่านั้น
วิธีที่ 3: สไตล์บวกสาร
<h1>ชื่อบทความ</h1>
ช่างเป็นคำจำกัดความที่ยอดเยี่ยมจริงๆ นักออกแบบเว็บไซต์ส่วนใหญ่คุ้นเคย ที่จริงแล้ว เมื่อใช้อย่างเหมาะสม <Hn> จะสามารถจัดเตรียมโครงสร้างที่ยืดหยุ่น จัดทำดัชนีได้ และจัดสไตล์ได้สำหรับเนื้อหาของเพจ
นี่เป็นวิธีที่ชาญฉลาดในการกำหนดมัน และคุณจะพบว่ามันค่อนข้างง่าย ไม่จำเป็นต้องใช้แท็กเพิ่มเติมอีกต่อไป และคุณอาจโต้แย้งได้ว่าวิธีนี้ช่วยประหยัดไบต์ได้มากกว่าอีกสองวิธีเพียงเล็กน้อยเท่านั้น ซึ่งถือว่าน้อยมาก แต่ประหยัดได้มาก
<h1> ถึง <h6> แสดงถึงส่วนหัวหกระดับ ตั้งแต่ที่สำคัญที่สุด (<h1>) ไปจนถึงสำคัญน้อยที่สุด (<h6>) พวกมันอยู่ในระดับบล็อกและไม่จำเป็นต้องเพิ่มองค์ประกอบอื่น ๆ เพื่อจัดเรียงทีละรายการ เรียบง่าย มีประสิทธิภาพ – เป็นเครื่องมือที่ยอดเยี่ยม
ปรับแต่งสไตล์ได้อย่างง่ายดาย
เนื่องจากเราใช้แท็ก <h1> โดยไม่ซ้ำกัน และแท็ก <b> หรือ <p> เหมาะสำหรับใช้ทั่วทั้งหน้ามากกว่า เราจึงสามารถใช้วิธี CSS ที่หลากหลายเพื่อจัดรูปแบบได้
ยิ่งไปกว่านั้น แท็กชื่อยังสามารถระบุชื่อได้อย่างชัดเจน แม้จะไม่จำเป็นต้องจัดสไตล์เลยก็ตาม! เบราว์เซอร์ภาพจะแสดง <h1> ด้วยแบบอักษรตัวหนาขนาดใหญ่ หน้าที่ไม่มีสไตล์จะแสดงโครงสร้างเอกสารตามที่คาดไว้ พร้อมด้วยแท็กส่วนหัวที่เหมาะสมเพื่อสื่อความหมาย
โปรแกรมอ่านหน้าจอ พีดีเอ โทรศัพท์มือถือ และเบราว์เซอร์แบบเห็นภาพและไม่ใช่ภาพจะรู้ว่าต้องทำอย่างไรเมื่อพบแท็กชื่อ จัดการอย่างถูกต้อง และปฏิบัติต่อมันอย่างจริงจังมากกว่าข้อความปกติบนหน้าเว็บ ด้วยแท็ก <span> เบราว์เซอร์ที่ไม่รองรับ CSS จะไม่ปฏิบัติต่อมันเป็นพิเศษ
สไตล์เริ่มต้นที่น่ารำคาญ
ในอดีต นักออกแบบอาจหลีกเลี่ยงการใช้แท็กชื่อโดยสิ้นเชิง เนื่องจากค่าเริ่มต้นของเบราว์เซอร์น่าเกลียดมาก หรือหลีกเลี่ยงการใช้ <h1> หรือ <h2> เนื่องจากมีขนาดเริ่มต้นที่ใหญ่ และใช้แท็กส่วนหัวที่มีหมายเลขสูงกว่าเพื่อให้ได้ขนาดที่เล็กลงแทน
อย่างไรก็ตาม สิ่งสำคัญคือต้องเน้นย้ำว่าเราสามารถเปลี่ยนแท็กชื่อเหล่านี้ได้อย่างง่ายดายโดยใช้ CSS ตัวอย่างเช่น < ;h1> ไม่จำเป็นต้องเป็นแท็กขนาดใหญ่ที่ใช้พื้นที่ครึ่งหนึ่งของหน้าจอ หลังจากนั้น ฉันจะสาธิตให้เห็นว่าการจัดสไตล์แท็กชื่อด้วย CSS นั้นง่ายดายแค่ไหน หวังว่าจะช่วยลดความกลัวอันท่วมท้นของคุณได้
เป็นมิตรกับเครื่องมือค้นหา
นี่เป็นประโยชน์อย่างมาก เครื่องมือค้นหาชอบแท็กชื่อ ในทางกลับกัน แท็ก <span> หรือแท็กย่อหน้าที่เป็นตัวหนาปกติจะมีความหมายน้อยกว่า การทำเครื่องหมายชื่อของคุณอย่างเหมาะสมด้วย <h1> ถึง <h6> ต้องใช้ความพยายามเพียงเล็กน้อยในส่วนของคุณ แต่ช่วยให้เครื่องมือค้นหารวบรวมข้อมูลหน้าเว็บของคุณได้ง่ายขึ้น เพื่อให้ผู้คนสามารถค้นพบพวกเขาได้ในท้ายที่สุด
บอทเครื่องมือค้นหาจะให้ความสนใจเป็นพิเศษกับแท็กชื่อ – นี่คือที่ที่คุณอาจใส่คำหลักบางคำ เช่นเดียวกับการดึงข้อมูล <title> และ <meta> พวกเขาจะค้นหาหน้าเว็บตามแท็กชื่อ หากคุณไม่ใช้แท็กเหล่านี้ คำหลักที่อยู่ภายในจะไม่ถือว่ามีคุณค่าและจะถูกละเว้น
ดังนั้น เพียงใช้ความพยายามเพียงเล็กน้อย คุณก็สามารถเพิ่มโอกาสที่ผู้คนจะพบเว็บไซต์ของคุณโดยพิจารณาจากเนื้อหาบนเพจของคุณ ฟังดูดีใช่มั้ย?
เกี่ยวกับการเรียงลำดับชื่อเรื่อง
ในตัวอย่าง ชื่อเฉพาะนี้เป็นสิ่งสำคัญที่สุดในเพจ เนื่องจากเป็นชื่อเรื่องของเอกสาร ดังนั้นเราจึงใช้แท็กชื่อที่สำคัญที่สุด <h1> ตามข้อกำหนดของ W3C บางคนคิดว่าการข้ามระดับหัวข้อหลายระดับถือเป็นแนวทางปฏิบัติที่ไม่ดี ตัวอย่างเช่น จินตนาการว่าเราอยู่ในหน้าต่อไปนี้:
<h1>ชื่อบทความ</h1>
หัวข้อถัดไปของเรา (หากไม่ซ้ำกับ <h1> อื่น) จะเป็น <h2> จากนั้น <h3> เป็นต้น คุณอาจไม่ควรข้ามหนึ่งระดับหลังจาก <h1> และตรงไปที่ <h3> ฉันมักจะเห็นด้วยกับมุมมองข้างต้น และรักษาความต่อเนื่องของระดับตามข้อความเพื่อสร้างโครงสร้างเค้าโครง ด้วยวิธีนี้ คุณสามารถเพิ่มชื่อและสไตล์ลงในเพจที่มีอยู่แล้วได้ง่ายขึ้น และคุณจะลดข้อผิดพลาดที่เกิดจากการใช้ตัวเลขพิเศษ
ดังที่กล่าวไว้ข้างต้น นักออกแบบอาจใช้ <h4> เพื่อแท็กส่วนหัวที่สำคัญที่สุดบนเพจ เพียงเพราะขนาดตัวอักษรเริ่มต้นนั้นไม่ได้ใหญ่จนน่าสะพรึงกลัวเท่ากับ <h1> แต่จำไว้ว่า โครงสร้างก่อน ออกแบบทีหลัง เราสามารถใช้ CSS เพื่อจัดรูปแบบส่วนหัวตามขนาดข้อความที่เราต้องการได้เสมอ