🏗️ HTML Structures
<!--
- a คือ Tag name
- <a> คือ Opening Tag
- </a> คือ Closing Tag
- href คือ Attribute name
- /about.html คือ Attribute value
- About คือ Text หรือ Content
- <a href="/about.html">About</a> คือ Element
-->
<a href="/about.html">About</a>
<!-- Void Element -->
<img src="/img/dog.png" alt="A dog">
<!-- Nesting Elements -->
<ul> <!-- Parent -->
<li>Item 1</li> <!-- Child (1) มี Sibling (2,3) -->
<li>Item 2</li> <!-- Child (2) มี Sibling (1,3) -->
<li>Item 3</li> <!-- Child (3) มี Sibling (1,2) -->
</ul>
🔝 HTML Head
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="This is an example of a well-structured HTML head section.">
<meta name="keywords" content="HTML, CSS, JavaScript, Example">
<title>Page Title</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="styles.css">
<script src="script.js" defer></script>
</head>
🌏 Global Attributes
| Attribute Name | ความหมาย |
|---|
id | กำหนด ID (ต้องเป็นหนึ่งเดียว) |
class | กำหนด Class สำหรับการใช้ CSS หรือ JS |
style | กำหนด Style ของ CSS |
title | กำหนดชื่อของ Element |
lang | กำหนดภาษาของเว็บ |
tabindex | กำหนดตำแหน่งการ Tab |
autofocus | Focus ทันทีเมื่อเข้าหน้าเว็บ |
data-* | กำหนดข้อมูลสำหรับ JS |
role | กำหนด Role สำหรับการใช้ Accessibility |
aria-* | กำหนด ARIA สำหรับการใช้ Accessibility |
🔠 Elements ที่ไม่มี CSS Style พิเศษ
🔗 Anchor Element
<a href="http://example.com" target="_blank">Go to Example.com</a>
<a href="path/to/file.html">Go to File [Current]</a>
<a href="./path/to/file.html">Go to File [Current]</a>
<a href="../path/to/file.html">Go to File [Parent]</a>
<a href="/path/to/file.html">Go to File [Root]</a>
<a href="mailto:[email protected]">Send Email</a>
<a href="tel:021234567">Call 02-123-4567</a>
<a href="#top">Go to Top</a>
<!-- Link to Document Fragment -->
<a href="#installation">1. Installation</a>
<a href="#usage">2. Usage</a>
<a href="#license">3. License</a>
<!-- Document Fragments -->
<h2 id="installation">Installation</h2>
<h2 id="usage">Usage</h2>
<h2 id="license">License</h2>
📃 List Elements
<ol>
<li>Ordered item 1
<ul>
<li>Nested unordered item 1</li>
<li>Nested unordered item 2</li>
</ul>
</li>
<li>Ordered item 2
<ul>
<li>Nested unordered item 1</li>
<li>Nested unordered item 2</li>
</ul>
</li>
</ol>
<ol type="A">
<li>Item A</li>
<li>Item B</li>
</ol>
📖 Definition Elements
<dl>
<dt>Frontend</dt>
<dd>การพัฒนาหน้าเว็บเพื่อการแสดงผลด้วย HTML, CSS และ JavaScript</dd>
<dt>HTML</dt>
<dd>HyperText Markup Language สำหรับกำหนดโครงสร้างเว็บ</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets สำหรับกำหนดรูปแบบของเว็บ</dd>
<dt>JavaScript</dt>
<dd>ภาษาโปรแกรมสำหรับการเพิ่มโต้ตอบของหน้าเว็บแบบแอปพลิเคชัน</dd>
</dl>
😶🌫️ Hide Detail Elements
<details>
<summary>หัวข้อ</summary>
<p>ข้อความจะซ่อนและแสดงผล</p>
</details>
🗳️ Dialog Elements
<button onclick="document.getElementById('myDialog').showModal()">
เปิดกล่องข้อความ
</button>
<dialog id="myDialog">
<p>ข้อความในกล่อง</p>
<button onclick="document.getElementById('myDialog').close()">
ปิด
</button>
</dialog>
📸 Image Elements
<img src="/img/dog.png" alt="A dog" width="300" height="200">
<a href="https://en.wikipedia.org/wiki/Cat">
<img src="/img/cat.png" alt="A cat">
</a>
<figure>
<img src="/img/dog.png" alt="A dog">
<figcaption>A dog</figcaption>
</figure>
🎥 Video Elements
<video src="/video/bike.mp4" controls autoplay loop></video>
<video src="/video/car.mp4" controls poster="/img/car.png"></video>
<video controls>
<source src="/video/racing.mp4" type="video/mp4">
<source src="/video/racing.webm" type="video/webm">
<source src="/video/racing.ogv" type="video/ogg">
Your browser doesn't support video.
</video>
🔉 Audio Elements
<audio src="/audio/music.mp3" controls loop></audio>
<audio controls>
<source src="/audio/bird.mp3" type="audio/mpeg">
<source src="/audio/bird.ogg" type="audio/ogg">
Your browser doesn't support audio.
</audio>
🛏️ Embed Elements
<iframe src="https://example.com/" width="100%" height="500"></iframe>
<iframe width="909" height="511" src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="Rick Astley - Never Gonna Give You Up (Official Music Video)" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d496115.4595110824!2d100.3034793446557!3d13.724381005955747!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x311d6032280d61f3%3A0x10100b25de24820!2sBangkok!5e0!3m2!1sen!2sth!4v1730883862398!5m2!1sen!2sth" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
📊 Table Elements
<table>
<caption>ตารางแสดงข้อมูลสมาชิก</caption>
<thead>
<tr>
<th rowspan="2">ชื่อ-สกุล</th>
<th colspan="2">ที่อยู่</th>
<th rowspan="2">เบอร์โทรศัพท์</th>
</tr>
<tr>
<th>จังหวัด</th>
<th>อำเภอ</th>
</tr>
</thead>
<tbody>
<tr>
<td>นายสมชาย</td>
<td>กรุงเทพฯ</td>
<td>บางเขน</td>
<td>081-1234567</td>
</tr>
<tr>
<td>นางสาวสมพร</td>
<td>เชียงใหม่</td>
<td>สันทราย</td>
<td>061-1234567</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">รวม 2 คน</td>
</tr>
</tfoot>
</table>
<!-- GET Method -->
<form action="/api/movie/search">
<label>
<span>ชื่อหนัง</span>
<input type="text" name="movie_name">
</label>
<label>
<span>หมวดหมู่</span>
<select name="movie_genre">
<option value="action">แอคชั่น</option>
<option value="comedy">ตลก</option>
<option value="drama">ดราม่า</option>
<option value="horror">สยองขวัญ</option>
<option value="romance">โรแมนติก</option>
</select>
</label>
<button>ค้นหา</button>
</form>
<!-- POST Method -->
<form action="/api/login" method="post">
<label for="email">Email</label>
<input type="text" id="email" name="email" required>
<label for="password">Password</label>
<input type="password" id="password" name="password" required>
<button type="submit">Login</button>
</form>
<!-- POST Method + File -->
<form action="/api/user/upload-avatar" method="post" enctype="multipart/form-data">
<label for="avatar">Avatar</label>
<input type="file" id="avatar" name="avatar" required>
<button>Upload</button>
</form>
| Attribute | ใช้บน | คุณสมบัติ |
|---|
action | <form> | กำหนด HTTP Method |
enctype | <form> | กำหนดประเภทของข้อมูล |
value | <input> | ค่าเริ่มต้น |
checked | <input type="checkbox"> <input type="radio"> | ทำเครื่องหมายเป็นค่าเริ่มต้น |
selected | <option> | เลือกตัวเลือกนี้โดยอัตโนมัติ |
name | <button> <form> <fieldset> <input> <select> <textarea> | กำหนดชื่อที่จะส่งข้อมูล |
type | <input> <button> | ประเภทของ Elements |
required | <input> <select> <textarea> | จำเป็นต้องใส่ข้อมูล |
readonly | <input> <textarea> | อ่านอย่างเดียว |
disabled | <button> <fieldset> <input> <optgroup> <option> <select> <textarea> | ไม่เปิดให้ใช้งานและไม่ส่งข้อมูล |
pattern | <input> | RegExr สำหรับตรวจสอบข้อมูล |
minlength maxlength | <input> | ใช้กับข้อความ กำหนดความยาวขั้นต่ำและขั้นสูง |
min max | <input> | ใช้กับจำนวนหรือวัน กำหนดขั้นต่ำและขั้นสูง |
step | <input> | ลำดับขั้นของจำนวนเมื่อเพิ่มและลด |
novalidate | <form> | ไม่จำเป็นต้องตรวจสอบความถูกต้อง |
multiple | <input type="file"> <select> | เลือกได้หลายข้อมูล |
placeholder | <input> <textarea> | แสดงข้อความเมื่อยังไม่ได้พิมพ์ |
list | <input> | รายการที่เตรียมไว้ ใช้ร่วมกับ <datalist> |
cols rows | <textarea> | กำหนดสูงและยาวของกล่อง |
autocomplete | <form> <input> <select> <textarea> | กำหนดชุดคำ Autocomplete |
🔽 Select Elements
<select name="province">
<option value="" disabled selected>เลือกจังหวัด</option>
<optgroup label="ภาคเหนือ">
<option value="เชียงใหม่">เชียงใหม่</option>
<option value="เชียงราย">เชียงราย</option>
</optgroup>
<optgroup label="ภาคกลาง">
<option value="กรุงเทพฯ">กรุงเทพฯ</option>
<option value="อยุธยา">อยุธยา</option>
</optgroup>
<optgroup label="ภาคใต้">
<option value="ภูเก็ต">ภูเก็ต</option>
<option value="สงขลา">สงขลา</option>
</optgroup>
</select>
📚 Fieldset
<fieldset disabled>
<legend>ข้อมูลราษฎร (ไม่สามารถแก้ไขได้)</legend>
<div>
<strong>เพศ</strong>
<label for="male">ชาย</label>
<input id="male" name="gender" type="radio" value="male" checked>
<label for="female">หญิง</label>
<input id="female" name="gender" type="radio" value="female">
</div>
<div>
<label for="birth">วันเกิด</label>
<input id="birth" name="birth_date" type="date" value="1992-02-25">
</div>
</fieldset>
<fieldset>
<legend>ประวัติ</legend>
<div>
<label for="full-name">ชื่อจริง</label>
<input id="full-name" name="full_name" type="text" value="ทองดี มีสุข">
</div>
</fieldset>