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

รูปแบบการเขียน comments ใน CSS

ก่อนอื่นเราต้องมาดูก่อนว่าการเขียน comments ใน CSS มีรูปแบบยังไงกันก่อนครับ การเขียน comments ใน CSS มีรูปแบบดังนี้คือ จะเปิด comments ด้วย /* และปิด comments ด้วย */ ข้อความหรือคำสั่งใดๆที่อยู่ภายใน /* และ */ นี้จะถูกมองข้ามจากเหล่าเว็บบราวเซอร์ทั้งหมด เช่น

/* This is a comment */

หรือ

/*
h1 {
font-size: 36px;
font-weight: normal;
color: yellow;
}
*/

คราวนี้เรามาดูกันว่าพวกเหล่ามืออาชีพเขาพลิกแพลงการเขียน comments ให้มีประโยชน์มากกว่าเดิมกันยังไงบ้าง

1. ใช้บอกข้อมูลเบื้องต้นเกี่ยวกับไฟล์ CSS

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

ตัวอย่าง

/* -----------------------------
Style Sheet for margin0auto website (http://margin0auto.wordpress.com)
File Name: mainstylesheet.css
Author: Mr. margin0auto
Date: 30/11/2011
License: Copyright 2011, margin0auto,  All Rights Reserved.
----------------------------- */

2. ใช้บันทึกข้อมูลอ้างอิงเกี่ยวสไตล์ที่ใช้สำหรับเว็บไซต์

ในแต่ละเว็บไซต์จะมีสไตล์การใช้สีและตัวอักษรที่แตกต่างกันออกไป ทั้งนี้เพื่อให้สะดวกในการทำงานเป็นทีมและมีการใช้สไลต์ที่สม่ำเสมอกันไปตลอดไม่มีผิดเพิ้ยน เหล่ามืออาชีพทั้งหลายจึงชอบใช้ comments ในการระบุสไตล์หลักที่ใช้ในงานเว็บไซต์นั้นๆเพื่อให้ทีมงานใช้เป็นข้อมูลอ้างอิงในพัฒนาต่อไป โดยเฉพาะค่ารหัสสีที่ใช้ซึ่งทีมงานสามารถก็อปรหัสไปใช้ได้เลยโดยไม่ต้องเปิดโปรแกรม Photoshop เพื่อจิ้มสีให้ยุ่งยาก

ตัวอย่าง

/* -----------------------------
Main Color & Font Style
พาดหัวหลัก: สีแดงเลือดหมู #710202
พาดหัวรอง: สีแดงอมชมพู #f6bcbc
ข้อความทั่วไป: สีเทา #6a6a6a
ข้อความเน้น: สีเทาเข้ม #434343
ตัวอักษร: Tahoma, Arial, Helvetica, sans-serif
----------------------------- */

3. ใช้บันทึกประวัติการปรับแต่งโค๊ต

เป็นความจริงที่ว่างานพัฒนาเว็บไซต์เป็นงานที่ไม่มีวันเสร็จ งานเขียน CSS ก็เช่นเดียวกัน เพราะจำเป็นต้องมีการปรับแต่งและแก้บั้กต่างๆไปเรื่อยๆ พวกเหล่ามืออาชีพทั้งหลายจึงประยุกต์ใช้ comments ในการบันทึกประวัติการปรับแต่งโค๊ต โดยให้เราระบุวันที่ทำการปรับแต่ง, ได้ปรับแต่งอะไรไปบ้าง และที่สำคัญคือปรับแต่งโดยใครในทีมงาน ซึ่งมีประโยชน์มากๆโดยเฉพาะเมื่อมีทีมงานหลายคนทำงานปรับแต่งร่วมกัน หรือเมื่อต้องส่งงานให้ทีมอื่นไปดูแลต่อ

ตัวอย่าง

/* -----------------------------
Update History
08/12/2011
- ปรับเปลี่ยน font-size ของ h1#maincontent เป็น 34px - Mr. margin0auto
- ลบค่า overflow: hidden ออกจาก #mainpic - Mr. margin0auto

05/12/2011
- ปรับเปลี่ยนค่า color ของลิ้งก์เมนูหลัก #mainmenu เป็น #9901CC ตามที่ลูกค้าแจ้งมา - Mr. textaligncenter
----------------------------- */

4. ใช้ช่วยระบุตำแหน่งที่ปรับแต่งโค้ต

เป็นปกติที่ว่าเมื่อต้องมีการทำงานเป็นทีมการช่วยเหลือให้ปรับแก้โค๊ตต้องเกิดขึ้น แต่การวานบอกทีมงานไปว่าให้ไปแก้คำสั่งที่บรรทัดโน้นนี้ก็ลำบากเพราะบรรทัดจะเปลี่ยนไปทุกครั้งที่มีการเพิ่มคำสั่งใหม่เข้าไปหรือลบคำสั่งบางตัวออกไป เพราะฉะนั้นทางออกที่ดีที่สุดคือใช้ comment ในการช่วยระบุตำแหน่งที่ต้องการแก้ไข โดยให้เขียน commentsไว้ที่บรรทัดที่ต้องการปรับแต่ง แล้วบอกรหัสสั้นๆที่เราเขียนไว้กับทีมงานไป เช่น คุณใหม่ช่วยเข้าไปดูคำสั่งที่ =help03 ให้หน่อยซิ ตำแหน่งรูปที่วางมันแปลกๆนะ คราวนี้คุณใหม่ก็แค่กด Ctrl+F แล้วค้นหาคำตามรหัสที่บอกซึ่งก็คือ =help03 ก็สามารถไปถึงจุดที่ต้องการแก้ไขได้แล้ว สะดวกมากๆเลยครับ

ตัวอย่าง

#header {
position: relative;
width: 980px;
height: 250px;
background: url(../images_layout/header_bg.gif) no-repeat 0 136px; /* =help03 */
}

5. ใช้ช่วยจัดกลุ่มของชุดคำสั่ง CSS

เมื่อคุณเขียนโค๊ต CSS สำหรับหน้าเว็บที่มีการจัดหน้าที่ซับซ้อนมากขึ้น จำนวนโค๊ตที่คุณต้องเขียนก็จะมีจำนวนมากขึ้นเป็นเงานตามตัว การจัดระเบียบโค๊ตจะเป็นเรื่องที่มองข้ามไปไม่ได้เลย ซึ่งในส่วนนี้เราก็สามารถนำ comments มาประยุกต์ใช้ในการจัดระเบียบโค๊ตให้เป็นสัดส่วนเพื่อให้ง่ายต่อการดูแลในภายหลัง เช่นจัดให้โค๊ตในส่วนที่เขียนคุมสไตล์ในส่วนของ header ไว้รวมกันแล้วเขียน comments ระบุไว้ว่าเป็นส่วนของ header ในส่วนบนสุดของชุดนี้ทั้งหมด โดยเราอาจจะเพิ่มรหัสที่รู้กันในทีมงานอย่าง =section เข้าไปเพื่อช่วยให้ง่ายต่อการค้นหาภายหลังได้ด้วยเช่นกัน

ตัวอย่าง

/* ------------- =section header ------------- */
#header {
position: relative;
width: 980px;
height: 250px;
background: url(../images_layout/header_bg.gif) no-repeat 0 136px;
}
.
.
.
.
.

/* ------------- =section content ------------- */
#content {
width: 978px;
margin: -50px 0 0 0;
padding: 10px 0 0;
border-right: 1px solid #E6E6E6;
border-left: 1px solid #E6E6E6;
background: #FFF;
}
.
.
.
.
.

คราวนี้ถ้าทีมงานต้องการไปในส่วนต่างๆที่เขียนสไตล์ไว้ของแต่ละ section ก็เพียงแค่กด Ctrl+F และค้นหาคำว่า =section เท่านี้ก็สามารถไปถึงแต่ละ section ได้อย่างรวดเร็ว เห็นมั้ยครับแค่ลำพัง comments ก็สามารถนำมาประยุกต์ใช้ให้เป็นประโยชน์ได้มากมายหลายทาง ยังไงอย่าลืมนำไปประยุกต์ใช้บ้างนะครับ

แถมให้นิดนึง จริงๆแล้วเราก็สามารถประยุกต์ใช้ comments ในไฟล์ HTML ได้เช่นเดียวกับในไฟล์ CSS ครับ  แต่โดยส่วนตัวผมจะใช้แท็ก comments กับการระบุแท็กปิดของแท็ก <div> เป็นหลักครับ เพราะเมื่อเราเขียนหน้าเว็บที่มีความสลับซับซ้อนมากขึ้น คือมีแท็ก <div> ซ้อนแท็ก <div> เข้าไปหลายชั้นมาก จนบางครั้งจะงงว่าเจ้าตัวแท็กปิดที่เห็นเป็นของแท็กเปิด <div> ตัวไหนกันแน่ เพื่อให้เห็นภาพเรามาดูตัวอย่างกันครับ

<div id="wrapper">
<div id="content">
<div id="main_content">
.
.
.
</div>
<div id="sidebar">
.
.
.
</div>
</div>
</div>

ไม่มีอะไรผิดพลาดในการเขียนโค๊ตโครงสร้างหน้า HTML แบบนี้ แต่อาจจะทำให้การดูแลภายหลักยากลำบากมากขึ้น เพราะเกือบจะดูไม่ออกว่าเจ้าแท็กปิด </div> 3 ตัวหลังเป็นของ <div> ไอดีอะไรกันแน่ คราวนี้เรามาลองประยุกต์ใช้แท็ก comments ในการระบุแท็กปิดดูกัน

<div id="wrapper">
<div id="content">
<div id="main_content">
.
.
.
</div><!-- end div id main_content -->
<div id="sidebar">
.
.
.
</div><!-- end div id sidebar -->
</div><!-- end div id content -->
</div><!-- end div id wrapper -->

จะเห็นได้ว่าแค่การประยุกต์ใช้แท็ก comments ในการระบุแท็กปิดของแท็ก <div> แต่ละไอดีนั้นจะช่วยให้การดูแลโค๊ตหลังจากนี้ก็จะเป็นเรื่องง่ายขึ้นมากๆ รับรองว่าโปรแกรมเมอร์ที่รับงานต่อจากคุณจะรักและชื่นชมในความละเอียดรอบครอบของคุณอย่างแน่นอนครับ แล้วพบกันใหม่ในตอนต่อไปครับ

ปัญหาอย่างหนึ่งที่มือใหม่หัดเขียนโค๊ตหน้าเว็บต้องเจอกันเป็นประจำก็คือ ไม่รู้ว่าหน้าเว็บที่เราเขียนนั้นมีความถูกต้องมากน้อยแค่ไหน และมีส่วนไหนที่จะต้องได้รับการปรับปรุง จากประสบการณ์ผมพบว่าแต่ละคนจะมีรูปแบบการเขียนที่ผิดบ่อยๆไม่เหมือนกัน เช่น บางคนอาจจะชอบเขียนสะกดผิด, บางคนชอบลืมเขียนแท็กปิด หรือบางคนมักจะลืมใส่ค่า attribute สำคัญของแท็กอย่างแท็ก <img> หรือ <a> ซึ่งตัวผมเองก็ประสบกับปัญหาต่างๆอย่างนี้เหมือนกัน แล้ววันหนึ่งผมก็พบว่าเครื่องมือที่จะช่วยดัดนิสัยการเชียนโค๊ตแบบผิดๆของเราได้ดีที่สุดคือ การเอาหน้าเว็บที่เราเขียนไปตรวจสอบความถูกต้องบนเว็บของ W3C* นั่นเอง

*W3C คือคณะกรรมการกลางที่ทำหน้าที่เป็นผู้พิจารณาและกำหนดมาตราฐานการเขียนหน้าเว็บ ย่อมาจาก World Wide Web Consortium

