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

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

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

ส่วนหัว (อีกครั้ง)

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

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

สไตล์ชีตของ User Agent บางรายการมีตัวเลือกต่อไปนี้ (หรือตัวเลือกที่คล้ายกัน) เพื่อจัดรูปแบบองค์ประกอบ <h1> ที่ซ้อนกันราวกับว่าเป็นระดับส่วนหัวที่ต่ำกว่า

/* Legacy UA stylesheet behavior (now removed from browsers and the HTML spec) */
h2, :is(article, aside, nav, section) h1 {}
h3, :is(article, aside, nav, section) :is(article, aside, nav, section) h1 {}

อย่างไรก็ตาม โมเดลออบเจ็กต์การช่วยเหลือพิเศษ (AOM) และโปรแกรมอ่านหน้าจอไม่เคยแก้ไขระดับส่วนหัวตามการซ้อนกัน โดยระบบจะรายงาน <h1> ที่ซ้อนกันเป็น "ส่วนหัว ระดับ 1" เสมอ ซึ่งทำให้เกิดความไม่ตรงกันที่ส่วนหัวที่ซ้อนกันปรากฏเล็กลงในภาพ แต่ยังคงเป็นส่วนหัวระดับบนสุดสำหรับเทคโนโลยีการช่วยเหลือพิเศษ

เนื่องจากข้อกำหนด HTML ได้นำอัลกอริทึมการร่างเอกสารออก เบราว์เซอร์จึงได้นำกฎสไตล์ชีตของ User Agent แบบเดิมเหล่านี้ออก ด้วยเหตุนี้ องค์ประกอบ <h1> ที่ซ้อนกันจึงยังคงขนาดแบบอักษร <h1> มาตรฐานไว้แทนที่จะย่อขนาดลงโดยอัตโนมัติ

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

นอกเหนือจากส่วนหัวแล้ว ข้อความแบบมีโครงสร้างส่วนใหญ่ประกอบด้วยย่อหน้าหลายย่อหน้า ใน 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 ที่กล่าวว่า "I'm sorry , but I'm afraid I can't do that, ." โค้ดสำหรับคำพูดดังกล่าวในภาษาอังกฤษและภาษาฝรั่งเศสมีดังนี้

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

เอนทิตีอื่นๆ ที่คุณมักจะใช้ ได้แก่ © สำหรับลิขสิทธิ์ (©), ™ สำหรับเครื่องหมายการค้า (™) และ   สำหรับช่องว่างที่ไม่ขึ้นบรรทัดใหม่ ช่องว่างที่ไม่ขึ้นบรรทัดใหม่มีประโยชน์เมื่อคุณต้องการใส่ช่องว่างระหว่างอักขระหรือคำ 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 รายการ เนื่องจากชุดอักขระเป็น UTF-8 จึงไม่จำเป็นต้องหลีกหนีอักขระ 2-3 ตัวสุดท้ายในข้อความที่ยกมาและเน้น ดังตัวอย่างนี้ คุณต้องหลีกหนีเฉพาะอักขระที่ชุดอักขระไม่รองรับเท่านั้น หากจำเป็น มีเครื่องมือมากมายที่ช่วยให้คุณหลีกหนีอักขระต่างๆ ได้ หรือคุณเพียงแค่ตรวจสอบว่าได้ใส่ <meta charset="UTF-8"> ใน <head> แล้ว

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

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

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

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

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

c

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

©

ถูกต้อง

&copyright.

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

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

<blockquote>

ถูกต้อง

<quote>

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

<cite>

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