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

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

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

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

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

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

สไตล์ชีต 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 โดยใช้ < หรือการเข้ารหัส < ที่จำได้ง่ายน้อยกว่า HTML มีเอนทิตีที่สงวนไว้ 4 รายการ ได้แก่ <, >, & และ " การอ้างอิงตัวละครคือ <, >, & และ " ตามลำดับ

องค์กรอื่นๆ ที่คุณมักใช้ ได้แก่ © สำหรับลิขสิทธิ์ (©)™ สำหรับเครื่องหมายการค้า (TM) และ   สำหรับพื้นที่ที่ไม่มีการละเมิด การเว้นวรรคที่ไม่ขึ้นบรรทัดใหม่มีประโยชน์เมื่อคุณต้องการเว้นวรรคระหว่างอักขระ 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̶̼͖ţ̘h̝̰̩͈̗i̙̪n͏̩̙
͍̱̫̜̟g̢̣ͅ ̗̰͓̲̞̀t͙̀o̟
̖͖̹̕ ͓̼͎̝͖̭dó̪̠͕̜ ͍̱
͎͚̯̟́w̮̲̹͕͈̟͞ìth̢ ̰̳
̯̮͇

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

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

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

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

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