11 แท็ก HTML ที่ไม่ธรรมดาเพื่อเพิ่มทักษะการพัฒนาเว็บของคุณ

ประเด็นที่สำคัญ

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

รวมคำอธิบายประกอบที่เด่นชัดโดยใช้ป้ายกำกับที่กำหนด เพื่อเน้นคำศัพท์ สำนวน หรือการค้นพบทางออนไลน์ที่สำคัญภายในเนื้อหาเว็บไซต์ของคุณ

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

ในฐานะบุคคลที่มีความเชี่ยวชาญในการพัฒนาเว็บ จำเป็นต้องมีความเข้าใจที่ครอบคลุมเกี่ยวกับองค์ประกอบ HTML พื้นฐาน เช่น สำหรับการกำหนดส่วน สำหรับการจัดรูปแบบข้อความ และ ![]() สำหรับการฝังรูปภาพภายในหน้าเว็บ อย่างไรก็ตาม ความสามารถของ HTML ขยายไปไกลเกินกว่าโครงสร้างพื้นฐานเหล่านี้

ด้วยการใช้แท็กพิเศษเหล่านี้ เราสามารถขยายขีดความสามารถของเว็บแอปพลิเคชัน ทำให้แตกต่างจากแท็กอื่นๆ ในสนาม และสร้างประสบการณ์ผู้ใช้ที่โดดเด่นยิ่งขึ้น

และ

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

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

ผู้ใช้เว็บไซต์ของคุณสามารถเลือกข้อมูลสรุปได้อย่างง่ายดายเพื่อเข้าถึงข้อมูลที่ถูกปกปิดด้วยการคลิกเพียงครั้งเดียว

 <details>
  <summary>Click to reveal more information</summary>

  <p>This content will be hidden by default but will appear when the user
  clicks the summary.</p>
</details>

การใช้แท็กในเนื้อหาทำให้สามารถปกปิดข้อความ รหัส หรือข้อมูลอื่นๆ จำนวนมาก ส่งผลให้อินเทอร์เฟซมีความคล่องตัวและเป็นมิตรกับผู้ใช้ นอกจากนี้ วิธีการนี้อาจเพิ่มพูนความชำนาญในด้านการออกแบบส่วนต่อประสาน

องค์ประกอบ HTML ช่วยให้ผู้ใช้สามารถเน้นส่วนใดส่วนหนึ่งของเนื้อหาได้โดยการปรับเปลี่ยนรูปลักษณ์ เมื่อใช้องค์ประกอบนี้ เว็บเบราว์เซอร์โดยทั่วไปจะกำหนดเฉดสีเหลืองที่โดดเด่นเป็นพื้นหลังสำหรับข้อความที่ล้อมรอบ ซึ่งจะทำให้ผู้ชมมุ่งความสนใจไปที่ส่วนที่ทำเครื่องหมายไว้

ฟังก์ชันนี้มีประโยชน์อย่างยิ่งในสถานการณ์ที่ผู้ใช้ต้องการเน้นคำเฉพาะเจาะจง วลีสำคัญ หรือผลการค้นหาภายในเนื้อหาของหน้าเว็บ

 <p>
  You can use the <mark>mark</mark> tag to highlight important words or
  phrases.
</p> 

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

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

แท็ก HTML ใช้เพื่อระบุข้อความที่ถูกลบในเนื้อหาหน้าเว็บ ซึ่งแสดงข้อความที่มีลักษณะขีดทับ

 <p>
  This product is <s>out-of-stock</s> currently available at a discounted
  price!
</p> 

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

องค์ประกอบ เป็นองค์ประกอบ HTML อเนกประสงค์ที่สามารถใช้เพื่อเติมเต็มเนื้อหาที่เขียนด้วยข้อมูลวันที่และเวลาที่มีความหมาย

การใช้

 <p>
  The Declaration of Independence was signed on
  <time datetime="1776-07-04">July 4, 1776</time>.
</p> 

การใช้องค์ประกอบ ช่วยให้เนื้อหาของคุณมีความเป็นระเบียบมากขึ้น ซึ่งจะเป็นการเพิ่มการเข้าถึงสำหรับผู้ใช้ในวงกว้าง รวมถึงผู้ที่ใช้เทคโนโลยีช่วยเหลือ เช่น โปรแกรมอ่านหน้าจอ

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

