🏗️ 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 autofocusFocus ทันทีเมื่อเข้าหน้าเว็บ 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:admin@example.com" > 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 สำหรับตรวจสอบข้อมูล minlengthmaxlength< input > ใช้กับข้อความ กำหนดความยาวขั้นต่ำและขั้นสูง minmax< input > ใช้กับจำนวนหรือวัน กำหนดขั้นต่ำและขั้นสูง step< input > ลำดับขั้นของจำนวนเมื่อเพิ่มและลด novalidate< form > ไม่จำเป็นต้องตรวจสอบความถูกต้อง multiple< input type = "file" > < select > เลือกได้หลายข้อมูล placeholder< input > < textarea > แสดงข้อความเมื่อยังไม่ได้พิมพ์ list< input > รายการที่เตรียมไว้ ใช้ร่วมกับ < datalist > colsrows< 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 >