5 ข้อที่คนมักพลาดเวลาเขียน HTML และ CSS

เมื่อเริ่มเรียนรู้การเขียนโค้ดด้วย HTML ก็มักจะพบกับข้อผิดพลาดบ่อยๆ ไม่ว่าคุณจะเป็นมือใหม่หรือเคยเขียนโค้ดมาแล้วหลายปี บทความนี้จะมานำเสนอข้อผิดพลาดเพียงเล็กน้อย 5 ข้อที่คุณอาจจะหลงลืมไปจนทำให้โปรเจกต์พัฒนาเว็บไซต์ของคุณใช้เวลาในการพัฒนานานกว่าที่คิด
Summary - Skooldio Blog | 5 ข้อที่คนมักพลาดเวลาเขียน HTML และ CSS

5 ข้อที่คนมักพลาดเวลาเขียน HTML และ CSS

ใส่ Doctype ผิด

ลืม “Alt attribute”

ใช้ และ เพื่อเน้นข้อความใน HTML

ลืม Closing tag

ลืมใส่ ;

1.ใส่ DOCTYPE ผิด

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

2.ลืม “alt attribute”

เมื่อเราต้องการเพิ่มรูปลงไปบนหน้าเว็บไซต์ในการเขียนโค้ด <img> “Alt attribute” เป็นสิ่งสำคัญที่ไม่ควรมองข้าม ประโยชน์ของการใส่ alt ลงไป คือ เมื่อรูปภาพที่คุณนำมาใส่เกิดปัญหา alt จะแสดงผลออกมาเป็นข้อความแทน ทำให้ทราบว่ารูปภาพที่หายไปนั้นเป็นภาพอะไร และยังเป็นประโยชน์ให้กับผู้ที่มีความบกพร่องทางสายตาที่จะใช้ Screen Reader เข้ามาช่วยในการอ่านอีกด้วย

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

alt attribute - Skooldio Blog | 5 ข้อที่คนมักพลาดเวลาเขียน HTML และ CSS

3.ใช้ และ เพื่อเน้นข้อความใน HTML

หลายคนมักจะสับสนกับการใช้ element ที่ให้ผลลัพธ์ออกมาเหมือนกัน เช่น และ ที่ให้ผลลัพธ์ออกมาเป็น ตัวเอียง หรือ และ ให้ผลลัพธ์ออกมาเป็น ตัวหนา

ในการเลือกใช้ element ต่าง ๆ คุณควรแยกระหว่าง Content และ Style ออกจากกันหากคุณต้องการที่จะให้ความหมาย และความสำคัญกับคำนั้นมาก ๆ คุณควรเลือกใช้ หรือ มากกว่าที่จะใช้ หรือ เพราะการใช้ element นี้ ไม่ได้ให้ความหมายใดๆ เป็นเพียงแค่การตกแต่งเท่านั้น ซึ่งหากต้องการตกแต่งข้อความ แนะนำว่าควรไปทำใน CSS เพื่อรวบรวม Style ไว้ด้วยกัน

4.ลืม Closing tag

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

5.ลืมใส่ ;

การใส่ ; (Semicolon) เป็นการจบ Property หรือ CSS Declaration เพื่อไปยังคำสั่งถัดไป หลายครั้งที่เรามักมองข้ามสิ่งเล็กๆ นี้ จะทำให้เว็บบราวเซอร์ไม่สามารถแยกคำสั่งได้

Semicolon - Skooldio Blog | 5 ข้อที่คนมักพลาดเวลาเขียน HTML และ CSS

จะเห็นว่า ถ้าลืมใส่ ”;” เว็บบราวเซอร์ของเราจะไม่สามารถอ่านค่าได้ ไม่รู้ว่าค่าที่เรากรอกไปคือค่าอะไร

====================

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

Skooldio เชื่อว่าการฝึกเขียนโค้ดบ่อยๆ และคอยอัปเดตความรู้อย่างต่อเนื่อง จะช่วยให้โปรเจกต์ที่พัฒนาอยู่ออกมาปังอย่างแน่นอน แถมยังช่วยให้เพื่อนๆ ได้เข้าใจและเรียนรู้ในเครื่องมือที่ได้ใช้ทำโปรเจกต์มากขึ้นอีกด้วย

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

ขอแนะนำ Web Development Bootcamp รุ่นที่ 1 หลักสูตรสำหรับผู้ที่อยากเป็น Web Developer หรือ Front End Developer มืออาชีพ

Web Development Bootcamp by Skooldio

หลักสูตร 4 เดือน รูปแบบ Hybrid (Online+Onsite) ที่จะช่วยพัฒนาคุณให้ก้าวสู่การเป็น Front-End Developer โดยเน้นด้านการ “พัฒนาเว็บไซต์” อย่างเข้มข้น ไม่ว่าคุณจะเป็นคนย้ายสาย หรือ ไม่มีพื้นฐานเริ่มจาก 0 ก็สามารถมาอัปสกิลให้เก่งขึ้น ทำงานได้จริง

หรือ เรียนในรูปแบบคอร์สออนไลน์กับคอร์สเหล่านี้…