10 HTML ทิปที่คุณอาจยังไม่รู้

นักพัฒนาเว็บส่วนใหญ่ย่อมมีพื้นฐานและความรู้ทางด้าน HTML กันมาบ้างไม่มากก็น้อย เพราะเป็นภาษาหลักในการพัฒนาเว็บเบื้องต้นเลยก็ว่าได้ เรามีเคล็ดลับของภาษา HTML ที่คุณอาจจะยังไม่รู้มาก่อนที่จะมาแนะนำกัน เพื่อที่จะช่วยเสริมพลังการพัฒนาโค้ด HTML ให้เจ๋งขึ้น

ภาษา HTML คืออะไร?

HTML ย่อมาจาก HyperText Markup Language เป็นภาษาคอมพิวเตอร์ที่ใช้สร้างโครงสร้างพื้นฐานของเว็บเพจ เปรียบเสมือนโครงกระดูกของเว็บไซต์ กำหนดเนื้อหา รูปแบบ และองค์ประกอบต่างๆ บนหน้าเว็บ

ภาษา HTML ถูกพัฒนาโดย Tim Berners-Lee นักวิทยาศาสตร์คอมพิวเตอร์ชาวอังกฤษ ในปี ค.ศ. 1989 ขณะทำงานที่ CERN (European Organization for Nuclear Research) เดิมทีถูกออกแบบมาเพื่อใช้ในการแลกเปลี่ยนข้อมูลและเอกสารระหว่างนักวิจัยภายในองค์กร

ปี ค.ศ. 1989 Berners-Lee เสนอระบบ Enquire ต้นแบบของ HTML
ปี ค.ศ. 1990 Berners-Lee เขียนโปรแกรมเบราเซอร์ WorldWideWeb เวอร์ชันแรกบน NeXT workstation
ปี ค.ศ. 1991 เอกสาร HTML Tag เวอร์ชันแรกเผยแพร่ ประกอบไปด้วยแท็ก HTML เพียง 18 แท็ก
ปี ค.ศ. 1992 CERN ประกาศให้ HTML เป็นสาธารณสมบัติ

หน้าที่หลักของ HTML

– กำหนดโครงสร้างเนื้อหาบนเว็บเพจ แบ่งส่วนหัว หัวข้อ ย่อหน้า ข้อความ ฯลฯ
– แทรกไฟล์มัลติมีเดีย รูปภาพ วิดีโอ เสียง ฯลฯ
– สร้างลิงก์เชื่อมโยงระหว่างหน้าเว็บ
– กำหนดรูปแบบข้อความ สี ขนาด ตัวอักษร ฯลฯ
– เพิ่มตาราง ฟอร์ม รายการ ฯลฯ

ข้อดีของภาษา HTML

– เรียนรู้และใช้งานง่าย
– เข้ากันได้กับเว็บบราวเซอร์หลากหลาย
– สามารถเขียนร่วมกับภาษาอื่นๆ เช่น CSS และ JavaScript
– มีมาตรฐานสากล รองรับการพัฒนาเว็บไซต์ที่ยั่งยืน

ตัวอย่างโค้ด HTML

1. Mark

เริ่มกันด้วย Tag mark เราจะใช้ mark เพื่อเน้นข้อความครับ ค่าเริ่มต้นจะเป็นไฮไลท์สีเหลืองบนข้อความ

ตัวอย่างโค้ด

<p>เราคือ <mark>Web Programmer</mark> </p>

2. Details และ Summary

คำสั่งนี้คล้ายๆ กับ accordions กดเปิดปิดการแสดงข้อมูลภายในได้

ตัวอย่างโค้ด

<details>

<summary>ลองคลิกที่ข้อความนี้ดู</summary>

<p>สวัสดีครับ</p>

<p>ผมคือคนไทย</p>

</details>

สามารถคลิกที่ข้อความที่มีลูกศรด้านหน้าเพื่อเปิดกล่องข้อความด้านในอีกที

3. Contact links

คำสั่งการสร้างลิงก์ที่เกี่ยวกับการติดต่อแบบง่ายๆ เลยครับ ไม่ว่าจะอีเมล์ โทร และ SMS

ตัวอย่างโค้ด

<!– Email –>

<a href=”mailto:[email protected]”> Email </a>

<br>

<!– Phone –>

<a href=”tel:+1234567890″> Call me </a>

<br>

<!– SMS –>

<a href=”sms:+1234567890″> SMS </a>

4. Lazy loading

