Wrikka Learn

Dark mode

HTML Complete Guide ​

Basic Structure ​

โครงสร้างพื้นฐานของเอกสาร HTML

index.html
html
<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
</head>
<body>
  <h1>Heading</h1>
  <p>Paragraph</p>
</body>
</html>

Common Elements ​

ElementExampleDescription
Heading<h1>...</h1>หัวข้อระดับ 1-6
Paragraph<p>...</p>ย่อหน้า
Link<a href="...">ลิงก์
Image<img src="...">รูปภาพ
List<ul> <li>...</li> </ul>รายการ
Table<table> <tr> <td>...</td> </tr> </table>ตาราง
Form<form> <input> </form>ฟอร์ม

Semantic Elements ​

องค์ประกอบเชิงความหมายของเอกสาร HTML

ElementPurposeExampleMDN Docs
<header>ส่วนหัวของหน้าเว็บหรือส่วนของเนื้อหา<header><h1>Title</h1></header>developer.mozilla.org faviconMDN
<nav>เมนูนำทาง<nav><ul><li><a href="#">Link</a></li></ul></nav>developer.mozilla.org faviconMDN
<main>เนื้อหาหลักของหน้า<main><article>...</article></main>developer.mozilla.org faviconMDN
<article>เนื้อหาที่เป็นเอกเทศ<article><h2>Blog Post</h2><p>Content</p></article>developer.mozilla.org faviconMDN
<aside>เนื้อหารองที่เกี่ยวข้อง<aside><h3>Related</h3><p>Info</p></aside>developer.mozilla.org faviconMDN
<footer>ส่วนท้ายของหน้าเว็บหรือส่วนของเนื้อหา<footer><p>Copyright</p></footer>developer.mozilla.org faviconMDN
semantic.html
html
<header>
  <nav>...</nav>
</header>
<main>
  <article>...</article>
  <aside>...</aside>
</main>
<footer>...</footer>

Forms ​

แบบฟอร์มสำหรับเก็บข้อมูลผู้ใช้

form.html
html
<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
  
  <button type="submit">Submit</button>
</form>

HTML5 APIs ​

เอพีไอของ HTML5 สำหรับการพัฒนาเว็บ

api.html
html
<!-- Geolocation -->
<button onclick="getLocation()">Get Location</button>

<!-- Local Storage -->
<script>
localStorage.setItem('key', 'value');
</script>

<!-- Canvas -->
<canvas id="myCanvas" width="200" height="100"></canvas>

Multimedia ​

มัลติมีเดียสำหรับเพิ่มความน่าสนใจ

media.html
html
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
</video>

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
</audio>

Meta Tags & SEO ​

เมตาแท็กและการทำ SEO สำหรับการเพิ่มความสามารถในการค้นหา

meta.html
html
<head>
  <meta charset="UTF-8">
  <meta name="description" content="Free Web tutorials">
  <meta name="keywords" content="HTML, CSS, JavaScript">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

Accessibility ​

การเข้าถึงสำหรับผู้ใช้ที่มีความต้องการพิเศษ

accessibility.html
html
<img src="image.jpg" alt="คำอธิบายรูปภาพ">
<button aria-label="ปิดเมนู">X</button>
<div role="navigation">...</div>

Character Entities ​

อักขระพิเศษสำหรับแสดงอักขระที่ไม่สามารถพิมพ์ได้

EntityResultDescription
&lt;<Less than
&gt;>Greater than
&amp;&Ampersand
&copy;Copyright
&nbsp;Non-breaking space

Global Attributes ​

คุณสมบัติทั่วไปที่ใช้ได้กับแท็ก HTML ส่วนใหญ่ คุณสมบัติที่ใช้ได้กับแท็ก HTML ส่วนใหญ่

AttributeDescription
idระบุเอกลักษณ์เฉพาะ
classระบุคลาสสำหรับ CSS
styleระบุสไตล์ inline
titleระบุข้อมูลเพิ่มเติม
data-*เก็บข้อมูลที่กำหนดเอง
hiddenซ่อน element

Embedding Content ​

การฝังเนื้อหาจากแหล่งอื่น

embed.html
html
<!-- Embed YouTube video -->
<iframe width="560" height="315" src="https://www.youtube.com/embed/..."></iframe>

<!-- Embed Google Map -->
<iframe src="https://www.google.com/maps/embed?..."></iframe>

Best Practices ​

แนวทางปฏิบัติที่ดีสำหรับการเขียน HTML

PracticeDescription
Semantic HTMLใช้ Semantic HTML
Document Structureใช้โครงสร้างเอกสารที่ถูกต้อง
Image Accessibilityระบุ alt สำหรับรูปภาพ
Code Formattingใช้ indentation ที่สม่ำเสมอ
Naming Conventionsตั้งชื่อ class/id ที่สื่อความหมาย
Style Separationหลีกเลี่ยง inline styles
Case Consistencyใช้ lowercase สำหรับชื่อแท็กและคุณสมบัติ
Tag Closureปิดแท็กทั้งหมดให้ถูกต้อง

Last updated: