การพบกันระหว่างแท็กแบบ Block และ Inline

อุปสรรคแรกๆของการเขียนหน้าเว็บให้ถูกต้องตามหลัก Web Standards คือการไม่รู้ความแตกต่างของชนิดของแท็ก HTML ที่ใช้เขียนประกอบเป็นหน้าเว็บขึ้นมา ซึ่งโดยทั่วไปแท็กที่เราใช้เขียนประกอบขึ้นมาเป็นหน้าเว็บจะมีอยู่ด้วยกัน 2 แบบด้วยกันคือ แท็กแบบ Block และ Inline

ตัวอย่างแท็กแบบ Block คือ <h1> – <h6>, <p>, <ul>, <ol>, <dl>, <table>, <form> และ <div>
ตัวอย่างแท็กแบบ Inline คือ <strong>, <em>, <img>, <a>, <sub>, <sup>, <cite> และ <span>

การที่เรารู้และเข้าใจว่าแท็กที่เราใช้เป็นแท็กแบบไหนจะมีผลอย่างมากในการเลือกใช้คำสั่ง CSS ให้เหมาะสม หลายๆคนคงจะเคยเจอปัญหาว่าเขียนคำสั่ง CSS เข้าไปแล้วหน้าเว็บไม่แสดงผลอย่างที่ต้องการ สาเหตุใหญ่ก็คือไม่เข้าใจความแตกต่างระหว่างแท็กแบบ Block และ Inline ที่ใช้นั่นเอง การที่เราจะเข้าใจความแตกต่างนั้นได้เราต้องรู้ก่อนว่าแท็กแบบ Block และ Inline ถูกออกแบบมาเพื่ออะไรซะก่อน

แท็กแบบ Block ออกแบบมาเพื่อสร้างโครงสร้างหลักของหน้า ส่วนแท็กแบบ Inline ออกแบบมาเพื่อเพิ่มรายละเอียดภายในโครงสร้างนั้นดังแสดงในรูป

เมื่อแท็กแบบ Block มีไว้เพื่อเป็นโครงสร้างและแท็กแบบ Inline มีไว้เสริมรายละเอียด หลักในการแสดงผลบนหน้าเว็บจึงมีความแตกต่างกันดังนี้คือ

แท็กแบบ Block จะมีความกว้างเต็มบรรทัดเต็มพื้นที่ แต่แท็กแบบ Inline จะมีความกว้างเท่ากับข้อความที่อยู่ในนั้น

แท็กแบบ Block จะขึ้นบรรทัดใหม่เสมอ แต่แท็กแบบ Inline จะเกาะกลุ่มเรียงกันอยู่บนบรรทัดเดียวกัน

เนื่องจากแท็กแบบ Inline มีลักษณะที่แตกต่างจากแท็กแบบ Block ดังที่กล่าวมาข้างต้น ผลที่มีต่อการใช้คำสั่ง CSS ที่เราจะต้องรู้คือ การสั่ง margin-top, margin-bottom, padding-top, padding-bottom, width และ height กับแท็กแบบ inline จะไม่มีผลใดๆทั้งสิ้น เพราะฉะนั้นหลายๆท่านที่เคยใช้คำสั่งที่ว่านี้แล้วไม่เห็นผลใดๆเลย นั่นเป็นเพราะว่าคุณกำลังสั่งกับแท็กแบบ Inline อยู่นั่นแหล่ะ

ต้องสารภาพเลยว่าตอนแรกๆผมก็จำไม่ได้หรอกครับว่าแท็กไหนเป็นแบบ Block แท็กไหนเป็นแบบ Inline แต่พอเราใช้ไปเรื่อยๆเดี๋ยวเราก็จะจำได้เองครับว่าแท็กไหนเป็นแบบอะไร สำหรับเพื่อนๆคนไหนที่ไม่แน่ใจว่าแท็กตัวไหนเป็นแบบ Block หรือ Inline ให้ทดลองเขียนแท็กตัวที่ว่าติดกัน 2 ชุดดูครับ เช่น

<address>ที่อยู่ผมเอง</address><address>เบอร์โทรศัพท์ผมเอง</address>
หรือ
<strong>ข้อความนี้สำคัญนะ</strong><strong>ข้อความนี้ก็สำคัญเหมือนกันนะ</strong>

ถ้าข้อความในแท็กไหนมีการขึ้นบรรทัดใหม่แท็กนั้นเป็นแบบ Block และข้อความในแท็กไหนที่ยังเรียงติดกันไม่ยอมขึ้นบรรทัดใหม่แท็กนั้นเป็นแบบ Inline จากในตัวอย่างข้างต้น เราจะเห็นได้ว่าแท็ก <address> เป็นแท็กแบบ Block เพราะข้อความขึ้นบรรทัดใหม่ ส่วนแท็ก <strong> เป็นแบบ Inline เพราะข้อความยังเรียงกันเป็นบรรทัดเดียวอยู่

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

แทนที่เราจะเขียนโค้ต HTML แบบนี้
<div>
<ul>
<li>ข้อความที่หนึ่ง</li>
<li>ข้อความที่สอง</li>
<li>ข้อความที่สาม</li>
</ul>
</div>

แต่เรารู้ว่า <ul> เป็นแท็กแบบ Block อยู่แล้ว ก็ไม่จำเป็นต้องเขียน <div> ซึ่งเป็นแท็กแบบ Block เหมือนกันให้ซ้ำซ้อน แล้วตัดให้เหลือเพียง…
<ul>
<li>ข้อความที่หนึ่ง</li>
<li>ข้อความที่สอง</li>
<li>ข้อความที่สาม</li>
</ul>

หรือแทนที่เราจะเขียนคำสั่ง CSS แบบนี้
ul {
display: block;
width: 400px;
padding: 10px;
}

แต่ในเมื่อ <ul> เป็นแท็กแบบ Block การเขียนคำสั่ง display: block จึงไม่มีความจำเป็นใดๆทั้งสิ้น จึงสามารถตัดคำสั่งดังกล่าวให้เหลือเพียง
ul {
width: 400px;
padding: 10px;
}

จะเห็นได้ว่าแค่เรารู้ว่าแท็กที่เราใช้เป็นแท็กแบบไหน เราก็สามารถเขียนโค้ต HTML และเขียนคำสั่ง CSS ได้ดีและเข้าใจมากยิ่งขึ้น ซึ่งจะมีผลทำให้โค๊ตของเรามีขนาดเล็กลง, โหลดได้เร็วขึ้น, มีประสิทธิภาพมากขึ้น และที่สำคัญคือถูกต้องตามหลัก Web Standards มากยิ่งขึ้นด้วยครับ