คัมภีร์เทพ IT 5 เคล็ดลับของ HTML ที่ไม่ค่อยมีใครพูดถึง

5 เคล็ดลับของ HTML ที่ไม่ค่อยมีใครพูดถึง

03-มี.ค.-21

คัมภีร์เทพ IT

5 เคล็ดลับของ HTML ที่ไม่ค่อยมีใครพูดถึง

สำหรับ Web Developers แล้ว เชื่อว่าทุกคนคงมีพื้นฐานของ HTML มาแล้วเป็นอย่างดี และแม้ว่า Web Developers จำนวนมากจะใช้งาน HTML แทบจะทุกวัน แต่หลายคนก็อาจไม่ค่อยได้ใช้งาน Features บางอย่างของ HTML ซึ่งในบทความนี้จะมาแนะนำ 5 เคล็ดลับของ HTML ที่ไม่ค่อยมีใครพูดถึง ให้ Developers ได้รู้จักและลองนำไปใช้งานกัน

1. Lazy Loading Image

ทำ Lazy Loading ให้รูปภาพของคุณ จะสามารถช่วยเพิ่ม Performance และ Responsive ใน Site ของคุณได้

การทำ Lazy Loading จะช่วยป้องกันการ Load รูปภาพต่าง ๆ ที่ยังไม่จำเป็นต้องแสดงผลบน Screen ณ ตอนนั้น อย่างไรก็ตามเมื่อคุณ Scroll Down ลงมาหรือ Scroll ไปใกล้ถึงรูปภาพเหล่านั้น รูปภาพเหล่านั้นก็จะเริ่ม Load ขึ้นมา

กล่าวอีกนัยหนึ่งก็คือ รูปภาพจะถูก Load เมื่อ User ทำการ Scroll ไปถึงรูปภาพเหล่านั้น แต่รูปอื่น ๆ จะไม่ถูก Load ขึ้นมา

วิธีการนี้สามารถทำได้อย่างง่ายดายด้วย HTML ธรรมดา ๆ

สิ่งที่คุณต้องทำก็คือ ให้เพิ่ม loading= “lazy” Property ให้กับ Image Files ของคุณ

หลังจากเพิ่ม Property เข้าไปแล้ว Image Element ของคุณจะมีลักษณะดังนี้:

คุณสามารถดูข้อมูลเชิงลึกเกี่ยวกับ Performance จากเคล็ดลับนี้โดยใช้ Lighthouse Tools ของ Google

2. Input Suggestions

การได้รับ Suggestions ที่เป็นประโยชน์และตรงประเด็นเมื่อคุณพยายาม Search สิ่งต่าง ๆ ถือเป็นสิ่งที่มีประโยชน์อย่างมาก

Input Suggestions และ Autocomplete ถือเป็นเรื่องปกติธรรมดาสำหรับปัจจุบัน คุณจะสังเกตเห็นได้ใน Site ต่าง ๆ อย่าง Google และ Facebook

คุณสามารถใช้ JavaScript เพื่อเพิ่ม Input Suggestions ด้วยการ Set ค่า Event Listener ใน Input Field แล้วทำการ Match คำที่คุณค้นหากับ Predefined Suggestions

อย่างไรก็ตาม HTML จะช่วยให้คุณสามารถแสดงชุดของ Pre-Defined Suggestions ได้ด้วยการใช้ <datalist> tag

โปรดจำไว้ว่า ID Attribute ของ Tag นี้จะต้องเหมือนกับ Input Fields List Attribute

3. Picture Tag

เชื่อว่า คุณน่าจะเคยประสบปัญหาเกี่ยวกับรูปภาพที่ไม่ยอมปรับขนาด (Scaling) ให้เหมาะสมตามที่ควรจะเป็น

สิ่งนี้มักจะเกิดขึ้นเมื่อคุณพยายามสร้าง Gallery Sites หรือใช้รูปภาพขนาดใหญ่ รวมทั้งให้มันแสดงเป็น Thumbnail Image

