HTML ย่อมาจาก Hypertext Markup Language เป็นภาษามาร์กอัปมาตรฐานสำหรับเอกสารที่ออกแบบมาให้แสดงในเว็บเบราว์เซอร์ HTML สามารถได้รับความช่วยเหลือจากเทคโนโลยี เช่น Cascading Style Sheets (CSS) และภาษาสคริปต์ เช่น JavaScript
โดยแก่นแท้แล้ว อินเทอร์เน็ตคือเครือข่ายคอมพิวเตอร์ขนาดใหญ่ที่เชื่อมต่อกันทั่วโลก วิธีหลักที่เราโต้ตอบกับเครือข่ายนี้คือผ่านเวิลด์ไวด์เว็บ (WWW) ซึ่งเป็นระบบของเอกสารไฮเปอร์เท็กซ์ที่เชื่อมโยงกันซึ่งเข้าถึงได้ผ่านทางอินเทอร์เน็ต หัวใจของ WWW คือเว็บเพจ ซึ่งเป็นเอกสารที่เขียนด้วย HTML HTML เป็นโครงสร้างพื้นฐานของไซต์ ซึ่งได้รับการปรับปรุงและแก้ไขโดยเทคโนโลยีอื่นๆ เช่น CSS และ JavaScript
เอกสาร HTML มีโครงสร้างตามชุดของแท็กที่ซ้อนกัน ซึ่งเป็นองค์ประกอบที่อยู่ในวงเล็บมุม แท็กเหล่านี้จะบอกวิธีการแสดงเนื้อหาแก่เว็บเบราว์เซอร์ ตัวอย่างของโครงสร้างเอกสาร HTML อย่างง่ายคือ:
<!DOCTYPE html>
<html>
<หัว>
<title>ชื่อหน้า</title>
</หัว>
<ร่างกาย>
<h1>นี่คือหัวข้อ</h1>
<p>นี่คือย่อหน้า</p>
</ร่างกาย>
</html>
รหัสนี้กำหนดหน้าเว็บพื้นฐานที่มีชื่อเรื่อง หัวเรื่อง และย่อหน้าของข้อความ
เอกสาร HTML ประกอบด้วยองค์ประกอบ HTML แต่ละองค์ประกอบจะแสดงด้วยแท็กเริ่มต้น เนื้อหาบางส่วน และแท็กปิดท้าย แท็กเริ่มต้นและแท็กสิ้นสุดขององค์ประกอบจะเหมือนกัน ยกเว้นว่าแท็กสิ้นสุดจะมีเครื่องหมายทับข้างหน้าชื่อองค์ประกอบ
ตัวอย่างเช่น แท็ก <code><p></code> จะล้อมรอบย่อหน้าของข้อความ และมีโครงสร้างดังนี้:
<p>นี่คือย่อหน้าตัวอย่าง</p>
องค์ประกอบที่แตกต่างกันมีจุดประสงค์ที่แตกต่างกัน ตัวอย่างเช่น:
องค์ประกอบ HTML สามารถมีแอตทริบิวต์ที่ให้ข้อมูลเพิ่มเติมเกี่ยวกับองค์ประกอบ แอ็ตทริบิวต์จะอยู่ภายในแท็กเริ่มต้นขององค์ประกอบ และมักจะกำหนดเป็นคู่ของชื่อ/ค่า เช่น <code>name="value"</code>
ตัวอย่างเช่น ในการฝังรูปภาพ เราใช้แท็ก <code><img></code> พร้อมด้วยแอตทริบิวต์ <code>src</code> (source) เพื่อระบุ URL ของรูปภาพ:
<img src="url to image.jpg" alt="คำอธิบายรูปภาพ">
แอตทริบิวต์ <code>alt</code> ให้ข้อความอื่นสำหรับรูปภาพหากไม่สามารถแสดงได้
การใช้แท็ก <code><a></code> จะสร้างไฮเปอร์ลิงก์ ซึ่งเป็นรากฐานของการเชื่อมโยงกันของเว็บ ไฮเปอร์ลิงก์สามารถลิงก์ไปยังหน้าเว็บอื่น ส่วนอื่นในหน้าเดียวกัน หรือแม้แต่ไฟล์ที่ดาวน์โหลดได้ ตัวอย่างเช่น:
<a href="https://example.com">เยี่ยมชม Example.com</a>
ซึ่งจะสร้างลิงก์ไปยัง <code>https://example.com</code>
HTML มีองค์ประกอบสำหรับการสร้างรายการ รายการมีสองประเภทหลัก:
แต่ละรายการในรายการจะอยู่ภายในแท็ก <code><li></code> (รายการ)
HTML5 เป็นวิวัฒนาการล่าสุดของมาตรฐาน โดยนำเสนอคุณสมบัติใหม่มากมายที่สะท้อนถึงความต้องการสมัยใหม่สำหรับเอกสารมัลติมีเดียและเอกสารเชิงโต้ตอบ ซึ่งรวมถึงองค์ประกอบโครงสร้างใหม่ (<code><header></code>, <code><footer></code>, <code><article></code>, <code><section></code>) องค์ประกอบกราฟิก (<code><canvas></code> สำหรับการวาดภาพ <code><svg></code> สำหรับกราฟิกแบบเวกเตอร์ที่ปรับขนาดได้) และองค์ประกอบสื่อ (<code><audio></code> และ <code ><วิดีโอ></รหัส>)
Semantic HTML หมายถึงการใช้มาร์กอัป HTML เพื่อเสริมความหมายหรือความหมายของข้อมูลในหน้าเว็บ แทนที่จะกำหนดเพียงลักษณะหรือพฤติกรรมขององค์ประกอบ (ซึ่งเป็นหน้าที่ของ CSS และ JavaScript) HTML เชิงความหมายจะอธิบายโครงสร้างและประเภทของเนื้อหาได้อย่างถูกต้อง ตัวอย่างเช่น แท็ก <code><article></code> ระบุว่าเนื้อหาภายในเป็นบทความ ในขณะที่แท็ก <code><nav></code> หมายถึงเมนูการนำทาง
การใช้ semantic HTML ช่วยปรับปรุงการเข้าถึงและการค้นหาเนื้อหาเว็บ ทำให้ใช้งานได้และค้นพบได้มากขึ้น
HTML เป็นเทคโนโลยีที่สำคัญของเวิลด์ไวด์เว็บ ซึ่งเป็นโครงสร้างพื้นฐานสำหรับหน้าเว็บ ด้วยการใช้แท็ก คุณลักษณะ และองค์ประกอบ HTML ช่วยให้สามารถสร้างเอกสารที่มีโครงสร้างได้ ด้วยการทำความเข้าใจและใช้ HTML เราสามารถสร้างเนื้อหาที่หลากหลายที่สามารถเข้าถึงได้บนเว็บ ตั้งแต่เอกสารข้อความธรรมดาไปจนถึงประสบการณ์มัลติมีเดียเชิงโต้ตอบที่ซับซ้อน ในฐานะรากฐานสำหรับการพัฒนาเว็บ ความชำนาญในการใช้ HTML ถือเป็นสิ่งสำคัญสำหรับทุกคนที่ต้องการออกแบบหรือพัฒนาสำหรับเว็บ