หลังจากที่ผมได้พูดถึง “การใช้ article, section, nav, aside ใน HTML5” ไปแล้ว คราวนี้มาถึงคิวของการใช้ header กันบ้างครับ บางคนอาจมองว่าเรื่องนี้เป็นเรื่องง่ายๆ แต่ผมกลับมองว่าทุกวันนี้ ยังมีการใช้ header ที่ยังไม่ค่อยจะเหมาะสมอยู่เยอะเหมือนกัน บทความนี้ ผมจะอธิบายวิธีการใช้ header element ละ elements ที่เกี่ยวข้องอื่นๆ รวมไปถึงตัวอย่างการใช้งาน และเทคนิคต่างๆ ที่จะช่วยให้เราเขียนโค้ดได้อย่างถูกต้องและเหมาะสมมากขึ้นครับ
ใส่หัวข้อให้กับเนื้อหาด้วย h1, h2, h3, h4, h5, h6
h1 ถึง h6 elements จะใช้กับส่วนที่เป็นหัวข้อของเนื้อหาภายใน section นั้นๆ ครับ ซึ่งเราสามารถกำหนดความสำคัญให้กับหัวข้อของเราได้ โดย h1 จะเป็นหัวข้อที่มีความสำคัญมากที่สุด และ h6 จะเป็นหัวข้อที่มีความสำคัญน้อยที่สุดครับ
1 2 3 4 | <article> <h1>วิธีการใช้ h1, h2, h3, h4, h5, h6</h1> <p>h1 ถึง h6 elements จะใช้ mark up ส่วนที่เป็นหัวข้อของเนื้อหาภายใน section นั้นๆ ครับ...</p> </article> |
ตัวอย่างนี้ เป็นตัวอย่างง่ายๆ ของการใช้ <h1> เพื่อ mark up หัวข้อของบทความครับ จะเห็นว่า <article> ซึ่งเป็น Sectioning content จะสร้าง section ขึ้นมา โดย section นี้ จะมีหัวข้อเป็น “วิธีการใช้ h1, h2, h3, h4, h5, h6″ นั่นเองครับ
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <article> <h1>วิธีใช้ header และ footer</h1> <p>...</p> <section> <h1>วิธีการใช้ h1, h2, h3, h4, h5, h6</h1> <p>...</p> </section> <section> <h1>วิธีการใช้ hgroup</h1> <p>...</p> </section> <section> <h1>วิธีการใช้ header</h1> <p>...</p> </section> <section> <h1>วิธีการใช้ footer</h1> <p>...</p> </section> </article> |
ลองมาดูตัวอย่างการใส่หัวข้อแบบซับซ้อนขึ้นมาอีกนิดครับ จะได้ว่า “วิธีใช้ header และ footer” ที่ถูก mark up ด้วย <h1> จะเป็นหัวข้อของ section ที่ถูกสร้างขึ้นโดย <article> นอกจากนั้น section นี้ ยังถูกแบ่งออกเป็น 4 ส่วนย่อยๆ ด้วยกัน โดยใช้ <section> ซึ่งก็เป็น Sectioning content ที่จะสร้าง section ของมันเองขึ้นมา และในแต่ละ section เหล่านั้น ต่างก็มีหัวข้อซึ่งกำหนดไว้ด้วย <h1> เช่นเดียวกัน
รู้จักกับ Document outlines
เราสามารถดู document outlines ของหน้าเว็บได้ด้วย chrome extension ที่ชื่อ “HTML5 Outliner“
Document outlines ก็คือ เค้าโครงของหน้านั้นๆ นั่นเองครับ โดยจะแสดงส่วนที่เป็นหัวข้อ(heading) ของทุกๆ section ในหน้านั้นๆ หัวข้อของ section ที่อยู่นอกสุด(body) จะมีความสำคัญมากที่สุด แต่ถ้าหัวข้อนั้น อยู่ภายใน Sectioning content อีกที ความสำคัญก็จะลดลงไป เพื่อให้เห็นภาพ จากตัวอย่างล่าสุด Document outlines จะมีหน้าตาแบบนี้ครับ
1.วิธีใช้ header และ footer
1.วิธีการใช้ h1, h2, h3, h4, h5, h6
2.วิธีการใช้ hgroup
3.วิธีการใช้ header
4.วิธีการใช้ footer
จะเห็นได้ว่า Document outlines จะแสดง headings ทั้งหมดออกมาให้เราเห็น โดยใช้ย่อหน้าแสดงถึงความสำคัญของ headings เหล่านั้น ยิ่ง heading ถูกย่อหน้าเข้าไปมากเท่าไร heading นั้น ก็ยิ่งมีความสำคัญน้อยลงมากเท่านั้น ถ้าสังเกตดีๆ จะพบว่า Document outlines ก็เหมือนกับ “Table of contents” นั่นเอง ซึ่งจะบอกว่า หน้านี้ ประกอบไปด้วยหัวข้ออะไรบ้าง เพื่อให้ผู้อ่านได้เห็นภาพรวมของเนื้อหาทั้งหมด เอาล่ะครับ ลองไปดูตัวอย่างที่ซับซ้อนขึ้นไปอีกนิดกันเลยครับ
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <article> <h1>วิธีใช้ header และ footer</h1> <p>...</p> <h2>วิธีการใช้ h1, h2, h3, h4,h5, h6</h2> <p>...</p> <section> <h1>วิธีการใช้ hgroup</h1> <p>...</p> </section> <section> <h3>วิธีการใช้ header</h3> <p>...</p> </section> <section> <h2>การใช้ footer</h2> <p>...</p> </section> </article> <article> <h2>วิธีการใช้ sectioning content</h2> <p>...</p> </article> |
จากตัวอย่างนี้ จะได้ Document outlines ดังนี้ครับ
1.วิธีใช้ header และ footer
1.วิธีการใช้ h1, h2, h3, h4, h5, h6
2.วิธีการใช้ hgroup
3.วิธีการใช้ header
4.การใช้ footer
2.วิธีการใช้ sectioning content
หลายๆ คนอาจจะสงสัยว่า ทำไม Document outline ถึงออกมาหน้าตาแบบนี้ ผมมีคำอธิบายให้ครับ
- ที่ section นอกสุด (body) มี 2 section ด้วยกัน คือ <article> ที่ 1 และ <article> ที่ 2 ตามลำดับ
- “วิธีใช้ header และ footer” เป็น heading ของ section ที่สร้างโดย <article> แรก
- “วิธีการใช้ sectioning content” เป็น heading ของ section ที่สร้างโดย <article> ที่สอง
- จะได้ว่า heading ของทั้ง 2 sections นี้ มีความสำคัญ “เท่ากัน“(แม้ว่าจะใช้ heading ในระดับที่ต่างกัน) เนื่องจาก section ของทั้ง 2 heading นี้ อยู่ในระดับเดียวกัน(อยู่ระดับนอกสุด ซึ่งติดกับ body เหมือนกัน)
ต่อมาลองมาพิจารณาที่ <article> แรกกันบ้างครับ จะเห็นว่าภายในประกอบด้วย heading หลายแบบด้วยกัน แต่เมื่อดูจาก Document outlines ที่ออกมา ปรากฏว่า “วิธีใช้ header และ footer” เป็น heading ที่มีความสำคัญสูงสุด ส่วน heading อื่นๆ มีความสำคัญน้อยกว่า และอยู่ในระดับเดียวกันทั้งหมด ที่เป็นเช่นนี้เพราะว่า
- “วิธีใช้ header และ footer” เป็น heading ที่อยู่ภายใน section <article> และถูก mark up ด้วย <h1> ซึ่งมีความสำคัญสูงสุด จึงถือเป็น heading ที่มีความสำคัญสูงสุดภายใน section นี้
- “วิธีการใช้ h1, h2, h3, h4,h5, h6″ อยู่ในระดับเดียวกับ “วิธีใช้ header และ footer” ก็จริง(อยู่ระดับนอกสุด ติดกับ <article> โดยไม่มี sectioning content อื่นมากั้น) แต่ถูก mark up ด้วย <h2> จึงมีความสำคัญน้อยกว่า และถูกย่อหน้าเข้ามาใน Document outlines
- “วิธีการใช้ hgroup” อยู่คนละระดับกับ “วิธีใช้ header และ footer” เพราะอยู่ภายใน section ที่สร้างขึ้นมาโดย <section> อีกที ทำให้ไม่ว่า heading นี้ จะถูก mark up ด้วย heading(<h1> – <h6>) แบบไหนก็ตาม จะยังคงมีความสำคัญน้อยกว่า heading ที่อยู่ระดับใกล้ชิดกับ section หลัก(<article>) มากกว่าเสมอ ผลที่ได้คือ “วิธีการใช้ hgroup” จะถูกย่อหน้าเข้ามาอยู่ในระดับเดียวกับ “วิธีการใช้ h1, h2, h3, h4,h5, h6″ ใน Document outlines ครับ
- “วิธีการใช้ header” และ “การใช้ footer” ต่างก็อยู่ในระดับเดียวกับ “วิธีการใช้ hgroup” คืออยู่ภายใน section ที่สร้างขึ้นมาโดย <section> อีกที ถึงแม้ว่า heading 2 อันนี้ จะถูก mark up ด้วย <h3> และ <h2> ตามลำดับ แต่กลับถูกย่อหน้าเข้ามาอยู่ในระดับเดียวกันใน Document outlines ที่เป็นเช่นนี้เพราะว่าการกำหนดความสำคัญให้กับ headings นั้น จะมีผลก็ต่อเมื่อ headings เหล่านั้น อยู่ภายใน section เดียวกันเท่านั้น ดังนั้น หากภายใน section ใด มี heading เพียงอันเดียว ให้เราใช้ <h1> ไปได้เลยครับ(แต่ถ้าหากต้องการหวังผลทาง SEO หรือไม่อยากให้ Screen reader สับสน อาจใช้ <h2> แทน <h1> สำหรับ section ย่อย)
แล้ว <hgroup> มีไว้ทำไม?
<hgroup> มีไว้สำหรับ mark up กลุ่มของ <h1> – <h6>เข้าด้วยกันครับ มักจะใช้ในกรณีที่ ระดับความสำคัญของเนื้อหาภายใน heading มีไม่เท่ากัน บางคนอาจสงสัยว่าแล้วทำไมเราต้องใส่ <hgroup> ด้วย ไม่ใส่ได้มั้ย? วันนี้ผมมีคำตอบให้ครับ ลองไปดูตัวอย่างกันเลยครับ
1 2 3 4 5 6 7 8 | <body> <h1>Logo</h1> <h2>Slogan</h2> <article> <h1>Title</h1> <p>...</p> </article> </body> |
ตัวอย่างนี้ จะเห็นว่า heading ของเราจริงๆ แล้ว คือ “Logo Slogan” ครับ แต่เราต้องการให้ “Logo” มีความสำคัญมากกว่า “Slogan” เราจึงเลือกที่จะ mark up “Logo” ด้วย <h1> ส่วน “Slogan” เรา mark up ด้วย <h2> ทีนี้ เราลองมาดู Document outlines กันครับ ว่าหน้าตาจะเป็นอย่างไร
1.Logo
1.Slogan
2.Title
เห็นอะไรมั้ยครับ Slogan เข้ามาอยู่ใน Document outlines ด้วย อย่าลืมนะครับว่า Document outlines เปรียบเสมือน “Table of contents” ซึ่ง “Slogan” ไม่สมควรอยู่ในนี้แน่นอน หรือถ้าจะอยู่ ก็ไม่ควรอยู่ในระดับเดียวกับ “Title” เพราะมันไม่สมเหตุสมผลเอาซะเลย
1 2 3 4 5 6 7 8 9 10 | <body> <hgroup> <h1>Logo</h1> <h2>Slogan</h2> </hgroup> <article> <h1>Title</h1> <p>...</p> </article> </body> |
ตัวอย่างนี้ ผมลอง mark up “Logo” กับ “Slogan” ด้วย <hgroup> ครับ เราลองมาดู Document outlines กันดีกว่า ว่าจะหน้าตาเป็นอย่างไร
1.Logo
2.Title
นี่แหละครับ สิ่งที่ควรจะเป็น จะเห็นว่า “Slogan” ได้ถูกตัดออกไปจาก Document outlines แล้ว ที่เป็นเช่นนี้เพราะว่าการใส่ <hgroup> เหมือนกับเป็นการบอกว่า กลุ่มของ <h1> – <h6> เหล่านี้เนี่ย จริงๆ แล้ว มันคือเรื่องเดียวกันนะ เหลือไว้แต่อันที่มีความสำคัญที่สุด อันเดียวก็พอ และนี่เองครับ เป็นที่มาว่า html5 ทำไมต้องมี element นี้ และทำไมเราต้อง mark up กลุ่มของ <h1> – <h6> ด้วย <hgroup> ซึ่งเป็นเรื่องของ Document outlines ล้วนๆ
เมื่อไรควรจะใช้ header element
โดยทั่วไปแล้ว หัวข้อของเนื้อหาอะไรสักอย่าง มักจะเป็นข้อความสั้นๆ ที่อ่านแล้วเข้าใจว่า เนื้อหาต่อไปนี้ จะพูดเกี่ยวกับอะไร ซึ่งถ้าหัวข้อของเราเป็นแบบนี้ ให้เราใช้ <h1> – <h6> หรือ <hgroup> ตามความเหมาะสมได้เลยครับ แต่ในบางครั้ง หัวข้ออาจไม่ได้เป็นข้อความเสมอไป เช่น เป็นรูป หรือกลุ่มของข้อความต่างๆ มารวมกัน ถ้าเป็นแบบนี้ เราจะ mark up ด้วย <header> ครับ
header element คือส่วนที่เป็นการแนะนำว่าเนื้อหานี้เกี่ยวกับอะไร รวมไปถึงส่วนที่ช่วยนำทางเรา ในการอ่านเนื้อหานั้นๆ ด้วยครับ ซึ่งหมายความว่า header element นั้น ไม่จำเป็นจะต้องอยู่บนสุด หรืออยู่ล่างสุดแต่อย่างใด ขอเพียงแค่ส่วนนั้น มีคุณสมบัติตรงตามที่ได้กล่าวไว้ เราก็สามารถ mark up ส่วนนั้นด้วย <header> ได้เลยครับ ว่าแล้วก็ลองมาดูตัวอย่างการใช้ header element กันเลยครับ
1 2 3 4 | <article> <h1>วิธีใช้ header และ footer</h1> <p>...</p> </article> |
ตัวอย่างนี้ หัวข้อของเราคือข้อความที่ว่า “วิธีใช้ header และ footer” ซึ่งเป็นชื่อของบทความนั่นเอง ใช้แค่ <h1> mark up ก็พอแล้วครับ
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <article> <header> <h1>วิธีใช้ header และ footer</h1> <p>By Suranart Niamcome</p> <p><time datetime="2013-03-24">24 มีนาคม 2556</time></p> <nav> <ul> <li><a href="#">หน้าก่อนหน้า</li> <li><a href="#">หน้าถัดไป</li> </ul> </nav> </header> <p>...</p> </article> |
ส่วนตัวอย่างนี้ จะเห็นว่าผมได้เพิ่มส่วนของผู้แต่งบทความ เวลาที่แต่งบทความ รวมไปถึง navigation เข้าไปด้วย ซึ่งผมมองว่าส่วนนี้เป็นส่วนที่แนะนำให้ผู้อ่านรู้จักกับบทความนี้ได้ดียิ่งขึ้น เช่นเดียวกับส่วนชื่อของบทความ ผมจึงเลือกที่จะ mark up เนื้อหาทั้งหมดนี้ด้วย <header>
เรื่องที่คนส่วนใหญ่มักเข้าใจผิดเกี่ยวกับ header element ก็คือ header element นั้น ไม่ได้เป็น Sectioning content ซึ่งก็หมายความว่า มันไม่ได้สร้าง section ขึ้นมาใหม่เลย หลายๆ คนที่กำหนดสไตล์ชีทให้ <header> แสดงผลเป็น block จนชิน แล้วคิดว่ามันเป็น section ซึ่งจริงๆ แล้วมันไม่ใช่ และความเข้าใจผิดนี้เอง ได้ส่งผลกระทบต่อ Document outlines เพื่อให้เห็นภาพ ลองไปดูตัวอย่างกันเลยครับ
1 2 3 4 5 6 7 8 9 10 11 | <body> <header> <h1>Heading A</h1> <p>เนื้อหาส่วนนี้เป็นของ Heading A</p> <h2>Heading B</h2> <p>เนื้อหาส่วนนี้เป็นของ Heading B</p> <h2>Heading C</h2> <p>เนื้อหาส่วนนี้เป็นของ Heading C</p> </header> <p>คำถาม: เนื้อหาส่วนนี้เป็นของ Heading ไหน?</p> </body> |
จากตัวอย่างนี้ จะได้ Document outlines ดังนี้ครับ
1.Heading A
1.Heading B
2.Heading C
คำถามก็คือเนื้อหาที่ว่า “คำถาม: เนื้อหาส่วนนี้เป็นของ Heading ไหน?” นั้นเป็นของ heading อันไหน ก่อนผมจะเฉลย ขอย้ำอีกทีครับว่า “header element ไม่ได้เป็น Sectioning content” คำตอบก็คือ เนื้อหาส่วนนี้เป็นของ “Heading C” ครับ ถ้าคุณตอบถูก แสดงว่าคุณค่อนข้างเข้าใจเกี่ยวกับเรื่อง sectioning content รวมไปถึง Document outlines แล้ว แต่ถ้าใครตอบไม่ถูก ผมจะอธิบายให้ครับว่าทำไมเป็นแบบนี้
วิธีดูว่าเนื้อหาว่าส่วนนี้เป็นของ heading ไหน มีวิธีดูง่ายๆ คือ ให้เรามองเป็นทีละ section ไปครับ เนื้อหาไม่ว่าจุดไหนก็ตาม จะเป็นเนื้อหาที่ขยายความให้กับ heading ที่อยู่ด้านบนที่ใกล้กับเนื้อหานั้นมากที่สุดเสมอครับ จากตัวอย่างนี้ เราไม่พบ sectioning content ใดๆ เลย จะได้ว่าทุกๆ เนื้อหาอยู่ภายใต้ section เดียวกัน ซึ่งก็คือ body นั่นเองครับ ส่วน header element นั้นไม่ใช่ทั้ง sectioning content และ heading elements(h1 – h6) ให้เราทำเป็นมองไม่เห็นมันไปเลย จะได้แบบนี้ครับ
1 2 3 4 5 6 7 8 9 | <body> <h1>Heading A</h1> <p>เนื้อหาส่วนนี้เป็นของ Heading A</p> <h2>Heading B</h2> <p>เนื้อหาส่วนนี้เป็นของ Heading B</p> <h2>Heading C</h2> <p>เนื้อหาส่วนนี้เป็นของ Heading C</p> <p>คำถาม: เนื้อหาส่วนนี้เป็นของ Heading ไหน?</p> </body> |
ชัดเจนแล้วนะครับ ว่า “คำถาม: เนื้อหาส่วนนี้เป็นของ Heading ไหน?” เป็นเนื้อหาของ “Heading C” เรื่องนี้อาจดูเป็นเรื่องเล็กๆ แต่ผมกลับมองว่า มันเป็นเรื่องที่เราไม่ควรมองข้ามเลยล่ะครับ
บทสรุป
วิธีการเลือกใช้ html elements สำหรับหัวข้อในแบบต่างๆ สามารถสรุปได้สั้นๆ ดังนี้ครับ
- ถ้าหัวข้อเป็นแค่ข้อความ ที่ไม่ยาวจนเกินไปนัก ให้ใช้แค่ <h1> – <h6> ก็พอแล้ว
- หากหัวข้อของเราประกอบไปด้วย <h1> – <h6> มากกว่า 1 element ขึ้นไป ให้เราครอบด้วย <hgroup>
- หากหัวข้อของเรา ไม่ได้มีเพียงแค่ <h1> – <h6> หรือ <hgroup> ให้เราครอบด้วย <header>
Update – <hgroup> ถูกตัดออกจาก HTML5 Specification แล้ว !
เนื่องจาก hgroup element ถูกสร้างมาเพื่อตัด subheading ออกจาก document outlines โดยเฉพาะ ซึ่งเท่ากับว่าตัวมันเองนั้นไม่ได้มีความหมาย(semantic) อะไรเลย มันจึงถูกเอาออกจาก html5 specification จากนี้ไป หากเราจะใช้ subheading ให้เราเลิกใช้ h1 – h6 แล้วหันมาใช้ html elements อื่นๆ ในการ markup subheading แทน สมมติเดิมเราเขียนโค้ดแบบนี้
1 2 3 4 | <hgroup> <h1>Logo</h1> <h2>Slogan</h2> </hgroup> |
ให้เราเปลี่ยนมาใช้ html elements อื่นๆ ในการ markup subheading แทน
1 2 | <h1>Logo</h1> <span>Slogan</span> |