บนเว็บไซต์ของ W3C ที่หน้าให้บริการตรวจสอบความถูกต้องของโค๊ตหน้าเว็บที่เราเขียน โดยหลักๆเราจะเข้าไปใช้บริการใน 2 หน้าสำคัญนี้กันคือ โดยหน้าแรกคือหน้า Markup Validation Service สำหรับตรวจสอบโค๊ต html หรือ xhtml ที่เราเขียน ส่วนหน้าที่สองคือหน้า CSS Validation Service สำหรับตรวจสอบโค๊ต CSS ที่เราเขียน โดยเราสามารถเข้าไปบริการได้ฟรีตามที่อยู่ลิ้งก์ดังต่อไปนี้

• หน้า Markup Validation Service
  (http://validator.w3.org/)

• หน้า CSS Validation Service
  (http://jigsaw.w3.org/css-validator/)

วิธีการใช้บริการบนทั้งสองหน้าเว็บนี้ก็สามารถทำได้ง่ายๆ เพียงแค่คุณเลือกวิธีการตรวจสอบที่คุณสะดวก โดยคุณสามารถเลือกวิธีการตรวจสอบได้ 3 วิธีดังนี้คือ

1. การตรวจสอบแบบ Validate by URI
   วิธีนี้เป็นการตรวจสอบโดยใส่เป็นที่อยู่ URL ของหน้าเว็บที่คุณต้องการตรวจสอบ ใช้ในกรณีที่คุณอัพโหลดหน้าเว็บขึ้นไปไว้ที่เซิร์ฟเวอร์ของคุณเรียบร้อยแล้ว
2. การตรวจสอบแบบ Validate by File Upload
   วิธีนี้เป็นการตรวจสอบโดยให้คุณอัพโหลดไฟล์หน้าเว็บที่คุณเขียนขึ้นไปเพื่อตรวจสอบโดยตรง ใช้ในกรณีที่หน้าเว็บยังเก็บอยู่ในเครื่องคอมพิวเตอร์ที่คุณใช้งาน
3. การตรวจสอบแบบ Vaildate by Direct Input
   วิธีนี้เป็นการตรวจสอบโดยการให้คุณก็อปปี้โค๊ตหน้าเว็บที่คุณกำลังเขียนอยู่ขึ้นไปตรวจสอบโดยตรง ใช้ในกรณีที่หน้าเว็บของคุณกำลังอยู่ในขั้นตอนการพัฒนา

เมื่อคุณเลือกวิธีการตรวจสอบที่คุณสะดวกที่สุดและใส่ข้อมูลที่หน้าเว็บต้องได้รับเรียบร้อยแล้ว ให้คุณคลิกปุ่ม Check โปรแกรมบนเซิร์ฟเวอร์ของ W3C ก็จะเริ่มทำการตรวจสอบโค๊ตหน้าเว็บ หรือโค๊ต CSS ของคุณทันที เมื่อโปรแกรมทำการตรวจสอบเสร็จก็จะแสดงผลการตรวจสอบ โดยจะรายงานว่าหน้าเว็บหรือโค๊ต CSS ของคุณผ่านเกณฑ์มาตราฐานของ W3C หรือไม่ ถ้าไม่ผ่านจะมีการแสดงรายการโค๊ตที่คุณเขียนผิดพลาดไป พร้อมคำแนะนำในการแก้ไขให้คุณเสร็จสรรพ ที่เหลือก็แค่ให้คุณกลับไปแก้ไขโค๊ตตามคำแนะนำให้ถูกต้อง แล้วคลิกที่ปุ่ม Revalidate เพื่อทำการตรวจสอบอีกครั้ง โดยทำการแก้ไขและส่งให้ตรวจไปเรื่อยๆจนผ่านเกณฑ์มาตราฐาน W3C

แถมให้นิดนึงครับ ตอนแรกๆที่ใช้คุณอาจจะเจอรายการแสดงโค๊ตที่คุณเขียนไม่ถูกต้องเยอะหน่อย ไม่ต้องตกใจครับเพราะทุกคนต้องเริ่มจากจุดนี้ไปเหมือนกันหมดครับ แต่ไม่ต้องห่วงครับผมมีหลักการที่ช่วยให้คุณผ่านมันไปได้ง่ายขึ้นดังนี้ครับคือ หลักๆจะบริการนี้ของ W3C จะแบ่งการแสดงข้อผิดพลาดของโค๊ตเป็น 2 ประเภทคือ ประเภท error และประเภท warning ให้คุณเลือกจัดการแก้ไขปัญหาในส่วนข้อผิดพลาดประเภท error ก่อน ซึ่งเป็นข้อผิดพลาดสำคัญที่คุณจะต้องแก้ไขให้ถูกต้องให้ได้เพื่อให้โค๊ตของคุณผ่านการตรวจของ W3C ได้ โดยจัดการแก้ไขไปที่ละตัวสองตัวไปเรื่อยๆจนหมด เท่านี้ก็เพียงพอที่จะช่วยให้คุณผ่านการตรวจสอบของ W3C ได้แล้ว จากนั้นถ้ามีเวลาคุณค่อยเปลี่ยนมาจัดการกับข้อผิดพลาดประเภท warning ซึ่งเป็นเหมือนแค่คำเตือนต่ออีกทีหนึ่งเพื่อให้ทุกอย่างสมบูรณ์ขึ้นได้ในภายหลังครับ

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

ส่วนตัวผมเองก็เคยงงๆกับการใช้แท็ก <meta> มานานเหมือนกันครับ ประมาณว่าใส่ไปแล้วจะได้อะไรจำเป็นต้องใส่ขนาดนั้นเลยเหรอ ซึ่งจริงๆผมเชื่อว่าคนเขียนเว็บไซต์ทุกคนรู้ว่าแท็ก <meta> สำคัญและควรใส่ แต่ไม่รู้ว่าอะไรบ้างและแค่ไหนดีถึงจะเหมาะสม ในบทความนี้จะมาเจาะรายละเอียดเกี่ยวกับการใช้แท็ก <meta> กันครับ

แท็ก <meta> มีไว้ทำอะไรบ้าง?

สำหรับแท็ก <meta> โดยหลักๆแล้วมีไว้เพื่อบอกรายละเอียดเพิ่มเติมเกี่ยวกับข้อมูลบนหน้าเว็บนั้นๆ เช่น มีไว้บอกรายละเอียดเกี่ยวกับข้อมูลบนหน้าเว็บ (description) หรือมีไว้บอกดัชนีคำที่เกี่ยวข้องกับเนื้อหาบนหน้าเว็บ (keyword) แต่ด้วยความที่นักเขียนหน้าเว็บสมัยก่อนเอามาใช้อย่างผิดๆ และพยายามโกงเพื่อให้หน้าเว็บตัวเองมีอันดับดีขึ้นแสดงบนผลการสืบค้นของ Search Engine จนทำให้ในเวลาต่อมา Search Engine ใหญ่ๆทั้งหมดจะไม่นำเอาข้อความในแท็ก <meta> เหล่านี้ในการคิดคำนวณอันดับการสืบค้นอีกต่อไป แต่จะไปเอาข้อความที่แสดงอยู่บนหน้าเว็บผ่านทางแท็กต่างๆมาใช้ในการคิดคำนวณแทน เพราะถูกสแปมได้ยากกว่าและให้ผลการสืบค้นที่ดีกว่า

ถึงแม้เหล่า Search Engine ต่างๆจะไม่ได้ให้ความสำคัญกับข้อมูลในแท็กเหมือนแต่ก่อนแล้ว แต่ใช่ว่าเราควรจะหยุดใช้แท็กนี้ตามไปด้วย เพราะผมเชื่อว่าหากเราใช้ตามความหมายของแท็กจริงๆอย่างที่ควรจะเป็น คือการบอกรายละเอียดเกี่ยวกับข้อมูลหน้าเว็บ เพราะฉะนั้นแท็กนี้ก็ยังคงมีประโยชน์อยู่ถ้าเราเลือกใช้อย่างเหมาะสม คราวนี้เรามาดูกันว่ามีแท็กชนิดไหนบ้างที่เราควรเอามาใส่บนหน้าเว็บของเรา

แท็กชนิดต่างๆที่คำสำคัญ

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

1. แท็กชนิด http-equiv=”content-type”

   ถ้าคุณไม่สนใจหรือไม่มีเวลาใส่แท็กในหน้าเว็บของคุณเลย ผมแนะนำว่าอย่างน้อยขอให้ใส่แท็กชนิดนี้เข้าไปในหน้าเว็บของคุณ เพราะแท็กนี้มีประโยชน์อย่างมากในการช่วยให้เว็บบราวเซอร์สามารถถอดรหัสการแสดงตัวอักษรบนหน้าเว็บของคุณได้อย่างถูกต้อง โดยเฉพาะอย่างยิ่งเมื่อข้อความส่วนใหญ่บนหน้าเว็บของคุณไม่ได้เป็นภาษาอังกฤษ ปัญหาเรื่องตัวอักษรยึกยืออ่านไม่รู้เรื่องก็จะหมดไป นอกจากนี้แท็กชนิดนี้ยังช่วยทำให้หน้าเว็บของคุณผ่านการตรวจสอบความถูกต้องของหน้าเว็บคุณของ W3C ได้อีกด้วย

   ตัวอย่างการเขียนแท็กชนิด http-equive=’content-type’

   <meta http-equiv="content-type" content="text/html;charset=UTF-8" />

   ข้อแนะนำในการเขียน

   จะสังเกตได้ว่าในส่วนของ attribute ชื่อ content ภายในแท็กชนิดนี้มีค่าในส่วนของ charset=UTF-8 จริงๆแล้วในส่วนนี้มีหลายค่าให้คุณเลือกใช้ แต่หลักๆแล้วถ้าข้อความบนหน้าเว็บของคุณเป็นภาษาไทยและคุณต้องการให้บราวเซอร์บนระบบปฏิบัติการทุกภาษาบนโลกนี้สามารถแสดงข้อความของคุณได้อย่างถูกต้อง ผมขอแนะนำให้เลือกใช้ charset=UTF-8 โดยตอนที่คุณสร้างหน้าเว็บไฟล์ใหม่ขึ้นมาให้คุณเลือกค่า Encoding ตอนที่กำลังเซฟเป็น UTF-8 ด้วยครับ

2. แท็กชนิด name=”description”

   ถ้าแม้เหล่า Search Engine ต่างๆไม่ได้ใช้ข้อมูลในแท็กชนิดนี้ในการคำนวณเพื่อจัดลำดับการแสดงผลการสืบค้นแล้วก็ตาม แต่ข้อมูลในแท็กชนิดนี้ยังถูก Search Engine ดึงไปใช้แสดงคำอธิบายใต้ลิ้งก์ของผลการแสดงการสืบค้นอยู่ จึงมีความจำเป็นที่เราจะต้องใส่เข้าไปในหน้าเว็บของเราเพื่อเพิ่มโอกาสการคลิกกลับเข้ามาหาเว็บไซต์ของเรา

   ตัวอย่างการเขียนแท็กชนิด name=”description”

   <meta name="description" content="รวบรวมสาระน่ารู้เกี่ยวกับการเขียน HTML และ CSS ให้ถูกต้องตามหลัก Web Standards" />

   ข้อแนะนำในการเขียน

   ข้อมูลที่จะใส่ในส่วนของ Attribute ชื่อ content ผมแนะนำให้เขียนให้สั้น, กระชับ และให้ได้ใจความมากที่สุด และที่สำคัญคือจะต้องน่าสนใจพอที่จะดึงดูดให้คนอยากคลิกเข้าไปอ่านต่อได้ด้วย เพราะผู้สืบค้นเจอหน้าเว็บของเราส่วนใหญ่จะใช้ข้อมูลในส่วนนี้ในการตัดสินใจเลือกที่จะคลิกเข้าไปดูหรือไม่ด้วย และหากคุณต้องการจะใช้แท็กชนิดนี้ให้ได้ผลสูงสุด คุณควรเขียนให้สอดคล้องกับข้อความที่คุณเขียนในแท็กด้วย และเปลี่ยนแปลงข้อความให้เหมาะสมกับแต่ละหน้าเว็บแต่ละที่เปลี่ยนไปด้วย พยายามหลีกเลี่ยงการใช้ข้อความในแท็กชนิดนี้และแท็กที่ซ้ำๆไปกับทุกหน้าของเว็บไซต์ครับ เพราะจะทำให้การหาหน้าที่มีข้อมูลที่เฉพาะเจาะจงลงไปในแต่ละเรื่องผ่านทาง Search Engine ได้ยากขึ้นมากๆ

3. แท็กชนิด name=”author”

   หลายๆท่านอาจจะเห็นแย้งกับผมเรื่องความสำคัญของแท็กชนิดนี้ เพราะดูจะไม่ค่อยมีประโยชน์เท่าไหร่นัก และเหล่า Search Engine ต่างๆก็ไม่ได้สนใจข้อมูลในแท็กชนิดนี้เลยด้วยซ้ำไป แต่คุณรู้มั้ยว่านี้คืออีกช่องทางง่ายๆที่คนทั่วไปจะได้รู้ว่าใครเป็นเขียนหน้าเว็บสุดเจ๋งหน้านี้ของคุณ เพราะฉะนั้นอย่าพลาดที่จะใส่ข้อมูลนี้เข้าไปด้วยทุกครั้งที่มีโอกาส ไม่แน่ว่างานลำไพ่พิเศษอาจจะวิ่งมาหาคุณจากทางนี้ก็ได้

   ตัวอย่างการเขียนแท็กชนิด name=”author”

   <meta name="author" content="Mr. Margin0auto" />

   ข้อแนะนำในการเขียน

   ผมแนะนำให้ใส่ข้อมูลใน Attribute ชื่อ content ในรูปของชื่อจริงหรือชื่อที่ใช้ติดต่อ แถมท้ายด้วยอีเมลหรือที่อยู่เว็บไซต์ของคุณ เพื่อให้คนที่ประทับใจในงานเขียนเว็บของคุณสามารถติดต่อกลับไปหาคุณได้ เช่น

   <meta name="author" content="Mr. Margin0auto, margin0auto.wordpress.com" />

4. แท็กชนิด name=”robots”

   แท็กชนิดนี้ใช้เป็นทางเลือกเสริม ใช้เฉพาะในกรณีที่คุณต้องการควบคุมการเข้ามาเก็บข้อมูลบนหน้าเว็บของคุณของเหล่า Search Engine ต่างๆ เช่น ควบคุมไม่ให้ Search Engine ทำดัชนีข้อมูลใดๆบนหน้าเว็บ (noindex) หรือควบคุมไม่ให้ตามลิ้งก์ต่างๆที่ปรากฏว่าบนหน้าเว็บ (nofollow)

   ตัวอย่างการเขียนแท็กชนิด name=”robots”

   <meta name="robots" content="noindex, nofollow" />

   ข้อแนะนำในการเขียน

   ค่าเริ่มต้นของแท็กชนิดนี้คือ index, follow คือให้ทำดัชนีข้อมูลบนหน้าเว็บและตามไปต่อทุกลิ้งก์ที่อยู่ในหน้าด้วย ถ้าคุณต้องการอย่างนี้อยู่แล้วคุณก็ไม่จำเป็นต้องใส่แท็กชนิดนี้เข้าไปแต่อย่างใด แท็กชนิดนี้มีคำสั่งเพิ่มเติมให้คุณเลือกใช้เพื่อควบคุมการทำงานของ Search Engine ดังนี้ครับ

   • noindex

     ใช้ควบคุมไม่ให้ Search Engine ตามไปทำดัชนีที่ตามลิ้งก์ต่างๆที่ปรากฏว่าบนหน้าเว็บ

   • nosnippet

     ใช้ควบคุมไม่ให้ Search Engine ใช้ข้อมูลในแท็กชนิด name=”description” ตอนแสดงผลการสืบค้น

   • noarchive

     ใช้ควบคุมไม่ให้ Search Engine เก็บข้อมูลหน้าเว็บขอคุณในระบบเซิร์ฟเวอร์ของ Search Engine

   • noimageindex

     ใช้ควบคุมไม่ให้ Search Engine ทำดัชนีรูปภาพทั้งหมดที่แสดงบนหน้าเว็บ

   ในหนึ่งแท็กชนิดนี้ให้เขียนค่าที่ต้องการใน attribute ชื่อ content ได้สูงสุด 2 คำสั่งโดยเขียนเครื่องหมายลูกน้ำ (,) คั้นกลาง และห้ามเขียนแท็กชนิดนี้มากกว่าหนึ่งครั้งในหนึ่งหน้าเว็บ เช่น

   <meta name="robots" content="noindex, noarchive" />

   หากคุณต้องการสั่งเฉพาะ Search Engine ของ Google ให้คุณเปลี่ยนค่าที่ attribute ชื่อ name เป็น googlebot แทนครับ เช่น

   <meta name="googlebot" content="noindex, noarchive" />

แถมให้อีกนิดนึงครับ ด้วยความที่แท็กเป็นแท็กแบบเปล่าๆหรือที่ฝรั่งเรียกกันว่า Empty Tag คือแท็กจบในตัวมันเองโดยไม่ต้องที่ไม่มีแท็กปิดแต่อย่างใด แต่ก็เขียนแท็กนี้สำหรับหน้าเว็บ HTML และ XHTML มีความแตกต่างกันนิดนึงครับตรงที่ตัวจบครับ คือถ้าเป็น HTML จะเขียนจบเพียง > แต่ถ้าเป็น XHTML จะต้องเขียนจบเป็น (เว้นวรรค) /> <img>, <br> และ <input> หลักการนี้ใช้กับแท็กแบบเปล่าๆตัวอื่นอย่างด้วยนะครับ

<meta name="description" content="Web Standards"> <-- สำหรับ HTML
<meta name="description" content="Web Standards" /> <-- สำหรับ XHTML

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

สรุป

ขั้นต่ำที่สุดของการใช้แท็ก meta คือ

<meta http-equiv="content-type" content="text/html;charset=UTF-8" />

ขั้นแนะนำของการใช้แท็ก meta คือ

<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<meta name="description" content="รวบรวมสาระน่ารู้เกี่ยวกับการเขียน HTML และ CSS ให้ถูกต้องตามหลัก Web Standards" />
<meta name="author" content="Mr. Margin0auto, margin0auto.wordpress.com" />

ขั้นสูงสุดของการใช้แท็ก meta ในกรณีที่คุณต้องการควบคุมการเข้ามาทำดัชนีของเหล่า Search Engine ต่างๆด้วย

<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<meta name="description" content="รวบรวมสาระน่ารู้เกี่ยวกับการเขียน HTML และ CSS ให้ถูกต้องตามหลัก Web Standards" />
<meta name="author" content="Mr. Margin0auto, margin0auto.wordpress.com" />
<meta name="robots" content="noindex, noarchive" />

แล้วพบกันใหม่ในตอนต่อไปครับ

อีกแท็กหนึ่งที่มีความสำคัญมากๆสำหรับการเขียนหน้าเว็บตามหลัก Web Standards คือแท็ก DOCTYPE เพราะเป็นแท็กที่บอกให้เว็บบราวเซอร์รู้ว่าหน้าเว็บของคุณเป็นหน้าเว็บแบบไหนและควรจะใช้กฏเกณฑ์ไหนในการแสดงผลบนหน้าจอให้ถูกต้องที่สุด ซึ่งจะมีส่วนช่วยให้การเขียน CSS ของคุณแสดงผลได้ถูกต้องมากยิ่งขึ้นด้วยครับ

แต่หากคุณละเลยไม่ใส่แท็ก DOCTYPE เว็บบราวเซอร์ก็จะไม่รู้ว่าใช้กฏเกณฑ์ไหนดีในการแสดงผล และจะคิดเหมาเอาว่าหน้าเว็บของเราเป็นหน้าเว็บสมัยโบราณ(มาก) แล้วจะเลือกใช้กฏเกณฑ์แบบหยาบๆที่สุดหรือที่ฝรั่งเขาเรียกกันว่า Quirks Mode ในการแสดงผล เพื่อให้สามารถแสดงผลหน้าเว็บโบราณ(มาก)นั้นให้จงได้ไม่ว่าผลที่ได้จะน่าเกลียดขนาดไหนก็ตาม คราวนี้ล่ะไม่ว่าคุณจะเขียน CSS ได้เทพขนาดไหนก็อาจจะจอดไม่เป็นท่าเอาได้ง่ายๆ เพราะ CSS ที่คุณเขียนไม่สามารถแก้ไขการแสดงผลที่ผิดพลาดขอบเว็บบราวเซอร์ที่เกิดขึ้นตั้งแต่แรกให้ถูกต้องขึ้นมาได้ครับ

วิธีการใส่แท็ก DOCTYPE ที่ถูกต้อง

คุณจะต้องใส่แท็ก DOCTYPE บนบรรทัดแรกสุดของโค๊ตหน้าเว็บของคุณเท่านั้น ข้อมูลในแท็ก DOCTYPE จะต้องเป็นข้อมูลแรกที่เว็บบราวเซอร์อ่านเมื่อพบเจอกับหน้าเว็บของคุณ เพราะมันจะเป็นการบอกให้เว็บบราวเซอร์ได้รู้ทันทีว่าหน้าเว็บของคุณเป็นประเภทไหน เพื่อให้เว็บบราวเซอร์เลือกใช้กฏเกณฑ์ในการแสดงผลโค๊ตที่เหลือทั้งหมดในหน้าเว็บของคุณได้ถูกต้องที่สุด

DOCTYPE ประเภทต่างๆ

ขึ้นชื่อว่าเป็น DOCTYPE หรือประเภทของเอกสารแล้ว แสดงว่ามันต้องมีมากกว่า 1 ประเภทแน่นอน แต่ในที่นี่ผมขอพูดถึงเฉพาะ DOCTYPE ประเภทสำหรับหน้าเว็บในการแสดงผลบนหน้าจอคอมพิวเตอร์ทั่วไปเท่านั้นก่อนนะครับ ซึ่งโดยหลักๆจะมีดังต่อไปนี้ครับ โดยผมได้เตรียมโครงสร้างของแต่ละ DOCTYPE ไว้ให้เลย เผื่อให้คุณก็อปโค๊ตโครงสร้างไปใช้ต่อได้เลยครับ

DOCTYPE ประเภทสำหรับ HTML 4.01 แบบ Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
</head>
<body>

</body>
</html>


DOCTYPE ประเภทสำหรับ HTML 4.01 แบบ Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
</head>
<body>

</body>
</html>


DOCTYPE ประเภทสำหรับ XHTML 1.0 แบบ Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
</head>

<body>

</body>
</html>


DOCTYPE ประเภทสำหรับ XHTML 1.0 แบบ Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
</head>

<body>

</body>
</html>

*สังเกตได้ว่า DOCTYPE ของ XHTML เราจะต้องระบุภาษาที่ใช้แสดงบนหน้าเว็บของเราเพิ่มเติมเข้าไปด้วย ถ้าข้อมูลบนหน้าเว็บของเราหลักๆเป็นภาษาไทยให้ระบุในส่วนของ xml:lang=”th” lang=”th” แทนครับ โดยคุณสามารถเข้าไปดูตารางแสดงโค๊ตของแต่ละภาษาทั่วโลกได้ตามลิ้งก์นี้ครับ http://reference.sitepoint.com/html/lang-codes

เราควรจะเลือกใช้ DOCTYPE ประเภทไหนดี?

ตัวเลือกเยอะซะขนาดนี้เหลายท่านคงจะงงไม่รู้ว่าจะเลือกใช้ตัวไหนดี การเลือกใช้ DOCTYPE ประเภทไหนนั้นขึ้นอยู่กับว่าคุณจะเลือกเขียนโค๊ตหน้าเว็บเป็นแบบ HTML หรือ XHTML ด้วย ถ้าหน้าเว็บของคุณเป็นหน้าเว็บที่เขียนขึ้นมาใหม่ ผมแนะนำให้ขั้นต่ำสุดควรจะเลือกใช้ DOCTYPE ประเภท XHTML 1.0 แบบ Transitional หรือดีที่สุดคือใช้เป็น DOCTYPE ประเภท XHTML 1.0 แบบ Strict ไปเลย ที่ผมแนะนำให้เลือกเขียนเป็น XHTML มากกว่า HTML เพราะการเขียน XHTML มีกฏเกณฑ์ในการเขียนที่เคร่งครัดและรัดกุมกว่าการเขียน HTML อย่างมาก ซึ่งจะช่วยให้คุณฝึกวินัยการเขียนโค๊ตให้ได้ตามหลัก Web Standards ได้ดีที่สุด นอกจากนี้ยังช่วยให้การแปลงไฟล์ XHTML ที่คุณเขียนวันนี้เป็น XML ในอนาคตได้ง่ายขึ้นด้วย

เราจะเลือกอะไรดีระหว่าง DOCTYPE แบบ Transitional และ Strict

ผมแนะนำให้เลือกใช้ DOCTYPE แบบ Transitional เฉพาะเมื่อคุณต้องการรองรับโค๊ตเก่าๆที่ได้เขียนไว้นานแล้วหรือในกรณีที่คุณยังจำเป็นต้องใช้แท็กหรือ attribute บางตัวที่ต้องห้ามในแบบ Strict อยู่เท่านั้นครับ นอกเหนือจากนี้แล้วผมขอให้คุณเลือกใช้แต่เฉพาะ DOCTYPE แบบ Strict เท่านั้น เพราะเป้าหมายของเราคือการเขียนหน้าเว็บตามหลัก Web Standards ที่ต้องการแยกส่วนโครงสร้างและส่วนการแสดงผลของหน้าออกจากกันอย่างเด็ดขาด และเพื่อให้แน่ใจได้ว่าหน้าเว็บที่คุณเขียนในวันนี้จะสามารถรองรับเทคโนโลยีของเว็บบราวเซอร์ในอนาคตได้เป็นอย่างดีครับ

แท็กต้องห้ามสำหรับ DOCTYPE แบบ Strict

• <center>
• <font>
• <iframe>
• <strike>
• <u>

attribute ต้องห้ามสำหรับ DOCTYPE แบบ Strict

• align (เฉพาะที่ใช้ในแท็ก col, colgroup, tbody, td, tfoot, th, thead และ tr)
• language
• background
• bgcolor
• border (อนุญาตให้ใช้ได้เฉพาะในแท็ก table เท่านั้น)
• height (อนุญาตให้ใช้ได้เฉพาะในแท็ก img และ object เท่านั้น)
• hspace
• name (อนุญาตให้ได้ใช้เฉพาะ DOCTYPE ประเภท 4.01 Strict เท่านั้น)
• noshade
• nowrap
• target
• text
• link
• vlink
• alink
• vspace
• width (อนุญาตให้ใช้ได้เฉพาะในแท็ก img, object, table, col และ colgroup เท่านั้น)

จริงๆแล้วยังมี DOCTYPE สำหรับหน้าเว็บที่แสดงบนหน้าจอคอมพิวเตอร์อีกหลายประเภทอย่าง HTML 5 และ XHTML 1.1 ครับ แต่ ณ. เวลานี้ผมยังไม่แนะนำให้ใช้ครับ เพราะเว็บบราวเซอร์ที่ผู้ใช้งานส่วนใหญ่ยังใช้อยู่เป็นเวอร์ชั่นที่ยังรองรับการแสดงผลของ DOCTYPE ทั้ง 2 ประเภทนี้ไม่สมบูรณ์เท่าไหร่ นอกเสียจากว่าคุณรู้ว่ากลุ่มเป้าหมายของเว็บไซต์คุณใช้เว็บบราวเซอร์สมัยใหม่อย่าง Google Chrome, Firefox หรือ Opera เวอร์ชั่นใหม่ๆกันหมดแล้วเท่านั้นครับ

สำหรับการเขียน CSS จุดประสงค์หลักของการสร้าง ID หรือ Class ก็คือเพื่อช่วยให้เราสามารถเขียนคำสั่งพิเศษให้สำหรับบางแท็กที่เราต้องการได้ เพื่อให้การแสดงผลมีความแตกต่างจากแท็กเดียวกันที่ไม่มี ID หรือ Class ได้ เช่น

<style type=”text/css” rel=”stylesheet”>
h3 {
font-size: 36px;
color: grey;
}
</style>
.
.
.
<h3>ผมรักแม่ที่สุดในโลก</h3>
<h3>ลูกคือแก้วตาดวงใจของแม่</h3>

ไม่ว่าเราจะเขียนคำสั่ง CSS ให้กับแท็ก <h3> ยังไง ข้อความทั้งสองบรรทัดก็จะแสดงผลเหมือนกันทุกอย่าง คือมีตัวอักษรสีเทาขนาด 36px แต่สมมุติว่าเราต้องการให้ข้อความบรรทัดแรกมีการแสดงผลที่แตกต่างจากข้อความบรรทัดที่สอง หนทางเดียวที่จะทำได้ก็คือใส่ ID หรือ Class ให้กับแท็ก <h3> บรรทัดแรกดังนี้

<style type=”text/css” rel=”stylesheet”>
h3 {
font-size: 36px;
color: grey;
}
#section_header {
font-size: 48px;
color: red;
}
</style>
.
.
.
<h3 id=”section_header“>ผมรักแม่ที่สุดในโลก</h3>
<h3>ลูกคือแก้วตาดวงใจของแม่</h3>

แค่นี้ข้อความ “ผมรักแม่ที่สุดในโลก” จะแสดงเป็นตัวอักษรสีแดงขนาด 48px แทน เป็นยังไงครับ เริ่มเห็นประโยชน์ของการใส่ ID หรือ Class แล้วใช่มั้ยครับ

ความแตกต่างระหว่าง ID และ Class

1. วิธีเขียนที่แตกต่างกัน
การเขียน ID ใน CSS จะเริ่มต้นด้วยสัญญลักษณ์ # แล้วตามด้วยชื่อ ID ที่เราต้องการตั้ง เช่น
#main_header    –> เพื่อสั่งแท็ก <h3 id=”main_header”>……..</h3>
#main_menu    –> เพื่อสั่งแท็ก <ul id=”main_menu”>……..</ul>
#sub_menu    –> เพื่อสั่งแท็ก <ul id=”sub_menu”>……..</ul>
#footer        –> เพื่อสั่งแท็ก <div id=”footer”>……..</div>

การเขียน Class ใน CSS จะเริ่มต้นด้วยสัญญลักษณ์ . แล้วตามด้วยชื่อ Class ที่เราต้องการตั้ง เช่น
.sub_header    –> เพื่อสั่งแท็ก <h4 class=”sub_header”>……..</h4>
.main_list        –> เพื่อสั่งแท็ก <ul class=”main_list”>……..</ul>
.content        –> เพื่อสั่งแท็ก <div class=”content”>……..</div>
.details        –> เพื่อสั่งแท็ก <p class=”details”>……..</p>

โดยตัวแรกของชื่อจะต้องเป็นตัวอักษรระหว่าง A ถึง Z เท่านั้น ห้ามเริ่มต้นชื่อด้วยสัญญลักษณ์หรือตัวเลขเพราะบราวเซอร์จะไม่ตีความว่าเป็น ID หรือ Class ซึ่งจะมีผลทำให้คำสั่ง CSS ที่เราเขียนไม่มีผลใดๆทั้งสิ้น และที่ต้องจำไว้อีกอย่างคือ CSS จะไม่สนใจว่าจะเป็นตัวเล็กหรือตัวใหญ่หรือ Case Insensitive เพราะฉะนั้นการตั้งชื่อว่า SuperAgent กับ superagent จะมีค่าเท่ากันครับ

2. จำนวนครั้งที่ใช้ได้ต่อหน้าเว็บ
ID ที่คุณตั้งขึ้นมาจะอนุญาตให้ใช้ได้ครั้งเดียวในหน้า และหนึ่งแท็กจะใส่ ID ได้ตัวเดียว ส่วน Class ที่คุณตั้งขึ้นมาจะอนุญาตให้ใช้ได้หลายครั้งในหน้าเดียวกัน และหนึ่งแท็กจะใส่ Class ได้หลายตัว เช่น
<div id=”header”>
<h1>บริษัท มาตราฐานเว็บขั้นสูง จำกัด</h1>
<ul id=”main_menu”>
<li class=”menu”><a class=”menu_link link” href=”home.html” title=”Home”>Home</a></li>
<li class=”menu”><a class=”menu_link link” href=”products.html” title=”Products”>Products</a></li>
<li class=”menu”><a class=”menu_link link” href=”support.html” title=”Support”>Support</a></li>
<li class=”menu”><a class=”menu_link link” href=”contactus.html” title=”Contact Us”>Contact Us</a></li>
<li class=”menu”><a class=”menu_link link” href=”sitemap.html” title=”Site Map”>Site Map</a></li>
</ul>
</div>

จากในตัวอย่างโค๊ตจะเห็นได้ว่าแท็ก <div> และ <ul> ต่างมี ID ของตัวเองคือ header และ main_menu ตามลำดับ และจะถูกเรียกใช้เพียงแค่ครั้งเดียวในหน้า แต่สำหรับ Class ชื่อ menu ในแท็ก <li> จะได้เรียกใช้ซ้ำได้ไม่มีปัญหาอะไร ส่วนในแท็ก <a> จะเห็นตัวอย่างการใส่ชื่อ Class ได้มากกว่าหนึ่งในแท็กเดียวกัน โดยในแท็ก <a> นี้จะมีชื่อ Class อยู่ 2 ชื่อด้วยกันคือ menu_link และ link นอกจากนี้เรายังสามารถใส่ทั้ง ID และ Class ให้กับแท็กๆเดียวกันได้ด้วย เช่น

<li id=”menu_selected” class=”menu”><a class=”menu_link link active” href=”home.html” title=”Home”>Home</a></li>

3. ระดับ Specificity
ID มีความเฉพาะเจาะจงหรือ Specificity ที่สูงกว่า Class ในกรณีที่มีปัญหาคำสั่ง CSS ไปทับซ้อนกันในแท็กเดียวกัน ก็จะทำให้คำสั่งที่เขียนสั่งผ่าน ID และชนะคำสั่งที่เขียนผ่าน Class เช่น
.menu {
background: grey;
}
#menu_selected {
background: white;
}

