Mac สำหรับคนที่มาอ่าน Blog นี้เป็น Blog แรก เราขอแนะนำให้อ่านบทความที่อยู่ในหัวข้อ อยากเป็น Frontend Developer ต้องรู้อะไรบ้าง? ก่อนนะครับเป็นหนึ่งใน Series Road to Frontend ที่จะช่วยให้คุณมีความรู้พื้นฐานที่จำเป็นสำหรับการเริ่มต้นเรียนรู้การพัฒนาเว็บไซต์
HTML คืออะไร?
HTML ย่อมาจาก HyperText Markup Language เป็นภาษาที่ใช้สำหรับสร้างโครงสร้างของเว็บไซต์ HTML ประกอบด้วย Elements และ Attributes ที่ใช้ในการจัดระเบียบเนื้อหาบนเว็บให้มีความหมายและโครงสร้างที่ชัดเจน
เปรียบเทียบให้เข้าใจง่าย
ลองนึกภาพ HTML เหมือนกับการสร้างบ้าน:
- HTML Elements = วัสดุต่างๆ เช่น อิฐ, ไม้, เหล็ก
- Attributes = คุณสมบัติของวัสดุ เช่น สี, ขนาด, ความแข็งแรง
- โครงสร้าง HTML = แผนผังบ้านที่บอกว่าอะไรอยู่ตรงไหน
HTML Elements คืออะไร?
Elements คือส่วนประกอบพื้นฐานของ HTML ที่ใช้ในการห่อหุ้มหรือครอบเนื้อหาต่างๆ เพื่อให้แสดงผลหรือทำงานในลักษณะที่ต้องการ
โครงสร้างของ HTML Element
<h1>This is HTML</h1>ในตัวอย่างข้างต้น:
<h1>= Opening tag (แท็กเปิด)This is HTML= Content (เนื้อหา)</h1>= Closing tag (แท็กปิด)
การซ้อน Elements (Nesting)
HTML Elements สามารถซ้อนกันได้ แต่ต้องปิดแท็กในลำดับย้อนกลับ:
<p>ย่อหน้านี้มี <strong><em>ข้อความที่เน้นและสำคัญ</em></strong> อยู่ข้างใน</p>กฎสำคัญ: ต้องปิดแท็กในลำดับย้อนกลับ
- ✅ ถูกต้อง:
<p><strong><em>ข้อความ</em></strong></p> - ❌ ผิด:
<p><strong><em>ข้อความ</strong></em></p>
ประเภทของ HTML Elements
1. Non-replaced Elements (องค์ประกอบที่ไม่ถูกแทนที่)
เป็น Elements ที่มีแท็กเปิดและปิด และสามารถมีเนื้อหาข้างในได้ เช่น:
<p>สำหรับย่อหน้า<h1>ถึง<h6>สำหรับหัวข้อ<ul>,<ol>,<li>สำหรับรายการ
2. Replaced and Void Elements (องค์ประกอบที่ถูกแทนที่)
เป็น Elements ที่ไม่มีเนื้อหาข้างในและไม่ต้องปิดแท็ก:
<img src="image.jpg" alt="รูปภาพ"><input type="text"><br>(ขึ้นบรรทัดใหม่)
Attributes คืออะไร?
Attributes คือข้อมูลเพิ่มเติมที่บอกคุณสมบัติหรือพฤติกรรมของ Element
โครงสร้างของ Attribute
<a href="#register">ลงทะเบียน</a>ในตัวอย่างข้างต้น:
href= ชื่อ attribute#register= ค่าของ attribute
ประเภทของ Attributes
1. Global Attributes
ใช้ได้กับทุก Element:
id= ระบุตัวตนเฉพาะclass= ระบุกลุ่มstyle= กำหนดสไตล์
2. Element-specific Attributes
ใช้เฉพาะกับ Element บางประเภท:
src= ใช้กับ<img>เพื่อระบุที่มาของรูปภาพhref= ใช้กับ<a>เพื่อระบุลิงก์
3. Boolean Attributes
ไม่ต้องมีค่า (มีหรือไม่มีก็ได้):
<input type="checkbox" checked>
<img src="image.jpg" alt="รูปภาพ" ismap>ตัวอย่างการใช้งาน HTML พื้นฐาน
1. โครงสร้างเอกสาร HTML
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>เว็บไซต์ของฉัน</title>
</head>
<body>
<h1>ยินดีต้อนรับ</h1>
<p>นี่คือเว็บไซต์แรกของฉัน</p>
</body>
</html>2. การสร้างลิงก์
<a href="https://www.google.com">ไปที่ Google</a>
<a href="#section1">ไปที่ส่วนที่ 1</a>3. การใส่รูปภาพ
<img src="cat.jpg" alt="แมวน่ารัก" width="300" height="200">4. การสร้างรายการ
<ul>
<li>รายการที่ 1</li>
<li>รายการที่ 2</li>
<li>รายการที่ 3</li>
</ul>
<ol>
<li>ขั้นตอนที่ 1</li>
<li>ขั้นตอนที่ 2</li>
<li>ขั้นตอนที่ 3</li>
</ol>ข้อควรระวังและ Best Practices
1. การปิดแท็ก
- HTML ยืดหยุ่นมาก บางแท็กไม่ต้องปิดก็ได้ แต่แนะนำให้ปิดเสมอ
- แท็กที่ต้องปิดเสมอ:
<script>,<style>,<title>,<textarea>
2. การใช้ตัวพิมพ์เล็ก
- แนะนำให้ใช้ตัวพิมพ์เล็กสำหรับชื่อ Element และ Attribute
- ค่าของ Attribute บางตัวอาจต้องใช้ตัวพิมพ์ใหญ่
3. ความหมายของ Element
- เลือก Element ที่เหมาะสมกับเนื้อหา
- ใช้
<h1>สำหรับหัวข้อหลัก,<h2>สำหรับหัวข้อย่อย - ใช้
<p>สำหรับย่อหน้า,<span>สำหรับข้อความสั้นๆ
เช่น
<!-- ดีกว่า -->
<header>
<nav>
<main>
<article>
<footer>
<!-- แทนที่จะใช้ -->
<div class="header">
<div class="nav">
<div class="main">
<div class="article">
<div class="footer">สรุป
HTML เป็นพื้นฐานสำคัญสำหรับ Frontend Developer เพราะ:
- เป็นโครงสร้างของเว็บไซต์ - ทุกเว็บไซต์ต้องมี HTML
- เรียนรู้ง่าย - ไม่ต้องเขียนโปรแกรมที่ซับซ้อน
- เป็นพื้นฐานสำหรับ CSS และ JavaScript - ต้องเข้าใจ HTML ก่อน
- สำคัญสำหรับ SEO - search engine ใช้ HTML ในการเข้าใจเนื้อหา
แหล่งข้อมูลอ้างอิง:
