# สำรวจองค์ประกอบของ HTML: ฐานรากของเว็บเพจ
HTML (HyperText Markup Language) เป็นภาษาที่ใช้ในการสร้างโครงสร้างของเว็บเพจ โดยมีองค์ประกอบหลายประเภทที่ช่วยในการกำหนดเนื้อหาและรูปแบบของข้อมูลที่จะแสดงได้อย่างมีประสิทธิภาพ ในบทความนี้ เราจะสำรวจองค์ประกอบหลักๆ ของ HTML ที่จำเป็นต้องรู้ เพื่อให้สามารถสร้างเว็บเพจที่มีคุณภาพได้
## 1. **แท็กพื้นฐาน** (Basic Tags)
### 1.1 `<html>`
แท็กนี้ใช้ในการกำหนดเอกสาร HTML ทั้งหมด มักจะเป็นแท็กแรกของเว็บเพจ
```html
<!DOCTYPE html>
<html>
<head>
<title>ชื่อเว็บเพจ</title>
</head>
<body>
<!-- เนื้อหาของเว็บเพจจะอยู่ที่นี่ -->
</body>
</html>
```
### 1.2 `<head>`
แท็กนี้ใช้ในการกำหนดส่วนหัวของเอกสาร ซึ่งสามารถรวมถึงข้อมูลเมตา เช่น ชื่อเว็บเพจ การเชื่อมโยงสไตล์ชีท และสคริปต์
### 1.3 `<title>`
แท็กนี้กำหนดชื่อของเอกสารที่จะแสดงในแท็บของเบราว์เซอร์
## 2. **แท็กเนื้อหา** (Content Tags)
### 2.1 `<h1> ถึง <h6>`
แท็ก headings ใช้ในการกำหนดหัวข้อของเนื้อหา โดย `<h1>` จะมีความสำคัญที่สุดและ `<h6>` จะมีความสำคัญน้อยสุด
```html
<h1>หัวข้อหลัก</h1>
<h2>หัวข้อรอง</h2>
```
### 2.2 `<p>`
แท็กนี้ใช้ในการกำหนดย่อหน้าหรือข้อความแบบปกติ
```html
<p>นี่คือย่อหน้าของข้อความ</p>
```
### 2.3 `<a>`
แท็กนี้ใช้ในการสร้างลิงค์ไปยังหน้าอื่นหรือเว็บไซต์ภายนอก
```html
<a href="https://www.example.com">ไปยังเว็บไซต์ตัวอย่าง</a>
```
## 3. **แท็กสำหรับรูปภาพและสื่อ** (Image and Media Tags)
### 3.1 `<img>`
แท็กนี้ใช้ในการแสดงรูปภาพ โดยต้องมีแอตทริบิวต์ `src` เพื่อระบุแหล่งที่มาของรูปภาพ
```html
<img src="image.jpg" alt="คำบรรยายรูปภาพ">
```
### 3.2 `<video>`
แท็กนี้ใช้ในการแสดงวิดีโอ โดยสามารถกำหนดแหล่งที่มาของวิดีโอและควบคุมพฤติกรรมได้
```html
<video controls>
<source src="movie.mp4" type="video/mp4">
ผู้เล่นของคุณไม่รองรับวิดีโอนี้
</video>
```
## 4. **แท็กการจัดรูปแบบ** (Formatting Tags)
### 4.1 `<strong>` และ `<em>`
แท็กเหล่านี้ใช้ในการเน้นข้อความ โดย `<strong>` ใช้สำหรับเน้นความสำคัญ ขณะที่ `<em>` ใช้สำหรับเน้นเสียง
```html
<strong>ข้อความที่สำคัญ</strong>
<em>ข้อความที่เน้นเสียง</em>
```
### 4.2 `<ul>` และ `<ol>`
แท็กเหล่านี้ใช้ในการสร้างรายการแบบไม่เรียงลำดับ (unordered list) และเรียงลำดับ (ordered list)
```html
<ul>
<li>รายการที่ 1</li>
<li>รายการที่ 2</li>
</ul>
<ol>
<li>รายการที่ 1</li>
<li>รายการที่ 2</li>
</ol>
```
## สรุป
การเข้าใจองค์ประกอบต่างๆ ของ HTML จะช่วยให้คุณสามารถสร้างเว็บเพจที่สวยงามและใช้งานได้อย่างมีประสิทธิภาพ การใช้แท็กที่ถูกต้องไม่เพียงแต่ช่วยในการจัดระเบียบข้อมูล ยังทำให้การทำงานร่วมกับ CSS และ JavaScript ง่ายขึ้นด้วย เมื่อคุณเข้าใจพื้นฐานแล้ว คุณสามารถเรียนรู้เทคโนโลยีอื่นๆ ที่เกี่ยวข้องเพื่อพัฒนาเว็บไซต์ที่ดียิ่งขึ้นในอนาคต!