<li id=”menu_selected” class=”menu”><a class=”menu_link link active” href=”home.html” title=”Home”>Home</a></li>

ในกรณีนี้มีปัญหาคำสั่งซ้ำซ้อนกันในแท็ก <li> แต่เนื่องจาก ID มีระดับ Specificity ที่สูงกว่า Class จึงทำให้เว็บบราวเซอร์เลือกที่จะแสดงสีพื้นหลังของแท็ก <li> เป็นสีขาวที่สั่งผ่าน #menu_selected แทนที่จะเป็นสีเทาที่สั่งผ่าน .menu สำหรับท่านใดที่งงๆว่า Specificity คืออะไร ให้ลองเข้าไปอ่านบทความเรื่องนี้ที่ผมเขียนไว้ก่อนหน้านี้ได้เลยครับ

เราควรเลือกใช้ ID หรือ Class ในกรณีใดบ้าง

เราควรเลือกใช้ ID เมื่อเราต้องการระบุถึงส่วนสำคัญของหน้าที่ในหน้าหนึ่งๆจะมีแค่หนึ่งเดียวเท่านั้น เช่น ส่วนหัวด้านบนของหน้า, ส่วนเมนูหลักของหน้า, ส่วนเนื้อหาของหน้า หรือส่วนท้ายสุดที่ประกอบในหน้า หรือเลือกใช้ ID ในส่วนที่เราต้องการใส่ JavaScript หรือ jQuery เพื่อเพิ่มลูกเล่นและความสวยงามให้กับหน้า