องค์ประกอบ HTML เป็นวิธีแก้ปัญหาสำหรับการเน้นเนื้อหาเฉพาะภายในหน้าเว็บ ซึ่งต้องแยกความแตกต่างจากส่วนอื่นๆ ของหน้าตามการพิจารณาด้านภาษาศาสตร์ เมื่อใช้แท็กนี้ นักพัฒนาเว็บสามารถมั่นใจได้ว่าข้อความที่กำหนดนั้นแสดงผลอย่างเหมาะสมและแสดงตามกฎเฉพาะภาษาที่จำเป็น

 <p>
  <bdi>5,000</bdi> people attended the conference.
</p> 

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

, ,

ในบริบทของการพิมพ์แบบเอเชียตะวันออก ซึ่งมักใช้ตัวบ่งชี้การออกเสียง เช่น คำอธิบายประกอบแบบฟูริกานะหรือทับทิมเพื่อช่วยในการออกเสียง การใช้องค์ประกอบ HTML เช่น และ มีความเกี่ยวข้องเป็นพิเศษ นอกจากนี้ อาจใช้แท็ก เพื่อจุดประสงค์ในการชี้แจงเพิ่มเติม

 <p>
  I'm learning
  <ruby>漢<rt>かん</rt></ruby>字<rp>(</rp><rt>Kanji</rt><rp>)</rp>.
</p> 

ตัวอย่างปัจจุบันประกอบด้วยองค์ประกอบที่มีตัวอักษรจีน “漢” (คันจิ) อยู่ภายใน ขณะที่องค์ประกอบคู่ของมันห่อหุ้มการถอดความการออกเสียงของ “かん” ที่สอดคล้องกัน สำหรับเบราว์เซอร์ที่ไม่สามารถประมวลผลคำอธิบายประกอบทับทิมได้ คอมโพเนนต์ที่รวมไว้จะทำหน้าที่เป็นทางเลือกเสริมในวงเล็บ

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

 <p>
  This is an example of a long url: https://www.example.org/<wbr>with/a/long/path/and/a?query=string.
</p> 

ในกรณีที่กำลังพิจารณาอยู่ URL ที่ขยายจะรวมรหัส HTML ที่แสดงเป็น"“ซึ่งให้สิทธิ์แก่เว็บเบราว์เซอร์ในการพิจารณาแบ่งส่วน URL ออกเป็นสองบรรทัดเมื่อจำเป็น ซึ่งจะช่วยรักษาการจัดเรียงภาพขององค์ประกอบข้อความที่อยู่ติดกัน

และ

เมื่อใช้สัญกรณ์วิทยาศาสตร์หรือคณิตศาสตร์ คุณสามารถใช้แท็ก HTML และ เพื่อสร้างข้อความตัวห้อยและตัวยกตามลำดับ องค์ประกอบเหล่านี้มีประโยชน์อย่างยิ่งเมื่อทำงานกับสมการที่ซับซ้อนหรือการแสดงสัญลักษณ์ที่ต้องการการปรับแต่งการพิมพ์เฉพาะเพื่อให้อ่านง่ายและแม่นยำ

 <p>
  The chemical formula for water is H<sub>2</sub>O,
  and the Pythagorean theorem is
  a<sup>2</sup> \+ b<sup>2</sup> = c<sup>2</sup>.
</p> 

ตัวอย่างนี้ใช้การใช้ประโยชน์จากองค์ประกอบ HTML เพื่อแสดงค่าตัวยกของ “2” ภายในส่วนหัว H2 ในขณะที่แท็ก ถูกใช้เพื่อนำเสนอการยกกำลังภายในทฤษฎีบทพีทาโกรัส

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

การใช้ค่าแอตทริบิวต์ของ"value”,“min"และ"max"อาจสร้างค่าการวัดปัจจุบัน ค่าต่ำสุดที่อนุญาต และค่าสูงสุดที่เป็นไปได้ ตามลำดับ

 <meter value="75" min="0" max="100">75%</meter> 

องค์ประกอบมาตรวัดในกรณีนี้หมายถึงเกรดการทดสอบที่เทียบเท่ากับ 75 เปอร์เซ็นต์

