> For the complete documentation index, see [llms.txt](https://handbook.novice.solutions/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://handbook.novice.solutions/internet-web/html.md).

# HTML

**HTML** (Hypertext Markup Language) คือ Markup Language ที่ใช้ในการสร้างและจัดรูปแบบเนื้อหาของเว็บเพจบนอินเทอร์เน็ต โดย HTML ทำหน้าที่กำหนดโครงสร้างของเว็บเพจและบอกเบราว์เซอร์ว่าจะต้องแสดงข้อมูลหรือเนื้อหาอย่างไร เช่น ข้อความ รูปภาพ ลิงก์ หรือวิดีโอ

**Tag** คือ เครื่องหมายที่ใช้ในการระบุว่าข้อความนั้นมีความหมายว่าอย่างไร หรือควรถูกจัดรูปแบบแบบไหน เช่นจะเป็นหัวข้อ ตัวหนา หรือเชื่อมโยงกับลิงก์

Tag ที่มี content อยู่ภายในจะมี pattern ดังนี้

```html
<name>content</name>
```

ส่วน Tag ที่ไม่มี content ภายในจะมี pattern ดังนี้

```html
<name />
```

**Element** คือ Tag + content ภายใน Tag

**Attribute** คือข้อมูลเพิ่มเติมที่ใช้ประกอบกับ **HTML Element** เพื่อให้ข้อมูลหรือกำหนดพฤติกรรมเพิ่มเติมสำหรับ element นั้น ๆ Attributes จะถูกเขียนภายในแท็กเปิดของ element และมีรูปแบบเป็น **ชื่อ (name)** และ **ค่า (value)** ซึ่งช่วยในการควบคุมหรือปรับแต่งลักษณะของ element ให้มีการทำงานเฉพาะเจาะจงมากขึ้น เช่น การกำหนดลิงก์, การเพิ่มภาพ, การระบุรหัสประจำตัว หรือการจัดรูปแบบเนื้อหา

```html
<a href="https://www.example.com">Click here to visit Example</a>
```

`href` ในแท็ก `<a>`: เป็น attribute ที่กำหนด URL ของลิงก์ หมายถึงลิงก์ที่จะเชื่อมโยงไปยัง <https://www.example.com>

***

### Font Style

| Tag                    | Style                                                                 |
| ---------------------- | --------------------------------------------------------------------- |
| `<b>...</b>`           | ตัวหนา                                                                |
| `<i>...</i>`           | ตัวเอียง                                                              |
| `<strong>...</strong>` | ใช้เน้นข้อความที่สำคัญ แสดงผลเหมือนตัวหนา                             |
| `<em>...</em>`         | ใช้เน้นข้อความที่ต้องการให้มีการเน้นเสียงในบทสนทนา แสดงผลเป็นตัวเอียง |
| `<code>...</code>`     | computer code                                                         |
| `<sub>...</sub>`       | ตัวห้อย                                                               |
| `<sup>...</sup>`       | ตัวยก                                                                 |

***

## Entity และ Character

เป็นวิธีการแทนที่หรือแสดงอักขระพิเศษใน HTML ที่ไม่สามารถใช้ได้โดยตรงในโค้ด

| Entity    | Character    |
| --------- | ------------ |
| \&amp;    | &            |
| \&lt;     | <            |
| \&gt;     | >            |
| \&quot;   | "            |
| \&apos;   | '            |
| \&frac14; | 1/4          |
| \&frac12; | 1/2          |
| \&frac34; | 3/4          |
| \&deg;    | `๐` (degree) |
| \&nbsp;   | (whitespace) |