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

อัปสกิล Data เปลี่ยน HR ธรรมดาสู่ “People Analyst” | Skooldio Blog
Data

อัปสกิล Data เปลี่ยน HR ธรรมดาสู่ “People Analyst”

ในแต่ละบริษัท ฝ่าย Human Resource ถือเป็นอีกทีมหนึ่งที่เป็นกุญแจสำคัญสู่ความสำเร็จขององค์กร เพราะถือเป็นฝ่ายที่ดูแลทรัพยากรที่สำคัญที่สุดขององค์กร นั่นก็คือ “ทรัพยากรมนุษย์” เพราะฉะนั้นหากการตัดสินใจของทีม HR เป็นการตัดสินใจด้วยความรู้สึก หรือใช้ Gut Feeling อยู่ละก็ ...

More in:Business

รู้จักอาชีพสุดฮอตปี 2022 Sale Analyst ตำแหน่งที่ทุกบริษัทตามหา | Skooldio Blog Data

รู้จักอาชีพสุดฮอตปี 2022 Sales Analyst ตำแหน่งที่ทุกบริษัทตามหา

ทุกคนเคยสังเกตไหมว่า  Sales  ที่ประสบความสำเร็จไม่ได้เสนอขายสินค้าให้กับทุกคนที่เดินผ่าน  ไม่ได้โทรหาทุกคนที่เขามีเบอร์โทรศัพท์ และไม่ได้ส่งอีเมลหาลูกค้าทุกคน เพราะอะไรเขาถึงปล่อยโอกาสการเข้าถึงลูกค้าไปแบบนั้น?  จริงๆ แล้ว การเสนอขายสินค้าหรือบริการนั้น ถ้าทำแบบไม่มีแบบแผนก็คงจะเหนื่อย และสิ่งที่แย่ไปกว่านั้นคือ อาจจะขายได้ไม่คุ้มเหนื่อยก็ได้  เพราะเวลา และแรงของ Sales ...
5 Business Metrics ที่คนทำธุรกิจต้องรู้| Skooldio Blog Business

5 Business Metrics ที่คนทำงานสายธุรกิจต้องรู้!!

คนทำงานสายธุรกิจยุคใหม่ ไม่ว่าจะเป็นตำแหน่งปฏิบัติการอย่าง Sales, Marketing, Analyst หรือจะเป็นตำแหน่งใหญ่ๆ อย่าง  Project Manager  ถ้าอยากจะทำผลงานให้ได้ดีเหนือคู่แข่ง ก็ต้องมีการใช้ Data ในการวางแผนกลยุทธ์ และวัดผลอยู่ตลอดเวลา เพื่อให้ไม่พลาดทุกโอกาสสำคัญทางธุรกิจ  ...
ทำไมคนทำงาน Excel ควรรู้จัก Power BI? | Skooldio Blog Data

ทำไมคนทำงาน Excel ควรรู้จัก Power BI?

ถ้าพูดถึงโปรแกรมที่ขาดไม่ได้สำหรับคนทำงานในยุคปัจจุบัน Spreadsheet คงเป็นหนึ่งในนั้น และต้องมีชื่อของ Excel ออกมาอย่างแน่นอน เพราะ Excel เป็นโปรแกรมที่สามารถทำได้สารพัดประโยชน์ ตั้งแต่เก็บข้อมูลในตาราง วิเคราะห์ข้อมูล ไปจนถึงการทำ Report และ Dashboard ...
Excel vs Google Sheets เครื่องมือไหน เหมาะกับงานคุณ? | Skooldio Blog Data

Excel vs Google Sheets เครื่องมือไหน เหมาะกับงานคุณ?

โปรแกรม Spreadsheets หรือโปรแกรมที่ใช้ทำงานแบบตาราง เป็นอะไรที่ขาดไม่ได้เลยสำหรับคนทำงาน ซึ่งสองโปรแกรมหลักๆ ที่เป็นที่นิยมใช้กันทั่วโลก ก็คือ Microsoft Excel และ Google Sheets แม้จะเป็นโปรแกรมที่หน้าตาคล้ายๆ กัน แต่ก็มีความแตกต่างกันอยู่พอสมควร ...

Comments are closed.