การเขียน HTML

คำศัพท์

English	ไทย
HTML/ˌeɪtʃ tiː em ˈel/	HTML
attribute/ˈætrɪbjuːt/	แอททริบิวต์
element/ˈelɪmənt/	ธาตุ
semantic elements/səˈmæntɪk ˈelɪmənts/	องค์ประกอบทางความหมาย

ดูเหมือนเป็นลิงก์ แต่ Tab ลอดผ่านมันไป

รูปสี่เหลี่ยมที่มีสไตล์เขียนว่า “Join” ไม่ได้กลายเป็นลิงก์ที่ใช้งานได้โดยอัตโนมัติ Anchor ที่แท้จริงพร้อมปลายทางจะมีพฤติกรรมของเบราว์เซอร์ที่การตกแต่งเพียงอย่างเดียวไม่จัดให้
HTML ให้โครงสร้างและความหมายของเนื้อหา CSS ควบคุมการนำเสนอ; การเลือก HTMLที่มีความหมายยังสนับสนุนการใช้คีย์บอร์ดและเทคโนโลยีช่วยเหลือด้วย

ฝึกฝน

ทำไมต้องใช้heading element จริงสำหรับหัวข้อหน้า?

มันแสดงถึงความหมายของ heading และให้รูปแบบการแสดงผลโดยค่าเริ่มต้น
มันรับประกันว่าหน้าเว็บจะไม่มีข้อผิดพลาดด้าน accessibility
มันเป็นวิธีเดียวที่จะทำให้ตัวหนังสือมีขนาดใหญ่
CSS ต้องการให้ทุกบรรทัดเป็น heading

อ่านแท็กและแอตทริบิวต์ของมัน

องค์ประกอบ มักจะมีแท็กเปิด เนื้อหา และแท็กปิด: <p>Meet on Thursday.</p>. แอตทริบิวต์ ให้ข้อมูลเพิ่มเติมในแท็กเปิด: <a href="join.html">Join</a>.
HTML void element เช่น img ไม่มีแท็กปิดหรือเนื้อหาภายใน มันไม่ได้ “ปิดตัวเอง”; slashes trailing ไม่จำเป็นใน HTML รอยต่อแท็กคู่โดยไม่ตัดข้ามกัน

ฝึกฝน

attribute ใดที่ระบุตำแหน่งการนำทางให้กับ anchor?

กำหนดเขตของหน้าตามวัตถุประสงค์

Semantic elements รวมถึง nav สำหรับการนำทางหลักและ main สำหรับเนื้อหาหลักของหน้า ใช้หัวข้อเพื่ออธิบายส่วนต่างๆ และ div สำหรับการรวมกลุ่มทั่วไปเมื่อไม่มีองค์ประกอบเฉพาะเจาะจงที่เหมาะสม
ผู้ใช้ a ที่ใช้ href ในการนำทาง; ผู้ใช้ button ที่ดำเนินการตามคำสั่ง การทำ Semantic markup ช่วยได้ แต่ฉลาก (labels), พฤติกรรม และจุดโฟกัสยังต้องผ่านการทดสอบ

โครงสร้างเอกสาร HTML ขนาดเล็ก: body มี navigation และ main; main มี heading และ paragraph

ฝึกฝน

elements ใดมีความหมายเฉพาะของ HTML เหล่านี้? เลือกทุกข้อที่ถูกต้อง

nav: การนำทางหลัก
div: เนื้อหาหลักของหน้าเว็บเสมอ
article: งานเขียนที่สมบูรณ์ในตัวเอง
footer: ส่วนท้ายสำหรับส่วนที่เกี่ยวข้อง

ฝึกฝน

จับคู่วัตถุประสงค์ที่ต้องการกับ native element ที่เหมาะสม

a with href

ปุ่ม

หลัก (main)

Navigate to another page
Perform an action on the current page
Identify the main page content

สร้างหน้าเว็บสมบูรณ์ขนาดเล็ก

บันทึกตัวอย่างนี้เป็น index.html วางไว้ข้างไฟล์ join.html จริง เปิดในเบราว์เซอร์แล้วคลิกลิงก์โดยใช้ Tab และ Enter
lang ระบุภาษาของหน้าเว็บ; title ตั้งชื่อแท็บเบราว์เซอร์ การตั้งค่า viewport ทำให้สไตล์ Responsive ใช้ความกว้างของอุปกรณ์ได้

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Robotics club</title>
</head>
<body>
  <nav aria-label="Main"><a href="join.html">How to join</a></nav>
  <main>
    <h1>Robotics club</h1>
    <p>Meet Thursday at 4 pm in room 12.</p>
  </main>
</body>
</html>

Example

<a href="join.html">How to join</a> รวมปลายทางและฉลากที่มีประโยชน์เข้าด้วยกัน <div class="link">Click here</div> neither ให้การนำทางแบบ native maupun ปลายทาง

เลือกทางเลือกตามวัตถุประสงค์ของภาพ

ภาพที่ให้ความรู้จำเป็นต้องมีทางเลือกที่สื่อความหมายที่เกี่ยวข้อง ภาพตกแต่งเพียงอย่างเดียวควรใช้ alt="" เพื่อให้เทคโนโลยีช่วยเหลือข้ามภาพไป
สำหรับภาพที่ใช้เป็นลิงก์ ให้อธิบายฟังก์ชันของลิงก์เมื่อข้อมูลนั้นไม่ได้ให้ไว้ elsewhere กราฟที่ซับซ้อนก็ต้องการคำอธิบายข้อมูลสำคัญด้วยข้อความเช่นกัน

Watch out

อย่าใช้ Heading เพียงเพื่อขยายขนาดตัวอักษร หรือซ้ำคำว่า “image” ทุกครั้งที่เป็นทางเลือก同样 อย่าให้ภาพตกแต่งมีคำอธิบายยาวจนรบกวนการอ่านหน้าเว็บ

ฝึกฝน

alt="image" เป็นทางเลือกที่มีประโยชน์สำหรับแผนภูมิที่มีข้อมูล

ฝึกฝน

ข่าวจากชมรมใช้ภาพถ่ายเพื่อแสดงนักเรียนกำลังปลูกต้นไม้ในสนามโรงเรียน เขียน alt text ที่มีประโยชน์

ฝึกฝน

ลายเส้นตกแต่งเล็กๆ ข้างหัวข้อไม่เพิ่มข้อมูลใด ๆ ภาพทางเลือกใดที่ควรใช้แทนโดยปกติ?

alt=""
alt="ข้อมูลสำคัญหายไป"
alt="ภาพ ภาพ ภาพ"
ลบภาพทางเลือกออกจากหน้าเว็บทั้งหมด

ตรวจสอบโครงสร้างและพฤติกรรม

ตรวจสอบลำดับ Heading, ฉลากลิงก์ที่มีความหมาย, การใช้คีย์บอร์ด และทางเลือกของภาพ เครื่องตรวจสอบ HTML สามารถตรวจจับข้อผิดพลาดของ markup ได้ แต่ไม่สามารถตัดสินได้ว่าคำที่คุณใช้มีประโยชน์หรือไม่
ทำให้หน้าประชุมใช้งานได้ในเมื่อปิดสไตล์ แล้วจึงจัดรูปแบบเนื้อหาโดยไม่เปลี่ยน Heading เป็นทางลัดที่เน้นแค่รูปลักษณ์เท่านั้น

Key idea

เลือก HTML ตามวัตถุประสงค์ ใช้ลิงก์และปุ่มแบบ native, nesting ที่ถูกต้อง และทางเลือกของภาพที่สอดคล้องกับบทบาทของภาพ

แหล่งที่มา: ไวยากรณ์ HTML และ W3C ภาพตกแต่ง.

ฝึกฝน

ใน HTML, img เป็น элементไร้เนื้อหา (void element) และต้องไม่มีแท็กปิด