แท็กและแอตทริบิวต์ HTML ที่เราควรงดและหันมาใช้ CSS แทน

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

  • งดใช้ <font> เพื่อควบคุมการแสดงผลของตัวอักษร
  • งดใช้ <b> หรือ <i>  เพื่อควบคุมความหนาและความเอียงของตัวอักษร
  • งดใช้ <table> สำหรับกำหนดโครงสร้างของหน้าเว็ป ให้เราใช้เพื่อแสดงข้อมูลที่เป็นตารางจริงๆ ครับ เช่น ตารางคะแนน ตารางข้อมูล เป็นต้น
  • งดใช้แอตทริบิวต์ ของ <body> เพื่อกำหนดการแสดงผลของหน้าเพจ
  • อย่าใช้ <br> ฟุ่มเฟือยเพื่อสร้างบรรทัดใหม่ หันมาใช้ <p> แล้วกำหนด margin ใน CSS ดีกว่า
Advertisements

การทำให้ IE8 รู้จักแท็กของ HTML5

HTML5 มีการเพิ่มแท็กหลายตัว เช่น  article  section  nav  aside  สำหรับมาร์คอัพเนื้อหา แท็ก video audio สำหรับแทรกไฟล์วีดีโอหรือไฟล์เสียงเป็นต้น ซึ่งถ้าเป็นบราวเซอร์ตัวใหม่ๆ ที่สนับสนุน HTML5 อยู่แล้วการแทรกแท็กพวกนี้เข้าไปใน HTML การแสดงผลก็เป็นไปตามที่เราออกแบบไว้ อย่างไม่มีปัญหา

สำหรับยูสเซอร์ที่ใช้ IE8 หรือต่ำกว่า มันจะไม่เข้าใจแท็กต่างๆ เหล่านี้ เราจึงจำเป็นต้องเพิ่มโค๊ดพิเศษลงไป ก่อนที่เราจะปิดแท็ก </ head> ดังนี้ครับ

<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js">
</script>
<![endif]-->

โดยแท็กพิเศษที่เราเพิ่มลงไปนี้เราเรียกว่า “Internet Explorer Conditional Comment” หรือ IECC  เพื่อให้บราวเซอร์ที่เป็น IE เวอร์ชั่นที่น้อยกว่า 9 ลงไป(เวอร์ชั่น 6-8) แทรกจาวาสคริปต์บางส่วนเพื่อให้ “รู้จัก” แท็ก HTML5 (สคริปต์นี้คือ html5shiv ครับ ) ส่วนบราวเซอร์ IE9 ขึ้นไปหรือบราวเซอร์ค่ายอื่นจะมองเป็นคอมเมนต์ ซึ่งจะไม่ประมวลผลในส่วนนี้ครับ

ซึ่งคำว่า “รู้จัก” ในที่นี้หมายถึงทำให้ บราวเซอร์เหล่านั้นรู้ว่าแท็กเหล่านั้นจะพิมพ์หรือแสดงผลออกมาอย่างไรเท่านั้นนะครับ(เรียกว่ารู้จักแต่ไม่ได้เข้าใจ) เนื่องจากบางอย่างบราวเซอร์ไม่มีความสามารถเพียงพอครับ ผมขอยกตัวอย่างเช่น หากเราแทรกแท็ก video เข้าไป IE8 จะไม่สามารถเล่นไฟล์วีดีโอที่เราแทกมาได้ครับ