ภาษา HTML คืออะไร? เรื่องจำเป็นที่นักพัฒนาเว็บทุกคนห้ามมองข้าม
TechUp Team
26 January 2025
Software development tips

Get to know ‘ภาษา HTML’ คืออะไร
HTML ย่อมาจากคำว่า Hyper Text Markup Language คือภาษาหลักที่ใช้สำหรับการสร้างหน้าเว็บไซต์ โดยโครงสร้างของการใช้งานจะถูกใช้ในรูปแบบการกำกับ Tag โดยทั่วไป HTML จะใช้ควบคู่กับภาษา CSS ซึ่งเป็นภาษาที่ใช้ในการตกแต่งหน้าเว็บไซต์ให้มีสีสันหรือความสวยงามตามต้องการ ด้วยเหตุนี้ เหล่า Web Developer ที่ไม่ว่าจะรับหน้าที่ทำงานฝั่งหน้าบ้านหรือหลังบ้าน จึงควรทำความรู้จักและเขียน HTML ให้เป็นในระดับหนึ่ง
ภาษา HTML เป็นภาษาประเภทใด
Hyper Text Markup Language หรือ HTML ถูกจัดอยู่ในภาษาประเภทมาร์คอัพ (Markup Language) กล่าวคือ เป็นภาษาที่ใช้แสดงผลข้อมูล Text และรูปภาพร่วมกัน โดยจะมีการกำกับแท็กเพื่อกำหนดองค์ประกอบในเอกสาร ซึ่งภาษามาร์กอัพจะเป็นภาษาที่มนุษย์สามารถเข้าใจได้ จึงใช้ภาษาสื่อสารทั่วไปในการเขียนแทนที่จะเป็นภาษาคอมพิวเตอร์ (Programing Syntax) ภาษามาร์กอัพสองภาษาที่ได้รับความนิยมมากที่สุดได้แก่ HTML และ XML
HTML 5.0 พัฒนามาจากภาษาอะไรและพัฒนาโดยใคร
ก่อนอื่น HTML 5.0 คือ ภาษา HTML เวอร์ชันที่คนใช้งานกันในปัจจุบัน มีการอัพเดตมากที่สุด ถูกพัฒนาต่อมาจาก HTML 4 โดยกลุ่ม WHATWG (Web Hypertext Application Technology Working Group) ที่รับหน้าที่เป็นคนสร้างข้อกำหนดมาตรฐานเกี่ยวกับ HTML 5.0 ขึ้นมาเพื่อให้ผู้พัฒนาโปรแกรมนำไปใช้งานได้ง่ายขึ้นกว่าเวอร์ชันก่อน ๆ โดยข้อดีของ HTML 5.0 อยู่ที่โค้ดที่เขียนจะสามารถแสดงผลบนอุปกรณ์ได้หลากหลายมากขึ้น ลดข้อผิดพลาด และรองรับการแสดงผลสื่อมีเดียอย่างวีดิโอ รูปภาพ ไอคอนต่าง ๆ ได้โดยที่ไม่ต้องอาศัยการติดตั้ง Flash Plugin
ภาษา HTML เป็นภาษาในการสร้างอะไร ถูกหยิบไปใช้ทำอะไรบ้าง
อย่างที่ได้เกริ่นไปข้างต้นว่า HTML เป็นภาษาพื้นฐานที่ใช้สร้างหน้าเว็บไซต์ กล่าวคือจะถูกหยิบไปใช้งานในส่วนของ Front-end โดยตรง ภาษา HTML นำไปประยุกต์เพื่อสร้างเว็บไซต์ได้หลากหลายประเภท ไม่ว่าจะเป็นเว็บเพจสำหรับการนำเสนอสินค้าและบริการ เว็บบล็อก เว็บข่าว/สื่อมวลชน หรือแม้แต่เว็บส่วนตัว ขอบเขตการใช้งานจะเกี่ยวข้องกับการสร้างเว็บไซต์ในส่วนของเนื้อหา รวมไปการสร้าง Interaction บนหน้าด้วย เช่น แท็ก
<button>
เพื่อสร้างปุ่มกด สามารถใช้ในการเชื่อมโยงหรือเปลี่ยนเส้นทาง (Redirect) ไปยังหน้าอื่น ๆ ที่ต้องการ สร้างการแสดงผลเป็นข้อความ หรือใช้สร้างพื้นที่ทำ Media Display ปกติเราสามารถสร้างไฟล์ HTML ได้ในโปรแกรมติดเครื่องอย่าง Notepad, TextEdit และค่อยนำโค้ดที่เขียนไปเซฟเป็นไฟล์.html
เพื่อนำไปรันบนบราวเซอร์และตรวจสอบผลลัพธ์ทีหลัง หรืออาจจะเสียเวลาติดตั้งโปรแกรมสำเร็จรูปที่จะช่วยให้การเขียนโค้ดทำได้สะดวกมากขึ้นอย่างโปรแกรม VS Code หรือ Eclipse ก็ได้เช่นกันเรียนรู้โครงสร้างพื้นฐานของ HTML เบื้องต้น
โครงสร้างภาษา HTML แบ่งออกเป็น 2 ส่วนคือ Head สำหรับใส่หัวเรื่อง และ Body สำหรับใส่เนื้อหา ซึ่งทุกไฟล์จะมีการเปิดแท็ก
<html>
เพื่อเริ่มต้นไฟล์ และใส่</html>
เมื่อจบการเขียน โดยภายในแท็กดังกล่าวจะเป็นพื้นที่สำหรับการใส่หัวข้อและเนื้อหาที่เราต้องการ โครงสร้างโดยพื้นฐานของการเขียน HTML เป็นดังนี้1<html>2 <head>3 <title>ชื่อเรื่อง/หัวข้อ</title>4 </head>5 <body>6 ส่วนของเนื้อหาที่เราต้องการให้แสดงบนหน้าเว็บ7 </body>8</html>9
ทั้งนี้ ภายในแท็กจะมีการกำหนด Attribute เป็นส่วนขยายซ้อนไปอีกที โดยใช้เป็นคำสั่งเพื่อการจัดระยะ สี และขนาดของข้อความในแท็ก ค่าของ Attribute จะถูกกำหนดอยู่ภายในเครื่องหมาย “”
ประเภทของ Tag html
Tag ที่อยู่ในไฟล์ HTML ถูกแบ่งออกเป็น 2 ประเภท ได้แก่
-
Container Tag คือ แท็กที่ต้องมีการเปิดและปิด ซึ่งมีไวยากรณ์เป็นแบบ
<tag_name>Content</tag_name>
โดยถ้าหากเราลืมใส่แท็กปิดกับ Container Tag จะทำให้การรันหน้าเว็บของเราออกมาผิดรูปแบบ ตัวอย่างของแท็กประเภทนี้ เช่น<html></html>
เพื่อเพิ่มเนื้อหาของไฟล์,<title></title>
เพื่อเพิ่มชื่อเรื่อง หรือ<p></p>
เพื่อกำหนดพารากราฟ -
Empty Tag คือ แท็กที่ไม่จำเป็นต้องมีการปิดแท็กก็สามารถรันได้ตามปกติ ซึ่งมีไวยากรณ์แบบ
<tag_name />
ตัวอย่างของแท็กประเภทนี้ เช่น
<img />
เพื่อเพิ่มไฟล์รูปภาพ หรือ<br />
เพื่อขึ้นบรรทัดใหม่Tag html ที่ควรรู้ มีอะไรบ้าง
นอกเหนือจาก Tag ที่จำเป็นอย่าง
<html></html>
,<title></title>
,<body></body>
ที่ได้เห็นในโครงสร้างพื้นฐาน ก็ยังมีแท็กอีกมากมายที่จะช่วยให้การเขียน HTML ของเรา มีผลลัพธ์ออกมาเป็นหน้าเว็บที่สามารถใช้งานได้อย่างมีประสิทธิภาพและมีความเป็นระเบียบ ซึ่ง Tag html ทั้งหมดที่เราคัดสรรมาแล้วว่าเหล่ามือใหม่ควรทำความรู้จักเอาไว้ มีดังนี้<p>…</p>
ใช้กำหนดพารากราฟ ขึ้นย่อหน้าใหม่<br>
ใช้สำหรับเว้นบรรขึ้นบรรทัดใหม่<center>…</center>
ใช้เพื่อจัดข้อความให้อยู่กึ่งกลาง<a>…</a>
เพื่อเพิ่มลิงค์<h1>…</h1>, <h2>…</h2>, <h3>…</h3>
, … เพื่อเพิ่มหัวข้อย่อยในเอกสาร หัวข้อที่มีความสำคัญน้อยกว่าจะสัมพันธ์กับตัวเลขที่เพิ่มขึ้นตามลำดับ<u>…</u>
เพื่อขีดเส้นใต้ข้อความ<i>…</i>
เพื่อทำให้ข้อความเป็นตัวเอียง<hr>
เพิ่มเส้นแนวนอนในเอกสาร<img>
เพิ่มรูปภาพ<ol>…<ol>
เพิ่มลำดับรายการแบบ ordered list ซึ่งจะใช้คู่กับแท็ก<li>
<div>…<div>
เพื่อแบ่งส่วนของเนื้อหาออกจากกันแบบบล็อก<span>…</span>
เพื่อแบ่งส่วนของเนื้อหาออกจากกัน แต่ยังให้อยู่บนบรรทัดเดียวกัน
อย่างที่เห็นว่า Hyper Text Markup Language เป็นภาษาที่เกี่ยวข้องกับการสร้างหน้าเว็บเพจโดยตรง ฉะนั้นแล้ว สำหรับใครก็ตามที่ใฝ่ฝันไว้ว่าอยากทำงานเป็นนักพัฒนาเว็บ หรือทำงานในสายที่เกี่ยวข้อง การทำความเข้าใจตัวโครงสร้างพื้นฐานของ HTML หรือเขียนให้เป็นในระดับเบื้องต้นเป็นอย่างต่ำ เป็นสิ่งที่จำเป็นและเลี่ยงไม่ได้อย่างแน่นอน
ใครที่กำลังมีความต้องการอยากเรียนรู้ภาษา HTML แบบลงลึกมากขึ้น ให้ทราบไปจนถึงระดับที่นำไปใช้งานต่อยอดได้จริงด้วยตนเอง รวมไปถึงอยากปูพื้นฐานสกิลอื่นที่จำเป็นสำหรับอาชีพในสายโปรแกรมเมอร์ ทาง Techup มีคอร์สที่ตรงกับความต้องการของคุณอยู่ โดยที่เราการันตีด้วยว่าจะสามารถฝึกสอนผู้เรียนให้พร้อมเข้าสู่ตลาดงานได้ภายใน 4 เดือน อีกทั้งหลักสูตรของเราพร้อมเปิดรับผู้เรียนทุกคน ไม่ต้องมีพื้นฐานก็สามารถเรียนได้อย่างแน่นอน เริ่มต้นผู้เรียนจ่ายเพียง 4,000 บาทเท่านั้น แล้วค่อยจ่ายส่วนที่เหลือหลังได้งานแล้ว หากรู้สึกสนใจลองดูรายละเอียดของหลักสูตรเราได้เลยที่นี่
บทความที่น่าสนใจ
ดูทั้งหมด