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

เราครอบคลุมองค์ประกอบ 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 เพื่ออธิบายสัญกรณ์ทางคณิตศาสตร์

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

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

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

คำนิยามและการสนับสนุนภาษา

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

เมื่อระบุคําที่ไม่ใช่คำย่อหรือตัวย่อ ให้ใช้องค์ประกอบคําจํากัดความ <dfn> เพื่อระบุคําที่ให้นิยามไว้ภายในเนื้อหาโดยรอบ

หากคำที่กำหนดไม่ได้เป็นภาษาเดียวกับข้อความโดยรอบ อย่าลืมระบุแอตทริบิวต์ lang เพื่อระบุภาษา

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

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

วงเล็บทับทิม (<rp>) รวมอยู่ในข้อกำหนดว่ามีวงเล็บเปิดและปิดสำหรับเบราว์เซอร์ที่ไม่รองรับการแสดง <ruby> เมื่อเบราว์เซอร์รองรับ <ruby> (ซึ่งเป็นเบราว์เซอร์ที่ใช้ได้ตลอด) เนื้อหาขององค์ประกอบ <rp> ทั้งหมดจะไม่แสดง องค์ประกอบข้อความทับทิม (<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> เพื่อดึงดูดความสนใจไปยังข้อความที่ไม่สำคัญได้ องค์ประกอบนี้ไม่ได้สื่อถึงข้อมูลเชิงความหมายพิเศษ และควรใช้เฉพาะเมื่อองค์ประกอบอื่นๆ ในส่วนนี้ไม่ตรงกับวัตถุประสงค์เท่านั้น ไม่มีตัวอย่างให้เพราะผมหากรณีการใช้งานที่ถูกต้องไม่ได้ นั่นคือ "วิธีสุดท้าย" สำหรับองค์ประกอบนี้

ช่องว่าง

เมื่อต้องการให้มีการขึ้นบรรทัดใหม่ เช่น เมื่อเขียนบทกวีหรือที่อยู่จริง ระบบจะใช้องค์ประกอบการขึ้นบรรทัดใหม่แบบปิดตัวเอง <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> เป็นองค์ประกอบที่เป็นโมฆะทั้งหมด ซึ่งหมายความว่าต้องไม่มีโหนดย่อย ไม่ว่าจะเป็นองค์ประกอบหรือข้อความที่ซ้อนกัน เนื่องจากรายการเหล่านี้ไม่มี "ภายใน" ที่สามารถจัดเก็บเนื้อหาได้ จึงไม่มีแท็กปิดท้าย

ทดสอบความเข้าใจ

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