การจัดโครงสร้างข้อความ: หัวเรื่อง ย่อหน้า และรายการ

เรียนรู้การจัดระเบียบข้อความด้วยลำดับชั้นของหัวเรื่อง ย่อหน้า และรายการ

7 นาที · 3 คำถาม

ลองเปิดตำราอาหาร: จะมีชื่อหนังสือ ชื่อบท แล้วก็ชื่อสูตรอาหาร HTML มีลำดับชั้นแบบเดียวกันด้วยหัวเรื่องหกระดับ ตั้งแต่ <h1> ถึง <h6> ตัว h ย่อมาจาก heading (หัวเรื่อง) <h1> คือหัวเรื่องหลักของหน้า <h2> คือหัวเรื่องของส่วน <h3> คือหัวเรื่องย่อย และไล่ลงไปเรื่อย ๆ จนถึง <h6>

<h1>My recipe notebook</h1>
<h2>Starters</h2>
<h3>Carrot soup</h3>
<h2>Desserts</h2>
<h3>Apple pie</h3>

สำหรับข้อความทั่วไป คุณใช้แท็ก <p> จากบทเรียนก่อนหน้า มีรายละเอียดสำคัญอย่างหนึ่ง: การกดปุ่ม Enter ในไฟล์ของคุณ ไม่ สร้างย่อหน้าใหม่บนหน้าจอ เบราว์เซอร์จะละเลยการขึ้นบรรทัดใหม่และช่องว่างที่ซ้ำกัน เพื่อแยกสองความคิดออกจากกัน คุณต้องเขียนเอลิเมนต์ <p> สองตัวที่แยกกัน

<h2>Apple pie</h2>
<p>A simple recipe, perfect for beginners.</p>
<p>Allow 30 minutes of preparation in total.</p>

ในการแสดงรายการสิ่งของ HTML มีรายการสองแบบ แท็ก <ul> (unordered list หรือรายการที่ไม่เรียงลำดับ) แสดงจุดนำหน้า: เหมาะสำหรับรายการซื้อของ ที่ลำดับไม่สำคัญ แท็ก <ol> (ordered list หรือรายการที่เรียงลำดับ) แสดงตัวเลข: เหมาะสำหรับขั้นตอนของสูตรอาหาร ในทั้งสองกรณี แต่ละรายการในลิสต์เขียนด้วยแท็ก <li> (list item)

<ul>
  <li>3 apples</li>
  <li>1 pie crust</li>
  <li>2 spoonfuls of sugar</li>
</ul>
<ol>
  <li>Preheat the oven to 180 degrees.</li>
  <li>Cut the apples into slices.</li>
  <li>Bake for 35 minutes.</li>
</ol>

ทดสอบความรู้

ตรวจสอบว่าคุณจำประเด็นสำคัญของบทเรียนนี้ได้ครบถ้วน

1. คุณใช้แท็กใดสำหรับหัวเรื่องหลักของหน้า?
   • <h6>
   • <h1>
   • <p>
   • <heading>
2. แท็กใดสร้างรายการแบบตัวเลข?
   • <ul>
   • <ol>
   • <li>
3. คุณจะแสดงย่อหน้าสองย่อหน้าที่แยกกันบนหน้าจอได้อย่างไร?
   • โดยกด Enter สองครั้งในไฟล์
   • โดยเขียนเอลิเมนต์ <p> สองตัวที่แยกกัน
   • โดยเพิ่มช่องว่างระหว่างประโยค