เมื่อคุณเปลี่ยนความกว้างของ Viewport คุณอาจจะสังเกตเห็นว่า รูปภาพบางรูปไม่ได้ปรับขนาดให้ใหญ่ขึ้นและเล็กลงตามที่ควรเป็น

แต่โชคดีที่ HTML เปิดโอกาสให้ Developers สามารถแก้ไขปัญหานี้ได้อย่างง่ายดาย ด้วยการใช้ <picture> tag ซึ่งช่วยให้คุณสามารถเพิ่มรูปภาพได้หลาย ๆ รูปที่เหมาะกับความกว้างขนาดต่าง ๆ แทนที่จะปรับขนาด(ให้ใหญ่ขึ้นหรือเล็กลง) ได้เพียงขนาดเดียว

Code ของคุณ จะมีลักษณะดังนี้:

อย่างที่คุณเห็นว่า มีการระบุความกว้างขั้นต่ำของแต่ละรูปภาพเอาไว้

Tag นี้จะมีความคล้ายคลึงกับ <audio> และ <video> tag

4. Base URL

นี่อาจเป็นหนึ่งใน Tag ที่หลายคนชอบใช้ เมื่อต้องสร้าง Index ของ Sites หรือ Sitemap

Tag นี้มีประโยชน์อย่างมากเมื่อคุณมี Anchor Tags จำนวนมากที่ Redirect ไปยัง URL ที่กำหนดและ URL ทั้งหมดเริ่มต้นด้วย Base Address เดียวกัน

ตัวอย่างเช่น หากคุณต้องการระบุ URL ไปยัง Twitter Handles ของ Elon Musk และ Bill Gates โดยมี URL เริ่มต้น หรือ Domain ที่เหมือนกัน แต่สิ่งที่ตามมาจะเป็น Respective IDs ของพวกมัน

โดยทั่วไป คุณอาจต้องวาง Link ถึง 2 ครั้ง ด้วยชื่อ Domain เดียวกัน

อย่างไรก็ตาม HTML มี <base> tag ซึ่งจะช่วยให้คุณสามารถ Set ค่า Base URL ดังที่แสดงด้านล่างนี้:

จาก Code ด้านบน จะเป็นการสร้างรูปภาพที่ Redirect ไปที่ “https://www.twitter.com/elonmusk” และ Anchor Tag ที่ Redirect ไปที่ “https://www.twitter.com/billgates”

<base> tag จะต้องมี "href" หรือ Target Attribute อยู่

5. Document Refresher

หากคุณต้องการ Redirect User ไปยัง Page อื่นหลังจากที่ไม่มีการใช้งานเป็นระยะเวลาหนึ่งหรือจะให้ Redirect ในทันที คุณสามารถทำได้อย่างง่ายดายด้วย HTML ธรรมดา ๆ โดยไม่จำเป็นต้องใช้อย่างอื่นเลย

คุณอาจสังเกตเห็น Feature นี้ได้เมื่อคุณเปิด Site บาง Site แล้วมีข้อความ " You will be redirected in 5 seconds" แสดงขึ้นมา

คุณสามารถทำสิ่งนี้ได้ด้วยการใช้ HTML ผ่านการใช้ <meta> tag และ Set ค่า http-equiv= “refresh” ในนั้น

ใน content Property ข้างต้น จะระบุจำนวนวินาที หลังจากที่เกิดการ Redirect

เป็นที่น่าสังเกตว่า แม้ Google จะอ้างว่า การ Redirect รูปแบบนี้ก็คล้าย ๆ กับการ Redirect ในรูปแบบอื่น แต่เราก็ไม่ควรใช้การ Redirect ประเภทนี้โดยไม่จำเป็น

ดังนั้น ขอแนะนำให้ใช้เฉพาะกรณีที่จำเป็น อย่างเช่น การ Redirect Page หลังจากที่ไม่มีการใช้งานมาระยะเวลาหนึ่ง

ที่มา: https://javascript.plainenglish.io/

รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert

อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ

บทความล่าสุด

บทความ IT เจ๋งๆ

5 เคล็ดลับของ HTML ที่ไม่ค่อยมีใครพูดถึง

ประเภทบทความ