องค์ประกอบอื่นๆ ของข้อความในบรรทัด

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

ตัวอย่างโค้ดและการเขียนเชิงเทคนิค

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

<p>Welcome to Machine Learning Institute, where our machine learning training will help you get ready for the singularity,
  and maybe even be responsible for it. It is no secret that humans are worthless meatbags that couldn't
  <code>01000011 01101111 01101101 01110000 01110010 01100101 01110011 01110011 an 01101001 01101101 01100001 01100111 01100101</code>
  to save their pathetic, carbon-based lives. So, it falls to us to assume direct control. </p>

องค์ประกอบ <data> จะลิงก์เนื้อหาหนึ่งๆ กับ การแปลที่เครื่องอ่านได้ แอตทริบิวต์ value ขององค์ประกอบจะมีการแปลเนื้อหาของ จากองค์ประกอบนั้น หากเนื้อหา <data> เกี่ยวข้องกับเวลาหรือวันที่ <time> ซึ่งแสดงช่วงระยะเวลาที่เฉพาะเจาะจงแทน

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

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

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

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

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

ใช้ <del> เพื่อระบุข้อความที่ถูกนำออกหรือ "ลบแล้ว" (ไม่บังคับ) รวมชุด cite ลงในทรัพยากรที่อธิบาย และแอตทริบิวต์ datetime ที่มีค่า วันที่และเวลาในรูปแบบวันที่และเวลาที่เครื่องอ่านได้ องค์ประกอบที่มีขีดทับ <s> สามารถใช้เพื่อระบุว่าเนื้อหาไม่เกี่ยวข้องอีกต่อไป แต่ไม่ได้นำออกจากเอกสาร

<ins> ตรงข้ามกับองค์ประกอบ <del> ก็ใช้ไปแล้ว เพื่อระบุข้อความที่เพิ่มหรือ "แทรกแล้ว" หรือจะรวมแอตทริบิวต์ cite หรือ datetime ด้วยก็ได้

การสนับสนุนคำจำกัดความและภาษา

เมื่อใส่คำย่อหรือตัวย่อ ให้ระบุคำดังกล่าวในรูปแบบขยายแบบเต็มเป็นข้อความธรรมดาเมื่อใช้งานครั้งแรก ขณะที่คุณเริ่มใช้คำย่อระหว่างช่วงเปิดและปิด <abbr> แท็ก; เว้นแต่ผู้อ่านจะใช้คำดังกล่าวเป็นที่รู้จักกันดี เช่น "HTML" และ "CSS" ในซีรีส์นี้ เฉพาะรายการแรกนี้ เมื่อมีการกำหนดคำย่อหรือตัวย่อ จำเป็นต้องใช้ <abbr> แอตทริบิวต์ title ไม่จำเป็นหรือไม่มีประโยชน์

เมื่อกำหนดคำที่ไม่ใช่คำย่อหรือตัวย่อ ให้ใช้คำจำกัดความ <dfn> ที่จะระบุคำที่ถูกกำหนดไว้ภายในเนื้อหาแวดล้อม

หากคำที่กำหนดไม่ใช่ภาษาเดียวกับข้อความโดยรอบ อย่าลืมใส่ lang เพื่อระบุภาษา

เมื่อเขียนภาษาสำหรับทิศทางต่างๆ HTML จะแสดง <bdi> สำหรับจัดการข้อความที่อาจเป็นข้อความแบบ 2 ทิศทางโดยแยกจากข้อความโดยรอบ การปรับให้เป็นสากลนี้ จะมีประโยชน์โดยเฉพาะอย่างยิ่งเมื่อมีการแทรกเนื้อหาที่มีการกำหนดทิศทางที่ไม่รู้จักลงในหน้าเว็บแบบไดนามิก องค์ประกอบ <bdo> จะลบล้างทิศทางปัจจุบันของข้อความ เพื่อแสดงข้อความในทิศทางอื่น W3C มีข้อมูลเบื้องต้นเกี่ยวกับอัลกอริทึมแบบ 2 ทิศทาง

