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

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

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

หัวข้อ, เข้าชมอีกครั้ง

มีองค์ประกอบส่วนหัว 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 จำนวนน้อยมาก

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

หากรีวิวนั้นดึงมาจากเว็บไซต์รีวิว หนังสือ หรือผลงานอื่นๆ ระบบอาจใช้องค์ประกอบ <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 ใช้การออกเสียงภาษาฝรั่งเศสได้ นอกจากนี้ยังแจ้งแก่เบราว์เซอร์ว่าจะแสดงเครื่องหมายคำพูดประเภทใด

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

เอนทิตี HTML

คุณอาจสังเกตเห็นลำดับหลีกหรือ "เอนทิตี" เนื่องจากมีการใช้ < ใน HTML คุณจึงต้องกำหนดอักขระหลีกโดยใช้ < หรือการเข้ารหัสที่จดจำได้ง่าย < มีเอนทิตีที่สงวนไว้ใน 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̢ ̰̳
̯̮͇

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

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

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

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

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

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

c

โปรดลองอีกครั้ง

©

ถูกต้องแล้ว!

&copyright.

โปรดลองอีกครั้ง

องค์ประกอบในข้อใดที่ใช้ระบุว่าเป็นเครื่องหมายคำพูด

<blockquote>

ถูกต้อง

<quote>

โปรดลองอีกครั้ง

<cite>

โปรดลองอีกครั้ง องค์ประกอบ <cite> ใช้เพื่อระบุแหล่งที่มาของข้อความที่ยกมา ไม่ใช่ตัวใบเสนอราคาเอง