1. เข้าใจเรื่อง Tags
HTML ทำงานผ่านสิ่งที่เรียกว่า **Tags** ซึ่งมักจะมาเป็นคู่เสมอ คือ แท็กเปิด <tag> และแท็กปิด </tag>
เพื่อบอก Browser ว่าเนื้อหาตรงนั้นคืออะไร
2. The Boilerplate
ทุกไฟล์ HTML ต้องเริ่มต้นด้วยโครงสร้างมาตรฐานเพื่อให้ Browser รู้จัก
<!DOCTYPE html> <!-- บอกว่าเป็น HTML5 -->
<html>
<head>
<title>ชื่อหน้าเว็บ</title>
</head>
<body>
<!-- เนื้อหาที่จะแสดงโชว์จริง -->
</body>
</html>3. Common Elements
นี่คือกลุ่มแท็กพื้นฐานที่ MarcusCode แนะนำให้เริ่มเรียนรู้:
Headings (<h1> ถึง <h6>)
ใช้กำหนดหัวข้อความสำคัญลดหลั่นลงมา
Paragraph (<p>)
ใช้สำหรับเนื้อหาที่เป็นข้อความปกติ
Link (<a href="...">)
ใช้สร้างจุดเชื่อมโยงไปยังหน้าอื่นๆ
Image (<img src="...">)
ใช้แสดงรูปภาพ (เป็นแท็กเดี่ยว ไม่มีแท็กปิด)
4. Attributes: ส่วนขยาย
เราสามารถใส่ "ข้อมูลเพิ่มเติม" ให้กับแท็กได้ผ่าน Attribute เช่น กำหนดสี หรือลิงก์
<!-- href คือ attribute ที่บอกว่าลิงก์จะไปที่ไหน -->
<a href="https://google.com" target="_blank">Go to Google</a>Semantic
เลือกใช้แท็กให้ตรงความหมาย (เช่น nav, footer)
Hierarchy
การจัดลำดับชั้นของข้อมูลให้ Google ชอบ (SEO)
Nesting
การซ้อนแท็กในแท็กอย่างถูกต้อง