HTML (HyperText Markup Language) คืออะไร?

HTML (HyperText Markup Language) คืออะไร?
homepage seen laptop screen (Website)

HTML หรือ HyperText Markup Language เป็นภาษาที่ใช้ในการสร้างและจัดโครงสร้างเนื้อหาบนเว็บเพจ HTML เป็นภาษาพื้นฐานที่สำคัญที่สุดในการพัฒนาเว็บไซต์ ทำให้เราสามารถแสดงเนื้อหาข้อความ รูปภาพ ลิงก์ และสื่อต่างๆ บนเว็บเบราว์เซอร์ได้อย่างถูกต้องและเป็นระเบียบ ในบทความนี้ เราจะมาทำความรู้จักกับ HTML ว่าคืออะไร มีส่วนประกอบอะไรบ้าง และทำงานอย่างไร

HTML คืออะไร?

HTML (HyperText Markup Language) คือภาษามาร์กอัปที่ใช้ในการสร้างและจัดโครงสร้างเนื้อหาบนเว็บเพจ HTML ถูกพัฒนาโดย Tim Berners-Lee ในปี 1991 เพื่อใช้ในการแชร์ข้อมูลระหว่างนักวิจัยผ่านอินเทอร์เน็ต และได้พัฒนามาอย่างต่อเนื่องจนถึงปัจจุบัน HTML ใช้แท็ก (Tags) ในการระบุส่วนต่างๆ ของเนื้อหา เช่น หัวข้อ ย่อหน้า ลิงก์ รูปภาพ และสื่อต่างๆ

ส่วนประกอบของ HTML

HTML ประกอบด้วยส่วนประกอบหลักดังนี้

  1. แท็ก (Tags)
    • แท็กเป็นเครื่องหมายที่ใช้ในการระบุส่วนต่างๆ ของเนื้อหา แท็กมักจะประกอบด้วยชื่อแท็กในวงเล็บเหลี่ยม เช่น <html>, <head>, <body>, <h1>, <p>
  2. องค์ประกอบ (Elements)
    • องค์ประกอบประกอบด้วยแท็กเปิดและแท็กปิดที่ครอบคลุมเนื้อหาหรือข้อความ ตัวอย่างเช่น <p>นี่คือย่อหน้า</p>
  3. แอตทริบิวต์ (Attributes)
    • แอตทริบิวต์เป็นข้อมูลเพิ่มเติมที่ใช้ในการระบุคุณสมบัติของแท็ก เช่น id, class, src, href แอตทริบิวต์จะอยู่ภายในแท็กเปิด ตัวอย่างเช่น <a href="https://www.example.com">ลิงก์ไปยัง Example</a>

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

โครงสร้างพื้นฐานของเอกสาร HTML ประกอบด้วยส่วนประกอบหลักดังนี้

  1. <!DOCTYPE html>
    • ประกาศชนิดของเอกสาร HTML
  2. <html>
    • แท็กหลักที่ครอบคลุมเอกสาร HTML ทั้งหมด
  3. <head>
    • ส่วนที่ใช้ในการกำหนดข้อมูลเกี่ยวกับเอกสาร เช่น เมตาดาต้า ลิงก์ไปยังไฟล์ CSS และสคริปต์
  4. <title>
    • กำหนดชื่อเรื่องของเอกสารที่จะปรากฏในแท็บของเว็บเบราว์เซอร์
  5. <body>
    • ส่วนที่ใช้ในการแสดงเนื้อหาหลักของเอกสาร เช่น ข้อความ รูปภาพ ลิงก์ และสื่อต่างๆ

ตัวอย่างโครงสร้างพื้นฐานของเอกสาร HTML

<!DOCTYPE html>
<html>
<head>
  <title>นี่คือชื่อเรื่องของเอกสาร</title>
</head>
<body>
  <h1>นี่คือหัวข้อหลัก</h1>
  <p>นี่คือย่อหน้าแรกของเนื้อหา</p>
  <a href="https://www.example.com">ลิงก์ไปยัง Example</a>
</body>
</html>

แท็ก HTML ที่สำคัญ

