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

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

มีโมดูลที่ครอบคลุมลิงก์และองค์ประกอบ <a> ส่วนองค์ประกอบอื่นๆ ที่เหลือจะกล่าวถึงสั้นๆ ที่นี่

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

เมื่อจัดทำเอกสารตัวอย่างโค้ด ให้ใช้องค์ประกอบ <code> โดย ค่าเริ่มต้น เนื้อหาข้อความจะแสดงในแบบอักษร Monospace เมื่อรวมโค้ดหลายบรรทัด ให้ซ้อน <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> เพื่อใส่ข้อความ โดยทั่วไปแล้วเบราว์เซอร์จะแสดงตัวอย่างนี้หรือเอาต์พุตที่ยกมาในแบบอักษร Monospace ด้วย

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

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

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

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

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

คำจำกัดความและการรองรับภาษา

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

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

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

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

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

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

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

โปรดทราบว่าวงเล็บจะไม่ปรากฏหากเบราว์เซอร์รองรับ <ruby>

เน้นข้อความ

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

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

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

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