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

May 1, 2022

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 บนหน้าด้วย เช่น แท็ก

เพื่อสร้างปุ่มกด สามารถใช้ในการเชื่อมโยงหรือเปลี่ยนเส้นทาง (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 ของเรา มีผลลัพธ์ออกมาเป็นหน้าเว็บที่สามารถใช้งานได้อย่างมีประสิทธิภาพและมีความเป็นระเบียบ ซึ่ง 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 บาทเท่านั้น แล้วค่อยจ่ายส่วนที่เหลือหลังได้งานแล้ว หากรู้สึกสนใจลองดูรายละเอียดของหลักสูตรเราได้เลยที่นี่

บทความอื่น ๆ

รู้จักกับ Web Developer อาชีพยอดฮิตสายไอที เขาคือใคร ต้องรู้อะไรบ้าง

Apr 1, 2022

มารู้จักกับ JavaScript ภาษาสารพัดประโยชน์แห่งโลกนักพัฒนาซอฟต์แวร์

Mar 1, 2022

รวมเรื่องที่ควรรู้หากอยากเป็นโปรแกรมเมอร์หรืออยากเขียนโปรแกรมเป็น

Feb 1, 2022