เราควรเลือกใช้ Class เมื่อเราต้องการใส่สไตล์การแสดงผลที่เป็นรายละเอียดปลีกย่อยที่เราอยากใช้ร่วมกันได้กับหลายๆแท็กในหน้าเดียวกัน เช่น สีตัวอักษรของพาดหัวหลักพาดหัวรอง, ลักษณะของลิ้งก์เพื่อไปอ่านต่อหน้าใน

ผมเชื่อว่าคงมีหลายๆท่านรวมทั้งตัวผมเองด้วยที่เคยเผลอใช้ ID กับหลายๆแท็กในหน้าเว็บเดียวกัน แต่กลับไม่รู้สึกอะไรเพราะบราวเซอร์ก็ยังแสดงผลบนหน้าจอได้ตามปกติ แต่หารู้ไม่ว่ามันเป็นการผิดหลักการเขียนแบบ Web Standards แบบเต็มๆ นอกจากนี้การใช้ ID หลายๆครั้งในหน้าเดียวกันอาจจะทำให้มีปัญหากับสคลิปพิเศษอย่าง JavaScript หรือ jQuery ที่สั่งงานโดยอ้างอิงถึง ID ที่เราตั้งอีกด้วย เพราะฉะนั้นเราจึงควรระวังเรื่องนี้ให้มากๆ

