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
©
©right
.องค์ประกอบในข้อใดที่ใช้ระบุว่าเป็นเครื่องหมายคำพูด
<blockquote>
<quote>
<cite>
<cite>
ใช้เพื่อระบุแหล่งที่มาของข้อความที่ยกมา ไม่ใช่ตัวใบเสนอราคาเอง