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

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

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

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

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

    1. ใส่ Doctype ผิด
    2. ลืม “Alt attribute”
    3. ใช้ <b> และ <i> เพื่อเน้นข้อความใน HTML
    4. ลืม Closing tag
    5. ลืมใส่ ;

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.ใช้ <b> และ <i> เพื่อเน้นข้อความใน HTML 

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

ในการเลือกใช้ element ต่าง ๆ คุณควรแยกระหว่าง Content และ Style ออกจากกันหากคุณต้องการที่จะให้ความหมาย และความสำคัญกับคำนั้นมาก ๆ คุณควรเลือกใช้ <em> หรือ <strong> มากกว่าที่จะใช้ <i> หรือ <b> เพราะการใช้ 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-basic - Skooldio Blog | 5 ข้อที่คนมักพลาดเวลาเขียน HTML และ CSS

(ดูรายละเอียดเพิ่มเติมได้ที่นี่)

หรือ คนที่มีประสบการณ์กับการเขียนโค้ดมาแล้วก็สามารถมาทวนความจำไปด้วยกันได้

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

(ดูรายละเอียดเพิ่มเติมได้ที่นี่

โดย คุณกี้ – ทัศน์พล รัชตะสัมฤทธิ์ Software Engineer, Skooldio และ Lead Front End Developer พัฒนา Learn Anywhere


References

https://xopixel.com/10-html-coding-mistakes/ https://web.csulb.edu/divisions/students/dss/accessibility/web/webaim-12comm.html
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong

 

You may also like

Progressive Web App คืออะไร
Technology

Progressive Web Apps คืออะไร?

แค่เขียน Apps อย่างเดียวคงไม่พอ! เมื่อ Users เลือกดาวน์โหลด Apps เท่าที่จำเป็นเพื่อประหยัดพื้นที่ใช้งาน จากสถิติการใช้งานของ Users ที่ “ไม่ตัดสินใจติดตั้ง Apps” เพราะขั้นตอนที่ยุ่งยากและเลือกติดตั้งเฉพาะ Apps ...
blogcover-OKRs Google
Business

ตัวอย่างการเขียน OKRs ที่ทำให้ Google Chrome กลายเป็นเว็บเบราว์เซอร์อันดับหนึ่งของโลก

ตัวอย่างการเขียน OKRs ของ Google Chrome เขียน OKRs อย่างไร ถึงแซง Internet Explorer เป็นเว็บเบราว์เซอร์อันดับหนึ่งของโลกได้? ทุกวันนี้เราใช้เว็บเบราว์เซอร์อะไรอยู่? แน่นอนว่าคนส่วนใหญ่แทบจะตอบได้ทันทีว่าเป็น Google ...

More in:Business

what is okrs blog cover Business

OKRs คืออะไร ทำไมถึงสำคัญกับโลกธุรกิจทุกวันนี้

หลายคนอาจเคยได้ยินคำว่า OKRs กันมาบ้างในช่วงหลายปีนี้ คนที่ทำงานในองค์กรต่างๆ อาจมีโอกาสได้ลองใช้แนวคิดนี้ในการทำงาน แต่แน่ใจแล้วหรือว่าคุณเข้าใจว่า OKRs คืออะไร มีที่มาอย่างไร แล้วทำไมถึงเป็น Framework ที่องค์กรอย่าง Google และอีกหลายองค์กรชั้นนำในทุกวันนี้ให้ความสำคัญ พร้อมนำไปปรับใช้อย่างแพร่หลาย ...
Business

ทำความรู้จัก Voxel Art งานกราฟิก 3D ยอดฮิตที่สร้างได้ตั้งแต่ Item, Character ยันเมือง

หลายๆ คนอาจจะคุ้นหน้าคุ้นตากับงานภาพสไตล์ Pixel Art หรืองานภาพ Computer Graphic แบบ 8bit ที่ทำให้เรานึกถึงอดีตกันมาบ้างแล้ว (ถ้าใครนึกไม่ออกก็ลองคิดถึงภาพ Arcade Game อย่าง Pac-Man ...
burnout-boreout-brownout Business

Burnout, Boreout, Brownout 3 ภาวะเบื่องานที่คนยุคนี้เผชิญ

ในชีวิตคนทำงานคงปฏิเสธไม่ได้ว่าหลายๆ ครั้งต้องเผชิญกับช่วงที่ตัวเองรู้สึกหมดไฟ (Burnout) ในงานที่ทำอยู่ หรือรู้สึกเบื่อหน่ายกับงานที่มี ไม่ว่าจะเป็นเพราะความเครียดจากงาน สภาแวดล้อม หรือแม้แต่เพื่อนร่วมงานกันเอง จนหลายๆ ครั้งจบลงที่การลาออก เพื่อย้ายไปทำงานที่ใหม่ หรือในอีกกรณีก็อาจตกอยู่ในภาวะซึมเศร้าไปได้เลย Burnout, Boreout, Brownout, ...

Comments are closed.