HTML คืออะไร?
HTML (Hypertext Markup Language) คือภาษามาร์กอัปที่ใช้สำหรับสร้างเว็บเพจ เป็นมาตรฐานที่ใช้ในการแสดงผลเอกสารบนเว็บเบราว์เซอร์ HTML ประกอบด้วยชุดของแท็ก (tags) ที่ใช้กำหนดโครงสร้างและเนื้อหาของเว็บเพจ
ประวัติของ HTML
HTML ถูกพัฒนาโดย Tim Berners-Lee ในปี 1990 เพื่อใช้ในการแลกเปลี่ยนเอกสารระหว่างนักวิทยาศาสตร์ที่ CERN (องค์การวิจัยนิวเคลียร์ยุโรป) ตั้งแต่นั้นมา HTML ได้มีการพัฒนาอย่างต่อเนื่อง:
- HTML 2.0 (1995)
- HTML 3.2 (1997)
- HTML 4.01 (1999)
- XHTML 1.0 (2000)
- HTML5 (2014)
โครงสร้างพื้นฐานของเอกสาร HTML
เอกสาร HTML ประกอบด้วยองค์ประกอบพื้นฐานดังนี้:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ชื่อเว็บเพจ</title>
</head>
<body>
<h1>หัวข้อหลัก</h1>
<p>เนื้อหาย่อหน้า</p>
</body>
</html>
โครงสร้างนี้ประกอบด้วย:
<!DOCTYPE html>: ประกาศประเภทของเอกสาร<html>: แท็กรากของเอกสาร HTML<head>: ส่วนหัวของเอกสาร ประกอบด้วยข้อมูลเมตา (metadata)<title>: ชื่อของเว็บเพจที่แสดงบนแท็บของเบราว์เซอร์<body>: ส่วนเนื้อหาของเอกสารที่แสดงผลบนเบราว์เซอร์
แท็ก HTML ที่ใช้บ่อย
แท็กหัวข้อ (Heading Tags)
<h1>หัวข้อระดับ 1</h1> <h2>หัวข้อระดับ 2</h2> <h3>หัวข้อระดับ 3</h3> <h4>หัวข้อระดับ 4</h4> <h5>หัวข้อระดับ 5</h5> <h6>หัวข้อระดับ 6</h6>
แท็กข้อความ (Text Tags)
<p>ย่อหน้า</p> <strong>ข้อความตัวหนา</strong> <em>ข้อความตัวเอียง</em> <mark>ข้อความไฮไลท์</mark> <del>ข้อความที่ถูกลบ</del> <ins>ข้อความที่ถูกเพิ่ม</ins> <sub>ข้อความตัวห้อย</sub> <sup>ข้อความตัวยก</sup>
แท็กลิสต์ (List Tags)
<ul>
<li>รายการที่ไม่มีลำดับ 1</li>
<li>รายการที่ไม่มีลำดับ 2</li>
</ul>
<ol>
<li>รายการที่มีลำดับ 1</li>
<li>รายการที่มีลำดับ 2</li>
</ol>
<dl>
<dt>คำศัพท์</dt>
<dd>คำอธิบาย</dd>
</dl>
แท็กลิงก์และรูปภาพ (Link and Image Tags)
<a href="https://www.example.com">ลิงก์</a> <img src="image.jpg" alt="คำอธิบายรูปภาพ">
แท็กตาราง (Table Tags)
<table>
<thead>
<tr>
<th>หัวข้อคอลัมน์ 1</th>
<th>หัวข้อคอลัมน์ 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>ข้อมูล 1</td>
<td>ข้อมูล 2</td>
</tr>
</tbody>
</table>
แท็กฟอร์ม (Form Tags)
<form action="/submit" method="post">
<label for="name">ชื่อ:</label>
<input type="text" id="name" name="name">
<label for="email">อีเมล:</label>
<input type="email" id="email" name="email">
<input type="submit" value="ส่งข้อมูล">
</form>
HTML5 และคุณสมบัติใหม่
HTML5 เป็นเวอร์ชันล่าสุดของ HTML ที่เพิ่มคุณสมบัติใหม่ๆ มากมาย:
แท็กโครงสร้างใหม่ (New Structural Tags)
<header>: ส่วนหัวของเอกสารหรือส่วน<nav>: ส่วนนำทาง<main>: เนื้อหาหลักของเอกสาร<section>: ส่วนของเนื้อหาที่เกี่ยวข้องกัน<article>: เนื้อหาที่เป็นเอกเทศ<aside>: เนื้อหาที่เกี่ยวข้องแต่ไม่ใช่เนื้อหาหลัก<footer>: ส่วนท้ายของเอกสารหรือส่วน<figure>และ<figcaption>: สำหรับรูปภาพและคำอธิบาย
แท็กมัลติมีเดีย (Multimedia Tags)
<audio>: สำหรับเล่นไฟล์เสียง<video>: สำหรับเล่นไฟล์วิดีโอ<canvas>: สำหรับวาดกราฟิกด้วย JavaScript<svg>: สำหรับกราฟิกแบบเวกเตอร์
ประเภทอินพุตใหม่ (New Input Types)
HTML5 เพิ่มประเภทอินพุตใหม่ๆ สำหรับฟอร์ม:
email: สำหรับอีเมลurl: สำหรับ URLnumber: สำหรับตัวเลขrange: สำหรับช่วงค่าdate,time,datetime-local: สำหรับวันที่และเวลาcolor: สำหรับเลือกสีsearch: สำหรับช่องค้นหาtel: สำหรับเบอร์โทรศัพท์
แนวทางการใช้ HTML ที่ดี
การใช้ HTML ที่ดีควรคำนึงถึงสิ่งต่อไปนี้:
1. ใช้ HTML เชิงความหมาย (Semantic HTML)
ใช้แท็กที่สื่อความหมายของเนื้อหา เช่น <header>, <nav>, <main>, <article> แทนที่จะใช้ <div> ทั้งหมด
2. ใช้ Accessibility ที่ดี
ทำให้เว็บไซต์เข้าถึงได้โดยผู้ใช้ทุกคน รวมถึงผู้ที่มีความบกพร่องทางการมองเห็น:
- ใช้ attribute
altสำหรับรูปภาพ - ใช้
<label>สำหรับฟอร์ม - ใช้โครงสร้างหัวข้อ (
<h1>ถึง<h6>) อย่างเหมาะสม - ใช้ ARIA roles เมื่อจำเป็น
3. แยก HTML, CSS, และ JavaScript
แยกโครงสร้าง (HTML), การแสดงผล (CSS), และพฤติกรรม (JavaScript) ออกจากกัน:
- ใช้ไฟล์ CSS ภายนอกแทนที่จะใช้ inline styles
- ใช้ไฟล์ JavaScript ภายนอกแทนที่จะใช้ inline scripts
4. ตรวจสอบความถูกต้อง (Validation)
ตรวจสอบความถูกต้องของ HTML ด้วยเครื่องมือตรวจสอบความถูกต้องของ W3C เพื่อให้แน่ใจว่าโค้ดของคุณเป็นไปตามมาตรฐาน