แถมให้อีกนิดนึงเกี่ยวกับการตั้งชื่อ ID และ Class ที่ดีและเหมาะสม ผมแนะนำให้ตั้งชื่อให้สื่อความหมายของ ID และ Class นั้นๆจริงๆและยืดหยุ่นพอที่จะให้คุณสามารถเปลี่ยนแปลงคำสั่งได้ในอนาคตได้ โดยพยายามหลีกเลี่ยงอย่างเด็ดขาดที่จะตั้งชื่อตามลักษณะการแสดงผลบนหน้าจอ เช่นตั้งชื่อตามสีอย่าง red, black, pink, white หรือตั้งชื่อตามตำแหน่งหรือลักษณะการวางอย่าง left, right, center, bottom ที่แนะนำอย่างนี้เพราะว่าคุณไม่มีทางรู้หรอกว่าในอนาคตคุณอาจจะต้องเปลี่ยนลักษณะการแสดงผลนั้นๆเป็นอย่างอื่นที่ตรงกันข้ามอย่างสิ้นเชิงเลยก็ได้

ตัวอย่างเช่น ถ้าคุณตั้งชื่อ class ว่า white เพราะตอนนี้ลูกค้าของคุณอยากให้ข้อความที่อยู่ใน Class นี้เป็นสีขาว แต่ในอีกหลายเดือนต่อมาลูกค้าคนเดิมของคุณอาจจะอยากเปลี่ยนสีข้อความใน Class นี้เป็นสีดำก็ได้ คราวนี้คุณจะมี Class ที่สื่อความหมายตรงข้ามกันไปเลย ซึ่งจะมีผลทำให้การดูแลโค๊ตต่อไปยากลำบากมากขึ้นเพราะชื่อที่คุณตั้งมันไม่สื่อความหมายอย่างที่ควรจะเป็นอีกต่อไป และจะยิ่งมีปัญหามากขึ้นไปอีกเมื่อคนอื่นต้องมาดูแลโค๊ตนี้แทนคุณ เพราะเขาจะงงว่าข้อความก็เป็นสีดำแท้ๆแต่ทำไม Class มันถึงชื่อว่า white ได้ไง(ว่ะ) เพราะฉะนั้นเราจึงควรตั้งชื่อ ID และ Class ที่สื่อความหมายจริงๆโดยไม่อิงกับลักษณะการแสดงผลใดๆเลย ดังนั้นแทนที่คุณจะตั้งชื่อ Class ว่า white ให้ตั้งว่า hilight แทน เพราะชื่อนี้นอกจากจะสื่อความหมายโดยตัวมันเองแล้วว่าทำหน้าที่อะไร มันยังยืดหยุ่นพอให้คุณปรับเปลื่ยนสีตัวอักษรเป็นสีอะไรก็ได้ที่คุณต้องการในอนาคต

ต่อเนื่องจากบทความที่แล้วที่ผมได้อธิบายถึงหลักการ Cascade ไปแล้ว คราวนี้ลองมาทำความเข้าใจกับอีกหลักการหนึ่งที่คนเขียน CSS ทุกคนจะต้องเข้าใจ นั่นก็คือหลักการ Specificity หรือหลักการเฉพาะเจาะจง สรุปให้เข้าใจกันง่ายๆสำหรับหลักการ Specificity นี้ก็คือ เมื่อเว็บบราวเซอร์เจอกับคำสั่ง CSS ที่สั่งไปที่แท็กเดียวกัน เว็บบราเซอร์จะเลือกแสดงผลจากคำสั่งที่มีการเขียน Selector ที่เฉพาะเจาะจงกว่าเป็นหลัก เช่น
body p {
color: blue;
}

p {
color: yellow;
}
.
.
.
<p>วันนี้ผมมีความสุขมากๆ</p>

ถ้าอิงตามหลักการ Casecade อย่างเดียว ข้อความ”วันนี้ผมมีความสุขมากๆ”จะต้องแสดงเป็นสีเหลืองเพราะเป็นคำสั่งที่เขียนตามมาทีหลัง แต่เมื่อมีการใช้หลักการ Specificity เข้ามาประกอบด้วย ข้อความนี้จะแสดงเป็นสีฟ้าแทน ท้้งนี้เนื่องจาก Selector ที่เขียน body p (เลือกแท็ก <p> ที่อยู่ในแท็ก <body> อีกที) มีความเฉพาะเจาะจงกว่า Selector ที่เขียนแค่ p (เลือกแท็ก <p> ไหนก็ได้ในหน้านี้)

จริงๆแล้วทางคณะกรรม W3C มีหลักการในการคำนวณค่า Specificity แต่ในทางปฏิบัติแล้วเราไม่จำเป็นต้องเข้าใจการคำนวณค่าถึงขนาดนั้น ขอเพียงแค่เราเข้าใจภาพรวมของหลักการ Specificity และรู้ว่าการเขียน Selector แบบไหนมีความเฉพาะเจาะจงมากน้อยกว่ากันยังไงก็พอแล้ว

ตัวอย่างลำดับของการเขียน Select เรียงตามความเฉพาะเจาะจงหรือระดับ Specificity จากน้อยไปหามาก

p { }
(เลือกแท็ก <p> ไหนก็ได้ที่อยู่ในหน้า)

div p { }
(เลือกเฉพาะแท็ก <p> ที่อยู่ในแท็ก <div> อีกทีหนึ่งเท่านั้น)

p.intro { }
(เลือกเฉพาะแท็ก <p> ที่ Class ชื่อ intro เท่านั้น)

p.intro .important { }
(เลือกเฉพาะแท็กที่มี Class ชื่อ important ที่อยู่ภายในแท็ก <p> ที่ Class ชื่อ intro อีกทีหนึ่งเท่านั้น)

#mainmenu { }
(เลือกเฉพาะแท็กที่มี ID ชื่อ mainmenu เท่านั้น)

div#mainmenu { }
(เลือกเฉพาะแท็ก <div> ที่มี ID ชื่อ mainmenu เท่านั้น)

#mainmenu .submenu { }
(เลือกเฉพาะแท็กที่มี Class ชื่อ submenu ที่อยู่ภายในแท็กที่มี ID ชื่อ mainmenu อีกทีหนึ่งเท่านั้น)

#header #mainmenu { }
(เลือกเฉพาะแท็กที่มี ID ชื่อ mainmenu ที่อยู่ภายในแท็กที่มี ID ชื่อ header อีกทีหนึ่งเท่านั้น)

จะสังเกตได้ว่า Selector ที่มีการระบุ ID จะมีความเฉพาะเจาะจงมากกว่า Selector ที่ระบุด้วย Class ทั้งนี้เนื่องจาก ID สามารถใช้ได้กับแค่แท็กเดียวในหน้า แต่ Class สามารถใช้ได้กับหลายแท็กในหน้าเดียวกัน

การเขียนโดยใช้หลัก Specificity ให้เป็นประโยชน์ ผมแนะนำให้เริ่มเขียนจากกว้างๆก่อน แล้วค่อยๆเพิ่มความเฉพาะเจาะจงในภายหลังเมื่อเราต้องการปรับแต่งรายละเอียดการแสดงผลเพิ่มเติม เช่น

เริ่มต้นการสั่งการแสดงผลสำหรับแท็ก <p> โดยทั่วไปในหน้าก่อน เช่น
p {
font-size: 14px;
color: orange;
}

จากนั้นค่อยเพิ่มความเฉพาะเจาะจงให้กับแท็ก <p> ต่อมาในภายหลัง
p.intro {
font-size: 16px;
font-weight: bold;
color: yellow;
}

นอกจากการเข้าใจหลักการ Specificity จะมีส่วนช่วยให้เราเขียนคำสั่ง CSS ได้ดีและรอบครอบมากขึ้นแล้ว หลักการนี้ยังมีประโยชน์มากๆตอนที่เราต้องเข้าไปแก้ปัญหาเว็บบราวเซอร์ไม่แสดงผลตามคำสั่ง CSS ที่เราเขียน เช่น สมมุติว่าเรามีปัญหาแท็ก <p> ไม่ยอมแสดงผลของคำสั่ง color: yellow; ถึงแม้คุณจะเขียนคำสั่งไว้ต่อท้ายสุดของชุดคำสั่งตามหลักของ Cascade แล้วก็ตาม นั่นก็เป็นไปได้ว่าคุณกำลังเจอปัญหาว่าคำสั่งที่คุณเขียนไว้ก่อนหน้านี้มี Specificity ที่สูงกว่า ดังนั้นวิธีแก้ไขก็สามารถทำได้ง่ายๆก็คือการเพิ่มความเฉพาะเจาะจงให้กับการเขียน Selector ของคุณนั่นเอง  ในกรณีที่มีแท็ก ID ชื่อ content ครอบแท็ก <p> ก็ให้คุณเพิ่ม #content เข้าไปใน Selector เพื่อเพิ่มระดับ Specificity

#content p.intro {
font-size: 16px;
font-weight: bold;
color: yellow;
}

เท่านี้เว็บบราวเซอร์ก็จะแสดงข้อความในแท็ก <p> เป็นสีเหลืองอย่างที่คุณต้องการได้แล้ว

สรุป
หลักกการ Specificity
ถ้าบราวเซอร์เจอคำสั่ง CSS สำหรับแท็กๆเดียวกันซ้ำๆกัน บราวเซอร์จะเลือกใช้คำสั่งที่เจาะจงที่สุด

หลักการ Cascade
ถ้าบราวเซอร์เจอคำสั่ง CSS สำหรับแท็กๆเดียวกันซ้ำๆกัน บราวเซอร์จะเลือกใช้คำสั่งที่มาทีหลังสุด

แถมให้อีกนิดนึงครับ นอกจากหลักการ Specificity ในการช่วยเขียน CSS ให้ดีขึ้นได้แล้ว เรายังสามารถใช้คำสั่ง CSS ที่มีความเฉพาะเจาะจงที่แตกต่างกันได้ด้วยครับ เช่นคำสั่งที่เป็นคำสั่งลัด (Shortcut) อย่าง margin, padding, background และ list-style จะมีความเฉพาะเจาะจงน้อยกว่าคำสั่งในตระกูลเดียวกัน เช่น

margin มีความเฉพาะเจาะจงน้อยกว่า margin-top, margin-right, margin-bottom, margin-left

padding มีความเฉพาะเจาะจงน้อยกว่า padding-top, padding-right, padding-bottom, padding-left

background มีความเฉพาะเจาะจงน้อยกว่า background-color, background-image, background-repeat, background-attachment, background-position

list-style มีความเฉพาะเจาะจงน้อยกว่า list-style-image, list-style-position, list-style-type

เช่น
h4 {
margin-left: 10px;
}

body h4 {
margin: 20px 0 40px 5px;
}

