ข้อมูลเบื้องต้นเกี่ยวกับข้อความ

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

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

หัวข้อ กลับไปแล้ว

มีองค์ประกอบส่วนหัว 6 ส่วน ได้แก่ <h1>, <h2>, <h3>, <h4>, <h5> และ <h6> โดยที่ <h1> มีความสำคัญมากที่สุด และ <h6> น้อยที่สุด เป็นเวลาหลายปีที่ผู้คนเชื่อกันว่าเบราว์เซอร์ใช้ส่วนหัวเพื่อร่างเอกสาร เป้าหมายตั้งแต่แรกเริ่ม แต่เบราว์เซอร์กลับยังไม่ได้ใช้การระบุฟีเจอร์ต่างๆ แต่ผู้ใช้โปรแกรมอ่านหน้าจอจะใช้ส่วนหัว เป็นกลยุทธ์การสํารวจเพื่อดูข้อมูลเกี่ยวกับเนื้อหาของหน้า โดยไปยังส่วนต่างๆ ของส่วนหัวด้วยคีย์ h ดังนั้นการตรวจสอบว่า การใช้ระดับของส่วนหัวอย่างที่คุณจะเขียนโครงร่างเอกสาร จะทำให้เนื้อหาของคุณเข้าถึงได้ง่ายและยังคงเป็นการสนับสนุนที่ดี

โดยค่าเริ่มต้น เบราว์เซอร์จะจัดรูปแบบ<h1>เป็นใหญ่ที่สุด มีขนาดเล็กลง <h2> โดยแต่ละระดับของส่วนหัวที่ตามมาจะเล็กลง โดยค่าเริ่มต้น ที่น่าสนใจคือเบราว์เซอร์ตามค่าเริ่มต้นยังลดขนาดตัวอักษร <h1> ตามจำนวน <article>, <aside>, <nav> หรือ <section> องค์ประกอบที่มีการฝังอยู่

ตัวอย่าง H1 ที่ซ้อนกัน

สไตล์ชีต User Agent บางรายการมีตัวเลือกต่อไปนี้ หรือคล้ายกับการจัดรูปแบบองค์ประกอบ <h1> ที่ฝังอยู่ราวกับว่า ในระดับที่สำคัญน้อยกว่า:

h2, :is(article, aside, nav, section) h1 {}
h3
, :is(article, aside, nav, section) :is(article, aside, nav, section) h1 {}

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

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

ส่วน #about มีส่วนหัวและ 2-3 ย่อหน้าดังนี้

ส่วนนี้ไม่ใช่จุดสังเกตเนื่องจากไม่มีชื่อสำหรับการช่วยเหลือพิเศษ หากต้องการเปลี่ยนเป็น region ซึ่งเป็นบทบาทสําคัญ คุณสามารถใช้ aria-labelledby เพื่อระบุชื่อที่เข้าถึงได้ดังนี้

<section id="about"  aria-labelledby="about_heading">
<h2 id="about_heading">What you'll learn</h2>

สร้างจุดสังเกตต่อเมื่อเหมาะสมเท่านั้น การมีจุดสังเกตมากเกินไปอาจทำให้ผู้ใช้โปรแกรมอ่านหน้าจอสับสนได้อย่างรวดเร็ว

คำกล่าวและการอ้างอิง

เมื่อมาร์กอัปบทความหรือบล็อกโพสต์ คุณอาจต้องการใส่ข้อความที่ยกมาหรือข้อความที่ยกมา โดยมีหรือไม่มีการอ้างอิงที่มองเห็นได้ มีองค์ประกอบสำหรับองค์ประกอบ 3 อย่าง ได้แก่ <blockquote>, <q> และ <cite> สำหรับการอ้างอิงที่มองเห็นได้ หรือแอตทริบิวต์ cite เพื่อให้ข้อมูลเพิ่มเติมสำหรับการค้นหา

ส่วน #feedback มีส่วนหัวและรีวิว 3 รายการ รีวิวเหล่านี้เป็นข้อความที่ยกมา ซึ่งบางส่วนมีเครื่องหมายคำพูด ตามด้วยย่อหน้าที่มีการอ้างอิงจากการอ้างอิงดังกล่าว หากไม่รวมรีวิวที่ 3 เพื่อประหยัดพื้นที่ มาร์กอัปคือ

