HTML (Hypertext Markup Language) เป็นภาษาหลักที่ใช้ในการสร้างโครงสร้างของเว็บเพจ โดย HTML จะประกอบด้วย “องค์ประกอบ” หรือ “elements” ซึ่งใช้ในการจัดระเบียบและกำหนดเนื้อหาภายในเว็บเพจ องค์ประกอบเหล่านี้จะประกอบด้วย “แท็ก” ที่เริ่มและจบการทำงาน (ยกเว้นบางกรณีที่เป็น self-closing) มาดูกันว่า HTML elements ที่สำคัญและพื้นฐานมีอะไรบ้าง
<!DOCTYPE html>
- เป็นการประกาศว่าเอกสารนี้ใช้ HTML5 ซึ่งเป็นเวอร์ชันล่าสุดของ HTML
- คำสั่งนี้ไม่ได้เป็น element แต่เป็น declaration ที่บอกเบราว์เซอร์ให้แสดงผลเนื้อหาโดยใช้มาตรฐานของ HTML5
<html>
- เป็น root element ที่ครอบคลุมเนื้อหาทั้งหมดของเว็บเพจ
- องค์ประกอบทุกอย่างในเว็บเพจต้องอยู่ภายในแท็ก
<html>นี้
<html>
<!-- Content goes here -->
</html>
<head>
- ส่วนนี้เป็นการเก็บข้อมูล meta หรือข้อมูลเกี่ยวกับเอกสาร เช่น ชื่อลิงก์ไปยังไฟล์ CSS, ไฟล์ JavaScript, title, meta description
- เนื้อหาภายใน
<head>จะไม่แสดงผลบนหน้าเว็บ
<head>
<meta charset="UTF-8">
<title>Page Title</title>
<link rel="stylesheet" href="styles.css">
</head>
<title>
- กำหนดชื่อของหน้าเว็บเพจ ซึ่งจะแสดงบนแท็บของเบราว์เซอร์หรือในผลลัพธ์การค้นหาของเสิร์ชเอ็นจิ้น
- ต้องอยู่ภายใน
<head>
<title>My Website</title>
<body>
- ส่วนนี้เป็นที่แสดงเนื้อหาทั้งหมดของเว็บเพจ เช่น ข้อความ รูปภาพ วิดีโอ ฟอร์ม ฯลฯ
- ทุกสิ่งที่ผู้ใช้งานเห็นบนหน้าเว็บจะอยู่ภายใน
<body>
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph of text.</p>
</body>
<h1> ถึง <h6>
- ใช้ในการกำหนดหัวเรื่อง (heading) โดย
<h1>เป็นหัวข้อที่ใหญ่ที่สุดและสำคัญที่สุด และ<h6>เป็นหัวข้อที่เล็กที่สุด - ช่วยในการจัดระเบียบเนื้อหา และมีประโยชน์ในด้าน SEO
<h1>Main Heading</h1>
<h2>Subheading</h2>
<p>
- ใช้สำหรับกำหนดย่อหน้า (paragraph) ของข้อความ
- มักจะใช้สำหรับเขียนเนื้อหาหลักของเว็บ
<p>This is a paragraph.</p>
<a>
- ใช้ในการสร้างลิงก์ไปยังเว็บเพจอื่นหรือไฟล์ต่าง ๆ
hrefเป็น attribute ที่บอก URL ของลิงก์
<a href="https://www.example.com">Click here to visit Example.com</a>
<img>
- ใช้ในการแสดงภาพบนหน้าเว็บ
- เป็น self-closing element ซึ่งไม่มีแท็กปิด และต้องมี
srcattribute ที่บอกตำแหน่งของไฟล์รูป
<img src="image.jpg" alt="Description of the image">
<ul> และ <ol>
- ใช้สำหรับสร้างรายการ (list) แบบไม่เรียงลำดับ (
<ul>) และเรียงลำดับ (<ol>) - ใช้
<li>เพื่อกำหนดรายการในแต่ละบรรทัด
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<ol>
<li>First item</li>
<li>Second item</li>
</ol>
<div>
- เป็น container แบบทั่วไปที่ใช้สำหรับจัดกลุ่มเนื้อหาหรือองค์ประกอบต่าง ๆ เพื่อความสะดวกในการจัดรูปแบบด้วย CSS
- ไม่มีความหมายเฉพาะเจาะจง แต่มีประโยชน์ในการจัด layout
<div>
<p>This is inside a div element.</p>
</div>
<span>
- คล้ายกับ
<div>แต่เป็น inline element ซึ่งใช้ในการจัดกลุ่มข้อความหรือเนื้อหาเล็ก ๆ ที่อยู่ในบรรทัดเดียวกัน - มักใช้เพื่อจัดรูปแบบเฉพาะบางส่วนของข้อความ
<p>This is <span style="color: red;">red text</span> in a paragraph.</p>
<form>
- ใช้ในการสร้างฟอร์มเพื่อให้ผู้ใช้กรอกข้อมูล เช่น การสมัครสมาชิกหรือส่งข้อมูล
- ประกอบด้วย
<input>,<textarea>,<button>, และองค์ประกอบอื่น ๆ ที่ใช้ในการรับข้อมูล
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<button type="submit">Submit</button>
</form>
<input>
- ใช้ในการรับข้อมูลจากผู้ใช้ เช่น ข้อความ, อีเมล, รหัสผ่าน ฯลฯ
- เป็น self-closing element และมี
typeattribute ที่บอกประเภทของข้อมูลที่ต้องการรับ
<input type="text" name="username" placeholder="Enter username">
<input type="password" name="password" placeholder="Enter password">
<button>
- ใช้สร้างปุ่มที่ผู้ใช้สามารถคลิกเพื่อทำกิจกรรมบางอย่าง เช่น การส่งฟอร์ม
<button type="submit">Submit</button>
<table>
- ใช้สำหรับการแสดงข้อมูลในรูปแบบตาราง
- ประกอบด้วย
<tr>(row),<th>(header cell), และ<td>(data cell)
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
</table>
HTML ยังมี elements อื่น ๆ อีกมากมายที่ใช้สำหรับการสร้างและจัดการโครงสร้างและเนื้อหาของเว็บ แต่ elements ที่ได้กล่าวไปนี้เป็นพื้นฐานสำคัญในการเริ่มต้นสร้างเว็บเพจ หากคุณสนใจที่จะศึกษาเพิ่มเติมหรือลองใช้งาน elements เหล่านี้ในโปรเจ็กต์จริง คุณสามารถทดสอบได้ในเครื่องมือพัฒนาเว็บอย่าง Visual Studio Code หรือ Brackets