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

Business

Talent ยุคใหม่หายาก หรือเพราะผู้นำไม่เข้าใจ Digital เรียนรู้จากประสบการณ์จริงกับ คุณเหม็ง-สมโภชน์ แห่ง KT Venture

ผู้ใหญ่หลายๆ คนบอกเด็กรุ่นใหม่ไม่ทน ทำงานไม่อึด แป๊ปๆ ก็ลาออก แต่ถ้าได้ทำงานกับเขา จะรู้ว่าเขาอยู่ในยุคที่ Productivity Lead อะไรที่ไม่ Efficient หรือมันมีทางที่ทำให้ดีกว่า เด็กกลุ่มนี้จะมองหา Solution นั้นๆ ...
Business

องค์กรทำ Agile ไม่สำเร็จเพราะอะไร?

ไม่ว่าจะเป็นองค์กรหรือใครก็ตามที่ให้ความสนใจกับการทำงานที่มีประสิทธิภาพมากขึ้น ปรับตัวได้เร็วขึ้น น่าจะคุ้นเคยกับคำว่า Agile แนวคิดการทำงานรูปแบบใหม่ที่เป็นที่พูดถึงกันอย่างกว้างขวางตลอดหลายปีมานี้ เริ่มต้นจากแนวคิดการทำงานรูปแบบใหม่ของกลุ่มนักพัฒนาซอฟต์แวร์ ทุกวันนี้การทำงานแบบ Agile สามารถนำไปปรับใช้ได้กับแทบทุกส่วนงานที่ไม่ได้เป็นแค่เรื่องของทีมพัฒนา Digital Product เท่านั้น ไม่ว่าจะเป็นงานด้าน HR, Sales, ...

More in:Business

Business

Digital Transformation คืออะไร? เริ่มยังไง? ทำไมไม่สำเร็จสักที?

Digital Transformation เป็นหนึ่งในคำที่ถูกพูดถึงมากที่สุดในแวดวงธุรกิจมาโดยตลอด องค์กรใหญ่ๆ แทบทุกแห่งมีบริษัทที่ปรึกษาวิ่งเข้าวิ่งออก บางที่ดึงเอาคนเก่งๆ ของทั้งบริษัทมารวมตัวกันสร้างทีมเฉพาะกิจ บางที่ถึงกับมีการแต่งตั้ง Chief Transformation Officer ขึ้นมาดูเรื่องนี้เป็นการพิเศษ และเมื่อมีวิกฤติโควิดเข้ามา ทุกธุรกิจก็ต่างพากันเร่งเปลี่ยนแปลงด้วยความหวังว่านี่คือสิ่งที่จะพาให้องค์กรรอดพ้นวิกฤติครั้งนี้ไปได้ Q: ...
becoming freshket blog cover Business

Becoming: กว่าจะมาเป็น Freshket เจาะขั้นตอนสร้าง Product ที่คนทำธุรกิจควรรู้

สำหรับคนที่สนใจในเรื่องของการเริ่มต้นธุรกิจในยุคดิจิทัล หรือเรื่องการสร้าง Digital Product น่าจะสนใจว่ากว่าที่ธุรกิจจะเริ่มต้นจากการเห็นปัญหาและโอกาส ฟอร์มทีมสร้าง Product และออกไปทดลองกับตลาด ปรับแก้ฟีเจอร์ เปลี่ยนโมเดลธุรกิจครั้งแล้วครั้งเล่าจนได้ Product ที่ตอบโจทย์ตลาดและการเติบโตของธุรกิจ ต้องผ่านขั้นตอนการเรียนรู้อะไรบ้าง เส้นทางของ Freshket ...
Productivity

ทำความรู้จัก Design Sprint รูปแบบการทำงานเพื่อสร้างนวัตกรรมจาก Google Ventures

ในโลกของแฟชั่นเชื่อว่าใครหลายๆ คนต้องรู้จักแบรนด์อย่าง H&M ในฐานะ 1 ในแบรนด์ชั้นนำของโลก ที่พยายามสร้างประสบการณ์ที่ดีที่สุดให้แก่ลูกค้าในการเลือกซื้อ โดยใช้เทคโนโลยีต่างๆ เข้ามาช่วย 1 ในนั้นคือการร่วมมือกับ Google ในการพัฒนาใช้ Google Assistant ...
Behavioural Science คืออะไร Business

Behavioural Science คืออะไร มารู้จักกับเครื่องมือออกแบบพฤติกรรมกันดีกว่า

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

Comments are closed.