HTML การจัดวาง หัวเรื่อง และ หัวเรื่องย่อย

ในหัวข้อนี้เราจะมาดูวิธีการ ในการจัดเรียง หัวเรื่องย่อยใน html กันว่าต้องทำยังไงถึงจะทำให้ html ของเรานั้นดูมีความหมายเหมาะสม กับสื่อบนเว็บของเรามากขึ้น

เข้าใจตรงกันก่อนนะว่าหัวเรื่องย่อยในที่นี้ไม่ใช่ h1 ที่เป็นหัวเรื่องหลักบนหน้าเว็บนะครับ นะครับ แต่จะเป็นเนื้อหาย่อยๆที่แยกออกมา โดยส่วนมาก มากๆๆๆๆ จะมาในรูปแบบ subsection card ประมาณนี้ครับนี้ครับ

ภาพปลากรอบเนื้อหา

Image for post
Image for post

ตัวเลือก 1 : เรียงขนาดตาม Tag

ถ้าวิเคราะห์ตามการมองเห็นแล้ว ขนาดอักษรของ หัวเรื่องย่อย จะเทียบได้กับ h3 และ
หัวเรื่อง(ในหัวเรื่องย่อย) จะเทียบได้เท่ากับ h2 ดังนั้นจะได้การเขียน HTML ออกมาดังนี้

<h3 class="subhead">ัหวเรื่องย่อย</h3>
<h2 class="head">หัวเรื่อง(ในหัวเรื่องย่อย)</h2>

ทุกอย่างก็ดูโอเคหละขนาดอักษรตรงตาม tag แล้วเพียงแต่ลองมาคิดดูดีๆตามหลักธรรมชาติของ HTML การเรียง หัวเรื่องหลักไปยังหัวเรื่องย่อยนั้น เรียงจาก h1 h2 … h6 แต่ในกรนี นี้เราอ้างอิง tag ตามขนาดหัวอักษรที่เราเห็น ทำให้เราเรียงจาก h3 ต่อด้วย h2 ซึ่งทำให้ตามการตีความหมายตรงนี้จริงๆแล้วมันจะเหมือนกับว่า h3 เป็นหัวเรื่องย่อย และจบไปแล้ว ส่วน h2 เป็นหัวเรื่องอื่นๆ อันไม่ที่ไม่เกี่ยวกับ h3 นั้นเอง แต่อย่างไรก็ตามวิธีนี้ก็ไม่ได้ผิด แต่ถ้าอยากให้ HTML ดูเหมาะสมอีกนิดนึงลองใช้ ตัวเลือก 2

ตัวเลือก 2 : เรียงตามจำนวน น้อยไปมาก

แน่นอนว่าหัวข้อย่อยยังไงก็ต้องไม่ใช่ h1 อยู่แล้วอาจเป็น h2 h3 h4 โดยวิธีนี้จะเรียงจาก
hน้อย ไป hมาก โดยสมมุติว่าหัวข่อย่อยเราเป็น h2 จะเขียน HTML ได้ดังนี้

<h2 class="subhead" >หัวเรื่องย่อย</h2>
<h3 class="head">หัวเรื่อง(ในหัวเรื่องย่อย)</h3>

เพียงเท่านี้การอ่านตามธรรมชาติ จะมองว่า h2 เป็นหัวเรื่องย่อย ที่มี h3 เป็นหัวเรื่อง(ในหัวเรื่องย่อย) ในกรณีที่ หัวเรื่อง(ในหัวเรื่องย่อย) มีแค่อันเดียวเราก็คงไม่อยากวุ่นวายใช้ h สองอันหรอกมั้ง แต่ตามเคยวิธีนี้ก็ใช่ได้

ตัวเลือก 3: หนึ่ง หัวเรื่อง หนึ่ง div

กรณีนี่เราจะใช้ div กับหัวเรื่องย่อย และใช้ h3 กับหัวเรื่อง )อย่าลืมนะครับ หัวเรื่องที่กล่าวๆมาคือหัวเรื่องในหัวเรื่องย่อย )

<hgroup>
<h3 class="head">หัวเรื่อง(ในหัวเรื่องย่อย)</h3>
<div class="sub-head">หัวเรื่องย่อย</div>
</hgroup>

แต่ครั้งนี้ เราเน้นให้ใจความสำคัญกับหัวเรื่อง(ในหัวเรื่องย่อย) มากกว่า หัวเรื่องย่อย ทำให้เราเอา “หัวเรื่องย่อย” มาไว้ข้างล่าง “หัวเรื่อง(ในหัวเรื่องย่อย)” เพียงแต่ว่าถ้าทำแบบนั้นมันจะเป็นการจัดเรียงหัวเรื่องทีไม่ตรงระบบนัก เราจึงต้องมี tag hgroup มาครอบทั้งสองไว้ซึ่งเอาไว้บอกว่า หัวเรื่องที่อยุ่ใน hgroup นี้มีความสำพันธ์กันในเรื่องเดียวกัน แต่ในเมื่อเราเขียน h3 ขึ้นมาอันแรกก่อนเขียน div(หัวข้อย่อย) นั้นทำให้ตอนแสดงผลจริงๆ “หัวเรื่อง(ในหัวเรื่องย่อย)” จะออกมาก่อน” หัวเรื่องย่อย” ซึ่งตรงนี้แก้ไขได้ด้วยการแก้ css เพื่อให้ div แสดงผลก่อน h3

hgroup {   
display: flex;
flex-direction: column;
}

sub-head {
order: -1;
}

สำหรับวิธีนี้ก็ดูเหมือนเยอะแยะแต่ก็ไม่ได้แย่อะไรดูเป็นระบบดีแต่ก็นะ ให้ความสำคัญกับ หัวเรื่องจริงๆไปเลย ไม่ได้ให้ความสำคัญกับหัวข้อย่อยมากนัก

ตัวเลือก 4 : ใส่ทุกอย่างไว้ใน หัวเรื่องเดียว

ง่ายๆเลยครับใส่ไปที่ tag h2 ทีเดียวเลย

<h2>
<strong>หัวเรื่องย่อย<strong>
หัวเรื่อง(ในหัวเรื่องย่อย)
</h2>

ในวิธีนี้เราจะเอา tag strong ที่แสดงถึงความคัญเข้ามาอีกทีโดยที่ใน tag strong ก็จะใส่หัวเรื่องย่อยไว้ข้างในส่วนใน h2 ก็ตามด้วย หัวเรื่อง(ในหัวเรื่องย่อย) ตามปกติ แต่ค่าปกติของ strong เป็นการทำตัวอักษรหนาดังนั้นเราจะต้องไปแก้ขนาดเองใน css ประมาณนี้

h2 strong {
display: block;
font-size: 75%;
opacity: 0.75;
}
11Shares

Write a comment