คำสั่งนี้จะเป็นการเพิ่มแอตทริบิวต์การโหลดแบบ Lazy Loading ให้กับองค์ประกอบสื่อ ซึ่งจะเพิ่มประสิทธิภาพการทำงานของหน้าโดยเลื่อนการโหลดองค์ประกอบสื่อออกไปจนกว่าผู้ใช้จะเลื่อนไปที่องค์ประกอบเหล่านั้น และจะช่วยในเรื่องคะแนน Page Speed ด้วย

ตัวอย่างโค้ด

<img src=’myimage.png’ loading=’lazy’ alt=’alternative text’>

5. Video Controls

คำสั่ง Controls poster จะทำให้เราเพิ่มรูปภาพมาแสดงผลก่อนที่ผู้ใช้จะกดเล่นวีดีโอ

ตัวอย่างโค้ด

<video controls poster=”img.png” width=”600″>

<source src=”video.mp4″ type=”video/mp4 />

</video>

6. สร้างลิงก์สำหรับ Download โดยเฉพาะ

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

ตัวอย่างโค้ด

<a href=”file.pdf” download=“document.pdf”> Download File</a>

หรือ

<a href=”/images/img.jpg” download=“photo”>

<img src=”/images/img.jpg” alt=”…” width=”600″ height=”400″>

</a>

7. Picture

แท็ก <picture> ช่วยให้นักพัฒนาเว็บมีความยืดหยุ่นมากขึ้นในการระบุรูปภาพ การใช้ <picture> ส่วนใหญ่เพื่อการแสดงผลแบบ Responsive แทนที่จะมีรูปภาพเดียวที่ขยายหรือลดขนาดตามความกว้างของ Viewport แต่เราสามารถออกแบบรูปภาพหลายรูปเพื่อให้เติมเต็ม Viewport ของเบราว์เซอร์ได้สวยงามยิ่งขึ้น

องค์ประกอบ <picture> ประกอบด้วยสอง Tag คือ source 1 Tag ขึ้นไปและ img อีกหนึ่ง Tag

ตัวอย่างโค้ด

<picture>

<source srcset=”01.webp” media=”(min-width: 600px)”>

<source srcset=”02.webp” media=”(min-width: 400px)”>

<img src=”03.webp” />

</picture>

หรือ

<picture>

<source media=”(min-width:600px)” srcset=”01.webp”>

<source media=”(min-width:400px)” srcset=”02.webp”>

<img src=”03.webp” alt=”…” style=”width:auto;”>

</picture>

ตัวอย่างบราเซอร์กว้างขนาด 600 px ขึ้นไป จะเรียกใช้ภาพ 01

ตัวอย่างบราเซอร์กว้างขนาดน้อยกว่า 600px จะเรียกใช้ภาพ 02

ตัวอย่างบราเซอร์กว้างขนาดน้อยกว่า 400px จะเรียกใช้ภาพ 03

8. Translate

คำสั่งนี้เป็นการบอกให้บราวเซอร์ไม่ต้องมีการแปลภาษาซึ่งจะทำให้ไม่สามารถใช้ฟีเจอร์การแปลของบราวเซอร์ได้

ตัวอย่างโค้ด

<p translate=”no”>

ประโยคนี้ไม่ต้องแปลนะจ๊ะ

</p>

9. start attribute

Start attribute ช่วยให้สามารถระบุหมายเลขเริ่มต้นสำหรับ List Items ได้

ตัวอย่างโค้ด

<ol start=“10”>

<li>สมุทรสาคร</li>

<li>เชียงใหม่</li>

<li>สงขลา</li>

</ol>

10. Reversed attribute

เป็นการใช้แอตทริบิวต์ที่ย้อนกลับ List Items สามารถกลับลำดับของหมายเลขรายการได้

ตัวอย่างโค้ด

<ol reversed>

<li>สมุทรสาคร</li>

<li>เชียงใหม่</li>

<li>สงขลา</li>

</ol>

ภาษา HTML เป็นเพียงภาษาพื้นฐาน ยังมีภาษาอื่นๆ อีก เช่น CSS และ JavaScript ที่ใช้สำหรับการออกแบบ เพิ่มลูกเล่น และความซับซ้อนให้กับเว็บไซต์ และทั้งหมดนี้ก็เป็น HTML Tips ที่เพื่อนๆ สามารถนำไปประยุกต์ใช้ในการพัฒนาเว็บได้เลยนะครับ สำหรับโอกาสหน้าเราจะหาทีเด็ดอะไรมานำเสนออีกนั้น อย่าลืมติดตามกันนะจ๊ะ