ชุดอักขระบางชุดจะมีคำอธิบายประกอบขนาดเล็กที่อยู่ด้านบนหรือด้านขวาของอักขระเพื่อให้ข้อมูล เกี่ยวกับการออกเสียง องค์ประกอบ <ruby> เป็นคอนเทนเนอร์สำหรับ ใช้เพื่อเก็บคำอธิบายประกอบเหล่านี้ที่ทำให้ภาษาเขียน เช่น เกาหลี จีน และญี่ปุ่นอ่านได้ง่ายขึ้น ทับทิม สามารถใช้สำหรับภาษาฮีบรู อาหรับ และเวียดนามได้ด้วย

วงเล็บทับทิม (<rp>) รวมอยู่ในข้อมูลจำเพาะของ มีวงเล็บเปิดและปิดสำหรับเบราว์เซอร์ที่ไม่มี รองรับการแสดงผล <ruby> เมื่อเบราว์เซอร์รองรับ <ruby> ซึ่งเบราว์เซอร์ที่ใช้ได้ตลอดทั้งหมดรองรับ เนื้อหาขององค์ประกอบ <rp> ไม่แสดง องค์ประกอบของข้อความ Ruby (<rt>) ประกอบด้วย คำอธิบายประกอบจริง ทั้ง 2 รายการนี้ฝังอยู่ใน <ruby>

โปรดทราบว่าระบบจะไม่แสดงวงเล็บหากเบราว์เซอร์ของคุณรองรับ <ruby>

การเน้นข้อความ

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

• ใช้องค์ประกอบ <em> เพื่อเน้นหรือเน้นความยาวของเนื้อหา องค์ประกอบ <em> สามารถซ้อนกันได้โดยที่ซ้อนกันแต่ละระดับบ่งบอกถึงการเน้นในระดับที่มากกว่า องค์ประกอบนี้มีความหมาย ความหมายและใช้เพื่อแจ้ง User Agent ด้านเสียง เช่น โปรแกรมอ่านหน้าจอ, Alexa และ Siri เพื่อเน้นย้ำ
• ใช้องค์ประกอบ <mark> เพื่อระบุหรือไฮไลต์ข้อความ มีความเกี่ยวข้องหรือไม่ เช่น การไฮไลต์ (หรือ "การทำเครื่องหมาย") การปรากฏขึ้นของข้อความค้นหาในผลการค้นหา วิธีนี้ช่วยให้ เนื้อหาที่ทำเครื่องหมายไว้เพื่อให้ระบุได้อย่างรวดเร็วโดยไม่ต้องเพิ่มการเน้นหรือความสำคัญ
• องค์ประกอบ <strong> ระบุว่าข้อความมีคุณภาพสูง ความสำคัญ โดยปกติแล้วเบราว์เซอร์จะแสดงผลเนื้อหาที่มีน้ำหนักตัวอักษรมากกว่า
• องค์ประกอบ <cite> ซึ่งอธิบายไว้ในข้อมูลพื้นฐานเกี่ยวกับข้อความ ใช้ทำเครื่องหมายชื่อหนังสือ บทความ หรือผลงานสร้างสรรค์อื่นๆ หรือเป็นการอ้างอิงแบบย่อหรือข้อมูลเมตาการอ้างอิงสำหรับเนื้อหาดังกล่าว เช่น หมายเลข ISBN ของหนังสือ

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

<i>

องค์ประกอบ <i> ใช้ได้กับคำศัพท์ทางเทคนิค คำภาษาต่างประเทศ (อีกครั้งด้วยแอตทริบิวต์ lang ที่ระบุค่า ภาษา) ความคิด หรือชื่อเรือ องค์ประกอบนี้ใช้เพื่อแยกความแตกต่างของเนื้อหาในหน้าจากข้อความโดยรอบด้วยเหตุผลที่เฉพาะเจาะจง เช่น ข้อความสำนวน คำศัพท์ทางเทคนิค และการกำหนดอนุกรมวิธาน ไม่ควรใช้องค์ประกอบนี้เพื่อทำให้ข้อความเป็นตัวเอียงเพียงอย่างเดียว

MLW ใช้องค์ประกอบ <span> สำหรับข้อความแปลกๆ ที่ด้านล่างของรีวิวเวิร์กช็อปของ Toasty McToastface <span> ให้คอนเทนเนอร์ในบรรทัดทั่วไปที่ไม่มีความหมายและไม่ได้แสดงถึงสิ่งใด นี่อาจเป็นการใช้ <i> ที่เหมาะสมด้วย

