ประกอบหน้าเว็บที่สมบูรณ์ด้วย doctype และแท็ก html, head, meta และ body
เปิดบทเรียนนี้ใน Kodokonจนถึงตอนนี้ คุณได้เขียนเศษชิ้นส่วนของ HTML แต่หน้าเว็บจริง ๆ นั้นจะปฏิบัติตามโครงสร้างที่สมบูรณ์แบบเดียวกันเสมอ คล้ายกับจดหมายทางการที่มีส่วนหัว เนื้อความ และลายเซ็นเสมอ ทุกอย่างเริ่มต้นด้วยการประกาศ <!DOCTYPE html> ที่เขียนไว้ในบรรทัดแรกสุด: มันบอกเบราว์เซอร์ว่าเอกสารใช้ HTML สมัยใหม่ มันไม่ใช่แท็ก มันเป็นการประกาศธรรมดา และไม่เคยถูกปิด
ต่อมาคือเอลิเมนต์ <html> ซึ่งเป็น ราก (root) ของหน้า: ทุกอย่างที่เหลืออยู่ภายในมัน แอตทริบิวต์ lang="en" ของมันระบุภาษาของเอกสาร มันมีลูกอยู่สองตัวพอดี ตัวแรกคือ <head>: บัตรประจำตัวของหน้า ที่มีข้อมูลซึ่ง มองไม่เห็น สำหรับผู้เข้าชม ต่อมาคือ <body>: เนื้อหาที่ มองเห็นได้ ทั้งหมด นั่นหมายถึงหัวเรื่อง ย่อหน้า รายการ ลิงก์ รูปภาพ และตารางของคุณ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My first page</title>
</head>
<body>
<h1>Welcome to my page!</h1>
<p>It contains everything I have learned.</p>
</body>
</html>มาดูเนื้อหาภายใน <head> กัน แท็กปิดตัวเอง <meta charset="UTF-8"> ระบุการเข้ารหัสอักขระ: มันคือสิ่งที่รับประกันว่าอักขระที่มีเครื่องหมาย (é, à, ç) จะแสดงผลอย่างถูกต้อง แท็ก <title> กำหนดชื่อเรื่องของหน้า ที่แสดงในแท็บของเบราว์เซอร์และในผลการค้นหา แท็ก <meta> ตัวที่สอง ที่รู้จักกันในชื่อแท็ก viewport มักถูกเพิ่มเข้ามาเพื่อให้หน้าเว็บปรับตัวเข้ากับความกว้างของหน้าจอโทรศัพท์
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<title>My first page</title>
</head>คุณสามารถลองทำได้เลยตอนนี้ โดยไม่ต้องติดตั้งอะไรทั้งสิ้น เปิดโปรแกรมแก้ไขข้อความธรรมดา (Notepad บน Windows, TextEdit บน Mac ในโหมดข้อความธรรมดา) คัดลอกโครงร่างที่สมบูรณ์ แล้วบันทึกไฟล์ด้วยนามสกุล .html เช่น index.html จากนั้นดับเบิลคลิกที่ไฟล์: มันจะเปิดในเบราว์เซอร์ของคุณ และหน้าเว็บแรกของคุณก็จะปรากฏขึ้น