7 รูปแบบการเขียน HTML แบบเก่าที่ควรหลีกเลี่ยงในตอนนี้

1. ใช้แอตทริบิวต์ type ในแท็ก และ

สมัยก่อนมักใช้แบบ type="text/css" หรือ type="text/javascript" แต่ตอนนี้ใช้เพียง หรือ ก็เพียงพอแล้ว

2. ใช้ Javascript เพื่อสร้างเมนู accordion

สามารถใช้ และ เพื่อทำได้ง่าย ๆ ด้วย HTML อย่างเดียว

3. ใช้ และ แค่ครั้งเดียวต่อหนึ่งหน้า

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

4. ใช้ frameborder="0" เพื่อลบเส้นขอบของ ``

การใช้ frameborder="0" ไม่ได้รับการแนะนำอีกต่อไปใน HTML5 ควรใช้ CSS แทน เช่น ตั้งค่า iframe { border: none; }

5. รองรับ IE8

ไม่ใช่แค่ Internet Explorer 8 แต่ควรเลิกรองรับ Explorer ทุกเวอร์ชัน Microsoft ยุติการสนับสนุน IE 11 ไปแล้วตั้งแต่เดือนมิถุนายน 2022 ดังนั้นเราไม่จำเป็นต้องคำนึงถึงการรองรับ IE อีกต่อไป

6. ใช้แท็ก heading แบบสุ่ม

ควรใช้แท็ก heading ตามโครงสร้างของหน้า และเรียงลำดับแบบลดหลั่นกัน หากแท็กล่าสุดคือ ถัดไปก็ควรใช้ หรือ ``

7. ใส่ ="1" ให้กับ Boolean attribute ของแท็ก HTML

Boolean attribute ของแท็ก HTML เพียงเขียนชื่อแอตทริบิวต์ก็จะถูกตั้งค่าเป็น true แล้ว ตัวอย่างเช่น `` เมื่อมีแอตทริบิวต์ disabled อยู่ ก็หมายถึง true ในตัวอยู่แล้ว จึงไม่จำเป็นต้องใส่ ="1" เพิ่ม

[progdesigner]

เหตุผลที่ html5 ออกมาก็เพราะก่อนหน้านั้นมีการใช้ HTML โดยไม่คำนึงถึงแท็กครับ เพราะ HTML เป็น markup language ผมเลยคิดว่าสำคัญที่จะต้องมองและจัดการมันในฐานะภาชนะที่บรรจุข้อมูล และสำหรับ type เวลาจะใช้ type อื่นอย่าง TypeScript (TS) ก็ควรระบุให้ชัดเจนอยู่แล้ว เลยไม่น่าจำเป็นต้องเน้นเรื่องการละไว้มากเกินไปนัก

[progdesigner]

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

ยกตัวอย่างเช่น ถ้าเก็บข้อมูลของ title ไว้ ถึงจะใช้ h1, h2, h3 ก็จริง แต่ถ้าตั้ง class เป็น title จะชัดเจนและดีกว่า

แต่การตั้งชื่อ class ในลักษณะอย่าง `` แบบนี้ไม่ใช่ทิศทางที่ดีนัก การกำหนดเป็น title แล้วไปจัดการด้วย CSS จะทำให้หน้าเว็บมีอายุการใช้งานยาวนานต่อไปได้มากกว่า

[savvykang]

ถ้าเป็นหน้าเว็บที่มีโครงสร้างค่อนข้างเรียบง่ายและมีจุดประสงค์เพื่อถ่ายทอดข้อมูล การใช้ semantic tag และ class ก็เป็นเรื่องธรรมชาติ อย่างไรก็ตาม ไม่ใช่ผู้ใช้ HTML/CSS ทุกคนที่จะเขียนแค่หน้าเว็บเท่านั้น ในกรณีที่โครงสร้างซับซ้อนและเลี่ยงไม่ได้ที่จะต้องใช้มาร์กอัปเพื่อองค์ประกอบด้านภาพ เช่น เว็บแอปพลิเคชัน การใช้ชื่อ class แบบทั่วไปก็จะทำให้เกิดการชนกันของชื่อ นั่นจึงเป็นเหตุผลว่าทำไมฟีเจอร์อย่าง View Encapsulation ของ Angular จึงมีความจำเป็น

[readiz]

ยังไงซะคนส่วนใหญ่ก็ใช้ React กันอยู่แล้ว ดังนั้นประเด็นสำคัญคือทำคอมโพเนนต์ให้ดี มากกว่าจะไปยึดติดกับ class

[ndrgrd]

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

[tribela]

<script type="text/javascript> //<![CDATA[ js codes... //]]> </script>

โค้ดชวนคิดถึงเลยนะ

[koxel]

สมัยก่อนมีช่วงหนึ่งที่เบราว์เซอร์ยังรองรับแท็ก script กับแท็ก style ได้ไม่สมบูรณ์ เลยต้องครอบโค้ด CSS และโค้ด JS ด้วยคอมเมนต์ HTML เพื่อให้มันถูกมองเป็นคอมเมนต์
น่าจะเป็นช่วงยุค 90 ถึง 2000s..
คิดว่าน่าจะยังมีคนเขียนโค้ดแบบนั้นอยู่บ้าง..

[ndrgrd]

นอกจาก CSS กับ JS แล้ว เหมือนจะเผื่อภาษาหรืออย่างอื่นไว้ด้วยหรือเปล่านะครับ

[kayws426]

แทนที่จะเป็น JavaScript มันเคยเป็น VBScript มาก่อน บน IE น่ะ

[ragus]

การคอมเมนต์จะทำงานถูกต้องไหมนะ???

[carnoxen]

ไม่จำเป็นต้องใช้แอตทริบิวต์ type ของ <script> ตอนใส่โมดูลหรือครับ?

<script type="module" src="home.js"></script>  

[ragus]

ไม่จำเป็นต้องมี text/css หรือ text/javascript แต่ module น่าจะยังจำเป็นตามที่คุณว่าไว้

[roxie]

เทคนิคการตั้งค่าแท็ก h1 เป็น block: none ก็ดูเหมือนว่าจะเคยเห็นมานานแล้ว ไม่แน่ใจว่ายังใช้ได้อยู่ไหมนะ.. อยู่ ๆ ก็ทำให้นึกถึงสมัยก่อนขึ้นมาเลย 555 ขอบคุณสำหรับสรุปที่กระชับครับ!