ใช้ <input type=reset> สร้างปุ่มล้างข้อมูลฟอร์ม คืนค่า input ทุกตัวเป็นค่าเริ่มต้น (initial value) รูปแบบพื้นฐาน <form> <input type=text name=username value=default> <input type=reset value=Reset Form> </form> ตัวอย่างเต็ม <!DOCTYPE html> <html> <bo

Bibliography คือรายการหนังสือ/แหล่งอ้างอิงที่ใช้ในงานเขียน สร้างได้ด้วย <ol> (ลำดับ) หรือ <ul> ร่วมกับ <cite> สำหรับชื่อผลงาน โครงสร้างแนะนำ <ol class=bibliography> <li> <cite>Book Title</cite> by Author Name. Publisher, Year. </li> <li&g

ใช้ CSS float: left หรือ Flexbox/Grid เพื่อวาง <div> 2 ตัวติดกันแนวนอน วิธีที่ 1: Float (Legacy) <!DOCTYPE html> <html> <head> <title>HTML div side by side</title> <style> .box { width: 100px; height: 100px; float: left; margin: 10px; } .clearfi

ใช้ CSS float: left หรือ Flexbox/Grid เพื่อวาง <div> 3 ตัวติดกันแนวนอน วิธีที่ 1: Float (Legacy) <!DOCTYPE html> <html> <head> <title>HTML div side by side</title> <style> .box { width: 100px; height: 100px; float: left; margin: 10px; } .clearfi

