HTML คืออะไร (Introduction)

   อัปเดตล่าสุด July 11, 2024

HTML คืออะไร?

HTML ย่อมาจาก (Hyper Text Markup Language) คือ ภาษามาร์คอัพที่ใช้สำหรับสร้างหน้าเว็บเพจ เว็บไซต์กว่า 99.99% บนโลกล้วนใช้ภาษา HTML แสดงผลหน้าเว็บโดย HTML จะถูกใช้ควบคู่กันกับ CSS และ JavaScript 


HTML5

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

ฟีเจอร์สำคัญต่าง ๆ ของ HTML5

  1. Semantic Elements: HTML5 แนะนำแท็กใหม่ที่มีความหมายมากขึ้น เช่น <header>, <nav>, <article>, <section>, <aside>, <footer> ซึ่งช่วยให้โครงสร้างของเว็บมีความชัดเจนและเป็นประโยชน์ต่อ SEO
  2. Multimedia Support: รองรับการแสดงวิดีโอและเสียงโดยไม่ต้องใช้ plugin เพิ่มเติม ด้วยแท็ก <video> และ <audio>
  3. Canvas และ SVG: เพิ่มความสามารถในการวาดกราฟิกและแอนิเมชันด้วย JavaScript ผ่านแท็ก <canvas> และรองรับ Scalable Vector Graphics (SVG)
  4. Geolocation: ให้เว็บแอปพลิเคชันสามารถเข้าถึงข้อมูลตำแหน่งของผู้ใช้ได้ (หากได้รับอนุญาต)
  5. Local Storage: เพิ่มความสามารถในการจัดเก็บข้อมูลในเบราว์เซอร์ของผู้ใช้ ทำให้เว็บแอปทำงานได้เร็วขึ้นและสามารถทำงานแบบออฟไลน์ได้
  6. Responsive Design: HTML5 ร่วมกับ CSS3 ช่วยให้การสร้างเว็บไซต์ที่ตอบสนองต่อขนาดหน้าจอต่าง ๆ ทำได้ง่ายขึ้น
  7. Form Enhancements: เพิ่มประเภทของ input ใหม่ ๆ เช่น date, email, range, และ search พร้อมทั้งเพิ่มความสามารถในการตรวจสอบข้อมูล (form validation)


ตัวอย่าง HTML Tags ต่าง ๆ 

ชื่อ HTML Tags

คำอธิบาย

  <head> 

คือแท็กที่เป็นส่วนหัวของหน้าเว็บเพจ เก็บข้อมูลต่าง ๆ เช่น meta tags เช่น title, description และ metadata ต่าง ๆ รวมไปถึงโลโก้เช่น Favicon

 <title> 

คือแท็กที่กำหนดชื่อเรื่องของหน้าเว็บเพจ โดยจะแสดงผลในรูปแบบตัวอักษรเท่านั้น โดย title นี้จะปรากฏอยู่บน title bar และหน้าแท็บของเว็บเพจ

 <body>  

คือแท็กที่ใช้แสดงเนื้อหาของหน้าเว็บเพจ 

<footer>   

คือแท็กที่อยู่ล่างสุดของหน้าเว็บเพจ โดยปกติแล้วจะใช้แสดงผล เช่น About Us, Author รวมไปถึง Copyright เป็นต้น

 <h1> 

คือแท็ก Heading ที่มีน้ำหนัก (ความสำคัญ) มากที่สุดในบรรดา h1 - h6  ปกติมักจะใช้ h1 เพียง 1 แท็กต่อ 1 หน้าเว็บเพจ

 <p> 

คือพารากราฟแท็ก 

<html> 

คือ Root แท็กของ HTML ซึ่งแท็กอื่น ๆ ทั้งหมดจะอยู่ภายใต้แท็กนี้

 <a> 

คือ Anchor แท็ก เป็นแท็กเรียกได้ว่าเป็นลิงก์แท็กก็ว่าได้ โดยจะมีแอตทริบิวต์ในตัวคือ <href> หรือ Hyperlink นั่นเอง เพื่อใช้กำหนด URL ปลายทางที่เราต้องการจะลิงก์ไปเวลาคลิก

การเข้าใจโครงสร้างของ tag แต่ละชนิดยังจะทำให้เราสามารถทำเว็บและเลือกใช้ HTML tags ที่เหมาะสมกับเนื้อหานั้น ๆ บนหน้าเว็บของเรา ซึ่งทำให้เราเข้าใจและสามารถปรับเว็บให้ดีต่อการทำ SEO (การปรับเว็บให้ติดหน้าแรก Google) 


ตัวอย่างโค้ด HTML พื้นฐาน

<!DOCTYPE html>
<html>
<head>
  <title>My First HTML Page</title>
</head>
<body>
  <h1>Welcome to HTML Tutorial by DH Learning!</h1>
  <p>This is my first HTML page. I hope you enjoy it!</p>
</body>
</html>


บทเรียนถัดไป

HTML Tutorial HTML คืออะไร (Introduction) Lesson 1 HTML Headings Lesson 2 HTML Spaces (การเว้นวรรค) Lesson 3 HTML Images Lesson 4 HTML Comments Lesson 5 HTML Table Lesson 6