นี่คือบางส่วนของแท็ก HTML ที่สำคัญและใช้งานบ่อย

  1. <h1> ถึง <h6>
    • แท็กหัวข้อ ใช้ในการกำหนดหัวข้อของเนื้อหา โดย <h1> เป็นหัวข้อที่สำคัญที่สุดและ <h6> เป็นหัวข้อที่สำคัญน้อยที่สุด
  2. <p>
    • แท็กย่อหน้า ใช้ในการกำหนดย่อหน้าของเนื้อหา
  3. <a>
    • แท็กลิงก์ ใช้ในการสร้างลิงก์ไปยังหน้าเว็บหรือที่อยู่อื่นๆ แอตทริบิวต์ href ใช้ในการระบุที่อยู่ของลิงก์
  4. <img>
    • แท็กรูปภาพ ใช้ในการแสดงรูปภาพ แอตทริบิวต์ src ใช้ในการระบุที่อยู่ของไฟล์รูปภาพ และแอตทริบิวต์ alt ใช้ในการกำหนดข้อความแสดงแทนรูปภาพ
  5. <ul>, <ol>, <li>
    • แท็กรายการไม่เรียงลำดับ (<ul>) และรายการเรียงลำดับ (<ol>) ใช้ในการสร้างรายการ โดย <li> ใช้ในการกำหนดแต่ละรายการในรายการ
  6. <div> และ <span>
    • แท็ก <div> ใช้ในการจัดกลุ่มเนื้อหาบล็อก และแท็ก <span> ใช้ในการจัดกลุ่มเนื้อหาภายในบรรทัด

การใช้งาน CSS และ JavaScript ร่วมกับ HTML

HTML สามารถใช้งานร่วมกับ CSS (Cascading Style Sheets) และ JavaScript เพื่อเพิ่มความสวยงามและความสามารถในการโต้ตอบของเว็บเพจได้:

1. CSS

  • CSS ใช้ในการกำหนดรูปแบบการแสดงผลของเนื้อหา HTML เช่น สี ขนาด ฟอนต์ และการจัดวาง ตัวอย่างการใช้งาน CSS ในเอกสาร HTML
<style>
  body {
    background-color: lightblue;
  }
  h1 {
    color: navy;
    text-align: center;
  }
  p {
    font-family: verdana;
    font-size: 20px;
  }
</style>

2. JavaScript

  • JavaScript ใช้ในการเพิ่มความสามารถในการโต้ตอบของเว็บเพจ เช่น การตรวจสอบข้อมูลแบบฟอร์ม การเปลี่ยนแปลงเนื้อหาแบบไดนามิก และการโต้ตอบกับผู้ใช้ ตัวอย่างการใช้งาน JavaScript ในเอกสาร HTML:
<script>
  function showAlert() {
    alert("Hello, World!");
  }
</script>
<button onclick="showAlert()">Click me</button>

สรุป

HTML (HyperText Markup Language) เป็นภาษามาร์กอัปที่ใช้ในการสร้างและจัดโครงสร้างเนื้อหาบนเว็บเพจ HTML ประกอบด้วยแท็ก องค์ประกอบ และแอตทริบิวต์ที่ใช้ในการกำหนดส่วนต่างๆ ของเนื้อหา HTML เป็นภาษาพื้นฐานที่สำคัญที่สุดในการพัฒนาเว็บไซต์ และสามารถใช้งานร่วมกับ CSS และ JavaScript เพื่อเพิ่มความสวยงามและความสามารถในการโต้ตอบของเว็บเพจได้ การเข้าใจและใช้งาน HTML อย่างถูกต้องเป็นสิ่งสำคัญสำหรับนักพัฒนาเว็บทุกคน

ติดต่อเรา

บทความที่น่าสนใจ

top view creative team discussing business graphs drawn marker pens (Website)
การทำ Local SEO (Search Engine Optimization) เป็นกลยุทธ์ที่มุ่งเน้นในการเพิ่มประสิทธิภาพเว็บไซต์และธ...
top view creative team discussing business graphs drawn marker pens (Website)
การสร้าง Backlink เป็นหนึ่งในกลยุทธ์ที่สำคัญในการทำ SEO โดยเฉพาะสำหรับ Local SEO ซึ่งมุ่งเน้นการปรับ...
top view creative team discussing business graphs drawn marker pens (Website)
Local SEO (Search Engine Optimization) เป็นกลยุทธ์ที่มุ่งเน้นการเพิ่มประสิทธิภาพเว็บไซต์และธุรกิจออน...
top view creative team discussing business graphs drawn marker pens (Website)
Local SEO (Search Engine Optimization) คือการปรับปรุงเว็บไซต์และเนื้อหาออนไลน์เพื่อเพิ่มการมองเห็นใน...
legal hand businesswoman advisor business woman checking planning analyze investment marketing laptop office seo search engine optimization digital marketing success (Website)
การหาลิงก์ย้อนกลับ (Backlink) จากเว็บไซต์ที่น่าเชื่อถือเป็นหนึ่งในกลยุทธ์สำคัญในการปรับปรุง SEO ของเ...
legal hand businesswoman advisor business woman checking planning analyze investment marketing laptop office seo search engine optimization digital marketing success (Website)
การสร้าง Backlink เป็นกลยุทธ์สำคัญในการทำ SEO สำหรับเว็บไซต์ใหม่ Backlink คือ ลิงก์ที่มาจากเว็บไซต์อ...