ถืงแม้ตามหลัก Cascade และ Specification ของคำสั่ง body h4 จะสูงกว่าของคำสั่ง h4 กันเห็นๆ แต่แทนที่บราวเซอร์จะแสดงผล margin ซ้ายแท็ก <h4> เป็น 5px แต่กลับแสดงผลเป็น 10px นั่นเป็นเพราะ margin-left มีความเฉพาะเจาะจงมากกว่าเพราะมีการระบุไปเลยว่าเป็น margin ด้านไหน ด้วยเหตุนี้ผมจึงขอแนะนำให้เขียนโดยใช้คำสั่งลัด(shortcut)อย่าง margin, padding, background และ list-style ก่อน แล้วเก็บคำสั่งที่เฉพาะเจาะจงในตระกูลเดียวกันไว้เขียนทีหลัง เพื่อให้เราสามารถปรับแต่งคำสั่งเพิ่มเติมต่อไปในอนาคตได้ง่ายมากยิ่งขึ้นครับ

ผมจำได้ว่าครั้งแรกที่ไปค้นหาว่า CSS ย่อมาจากอะไร ซึ่งย่อมาจาก Cascading Style Sheet ผมสงสัยกับคำแรกมากๆว่ามันแปลว่าอะไร พอไปเปิดพจนานุกรมไทย-อังกฤษแทนที่จะเข้าใจมากขึ้นกลับงงกว่าเดิมที่ Cascade แปลว่า ที่ตกลงมาลดลั่นเป็นขั้นๆ สรุปว่า Cascading Style Sheet คือ แผ่นระบุสไตล์ที่ลดลั่นลงมาเป็นขั้นๆรึ? บ้าไปแล้ว สารภาพเลยว่าตอนนั้นแอบด่าฝรั่งมันอยู่ในใจว่าคิดคำน่าปวดหัวอย่างนี้มาได้ยังไง โดยหารู้ไม่ว่าเป็นหลักการที่สำคัญมากๆหลักการหนึ่งที่ผู้เขียน CSS จะต้องรู้
จริงๆแล้วหลักการ Cascade ของ Style Sheet นั้นถูกออกแบบมาเพื่อช่วยบราวเซอร์ตัดสินใจว่าจะเลือกใช้ชุดคำสั่งไหนมาแสดงบนหน้าเว็บจริงๆในกรณีที่มีคำสั่ง CSS สำหรับแท็ก html ตัวไหนตัวหนึ่งที่ซ้ำๆกัน โดยใช้หลักทีว่าคำสั่งไหนอยู่ใกล้แท็กที่ต้องการสั่งมากที่สุดให้ใช้คำสั่งนั้น ไล่จากซ้ายไปขวาและจากบนลงล่าง ซึ่งก็คือคำสั่งที่ซ้ำกันที่อยู่ขวากว่าหรือล่างกว่าคำสั่งอื่นให้ใช้คำสั่งนั้นแทนคำสั่งที่ซ้ำกันก่อนหน้านี้ เช่น

<style type=”text/css”>
h1 {
color: blue; color: pink;
}
</style>
.
.
.
<h1>รักเธอประเทศไทย</h1>

จะเห็นได้ว่ามีคำสั่งสำหรับแท็ก h1 ในส่วนของ color ซ้ำกันอยู่ ตามหลักการ Cascade เว็บบราวเซอร์จะเลือกใช้คำสั่ง color: pink ในการแสดงผลข้อความในแท็ก h1 เพราะเป็นคำสั่งที่เขียนอยู่ทางขวากว่าและอยู่ใกล้กับแท็กที่สั่งมากที่สุด

หรือ

<style type=”text/css”>
h1 {
color: pink;
color: blue;
}
</style>
.
.
.
<h1>รักเธอประเทศไทย</h1>

ในกรณีนี้เว็บบราวเซอร์จะแสดงข้อความ รักเธอประเทศไทย เป็นสีฟ้า เพราะเป็นคำสั่งที่อยู่ล่างกว่าและอยู่ใกล้กับแท็กที่สั่งมากที่สุด

อ่านมาถึงตรงนี้แล้วหลายๆท่านอาจจะสงสัยว่า แล้วเราจะเข้าใจหลักการ Cascade ไปทำไม แล้วมันช่วยให้เราเขียน CSS ให้มีประสิทธิภาพได้ยังไง จากประสบการณ์การเขียน CSS ที่ผ่านมา ผมจะอิงกับหลักการนี้เป็นอย่างมากตอนที่ต้องเข้าไปปรับแก้ CSS ที่มีคนอื่นเขียนไว้แล้ว หรือเวลาเข้าไปปรับแก้ CSS ของ Template ที่เราใช้ใน WordPress, Joomla! หรือ Drupal คือแทนที่เราจะเข้าไปแก้ค่าที่คำสั่งที่เขียนไว้แล้วแบบตรงๆตามจุดต่างๆใน CSS นั้น ที่เราต้องมานั่งจำว่าเราไปแก้ตรงจุดไหนบ้างให้วุ่นวายอีกยังเสี่ยงกับความผิดพลาดที่อาจจะเกิดขึ้นด้วย แต่ด้วยหลักการนี้ก็ทำให้เรารู้ว่าเราสามารถเขียนคำสั่งใหม่ที่ต้องการปรับเปลี่ยนไว้ที่ช่วงท้ายสุดของชุดคำสั่ง CSS ทั้งหมดได้ โดยไม่จำเป็นต้องไปแตะต้องโค๊ตที่เขียนไว้เดิมเลย เช่น

h1, h2, h3, h4 {
font-type: Arial, Helvetica;
color: #000;
}
.
.
.
.
/* code edited by me */
/* line 54 */
h1 {
    font-type: Time, “Time Roman”;
    color: #FC0;
}
h2 {
    color: #FF0;
}

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

หรือในกรณีที่เราไม่สามารถเข้าถึงไฟล์ .css ที่ลิ้งก์ หรือไม่อยากแตะต้องตัวไฟล์ .css ต้นฉบับ ด้วยหลักการ Cascade ทำให้เรารู้ว่าเราสามารถเขียนคำสั่งใหม่ที่ต้องการแก้ไขในแท็ก style ต่อจากแท็กลิ้งก์ไฟล์ .css ตัวต้นฉบับก็ได้เช่นกัน

<link href=”css/mainstylesheet.css” type=”text/css” rel=”stylesheet” media=”screen” />
<style type=”text/css”>
h1 {
    font-type: Time, “Time Roman”;
    color: #FC0;
}
h2 {
    color: #FF0;
}
</style>

หรือเราสามารถรวบรวมคำสั่งที่ต้องการปรับเปลี่ยนทั้งหมดรวมไว้ในไฟล์ .css ที่สร้างขึ้นมาใหม่ แล้วแทรกเป็นลิ้งก์ต่อท้ายลงมาจากลิ้งก์ไปที่ไฟล์ .css เดิมก็ได้เช่นกัน

<link href=”css/mainstylesheet.css” type=”text/css” rel=”stylesheet” media=”screen” />
<link href=”css/edit.css” type=”text/css” rel=”stylesheet” media=”screen” />

แต่กรณีที่ปราบเซียนที่สุดก็คือเมื่อเราต้องการปรับเปลี่ยนคำสั่ง CSS ที่เขียนเป็นแบบ inline เข้าไปในตัวแท็กเลย เช่น

<h1 style=”font-size: 46px; color:yellow;”>เรารักประเทศไทย</h1>

จะเห็นได้ว่าการเขียนคำสั่ง CSS แบบ Inline นี้เป็นแบบที่ใกล้กลับตัวแท็กที่จะสั่งมากที่สุด เราจึงไม่สามารถใช้วิธีก่อนหน้านี้ในการปรับแก้ได้เลย เพราะตามหลัก Cascade แล้ว การเขียนคำสั่ง CSS แบบนี้จะชนะทุกคำสั่งที่เราเขียนไว้ก่อนหน้านี้ทั้งหมด แต่โชคดีที่กลุ่มผู้พัฒนามาตราฐาน CSS เล็งเห็นถึงปัญหาที่อาจจะเกิดขึ้นได้ในลักษณะนี้ จึงสร้างคำสั่งพิเศษที่จะช่วยให้คำสั่งที่เราต้องการใช้จริงๆสามารถเอาชนะทุกคำสั่งที่เขียนในหลักการ Cascade ได้ ซึ่งก็คือคำสั่ง !important นั่นเอง หลักการเขียนก็ง่ายๆเพียงแค่เขียนคำสั่งนี้ไว้ต่อท้ายคำสั่งที่เราต้องการ เช่น

<style type=”text/css”>
h1 {
font-size: 72px !important;
color: blue !important;
}
</style>
.
.
.
<h1 style=”font-size: 46px; color:yellow;”>เรารักประเทศไทย</h1>

ในกรณีนี้เว็บบราวเซอร์จะเลือกใช้คำสั่งที่มีการระบุ !important อยู่ด้วยเป็นตัวหลักในการแสดงผลแทนที่คำสั่งที่เขียนแบบ inline ในแท็กที่ต้องการสั่ง การแสดงผลของข้อความ เรารักประเทศไทย จึงมีขนาด 72 พิกเซลและมีตัวอักษรสีฟ้า แต่การใช้คำสั่งพิเศษอย่าง !important นั้นผมแนะนำให้ใช้ในกรณีที่จำเป็นจริงๆเท่านั้นนะครับ เพราะมันเหมือนกับเป็นการลบล้างหลักการ Cascade ไปอย่างสิ้นเชิง ซึ่งไม่เป็นผลดีในการดูแลโค๊ตในระยะยาวอย่างแน่นอน และถ้าเราเขียน CSS ได้อย่างมีระเบียบจริงๆเราก็แทบจะไม่จำเป็นต้องใช้คำสั่งพิเศษนี้เลย

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

สำหรับหลายท่านๆที่เคยผ่านงานเขียนหน้าเว็บมาก่อน จะต้องเคยเปิด Source Code ของบางหน้าเว็บขึ้นมาดู คงจะเคยงงกับหลายๆเว็บที่เปิดดู เพราะเห็นใช้แต่แท็ก <div> เต็มไปหมด หรือที่ฝรั่งเค้าเรียกกันว่าเป็นโรค Divitus หรือโรคบ้า div คือใช้แท็ก <div> กับข้อความทุกๆอย่างทุกๆเรื่องเสมือนกับไม่มีแท็กอื่นใดใน HTML ให้ใช้อีกแล้วนอกจากแท็ก <div> ซึ่งเป็นสัญญาณบอกได้เลยว่าผู้ที่เขียนหน้าเว็บนั้นขาดความเข้าใจในการเขียนให้ถูกต้องตามหลัก Web Standards อย่างแรง

หลักการหนึ่งในการเขียนหน้าเว็บให้ถูกต้องตามหลัก Web Standards คือ คุณจะต้องเลือกใช้แท็ก HTML ที่ตรงหรือใกล้เคียงกับความหมายที่คุณต้องการจะสื่อให้กับข้อความที่อยู่ในนั้น เช่น หากข้อความนั้นเป็นพาดหัวหลักของหน้าที่มีความสำคํยที่สุดในหน้า คุณควรจะต้องใช้แท็ก <h1> ครอบข้อความนั้น หรือพาดหัวที่มีความสำคัญรองลงมาให้ใช้แท็ก <h2> หรือ <h3> ไล่เรียงตามความสำคัญของข้อความภายในหน้านั้น หรือข้อความยาวๆหลายๆย่อหน้าภายในหน้านั้นให้ใช้แท็ก <p>

การเขียนหน้าเว็บที่มีโครงสร้างการใช้แท็กที่สื่อความหมายนี้ จะมีผลดีอย่างมากกับการทำ SEO หรือ Search Engine Optimization เพราะเหล่า Search Engine ที่เข้ามาทำดัชนี(indexing)หน้าเว็บของคุณจะทำงานได้ดี เพราะรู้ว่าข้อความในส่วนไหนของหน้ามีลำดับความสำคัญอย่างไร ผลก็คือหน้าเว็บของคุณก็จะมีโอกาสถูกค้นเจอผ่านทาง Search Engine มากยิ่งขึ้น และช่วยให้ลำดับการแสดงผลการค้นหาหน้าเว็บของคุณอยู่สูงขึ้นได้ด้วย