องค์ประกอบ ใน HTML ทำหน้าที่เป็นโซลูชันที่มีประสิทธิภาพและหลากหลายเมื่อสร้างกล่องโต้ตอบ ภาพซ้อนทับ หรือโมดอลที่แสดงลักษณะพฤติกรรมที่ต้องการ องค์ประกอบนี้ช่วยให้สามารถใช้แอตทริบิวต์"เปิด"เพื่อแสดงกล่องโต้ตอบตามค่าเริ่มต้นเมื่อโหลดหน้าเว็บ องค์ประกอบ ให้แนวทางที่คล่องตัวในการสร้างอินเทอร์เฟซผู้ใช้ด้วยป๊อปอัปโมดอลที่ทั้งใช้งานได้จริงและดึงดูดสายตา

 <dialog open>
  <p>This is a dialog box!</p>
  <button>Close</button>
</dialog> 

เมื่อโหลดหน้าเว็บ กล่องโต้ตอบพื้นฐานที่แสดงข้อความและแท็บเลื่อนจะปรากฏขึ้น ซึ่งเป็นผลมาจากการมีอยู่ของคุณสมบัติ"เปิด"สำหรับการโต้ตอบที่ซับซ้อนมากขึ้น เราอาจใช้ JavaScript เพื่อปรับแต่งเนื้อหาและการซ้อมรบของกล่องโต้ตอบดังกล่าว

การใช้องค์ประกอบ HTML ทำให้สามารถจัดเรียงและจัดหมวดหมู่ของการเลือกที่เกี่ยวข้องภายในอินเทอร์เฟซแบบเลื่อนลง อำนวยความสะดวกในการนำทางที่ดีขึ้นและเพิ่มประสิทธิภาพการเลือกตัวเลือก

องค์ประกอบ ทำหน้าที่เป็นคอนเทนเนอร์สำหรับการรวมองค์ประกอบ ที่เกี่ยวข้อง ซึ่งซ้อนอยู่ภายในองค์ประกอบ

ด้วยการใช้การจัดกลุ่มหรือการจัดประเภทที่มองเห็นได้ เมนูแบบเลื่อนลงสามารถนำเสนอตัวเลือกอย่างมีประสิทธิภาพในลักษณะที่เรียงลำดับและนำทางได้ง่าย

องค์ประกอบ จำเป็นต้องรวมแอตทริบิวต์ label ซึ่งกำหนดชื่อเล่นหรือส่วนหัวของชุดตัวเลือกที่เกี่ยวข้อง

องค์ประกอบ สามารถรองรับองค์ประกอบ ได้หลายรายการในฐานะลูกของมัน ซึ่งรวมกันเป็นตัวแทนของทางเลือกต่างๆ ที่ครอบคลุมโดยกลุ่ม

ตัวอย่างเช่น:

 <select>
  <optgroup label="Asia">
    <option value="kr">South Korea</option>
  </optgroup>

  <optgroup label="Europe">
    <option value="de">Germany</option>
  </optgroup>
</select> 

“เอเชีย” และ “ยุโรป” ภายในแต่ละภูมิภาคเหล่านี้ มีหมวดหมู่ย่อยที่แสดงโดยแท็กเฉพาะประเทศ

เพิ่มความสามารถของคุณในการพัฒนาเว็บ

การใช้แท็ก HTML ที่ด้อยค่าในคลังพัฒนาเว็บของคุณสามารถปรับปรุงความสามารถของคุณในด้านนี้ได้อย่างมาก แม้ว่าแท็กเหล่านี้อาจไม่ได้รับการยอมรับอย่างกว้างขวาง แต่ก็มีฟังก์ชันที่มีประโยชน์ซึ่งปรับให้เหมาะกับสถานการณ์เฉพาะ

การรวมแอตทริบิวต์เหล่านี้เข้ากับความเชี่ยวชาญไม่เพียงเพิ่มการมีส่วนร่วมของผู้ใช้และที่พัก แต่ยังเร่งกระบวนการพัฒนาเว็บไซต์อีกด้วย แม้ว่าพวกเขาอาจดูแปลกในแวบแรก แต่อิทธิพลของพวกเขาต่อเส้นทางของคุณในฐานะนักพัฒนาเว็บมีความสำคัญสูงสุด