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

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

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

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

เน้นข้อความ

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

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

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

<i>

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

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

ทดสอบความรู้เกี่ยวกับข้อความแบบอินไลน์