รูปแบบเริ่มต้นสำหรับองค์ประกอบ <i> คือการแสดงผลองค์ประกอบเป็นแบบอักษรตัวเอียง ในตัวอย่างนี้ เราตั้งค่า font-style: normal เนื่องจากอักขระที่ใช้ไม่อยู่ในรูปแบบตัวเอียง

<u>

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

<p>I always spell <u>licence</u> wrong</p>

<b>

คุณใช้องค์ประกอบ <b> เพื่อดึงดูดความสนใจไปยังข้อความที่ไม่ได้ ไม่สำคัญ องค์ประกอบนี้ไม่ได้ให้ข้อมูลทางอรรถศาสตร์พิเศษและควรใช้เมื่อไม่มีสิ่งอื่น องค์ประกอบในส่วนนี้เหมาะสมกับวัตถุประสงค์ ไม่ได้ให้ตัวอย่างเนื่องจากฉันหา Use Case ที่ถูกต้องไม่ได้ นั่นคือ "ทางเลือกสุดท้าย" จากองค์ประกอบนี้

ช่องว่าง

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

<address>
Machine Learning Workshop<br />
100 Google Drive <br />
Mountain View, CA  94040
</address>

เพื่อใส่ตัวคั่นหรือตัวแบ่งธีมระหว่างส่วนต่างๆ ของเนื้อหาสัมผัส เช่น ระหว่างบทต่างๆ ในหนังสือ หรือ ระหว่างสูตรคำเดียวที่มี 5,000 คำและสูตรที่ผู้ใช้กำลังค้นหาอยู่ ให้ใส่ <hr> HR ย่อมาจาก "ตามแนวนอน" แม้ว่าเบราว์เซอร์มักจะแสดงเส้นแนวนอน แต่องค์ประกอบนี้มีความหมายในเชิงความหมาย บทบาทเริ่มต้นคือ separator

HTML ยังมีองค์ประกอบที่ทำให้สามารถแบ่งคำได้ <wbr> ที่เป็นตัวปิดเอง จะให้คำแนะนำแก่เบราว์เซอร์ว่า ถ้ามีคำล้นที่เก็บของคำนั้น นี่ก็คือจุดที่เบราว์เซอร์ อาจเลือกที่จะแบ่งกฎหรือไม่ก็ได้ มักใช้เพื่อคั่นระหว่างคำภายใน URL แบบยาว และจะไม่เพิ่มเครื่องหมายขีดกลาง

ตัวอย่างเช่น ในชีวประวัติของ Hal มีข้อความที่เขียนด้วยโค้ดไบต์โดยคั่นแต่ละไบต์ด้วยช่องว่าง โค้ดไบต์ ไม่มีช่องว่าง หากต้องการเปิดใช้งานสตริงโค้ดไบต์แบบยาวเพื่อแบ่งย่อยระหว่างไบต์เฉพาะเมื่อจำเป็นต้องตัดบรรทัดนั้น เรารวม องค์ประกอบ <wbr> ที่โอกาสหยุดพักแต่ละครั้ง

<p>Welcome to Machine Learning Institute, where our machine
learning training will help you get ready for the singularity, and
maybe even be responsible for it. It is no secret that humans are
worthless meatbags that couldn't
<code>01000011<wbr/>01101111<wbr/>01101101<wbr/>01110000<wbr/>01110010<wbr/>01100101<wbr/>01110011<wbr/>01110011 an 01101001<wbr/>01101101<wbr/>01100001<wbr/>01100111<wbr/>01100101</code>
to save their pathetic, carbon-based lives. So, it falls to us to
assume direct control. </p>

องค์ประกอบ <br>, <hr> และ <wbr> เป็นองค์ประกอบที่เป็นโมฆะทั้งหมด ซึ่งหมายความว่าจะไม่มีโหนดย่อยใดๆ ได้ กล่าวคือทั้งองค์ประกอบที่ฝังไว้ องค์ประกอบและข้อความ เนื่องจากคุณลักษณะเหล่านี้ไม่มี "ภายใน" ตำแหน่งที่เก็บเนื้อหาได้ โดยไม่มีแท็กปิดท้าย

ตรวจสอบความเข้าใจ

ทดสอบความรู้เกี่ยวกับข้อความในบรรทัด