ตรงกันข้ามกับหน้าเว็บที่เขียนโดยใช้แท็กที่ไม่คำนึงถึงความหมายของข้อความที่ปรากฏอยู่บนหน้านั้นๆเลย ทุกอย่างในหน้าถูกฝังอยู่ภายใต้แท็ก <div> ซ้อนๆลงไปเรื่อยๆ โดยลืมตระหนักไปว่าแท็ก <div> หรือย่อมาจากคำว่า division ไม่ได้สื่อความหมายใดๆนอกจากบอกว่าเป็นกลุ่มของข้อความเท่านั้น ทำให้เหล่า Search Engine ทั้งหลายไม่ได้ให้ความสำคัญพิเศษใดๆกับแท็กตัวนี้เลย มองเพียงเป็นแท็กๆหนึ่งที่ใช้สร้างเป็นกล่องเพื่อใส่ข้อความที่ต้องการเท่านั้นเอง ซึ่งหากเรานำแท็ก <div> มาใช้อย่างไม่เหมาะสม จะมีผลทำให้การที่หน้าเว็บของเราจะได้รับการสืบค้นจากบรรดา Search Engine นั้นเป็นไปได้ยาก และติดอันดับได้ไม่ดีเท่าที่ควร

หลักการใช้แท็ก <div> ให้ถูกต้องและเหมาะสม
หลักๆจะมีแค่ 2 กรณีเท่านั้นที่คุณควรใช้แท็ก <div> ในการเขียนโครงสร้างหน้าเว็บดังนี้ครับ

1. ใช้ในกรณีที่ต้องการจัดกลุ่มแท็กหลายๆแท็กของข้อความภายในหน้าให้เป็นกลุ่มๆ เพื่อให้ง่ายกับการจัดการและการสั่ง CSS
เช่น ในกรณีที่เรามีกลุ่มข่าว 2 กลุ่มอย่างตัวอย่างโค๊ตด้านล่าง

<h3>ข่าวกีฬา</h3>
<ul>
<li>อิเหนาฟันธงไทย 128ทองซีเกมส์</li>
<li>คิวบอลไทย สัปดาห์หน้าจบ ลุ้น”เอเอฟเอฟ”หนุนบอลหญิงซีเกมส์</li>
<li>”ซูเปอร์แมน”ลิ่วแบดเยอรมัน</li>
<li>“บิ๊กจา”ลั่นแชมป์ ตะกร้อ“เวิลด์ซีรีส์”</li>
<li>โปรโมท”มวยไทย” งานกีฬาต่อสู้เมืองผู้ดี</li>
</ul>

<h3>ข่าวบันเทิง</h3>
<ul>
<li>”แอฟ”อิ่มบุญที่เนปาลพร้อมหวานกับ”สงกรานต์”</li>
<li>’ภูมิ’รับขอคืนดี’แอร์’ลุ้นสัมพันธ์คืบหน้า</li>
<li>’ต้าร์’เตรียมลงละคร’เอ็กแซ็กท์’</li>
<li>”บิณฑ์”ปลื้มหนัง”ปัญญา-เรณู”แรง</li>
<li>ไร้ปัญหาหากเจอ ‘แอนนี่”ฝ้าย’รับถูกทาบถ่ายแบบคู่ ‘หนุ่ม’</li>
</ul>

จากตัวอย่างโค๊ต HTML ด้านบน เราจะเห็นได้ว่ามีกลุ่มข่าวอยู่ 2 กลุ่มคือ ข่าวกีฬาและข่าวบันเทิง ในกรณีนี้เราสามารถใช้แท็ก <div> ในการจัดให้โครงสร้างของหน้าเป็น 2 กลุ่มให้ชัดเจนได้ โดยใช้แท็ก <div> ครอบแต่ละกลุ่มดังนี้

<div>
<h3>ข่าวกีฬา</h3>
<ul>
<li><a href=”#” title=”อิเหนาฟันธงไทย 128ทองซีเกมส์”>อิเหนาฟันธงไทย 128ทองซีเกมส์</a></li>
<li><a href=”#” title=”คิวบอลไทย สัปดาห์หน้าจบ ลุ้น”เอเอฟเอฟ”หนุนบอลหญิงซีเกมส์”>คิวบอลไทย สัปดาห์หน้าจบ ลุ้น”เอเอฟเอฟ”หนุนบอลหญิงซีเกมส์</a></li>
<li><a href=”#” title=”"ซูเปอร์แมน”ลิ่วแบดเยอรมัน”>”ซูเปอร์แมน”ลิ่วแบดเยอรมัน</a></li>
<li><a href=”#” title=”‘บิ๊กจา’ลั่นแชมป์ ตะกร้อ’เวิลด์ซีรีส์’”>“บิ๊กจา”ลั่นแชมป์ ตะกร้อ“เวิลด์ซีรีส์”</a></li>
<li><a href=”#” title=”โปรโมท’มวยไทย’ งานกีฬาต่อสู้เมืองผู้ดี”>โปรโมท”มวยไทย” งานกีฬาต่อสู้เมืองผู้ดี</a></li>
</ul>
</div>

<div>
<h3>ข่าวบันเทิง</h3>
<ul>
<li><a href=”#” title=”‘แอฟ’อิ่มบุญที่เนปาลพร้อมหวานกับ’สงกรานต์’”>”แอฟ”อิ่มบุญที่เนปาลพร้อมหวานกับ”สงกรานต์”</a></li>
<li><a href=”#” title=”‘ภูมิ’รับขอคืนดี’แอร์’ลุ้นสัมพันธ์คืบหน้า”>’ภูมิ’รับขอคืนดี’แอร์’ลุ้นสัมพันธ์คืบหน้า</a></li>
<li><a href=”#” title=”‘ต้าร์’เตรียมลงละคร’เอ็กแซ็กท์’”>’ต้าร์’เตรียมลงละคร’เอ็กแซ็กท์’</a></li>
<li><a href=”#” title=”‘บิณฑ์”ปลื้มหนัง’ปัญญา-เรณู”แรง”>”บิณฑ์”ปลื้มหนัง”ปัญญา-เรณู”แรง</a></li>
<li><a href=”#” title=”ไร้ปัญหาหากเจอ ‘แอนนี่”ฝ้าย’รับถูกทาบถ่ายแบบคู่ ‘หนุ่ม’”>ไร้ปัญหาหากเจอ ‘แอนนี่”ฝ้าย’รับถูกทาบถ่ายแบบคู่ ‘หนุ่ม’</a></li>
</ul>
</div>

การจัดแบ่งกลุ่มโดยใช้แท็ก <div> ดังตัวอย่างข้างต้นนี้ นอกจากจะเป็นการใช้แท็ก <div> ที่ถูกต้องตรงตามวัตถุประสงค์ของตัวแท็กเองแล้ว ยังช่วยให้การดูแลจัดการหลังจากนี้ง่ายขึ้น และที่สำคัญเรายังสามารถเขียนคำสั่ง CSS ให้เฉพาะเจาะจงกับกลุ่มที่ต้องการได้มากยิ่งขึ้นด้วยการเพิ่มค่า attribute ของ id เข้าไปได้อีกด้วย

<div id=”sport_news”>
<h3>ข่าวกีฬา</h3>
<ul>
<li><a href=”#” title=”อิเหนาฟันธงไทย 128ทองซีเกมส์”>อิเหนาฟันธงไทย 128ทองซีเกมส์</a></li>
<li><a href=”#” title=”คิวบอลไทย สัปดาห์หน้าจบ ลุ้น”เอเอฟเอฟ”หนุนบอลหญิงซีเกมส์”>คิวบอลไทย สัปดาห์หน้าจบ ลุ้น”เอเอฟเอฟ”หนุนบอลหญิงซีเกมส์</a></li>
<li><a href=”#” title=”"ซูเปอร์แมน”ลิ่วแบดเยอรมัน”>”ซูเปอร์แมน”ลิ่วแบดเยอรมัน</a></li>
<li><a href=”#” title=”‘บิ๊กจา’ลั่นแชมป์ ตะกร้อ’เวิลด์ซีรีส์’”>“บิ๊กจา”ลั่นแชมป์ ตะกร้อ“เวิลด์ซีรีส์”</a></li>
<li><a href=”#” title=”โปรโมท’มวยไทย’ งานกีฬาต่อสู้เมืองผู้ดี”>โปรโมท”มวยไทย” งานกีฬาต่อสู้เมืองผู้ดี</a></li>
</ul>
</div>

<div id=”entertainment_news”>
<h3>ข่าวบันเทิง</h3>
<ul>
<li><a href=”#” title=”‘แอฟ’อิ่มบุญที่เนปาลพร้อมหวานกับ’สงกรานต์’”>”แอฟ”อิ่มบุญที่เนปาลพร้อมหวานกับ”สงกรานต์”</a></li>
<li><a href=”#” title=”‘ภูมิ’รับขอคืนดี’แอร์’ลุ้นสัมพันธ์คืบหน้า”>’ภูมิ’รับขอคืนดี’แอร์’ลุ้นสัมพันธ์คืบหน้า</a></li>
<li><a href=”#” title=”‘ต้าร์’เตรียมลงละคร’เอ็กแซ็กท์’”>’ต้าร์’เตรียมลงละคร’เอ็กแซ็กท์’</a></li>
<li><a href=”#” title=”‘บิณฑ์”ปลื้มหนัง’ปัญญา-เรณู”แรง”>”บิณฑ์”ปลื้มหนัง”ปัญญา-เรณู”แรง</a></li>
<li><a href=”#” title=”ไร้ปัญหาหากเจอ ‘แอนนี่”ฝ้าย’รับถูกทาบถ่ายแบบคู่ ‘หนุ่ม’”>ไร้ปัญหาหากเจอ ‘แอนนี่”ฝ้าย’รับถูกทาบถ่ายแบบคู่ ‘หนุ่ม’</a></li>
</ul>
</div>

2. ใช้ในกรณีที่ไม่มีแท็กใดใน HTML สามารถสื่อความหมายของข้อความนั้นในหน้าได้จริงๆ
เช่น ถ้าเราต้องการเพิ่มลิ้งก์ให้เข้าไปอ่านต่อหน้าในตรงด้านล่างของรายการข่าว หากเราใช้แท็ก <p> ก็คงไม่ถูกความหมายเพราะข้อความในนั้นไม่ได้เป็นข้อความที่ยาวเป็นย่อหน้า จะใช้เป็นแท็กตระกูล <h1> ถึง <h6> ก็คงไม่เข้าทีเพราะไม่ใช่พาดหัวที่สำคัญของหน้า เพราะฉะนั้นทางออกที่ดีที่สุดคือการใช้แท็ก <div> ดังนี้

<div id=”entertainment_news”>
<h3>ข่าวบันเทิง</h3>
<ul>
<li><a href=”#” title=”‘แอฟ’อิ่มบุญที่เนปาลพร้อมหวานกับ’สงกรานต์’”>”แอฟ”อิ่มบุญที่เนปาลพร้อมหวานกับ”สงกรานต์”</a></li>
<li><a href=”#” title=”‘ภูมิ’รับขอคืนดี’แอร์’ลุ้นสัมพันธ์คืบหน้า”>’ภูมิ’รับขอคืนดี’แอร์’ลุ้นสัมพันธ์คืบหน้า</a></li>
<li><a href=”#” title=”‘ต้าร์’เตรียมลงละคร’เอ็กแซ็กท์’”>’ต้าร์’เตรียมลงละคร’เอ็กแซ็กท์’</a></li>
<li><a href=”#” title=”‘บิณฑ์”ปลื้มหนัง’ปัญญา-เรณู”แรง”>”บิณฑ์”ปลื้มหนัง”ปัญญา-เรณู”แรง</a></li>
<li><a href=”#” title=”ไร้ปัญหาหากเจอ ‘แอนนี่”ฝ้าย’รับถูกทาบถ่ายแบบคู่ ‘หนุ่ม’”>ไร้ปัญหาหากเจอ ‘แอนนี่”ฝ้าย’รับถูกทาบถ่ายแบบคู่ ‘หนุ่ม’</a></li>
</ul>
<div><a href=”#” title=”">อ่านต่อหน้าใน</a></div>
</div>