แท็ก <div> (division) เป็น block-level container ใช้จัดกลุ่ม element หลายตัวเป็น section เพื่อ apply style หรือ layout ร่วมกัน คุณสมบัติ Block element - ขึ้นบรรทัดใหม่ กว้างเต็ม container ไม่มี semantic meaning (ใช้ <section>, <article>, <aside>, <nav>, <main&g

แท็ก <span> เป็น inline container ใช้จัดกลุ่มและ apply style ให้ส่วนหนึ่งของข้อความ (inline-level) ไม่สร้างบรรทัดใหม่ ความแตกต่าง span vs div spandiv Inline elementBlock element ไม่ขึ้นบรรทัดใหม่ขึ้นบรรทัดใหม่ วางใน block element ได้ไม่ควรวางใน inline element ใช้

CSS Class Selector ใช้เลือก element ที่มี class=classname เพื่อกำหนด style ให้กลุ่ม element พร้อมกัน รูปแบบพื้นฐาน .classname { property: value; } ตัวอย่าง: Class แบบง่าย <!DOCTYPE html> <html> <head> <style> .highlight { background: #ffff00; color: #000; } </sty

Floating Layout ใช้ CSS float property จัด layout แบบหลายคอลัมน์ (Multi-column) เป็นเทคนิคเก่าแต่ยังใช้ได้ สำหรับ layout เรียบง่าย หลักการทำงาน float: left - ลอยไปซ้าย เนื้อหาต่อไปจะหุ้มรอบ float: right - ลอยไปขวา clear: both - หยุดการหุ้มรอบ (clearfix) โครงสร้างคลาสสิก (Sidebar + Content)

Flexbox (Flexible Box Layout) เป็น CSS layout mode สำหรับจัดเรียง item ใน container แนวหนึ่ง (1D) ทำให้ responsive และจัดการพื้นที่ได้ยืดหยุ่น ไม่ต้องใช้ float/positioning ซับซ้อน หลักการพื้นฐาน Flex Container - element ที่มี display: flex หรือ inline-flex Flex Items - ลูกโดยตรงของ flex contai

แท็ก <meta> ใช้กำหนด metadata (ข้อมูลเกี่ยวกับข้อมูล) ของหน้าเว็บ วางใน <head> ไม่มีเนื้อหาแสดงผล แต่งใจต่อ SEO, Social sharing, Mobile viewport Meta Tags ที่สำคัญ 1. Character Encoding (จำเป็น) <meta charset=UTF-8> 2. Viewport (Responsive - จำเป็น) <meta name=viewport conten

HTML parser ของ browser ทนทาน (forgiving) มาก สามารถ render หน้าเว็บได้แม้ข้าม <html>, <head>, <body> ไป โดยต้องมี <!DOCTYPE html> อยู่เสมอ ตัวอย่าง Minimal Valid HTML5 <!DOCTYPE html> <title>Title of the page</title> <h1>This is heading 1</h1>

Inline CSS คือการเขียน CSS โดยตรงใน attribute style ของ element ใช้สำหรับ style เฉพาะ element นั้นๆ เท่านั้น รูปแบบ <h1 style=color: red; font-size: 24px; text-align: center;>Heading</h1> ตัวอย่าง <!DOCTYPE html> <html> <head> <title>HTML Inline CSS</title&

Internal CSS คือการเขียน CSS ไว้ในแท็ก <style> ภายใน <head> ของหน้า HTML ใช้สำหรับ style ที่ใช้ในหน้านั้นๆ เท่านั้น โครงสร้าง <!DOCTYPE html> <html> <head> <style> /* CSS rules ที่นี่ */ h1 { color: red; } p { font-size: 16px; line-height: 1.6; }

Absolute URL ใช้สำหรับลิงก์ไปยังเว็บไซต์ภายนอก (External Links) ต้องระบุโปรโตคอลและ domain เต็ม รูปแบบ Absolute URL https://www.example.com/page.html https://subdomain.example.com/path mailto:user@example.com tel:+66812345678 Attribute ของ <a> tag Attributeคำอธิบาย hrefURL

Relative URL ใช้สำหรับลิงก์ไปยังหน้าอื่นในเว็บไซต์เดียวกัน ไม่ต้องระบุ domain เต็ม รูปแบบ Relative URL รูปแบบความหมายตัวอย่าง /aboutจาก root ของ domainhttps://example.com/about about.htmlในโฟลเดอร์เดียวกันhttps://example.com/folder/about.html ../about.htmlย้อนกลับ 1 โฟลเดอ

ใช้ CSS property color เพื่อเปลี่ยนสีของลิงก์ (<a>) ได้ทั้ง inline style และ stylesheet วิธีการ <a href=/about style=color: red;>Red Link</a> <a href=/contact style=color: #0066cc;>Blue Link</a> <a href=/blog style=color: rgb(34, 197, 94);>Green Link</a> ต

ใช้ CSS property text-decoration: none เพื่อลบเส้นใต้ของลิงก์ (<a>) ได้ทั้ง inline style และ stylesheet วิธีการ <a href=/about style=text-decoration: none;>Link without underline</a> ตัวอย่างเต็ม <!DOCTYPE html> <html> <head> <title>HTML Text Decoration&

ใช้ attribute target ในแท็ก <a> เพื่อควบคุมว่าลิงก์จะเปิดที่ไหน ค่าของ target attribute ค่าคำอธิบาย _blankเปิดในแท็บ/หน้าต่างใหม่ (มากที่สุด) _selfเปิดในแท็บ/เฟรมปัจจุบัน (ค่าเริ่มต้น) _parentเปิดในเฟรมพาเรนท์ (ถ้าอยู่ใน iframe) _topเปิดในหน้าต่างบนสุด (ทำลาย fra

การทำให้รูปภาพเป็นลิงก์ ทำได้โดยการห่อแท็ก <img> ไว้ภายในแท็ก <a> โครงสร้างพื้นฐาน <a href=https://example.com> <img src=image.jpg alt=คำอธิบายรูป width=200 height=100> </a> ตัวอย่าง <!DOCTYPE html> <html> <head> <title>HTML Image as link&l

Bookmark Link (หรือ Anchor Link) ใช้สำหรับลิงก์ไปยังส่วนเฉพาะในหน้าเว็บเดียวกัน หรือหน้าอื่น ใช้งานได้ด้วย id attribute (HTML5) แทน name attribute ที่ deprecated แล้ว วิธีการ (HTML5 Standard) กำหนด id ให้ element เป้าหมาย: <h2 id=section1>Section 1</h2> สร้างลิงก์ไปยัง id นั้น: <