0Pricing
Frontend Academy · บทเรียน

โครงสร้างเอกสาร: DOCTYPE html head body

เขียนเอกสาร HTML5 ที่ถูกต้องตั้งแต่ต้น ตั้งแต่การประกาศ DOCTYPE ราก html ส่วน head สำหรับข้อมูลเมตา และส่วน body สำหรับเนื้อหา

โครงสร้างเอกสาร: DOCTYPE html head body เป็นบทเรียน Frontend Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Frontend Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

เอกสาร HTML ทุกฉบับมีโครงสร้างพื้นฐานเหมือนกัน

เอกสาร HTML5 ที่ถูกต้องจะเริ่มต้นด้วยประกาศ DOCTYPE เสมอ มีองค์ประกอบราก html และภายในองค์ประกอบนั้นมีส่วน head สำหรับข้อมูลเมตา กับส่วน body สำหรับเนื้อหาที่มองเห็นได้ การทำความเข้าใจโครงสร้างนี้คือขั้นตอนที่ศูนย์

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Page</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

ประกาศ DOCTYPE

<!DOCTYPE html> ไม่ใช่แท็ก HTML แต่เป็นคำสั่งให้เบราว์เซอร์แสดงหน้าเว็บในโหมดมาตรฐาน หากไม่มีคำสั่งนี้ เบราว์เซอร์จะเปลี่ยนไปใช้ "โหมดแปลกประหลาด" ซึ่งแสดงหน้าเว็บไม่สอดคล้องกัน ควรวางคำสั่งนี้ไว้ที่บรรทัดที่ 1 เสมอ

องค์ประกอบ &lt;html&gt; และแอตทริบิวต์ lang

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

<html lang="en">
<!-- or -->
<html lang="fr">
<html lang="de">

องค์ประกอบ &lt;head&gt;

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

เมตาแท็กชุดอักขระและวิวพอร์ต

<meta charset="UTF-8"> บอกให้เบราว์เซอร์ถอดรหัสไฟล์เป็น UTF-8 ซึ่งรองรับอักขระนานาชาติทั้งหมด ส่วน <meta name="viewport"> ทำให้การออกแบบที่ปรับตามหน้าจอทำงานบนอุปกรณ์เคลื่อนที่ได้

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

องค์ประกอบ &lt;title&gt;

ข้อความใน <title> จะปรากฏบนแท็บเบราว์เซอร์ รายการบุ๊กมาร์ก และผลการค้นหาของเครื่องมือค้นหา ควรเขียนให้กระชับ (50–60 ตัวอักษร) สื่อความหมายชัดเจน และใส่ชื่อแบรนด์ไว้ท้ายสุด

<title>Getting Started with HTML | CoddyKit</title>

การเชื่อมโยง CSS และแบบอักษร

เชื่อมโยงสไตล์ชีตภายนอกด้วย <link> ภายใน head ใช้ rel="stylesheet" และ href ที่ถูกต้อง Google Fonts และบริการแบบอักษรอื่น ๆ ก็เชื่อมโยงด้วยวิธีนี้เช่นกัน

<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet">

องค์ประกอบ &lt;body&gt;

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

แท็กสคริปต์: ตำแหน่งที่ควรวาง

วาง <script src="app.js" defer></script> ไว้ใน <head> แอตทริบิวต์ defer จะดาวน์โหลดสคริปต์ไปพร้อมกันและเรียกใช้หลังจากแยกวิเคราะห์ HTML เสร็จสมบูรณ์ ซึ่งเป็นตัวเลือกเริ่มต้นที่ปลอดภัยที่สุด

<head>
  <script src="app.js" defer></script>
</head>

ความคิดเห็นใน HTML

ใช้ <!-- comment --> เพื่อเพิ่มหมายเหตุลงใน HTML ความคิดเห็นจะไม่แสดงให้ผู้ใช้เห็น แต่จะมองเห็นได้ในมุมมองซอร์สโค้ด ใช้ความคิดเห็นเพื่ออธิบายเจตนา ระบุส่วนต่าง ๆ หรือปิดการทำงานของโค้ดชั่วคราวระหว่างแก้จุดบกพร่อง

<!-- Navigation section -->
<nav>
  ...
</nav>
<!-- End navigation -->

การตรวจสอบความถูกต้อง: ตัวตรวจสอบของ W3C

วาง HTML ของคุณลงใน validator.w3.org เพื่อตรวจหาข้อผิดพลาด HTML ที่ถูกต้องช่วยลดความไม่สอดคล้องกันระหว่างเบราว์เซอร์ ช่วยให้โปรแกรมอ่านหน้าจอแยกวิเคราะห์หน้าเว็บได้อย่างถูกต้อง และเป็นเครื่องบ่งชี้ถึงฝีมือระดับมืออาชีพ

ตรวจสอบอย่างรวดเร็ว

ควรวางแท็ก <meta charset="UTF-8"> ไว้ที่ใด

ทบทวน: โครงสร้างพื้นฐานของเอกสาร HTML

ไฟล์ HTML ทุกไฟล์ต้องมี: → → (ชุดอักขระ วิวพอร์ต ชื่อเรื่อง ลิงก์ CSS) → (เนื้อหาที่มองเห็นได้ทั้งหมด) โครงสร้างพื้นฐานนี้ช่วยให้การแสดงผลสอดคล้องกันระหว่างเบราว์เซอร์ รองรับการเข้าถึง และช่วยให้เครื่องมือค้นหาจัดทำดัชนีได้อย่างถูกต้อง

คำถามที่พบบ่อย

บทเรียน “โครงสร้างเอกสาร: DOCTYPE html head body” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “โครงสร้างเอกสาร: DOCTYPE html head body” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Frontend Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “โครงสร้างเอกสาร: DOCTYPE html head body”

เขียนเอกสาร HTML5 ที่ถูกต้องตั้งแต่ต้น ตั้งแต่การประกาศ DOCTYPE ราก html ส่วน head สำหรับข้อมูลเมตา และส่วน body สำหรับเนื้อหา คุณปฏิบัติ Frontend Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Frontend Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Frontend Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน

บทเรียน “โครงสร้างเอกสาร: DOCTYPE html head body” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Frontend Academy นี้ได้ไหม

ได้ บทเรียน Frontend Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. โครงสร้างเอกสาร: DOCTYPE html head body
  2. แท็กเชิงความหมาย: header nav main article footer
  3. ข้อความ รูปภาพ ลิงก์ และรายการ
  4. ฟอร์ม: input label button
← กลับไปที่ Frontend Academy