การใช้แท็ก <div> ในกรณีอื่นที่นอกเหนือจากนี้อาจจะเสี่ยงเข้าข่ายใช้แท็กไม่ถูกต้องตามหลัก Web Standards และถ้าใช้มากเกินไปก็อาจจะถึงขั้นเป็นโรค Divitus เลยก็ได้นะครับ

เมื่อพูดถึงแท็ก <div> แล้วจะไม่พูดถึงแท็ก <span> ก็ยังไงอยู่ แท็กทั้งสองตัวที่ว่านี้มีลักษณะการใช้ใกล้เคียงกัน และมีจุดอ่อนที่เหมือนกันก็คือโดยตัวแท็กเองไม่ได้สื่อความหมายอะไรทั้งสิ้น จะมีต่างกันก็ตรงที่แท็ก <span> ใช้ตอนที่ต้องการเสริมรายละเอียดของข้อความภายในแท็กแบบ Block ในกรณีที่ไม่มีแท็กแบบ Inline อย่างอื่นให้ใช้แล้ว หรือในกรณีที่ไม่ต้องการสื่อความหมายใดๆแค่อยากปรับเปลี่ยนการแสดงผลให้แตกต่างจากส่วนอื่นภายในข้อความเดียวกัน เช่น

<h3>ข่าวบันเทิงอัพเดทล่าสุด</h3>

ถ้าเราต้องการให้คำว่า “อัพเดทล่าสุด” มีความหมายที่สำคัญมากกว่าคำว่า “ข่าวบันเทิง” ที่อยู่ด้านหน้า เราอาจจะใช้แท็ก <strong> ครอบเข้าไปดังนี้

<h3>ข่าวบันเทิง<strong>อัพเดทล่าสุด</strong></h3>

การทำเช่นนี้นอกจากจะช่วยสื่อให้คำว่า “อัพเดทล่าสุด” มีความสำคัญมากขึ้นแล้ว ยังทำให้เราสามารถสั่งให้ข้อความที่อยู่ภายในแท็ก <strong> มีการแสดงผลที่แตกต่างจากข้อความที่เหลือได้ผ่านทาง CSS ได้อีกด้วย

แต่ถ้าเราแค่อยากทำให้คำว่า “อัพเดทล่าสุด” ที่ต่อท้ายมีการแสดงผลที่แตกต่างจากคำว่า “ข่าวบันเทิง” ด้านหน้า โดยไม่ต้องการสื่อความหมายพิเศษอะไร ให้เราใช้แท็ก <span> ครอบเข้าไปแทนดังนี้ครับ แล้วใช้คำสั่ง CSS ให้ข้อความในแท็ก <span> มีการแสดงผลที่เปลี่ยนไปได้เลยครับ

<h3>ข่าวบันเทิง<span>อัพเดทล่าสุด</span></h3>

ทั้งแท็ก <div> และแท็ก <span> ก็เหมือนกับแท็กอื่นๆใน HTML คือถ้าใช้ถูกต้องและเหมาะสมก็จะเกิดประโยชน์ แต่ถ้าเลือกใช้ไม่ถูกทางก็จะเกิดโทษครับ หลังจากนี้หวังว่าเพื่อนๆที่จะสามารถเลือกใช้แท็กทั้งสองได้ถูกต้องมากยิ่งขึ้นนะครับ

ก่อนอื่นเราต้องรู้ก่อนว่าบราวเซอร์แต่ละตัวที่เราใช้ๆกันอยู่ ไม่ว่าจะเป็น Firefox, Internet Explorer, Chrome หรือ Safari ต่างก็มี Style Sheet หรือ CSS ที่เป็นค่าเริ่มต้นของตัวเอง เพื่อใช้ในกรณีที่หน้าเว็บที่เปิดไม่มี Style Sheet ของตัวเองในการแสดงผลบนหน้าเว็บบราวเซอร์ ซึ่งก็เหมือนๆกับหน้าเว็บที่เรายังไม่ได้ใส่ CSS เพื่อช่วยในการแสดงผลนั่นเอง

แต่เนื่องจากบราวเซอร์แต่ละยี่ห้อจะมีค่าเริ่มต้นของคำสั่ง CSS ที่ไม่เท่ากัน โดยเฉพาะค่า margin และ padding สำหรับทุกแท็ก HTML ที่จะมีค่าต่างกันเล็กน้อย ซึ่งจะมีผลกระทบอย่างมากตอนที่เราต้องการจัดหน้า หลายๆคนอาจจะเคยเจอปัญหาว่าเราเขียนคำสั่ง CSS ให้จัดหน้าดูใช้ได้แล้วบนบราวเซอร์ตัวหนึ่ง แต่พอไปเปิดกับบราวเซอร์อีกตัวการแสดงกลับผิดเพี้ยนไป เหตุผลส่วนหนึ่งเป็นเพราะว่าเราไม่ได้ทำการ Reset ค่าคำสั่ง CSS ก่อนนั่นเอง วิธีป้องกันปัญหาที่เกิดขึ้นคือ เขียนคำสั่ง CSS ของเราเพื่อให้ค่า margin และ padding ของทุกบราวเซอร์ให้มีค่าเป็นศูนย์ หรือการ Reset ค่าคำสั่งของ CSS

ในขั้นเริ่มต้นเราอาจจะ Reset ค่าคำสั่งของ CSS แบบง่ายๆได้โดยใช้คำสั่งแบบเหมารวมทั้งหมดเลยโดยใช้ Selector ตัวดอกจันทร์ (*)

* {
margin: 0;
padding: 0;
}

*สังเกตว่าค่าคำสั่งที่เป็นศูนย์เราจะไม่ใส่หน่วยกัน เพราะไม่ว่าจะเป็นหน่วยอะไรเมื่อมีค่าเป็นศูนย์ ยังไงก็มีค่าเท่ากันเหมือนกันหมดอยู่ดี

ตอนแรกอาจจะดูเหมือนกับจะเป็นทางออกที่สะดวกดี เพราะเขียนง่ายๆสั้นๆ แต่วิธีนี้ผมไม่อยากแนะนำให้ใช้วิธีเท่าไหร่เพราะเป็นการสั่งแบบเหมารวม ซึ่งทำให้กระทบกับทุกแท็ก HTML ที่เราใช้ประกอบในหน้าทั้งหมดไม่ว่าจะเป็นแท็กแบบ Block หรือ Inline แต่ในทางปฏิบัติจริงๆค่า margin และ padding จะมีผลกระทบจริงๆกับจัดหน้าเฉพาะในส่วนของแท็กแบบ Block เท่านั้น เราจึงไม่มีความจำเป็นต้องเหมาแท็กแบบ Inline เข้าไปด้วย นอกจากนี้หากเรา Reset ค่า margin และ padding ของแท็กแบบ Inline ไปด้วย ต่อไปเราก็จะต้องมาเสียเวลานั่งเขียนค่าคำสั่งเหล่านี้ให้กับแท็กแบบ Inline ที่เราใช้ทั้งหมดอีกโดยไม่จำเป็น

ค่าคำสั่งของ CSS สำหรับการ Reset ค่า margin และ padding ให้เป็นศูนย์ที่ผมแนะนำให้สั่งเฉพาะกับแท็กแบบ Block เท่านั้นดังนี้ครับ

html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td {
margin: 0;
padding: 0;
}

ปกติเราจะวางคำสั่งในการ Reset ของ CSS ไว้ในส่วนบนสุดของชุดคำสั่ง CSS ทั้งหมดที่เราจะเขียนเสมอ เพื่อให้คำสั่ง CSS ที่เราจะเขียนต่อจากนี้ได้รับผลจากคำสั่ง Reset ทั้งหมด คุณสามารถก็อปโค๊ตข้างต้นไปวางบนสุดของ CSS ที่คุณเขียนได้เลยครับ

จะเห็นได้ว่าเมื่อค่า margin และ padding ของทุกแท็กแบบ Block เป็นศูนย์ เราก็จะเขียน CSS ให้แสดงผลได้ดั่งใจกับทุกบราวเซอร์มากยิ่งขึ้น ปัญหาเรื่องการจัดวางหน้าก็จะน้อยลงไปมากๆครับ

ผมเชื่อว่าทุกคนที่หัดเขียน CSS ใหม่ๆจะต้องมีอาการมึนๆงงๆกับเจ้าคำสั่ง margin กับ padding กันทุกคน และผมก็เป็นหนึ่งในนั้น กว่าผมจะเข้าใจความแตกต่างและใช้ได้ถูกต้อง ก็ต้องใช้งมโข่งอยู่นานเหมือนกัน แต่ถ้าคุณได้อ่านหลักงานง่ายๆที่ผมอธิบายในบล็อกนี้จะรู้เลยว่าไม่ได้ยากอะไรเลย(จริงๆ)

การที่เราจะเข้าใจความแตกต่างระหว่างคำสั่ง margin และ padding เราต้องเข้าใจรูปแบบการสร้างกล่องหรือ Box Model ของ CSS ซะก่อนครับ โดยจะใช้ภาพกรอบรูปบนฝาผนังประกอบคำอธิบาย จะได้เข้าใจกันได้ง่ายๆครับ

จากในรูปจะเห็นได้ว่าพื้นที่นอกกรอบรูปทั้งหมดเป็นพื้นที่ของ margin, กรอบรูป เป็นพื้นที่ของ border, พื้นที่ว่างระหว่างกรอบรูปถึงตัวรูปคือ padding และตัวรูปคือพื้นที่ของเนื้อหาในกล่อง

margin

เราจะใช้คำสั่ง margin เมื่อเราต้องเลื่อนตำแหน่งของกรอบรูปไปตามพื้นที่บนผนัง เช่นถ้าต้องการขยับกรอบรูปไปทางซ้าย 100 พิกเซล ก็ต้องใช้คำสั่ง margin-right: 100px เพื่อดันจากที่ขวาไป 100 พิกเซล หรือ ถ้าต้องการขยับกรอบรูปลงมาด้านล่าง 20 พิกเซล ก็ให้ใช้คำสั่ง margin-top: 20px เพื่อดันจากด้านบนลงมา 20 พิกเซล ดังตัวอย่างในรูป

สังเกตได้ว่าตำแหน่งของกรอบรูปเปลี่ยนไปตามการใช้คำสั่ง margin โดยที่ตำแหน่งของรูปภายในกรอบรูปยังเหมือนเดิม

padding

ส่วนคำสั่ง padding เราจะใช้ต่อเมื่อเราต้องการเคลื่อนย้ายตำแหน่งภายในกรอบรูป เช่นแทนที่จะให้รูปอยู่ตรงกลางกรอบรูป เราอยากเลื่อนตัวรูปไปอยู่ด้านขาวล่างของกรอบรูป ให้เราใช้คำสั่ง padding-top: 20px และ padding-right: 50px เพื่อดันรูปให้ลงมา 20 พิกเซล และดันรูปไปทางซ้าย 50 พิกเซลตามลำดับ ดังแสดงในรูป

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

และที่เราจะต้องรู้อีกอย่างหนึ่งคือพื้นที่การแสดงของคำสั่ง background ทั้งหมดจะกินพื้นที่อยู่บนทั้ง padding และตัวรูปหรือเนื้อหาทั้งหมด

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

แต่คำสั่ง padding ไม่สามารถทำได้ เพราะยังไงรูปก็ต้องอยู่ในกรอบรูปเสมอไม่สามารถทะลุออกนอกกรอบรูปได้ แต่ตัวกรอบรูปทั้งหมดสามารถเคลื่อนย้าย

สรุปง่ายๆคือสำหรับหลักในการเลือกใช้คำสั่ง margin และ padding คือ เมื่อคุณต้องการตั้งค่าระยะความห่างภายนอกกล่อง(หรือกรอบรูป)ให้ใช้คำสั่ง margin แต่หากคุณต้องการตั้งค่าระยะความห่างภายในกล่อง(หรือกรอบรูป)ให้ใช้คำสั่ง padding ครับ