ข้อมูลเกี่ยวกับผู้เขียนที่ยกมาหรือการอ้างอิงไม่ได้เป็นส่วนหนึ่งของการยกคำพูด ดังนั้นจึงไม่ได้อยู่ใน <blockquote> แต่จะแสดงหลังข้อความที่ยกมา แม้ว่าการอ้างอิงเหล่านี้เป็นการอ้างอิงในพื้นฐานของคำ แต่จริงๆ แล้วไม่ได้อ้างอิงแหล่งข้อมูลที่เฉพาะเจาะจง ดังนั้นจึงรวมอยู่ในองค์ประกอบ <p> ของย่อหน้า

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

แม้ว่าเราจะให้ข้อมูลการอ้างอิงในย่อหน้าต่อจากข้อความที่ยกมาแต่ละรายการ แต่คำพูดที่แสดงก่อนหน้านี้มีการเขียนโค้ดในลักษณะนี้เพราะ มาจากแหล่งข้อมูลภายนอก หากใช่ ควรอ้างอิงแหล่งที่มา (ควร) อ้างอิงหรือไม่

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

หากคำพูดของ Blendan Smooth มาจากนิตยสารออฟไลน์ของเธอ คุณควรเขียนข้อความที่ยกมาดังนี้

องค์ประกอบการอ้างอิง <cite> ไม่มีบทบาทโดยนัยและควรได้รับชื่อที่เข้าถึงได้จากเนื้อหา ไม่รวม aria-label

ในการให้เครดิตแก่จุดที่ต้องให้เครดิตเมื่อคุณไม่สามารถทำให้เนื้อหาแสดงได้ มีแอตทริบิวต์ cite ที่จะใช้เป็นค่า URL ของเอกสารต้นฉบับหรือข้อความสำหรับข้อมูลที่เสนอมา แอตทริบิวต์นี้ใช้ได้ทั้งใน <q> และ <blockquote> แม้จะเป็น URL ก็ตาม แต่เครื่องสามารถอ่านได้แต่เครื่องอ่านมองไม่เห็น ดังนี้

แม้ว่าแท็กปิด </p> จะเป็นแท็กที่ไม่บังคับ (และแนะนำให้ใช้เสมอ) แต่คุณก็ต้องใช้แท็กปิด </blockquote> เสมอ

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

ในส่วน #teachers จะมีข้อความ HAL ว่า "ขออภัย แต่เกรงว่าจะทำไม่ได้" โค้ดภาษาอังกฤษและฝรั่งเศสมีดังนี้

องค์ประกอบเครื่องหมายคำพูดแบบแทรกในบรรทัด <q> เพิ่มเครื่องหมายคำพูดที่เหมาะกับภาษา รูปแบบเริ่มต้นของ User Agent จะรวมถึงเนื้อหาการสร้างใบเสนอราคาแบบเปิดและที่ใช้เครื่องหมายคำพูดปิด ดังนี้

q::before {content: open-quote;}
q::after {content: close-quote;}

แอตทริบิวต์ lang ถูกรวมไว้เพื่อให้เบราว์เซอร์ทราบว่า แม้ว่าภาษาฐานของหน้าเว็บจะกำหนดเป็นภาษาอังกฤษในแท็กเปิด <html lang="en-US"> แต่ย่อหน้าข้อความนี้เป็นภาษาอื่น การตั้งค่านี้ช่วยให้การควบคุมด้วยเสียง เช่น Siri, Alexa และ VoiceOver ใช้การออกเสียงภาษาฝรั่งเศสได้ นอกจากนี้ยังแจ้งให้เบราว์เซอร์ทราบถึงประเภทเครื่องหมายคำพูดที่จะแสดงด้วย

องค์ประกอบ <q> รองรับแอตทริบิวต์ cite เช่นเดียวกับ <blockquote>

เอนทิตี HTML

คุณอาจสังเกตเห็นลำดับหลีกหรือ "เอนทิตี" เนื่องจากมีการใช้ < ใน HTML คุณจึงต้อง Escape โดยใช้ &lt; หรือการเข้ารหัส &#60; ที่จำได้ง่ายน้อยกว่า HTML มีเอนทิตีที่สงวนไว้ 4 รายการ ได้แก่ <, >, & และ " การอ้างอิงตัวละครคือ &lt;, &gt;, &amp; และ &quot; ตามลำดับ

องค์กรอื่นๆ ที่คุณมักใช้ ได้แก่ &copy; สำหรับลิขสิทธิ์ (©)&trade; สำหรับเครื่องหมายการค้า (TM) และ &nbsp; สำหรับพื้นที่ที่ไม่มีการละเมิด การเว้นวรรคที่ไม่ขึ้นบรรทัดใหม่มีประโยชน์เมื่อคุณต้องการเว้นวรรคระหว่างอักขระ 2 ตัวหรือคำในขณะที่ป้องกันไม่ให้มีการขึ้นบรรทัดใหม่ มีการอ้างอิงอักขระที่มีชื่อมากกว่า 2,000 รายการ แต่ถ้าจำเป็น อักขระทุกตัวรวมถึงอีโมจิจะมีการเข้ารหัสที่เทียบเท่าซึ่งขึ้นต้นด้วย &#

หากคุณดูการตรวจสอบเวิร์กช็อปของ ToastyMcToastface (ไม่ได้รวมอยู่ในตัวอย่างโค้ดด้านบน) มีอักขระบางตัวที่ผิดปกติ:

<blockquote>Learning with Hal and Eve exceeded all of my wildest fantasies. All they did was stick a USB in. They promised that it was a brand new USB, so we know there were no viruses on it. The Russians had nothing to do with it. This has no̶̼͖ţ̘h̝̰̩͈̗i̙̪n͏̩̙͍̱̫̜̟g̢̣ͅ ̗̰͓̲̞̀t͙̀o̟̖͖̹̕ ͓̼͎̝͖̭dó̪̠͕̜ ͍̱͎͚̯̟́w̮̲̹͕͈̟͞ìth̢ ̰̳̯̮͇</blockquote>

ประโยคสุดท้ายในข้อความที่ยกมานี้สามารถเขียนเป็น

This has no&#x336;&#x33C;&#x356;&tcedil;&#x318;h&#x31D;&#x330;&#x329;&#x348;&#x317;i&#x319;&#x32A;n&#x34F;&#x329;&#x319;
&#x34D;&#x331;&#x32B;&#x31C;&#x31F;g&#x322;&#x323;&#x345; &#x317;&#x330;&#x353;&#x332;&#x31E;&#x300;t&#x359;&#x300;o&#x31F;
&#x316;&#x356;&#x339;&#x315; &#x353;&#x33C;&#x34E;&#x31D;&#x356;&#x32D;d&oacute;&#x32A;&#x320;&#x355;&#x31C; &#x34D;&#x331;
&#x34E;&#x35A;&#x32F;&#x31F;&#x301;w&#x32E;&#x332;&#x339;&#x355;&#x348;&#x31F;&#x35E;&igrave;th&#x322; &#x330;&#x333;
&#x32F;&#x32E;&#x347;

มีอักขระที่ไม่ใช้ Escape อยู่ 2-3 ตัวและการอ้างอิงอักขระที่มีชื่ออยู่ 2-3 ตัวในโค้ดนี้ เนื่องจากการเข้ารหัสข้อความเป็น UTF-8 ว่าด้วยอักขระ 2-3 ตัวสุดท้ายในข้อความที่ยกมานั้นไม่จำเป็นต้องกำหนดเป็นอักขระหลีกเหมือนในตัวอย่างนี้ ไม่รองรับอักขระเท่านั้น ตามการเข้ารหัสข้อความที่ต้องกำหนดเป็นอักขระหลีก หากจำเป็น มีเครื่องมือจำนวนมากที่ช่วยในการ Escape อักขระต่างๆ หรือจะใส่ <meta charset="UTF-8"> ใน <head> ก็ได้

แม้ในขณะที่ระบุการเข้ารหัสข้อความเป็น UTF-8 คุณยังคงต้อง Escape < เมื่อต้องการพิมพ์อักขระดังกล่าวไปยังหน้าจอ โดยทั่วไป คุณไม่จำเป็นต้องใส่การอ้างอิงอักขระที่มีชื่อสำหรับ >, " หรือ & แต่หากคุณต้องการเขียนบทแนะนำเกี่ยวกับเอนทิตี HTML คุณต้องเขียน &lt; เมื่อสอนการเขียนโค้ด < 😀

อ้อ อีโมจิหน้ายิ้มนั้นคือ &#x1F600; แต่เอกสารนี้ประกาศเป็น UTF-8 จึงไม่ได้ Escape

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

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

คุณจะแสดงสัญลักษณ์ลิขสิทธิ์ใน HTML ได้อย่างไร

&copy;
c
&copyright

องค์ประกอบใดใช้เพื่อระบุว่าบางสิ่งเป็นการยกข้อความ

<quote>
<cite>
<blockquote>