รู้จักกับภาษามาร์กอัป (Markup Language)

บทนำ

ถ้าพูดถึง “ภาษามาร์กอัป” ผู้อ่านหลายๆคนก็อาจจะสงสัยว่า มันคือภาษาอะไร ? แต่ถ้าพูดถึงภาษา HTML , XML หลายๆคนก็อาจจะเริ่มคุ้นๆหรือเคยเห็นผ่านตา มาบ้าง แล้วจะพบว่าทุกคำจะลงท้ายด้วยตัวอักษร ML ซึ่งย่อมาจาก Markup Language หรือแปลเป็นไทยก็คือ ภาษามาร์กอัป นั่นเอง!

โดยคำนี้มีมานานมากแล้ว ซึ่งผมเองก็ไม่รู้ว่าจะอธิบายให้เข้าใจง่ายๆยังไงก็เลย จะขออนุญาตยกเหตุการณ์ตัวอย่างแทนก็แล้วกันครับ

สมมติว่า “ผม(ก้อง)” อยากจะเขียนหรือผลิตหนังสือออกมาขายสัก 1 เล่ม โดยมี “คุณโจ้” เป็นบรรณาธิการตรวจสอบต้นฉบับและวางแผนการจัดพิมพ์ให้ผม

ทุกครั้งที่คุณโจ้ตรวจสอบต้นฉบับจะใช้ปากกาสีแดงเขียนไว้ในบางส่วนของข้อความในเอกสารต้นฉบับนั้น เช่น ตรงนี้พิมพ์ตัวหนา ตรงนี้พิมพ์ตัวเอียง ตรงนี้ขีดเส้นใต้ ตรงนี้เว้นจากขอบด้านซ้าย การกระทำดังกล่าวเรียกว่า “Markup”

ฉะนั้นความหมายในยุคเริ่มต้นของภาษามาร์กอัป ก็คือ “การอธิบายหรือให้คำจำกัดความของข้อมูล” หรือจะเรียกรวมสั้นๆ ว่าเป็นภาษาที่ใช้ในการนิยามความหมายของเอกสารหรือข้อมูลนั่นเอง

มาถึงปัจจุบันภาษามาร์กอัปที่เราเห็นส่วนใหญ่จะใช้แท็ก (Tags) ในการอธิบายรูปแบบหรือลักษณะของข้อความ เช่น ภาษา HTML ที่ใช้แสดงข้อมูลต่างๆผ่านเบราว์เซอร์

วิวัฒนาการจริงๆของภาษามาร์กอัป มีประวัติมายาวนานเหมือนกันครับแต่ผมจะขอ คัดมาเฉพาะเรื่องราวของภาษาที่สำคัญจริงๆ โดยเรียงจากสารบัญเนื้อหาด้านล่าง

สารบัญเนื้อหา (เรียงลำดับจากยุคแรก-ปัจจุบัน)

• ภาษามาร์กอัป (Markup Language) คืออะไร
• แนวคิดและรูปแบบของภาษามาร์กอัป
• GML (Generalized Markup Language)
• SGML (Standard Generalized Markup Language)
• HTML (HyperText Markup Language)
• XML (eXtensible Markup Language)
• XHTML (HTML + XML)
• HTML5 (HTML สมัยใหม่)
• Markdown (Lightweight Markup Language)

ภาษามาร์กอัป (Markup Language) คืออะไร ?

ภาษามาร์กอัป (Markup Language) คือ ภาษาคอมพิวเตอร์รูปหนึ่งที่ใช้สำหรับกำหนดโครงสร้าง จัดรูปแบบ และอธิบายความหมายของข้อมูลโดยอาศัยเครื่องหมาย (เรียกว่าแท็ก : Tags) เพื่อบอกให้โปรแกรมหรือระบบรู้ว่าข้อมูลแต่ละส่วนนั้น ควรถูกตีความหรือแสดงผลอย่างไร

ลักษณะสำคัญของภาษามาร์กอัป

• ใช้เครื่องหมาย (ส่วนใหญ่มักจะเป็น Angle Brackets : < >) ล้อมรอบข้อมูล เพื่อจัดวาง/กำหนดโครงสร้าง อธิบายความหมายและจัดรูปแบบการแสดงผล เช่น การใช้งานแท็ก (Tags) ต่างๆใน HTML
• ไม่มีตรรกะการประมวลผล เช่น การคิดคำนวณหรือการตัดสินใจทำงาน
• อ่านเข้าใจง่าย (เข้าใจได้ทั้งมนุษย์และคอมพิวเตอร์)
• ส่วนใหญ่มักถูกนำไปใช้งานร่วมกับภาษาโปรแกรม (Programming Language)

หมายเหตุ : ภาษามาร์กอัปไม่ใช่ภาษาโปรแกรม เพราะไม่มีคำสั่งควบคุมลำดับการทำงาน (logic) เช่น condition , loop , function ,อื่นๆ แต่มีหน้าที่หลักคือใช้อธิบายข้อมูลเท่านั้นไม่ใช่“สั่งงาน”

สรุปความแตกต่าง

• ภาษาโปรแกรม (Programming Language) ใช้เพื่อสั่งให้คอมพิวเตอร์ทำงาน
• ภาษามาร์กอัป (Markup Language) ใช้อธิบายโครงสร้างของข้อมูล ว่าข้อมูลนี้คืออะไร เพื่อให้ข้อมูลนั้นสามารถถูกอ่านและตีความได้อย่างเป็นมาตรฐานโดยระบบต่าง ๆ

📽️ : https://youtu.be/nQZEP8hENMs 🔗 : https://th.wikipedia.org/wiki/Programming_language 🔗 : https://th.wikipedia.org/wiki/Markup_language

แนวคิดและรูปแบบของภาษามาร์กอัป

แนวคิดและรูปแบบของภาษามาร์กอัปแบ่งออกเป็น 3 รูปแบบ

1. Presentational Markup เป็นแนวคิดในการใช้งานมาร์กอัปโดยเน้นที่การนำเสนอมากกว่าบอกความหมาย ซึ่งจะใช้บอกว่าเนื้อหานี้ควรแสดงผลอย่างไรมากกว่าบอกว่าเนื้อหานี้คืออะไร?

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

ตัวอย่าง

• ตัวอักษรนี้ต้องเป็นตัวหนา
• ข้อความนี้ต้องเป็นสีแดง
• ข้อความนี้ต้องอยู่กึ่งกลาง

ข้อดี

• เข้าใจง่ายและเห็นผลลัพธ์ทันที

ข้อเสีย

• ปรับเปลี่ยนรูปแบบเอกสารยาก จึงไม่เหมาะที่จะนำมาใช้กับ งานเอกสารที่มีความซับซ้อนสูง

เหมาะสำหรับ

• งานเอกสารทั่วไป
• จดหมายและรายงาน

2. Procedural Markup เป็นแนวคิดในการใช้งานมาร์กอัปโดยเน้นที่ขั้นตอนหรือกระบวนการในการแสดงผล (คล้ายการเขียนคำสั่งให้ระบบทำงานตามลำดับ)

โดยจะใช้เพื่อบอกว่าควรประมวลผล จัดรูปแบบและแสดงเนื้อหาอย่างไร จากนั้น ค่อยทำงานตามลำดับขั้นตอนที่กำหนดไว้ตั้งแต่ต้นจนจบ ตัวอย่างเช่น เริ่มย่อหน้าใหม่ -> วาดขีดเส้นใต้ -> เปลี่ยนรูปแบบฟอนต์ -> แสดงผล

ตัวอย่างโค้ด Latex (ภาษาไทย)

\section{บทที่ 1}
นี่คือบทนำ ข้อความนี้ \textbf{สำคัญ} มาก

\documentclass{article}
\usepackage[utf8]{inputenc}
\usepackage[thai]{babel}

\title{บทความตัวอย่าง}
\author{ก้องรักสยาม}
\date{\today}

\begin{document}

\maketitle

\section{บทนำ}
นี่คือย่อหน้าแรก ข้อความจะถูกจัดรูปแบบอัตโนมัติ

\section{เนื้อหาหลัก}
เราสามารถใช้ \textbf{ตัวหนา} และ \textit{ตัวเอียง} ได้

\subsection{หัวข้อย่อย}
ใช้ subsection สำหรับหัวข้อย่อย

\end{document}

ตัวอย่างโค้ด Latex (ภาษาอังกฤษ)

\documentclass{article}
\usepackage{graphicx}

\begin{document}

\title{Introduction to LaTeX {}}
\author{Author's Name}

\maketitle

\begin{abstract}
The abstract text goes here.
\end{abstract}

\section{Introduction}
Here is the text of your introduction.

\begin{equation}
    \label{simple_equation}
    \alpha=\sqrt{\beta}
\end{equation}

\subsection{Subsection Heading Here}
Write your subsection text here.

\begin{figure}
    \centering
    \includegraphics[width = 3.0in]{myfigure}
    \caption{Simulation Results}
    \label{simulationfigure}
\end{figure}

\section{Conclusion}
Write your conclusion here.

\end{document}

ข้อดี

• ควบคุมการแสดงผลได้ละเอียดมากขึ้น เหมาะกับงานที่ต้องการจัดโครงสร้างเอกสารที่มีความซับซ้อนสูง

ข้อเสีย

• อ่านยากและไม่สื่อความหมาย

เหมาะสำหรับ

• งานวิชาการ (Papers, Thesis)
• เอกสารทางวิทยาศาสตร์
• เอกสารที่มีสูตรคณิตศาสตร์ซับซ้อน

3. Descriptive/Semantic Markup เป็นแนวคิดในการใช้งานมาร์กอัปโดยเน้นที่การอธิบายความหมายของเนื้อหามากกว่าการกำหนดลักษณะการแสดงผล (หน้าตา) แนวคิดนี้เป็นหัวใจสำคัญของการออกแบบภาษามาร์กอัปยุคใหม่และเป็นรากฐานของภาษาอย่าง SGML, HTML, XML และ Markdown

ก่อนยุค Descriptive Markup การจัดรูปแบบเอกสารมักจะอยู่ในรูปแบบของ Presentational Markup เช่น บอกให้ตัวอักษรหนา ตัวเอียง หรืออยู่ตำแหน่งใดตำแหน่งหนึ่งโดยตรง แต่ Descriptive Markup จะเปลี่ยนมุมมองเป็นการอธิบายโครงสร้างโดยแยกเนื้อหาออกจากการแสดงผล แนวคิดนี้ช่วยให้เอกสารสามารถถูกนำไปใช้ซ้ำและง่ายต่อการจัดการ

ตัวอย่างโค้ด XML (สำหรับแลกเปลี่ยนข้อมูล)

<students>
    <person>
        <name>Kong</name>
        <lastname>Ruksiam</lastname>
    </person>
    <person>
        <name>Somchai</name>
        <lastname>Jaidee</lastname>
    </person>
</students>

ตัวอย่างโค้ด HTML (สำหรับการพัฒนาเว็บไซต์)

<html>
  <head>
    <title>....</title>
  </head>
  <body>
      ....
  </body>
</html>

ประโยชน์ของ Descriptive Markup

• ทำให้เอกสารมีโครงสร้างชัดเจน
• ช่วยแยกเนื้อหาออกจากการแสดงผลเพื่อให้จัดการง่าย
• สามารถนำไปใช้งานได้หลายรูปแบบ
• สามารถนำไปใช้ซ้ำได้ (Reuse)

เหมาะสำหรับ

• งานด้านการพัฒนาเว็บไซต์และแอพพลิเคชั่น
• การแลกเปลี่ยนข้อมูล
• การพัฒนา API และ Web Services

🔗 : https://en.wikipedia.org/wiki/Markup_language#Types 🔗 : https://corriol.github.io/mlims/01-mlxml/01_llenguatges/ 🔗 : https://monsterspost.com/what-is-markup/ 🔗 : https://www.engagecoders.com/what-is-a-markup-language-7-examples/

GML (Generalized Markup Language)

ในปี ค.ศ 1967 ได้มีกลุ่มคนหลายกลุ่มนำเสนอแนวคิดของภาษามาร์กอัปเพื่อใช้ในการแยกโครงสร้างของเอกสาร ออกจากส่วนแสดงผล (มีจุดประสงค์เพื่อให้สามารถนำข้อมูลในเอกสารไปใช้ในงานอื่นๆ ได้นอกจากการแสดงผล)

ถัดมาอีก 2 ปี คือ ค.ศ 1969 กลุ่มที่ประสบความสำเร็จเป็นรูปเป็นร่างที่สุดคือนักพัฒนาจากบริษัท IBM ได้คิดค้นภาษา GML (Generalized Markup Language) เพื่อใช้ ในระบบประมวลผลข้อความ โดยแนวคิดของภาษานี้ ต้องการให้นักพัฒนาสามารถคิดกลุ่มของแท็กขึ้นเองเพื่อให้ในการอธิบายเอกสาร ตัวอย่าง เช่น

   :h1.Example Of GML
   :p.GML supported hierarchical containers, such as
   :ol.
   :li.Ordered lists (like this one),
   :li.Unordered lists, and
   :li.Definition lists
   :eol.
   as well as simple structures.
   :p.Markup minimization (later generalized and formalized in SGML),
   allowed the end-tags to be omitted for the "h1" and "p" elements.

🔗 : https://en.wikipedia.org/wiki/IBM_Generalized_Markup_Language 📚 : XML 2nd Edition (21)

หลังจากที่ GML เกิดขึ้นมา จุดอ่อนของมันคือ “ไม่มีความเป็นมาตรฐาน” ทำให้เป็นอุปสรรคต่อการนำไปใช้งาน จึงมีการคิดค้นภาษามาร์กอัปตัวใหม่ที่ยึดพื้นฐานมาจากภาษา GML เพื่อสร้างให้เป็นมาตรฐานใหม่ ภาษาดังกล่าวมีชื่อว่า “SGML”

SGML (Standard Generalized Markup Language)

SGML (Standard Generalized Markup Language) เปิดตัวครั้งแรกในปี ค.ศ 1980 และได้ผ่านการปรับปรุงแก้ไขมาหลายครั้ง จนกระทั่งปี 1986 ก็ได้ภาษา SGML ที่สมบูรณ์เป็นมาตรฐาน โดยมีรหัสที่เป็นทางการคือ ISO 8879:1986

โดยภาษา SGML จะแบ่งการทำงานออกเป็น 2 ส่วน คือ

• DTD (Document Type Definition) เพื่อใช้นิยามโครงสร้างของเอกสาร เป็นส่วนประกาศรายละเอียดของแท็กที่จะใช้แสดงข้อมูลไว้ล่วงหน้า
• ส่วนตัวเอกสาร คือ ข้อมูลที่ประกอบขึ้นด้วยแท็กที่กำหนดใน DTD

🔗 : https://en.wikipedia.org/wiki/Standard_Generalized_Markup_Language 📚 : XML 2nd Edition (22) | HTML4 Visual Guide (284)

ส่วนที่ 1 — DTD (กำหนดโครงสร้างเอกสาร)

<!DOCTYPE document [
<!ELEMENT document - - (title, author)>
<!ELEMENT title - - (#PCDATA)>
<!ELEMENT author - - (#PCDATA)>
]>

• <!DOCTYPE> — ประกาศโครงสร้างของ Document Type Definition (DTD)
• <!ELEMENT> — กำหนดโครงสร้างผ่านแต่ละ Element (แท็กเปิด-แท็กปิด)

• PCDATA — ข้อมูลในแท็กเป็นข้อความธรรมดา (Parsed Character Data)

ส่วนที่ 2 — ตัวเอกสาร SGML (Document Body) (ถ้าไม่ตรงกับโครงสร้างที่กำหนดใน DTD ถือว่าเอกสารไม่ถูกต้อง)

<document>
  <title>คู่มือการใช้งาน SGML</title>
  <author>ก้องรักสยาม</author>
</document>

SGML เป็นภาษามาร์กอัปแรก ๆ ที่ผลักดันแนวคิด Descriptive Markup อย่างจริงจัง โดยอนุญาตให้ผู้ใช้นิยามแท็กที่สื่อความหมายของเนื้อหาได้ เช่น

• <title> หมายถึง ชื่อเรื่องหรือหัวข้อ
• <author> หมายถึง ผู้เขียน

<!DOCTYPE document [
<!ELEMENT document - - (title, author)>
<!ELEMENT title - - (#PCDATA)>
<!ELEMENT author - - (#PCDATA)>
]>

<document>
  <title>คู่มือการใช้งาน SGML</title>
  <author>ก้องรักสยาม</author>
</document>

• จากตัวอย่างไม่ได้บอกว่าข้อความควรแสดงผลอย่างไร แต่บอกว่าข้อความนั้น มีความหมายว่าอะไร
• บางกรณีอาจมีการแยกไฟล์ DTD ออกมาต่างหาก แล้วอ้างอิงชื่อไฟล์นั้นใน ภายหลังทุกครั้งที่ต้องการใช้งาน

<!DOCTYPE document SYSTEM "document.dtd">

<document>
  <title>คู่มือการใช้งาน SGML</title>
  <author>ก้องรักสยาม</author>
</document>

🔗 : http://pioneer.chula.ac.th/~awirote/courses/corpus-ling/corpusencoding.pdf 🔗 : https://www.thailibrary.in.th/2013/04/19/markup-language/ 🔗 : https://www2.cs.science.cmu.ac.th/staff/THAPANAPONG/lib/exe/fetch.php?media=lec02_19s2.pdf

จุดเด่นสำคัญของ SGML

• มีความยืดหยุ่นสูงมาก
• สามารถกำหนดโครงสร้างเอกสารที่ซับซ้อนได้

ปัญหาของ SGML

• มีความซับซ้อนเกินไป ยากต่อการเรียนรู้
• ใช้งานจริงยุ่งยาก ต้องอาศัยผู้เชี่ยวชาญ รวมถึงเครื่องมือหรือโปรแกรมแปลไฟล์ SGML โดยเฉพาะ (ซึ่งมีน้อย)

ปัจจุบัน SGML จัดว่าเป็นภาษามาร์กอัปเชิงมาตรฐาน ทำหน้าที่เป็น “แม่แบบ (Meta-Language)” เพื่อใช้กำหนดกฎเกณฑ์และโครงสร้างในการสร้างภาษามาร์กอัปอื่น ๆ ไม่ได้มุ่งเน้นให้ใช้งานโดยตรงในชีวิตประจำวัน

แต่ก็ยังมีกลุ่มคนบางกลุ่มที่ใช้ SGML อยู่ในวงการแคบๆ โดยนำไปใช้กับข้อมูลเอกสารขนาดใหญ่ในยุคแรกของอินเทอร์เน็ต งานสิ่งพิมพ์ งานวิชาการและเอกสาร ในอุตสาหกรรม ข้อมูลทางวิทยาศาสตร์ ฟิสิกส์ เคมี ชีววิทยา คณิตศาสตร์ หรือ ข้อมูลทางสถิติ เป็นต้น

HTML (HyperText Markup Language)

การคิดค้นภาษา SGML นับเป็นจุดเริ่มต้นที่สำคัญของภาษาใหม่ๆและเป็นจุดเริ่มต้นของภาษา HTML ด้วยเช่นกัน ซึ่งผู้คิดค้น คือ Tim Berners-Lee แห่งสถาบันวิจัย CERN ประเทศสวิตเซอร์แลนด์ ได้นำเสนอการจัดรูปแบบเอกสารที่เรียกว่า HTML

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

📚 : XML 2nd Edition (24)

HTML จัดว่าเป็นภาษาหลักสำหรับนำมาสร้างไฟล์เว็บเพจหรือการกำหนดโครงสร้างหน้าเว็บ เช่น หัวข้อ , ย่อหน้า , ลิงก์, รูปภาพ , อื่นๆ โดยมีแนวคิดมาจากการสร้าง “เอกสาร HyperText (ไฮเปอร์เท็กซ)์”

HyperText หมายถึง ข้อความภายในเอกสารที่สามารถเชื่อมโยงถึงข้อมูลต่างๆได้ ทั้งเชื่อมโยงเฉพาะเว็บเพจที่อยู่ในเว็บไซต์เดียวกันหรือเว็บไซต์ที่อยู่ข้ามประเทศ หรือข้ามทวีปก็ได้ โดยในยุคแรกยังใช้ข้อความเชื่อมต่อเพียงอย่างเดียวและในเวลาต่อมาก็ได้มีการพัฒนาให้สามารถเชื่อมต่อโดยใช้รูปภาพได้

📚 : HTML4 Visual Guide (15)

ภาษา HTML นั้นได้รับการพัฒนามาอย่างต่อเนื่องและถูกนำไปใช้งานอย่างแพร่หลาย ทำให้เกิดมาตรฐานในเวอร์ชั่นต่างๆ ดังนี้

• HTML 1.0 ได้กำหนดให้เอกสาร HTML ที่ได้พัฒนาขึ้นแม้จะเขียนด้วยมาตรฐานใดๆก็ตาม ต้องไม่ทำให้เอกสารที่สร้างนั้นอ่านไม่ได้
• HTML 2.0 ถูกพัฒนาโดย IETF (Internet Engineering Task Force) ซึ่งมุ่งหวังให้สามารถเปิดแสดงผลบนเบราว์เซอร์ที่ใช้งานทั่วไปได้
• HTML 3.0 ได้พัฒนาให้ HTML มีความสามารถเพิ่มขึ้น เช่น การทำงานเกี่ยวกับตาราง การปรับข้อความล้อมรอบภาพ แสดงส่วนที่มีความซับซ้อนได้ดีขึ้น รวมทั้งช่วยให้เบราว์เซอร์ย้อนกลับดูเว็บเพจที่เคยชมมาก่อนได้ดีกว่าเวอร์ชั่น 2.0
• HTML 3.2 มีการเพิ่ม Element และ Attribute ที่สามารถทำงานร่วมกับหลายๆ เบราว์เซอร์ได้มากขึ้น
• HTML 4.0 ได้มีการพัฒนาและดูแลมาตรฐานของ HTML โดยองค์กรกลาง ที่ชื่อว่า W3C (The World Wide web Consortium) โดยได้มีการเพิ่มประสิทธิภาพในการทำงานด้วย Style Sheet , Frame , การฝังโปรแกรมเสริม เพื่อแสดงภาพและเสียง และการใช้งานร่วมกับภาษา Script แบบต่างๆ
• HTML 4.01 ปรับปรุงประสิทธิภาพการทำงานให้ดียิ่งขึ้น
• หลัง HTML 4.01 องค์กร W3C ได้หยุดพัฒนา HTML โดยเปลี่ยนไปพัฒนาภาษามาตรฐานใหญ่ที่ชื่อว่า XHTML มาใช้ในการสร้างเว็บ เพื่อต้องการขยาย การใช้เว็บไปสู่อุปกรณ์ต่างๆ ได้มากขึ้น
• ในปี ค.ศ 2014 องค์กร W3C ได้ประกาศใช้งาน HTML5 อย่างเป็นทางการ

📚 : XHTML (23–24) 📚 : พัฒนาเว็บสมัยใหม่ (28)

https://www.w3.org/

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

📚 : HTML4 Visual Guide (23)

แล้ว HTML ต่างจาก SGML อย่างไร ?

• HTML ออกแบบขึ้นมาโดยใช้ข้อกำหนดของ SGML และได้ตัดฟีเจอร์ที่ซับซ้อน ของ SGML ออกไป ทำให้มีโครงสร้างภาษาที่เข้าใจง่าย สามารถเรียนรู้ได้ภายในเวลาไม่นานอีกทั้งยังมีความยืดหยุ่นกว่า SGML (เขียนผิดก็ยังแสดงผลได้)
• การใช้งาน SGML นั้นต้องทำงาน 2 ขั้นตอน คือ กำหนดโครงสร้าง DTD และใช้ข้อกำหนด DTD นั้นเพื่อแสดงข้อมูล(ต้องกำหนดแท็กก่อนแล้วนำมาใช้งาน)
• ส่วน HTML ทำงานขั้นตอนเดียวแสดงข้อมูลได้เลย ไม่จำเป็นต้องเขียน DTD เอง เนื่องจากมีการกำหนดแท็กไว้ล่วงหน้าแล้ว (ใน HTML4.0 มีแท็กมาตรฐานให้เลือกใช้งานกว่า 70 ชนิดและมีแอตทริบิวต์ประมาณ 50 ชนิด )

📚 : HTML4 Visual Guide (285)

ตัวอย่างคำสั่ง HTML

<h1>สวัสดีโลก</h1>
<p>นี่คือเนื้อหาบนหน้าเว็บ</p>

• แท็ก <h1> คือ หัวข้อ (Heading)
• แท็ก <p> คือ ย่อหน้า (Paragraph)
• จากตัวอย่างจะสังเกตุว่าการใช้คำสั่ง HTML นั้นมีจุดประสงค์เพื่อบอกโครงสร้างและความหมายของสิ่งที่ต้องการนำเสนอว่า อะไรคือหัวข้อ อะไรคือย่อหน้า ไม่ได้บอกให้ “คิด” หรือ “ตัดสินใจ” หรือไม่มี Logic ในตัวนั่นเอง!!
• ไม่ต้องกำหนด DTD เองเพราะ Browser มีรู้จักแท็กมาตรฐานของ HTML อยู่แล้วจากการประกาศ DTD ในเอกสาร HTML เพื่อบอกให้เบราว์เซอร์รู้ว่าเอกสารนี้ใช้มาตรฐาน HTML เวอร์ชั่นใด ทำให้เบราว์เซอร์ประมวลผลและแสดงผลเว็บเพจได้อย่างถูกต้อง

การประกาศ DOCTYPE เพื่ออ้างอิงไปยัง DTD

การแสดงผลโครงสร้างและองค์ประกอบต่างๆ ในหน้าเว็บขึ้นอยู่กับเงื่อนไขที่มีพร้อมกับเอกสารที่สร้างขึ้นซึ่งเงื่อนไขเหล่านี้จะถูกจัดเก็บอยู่ใน Document Type Definition (DTD) ที่ผมได้เคยกล่าวไปก่อนหน้า

โดย DTD จะเป็นตัวกำหนดโครงสร้างของเว็บเพจเพื่อบอกกับเบราว์เซอร์ว่าเว็บเพจ ที่เราจะสร้างขึ้นนั้น ใช้คำสั่งของ HTML เวอร์ชั่นใด รวมถึงบอกชนิดของเอกสารที่ใช้ ซึ่งจะช่วยให้เบราว์เซอร์แปลเอกสารได้อย่างถูกต้อง หากต้องการให้เว็บเพจแสดงผลได้อย่างถูกต้อง นักพัฒนาเว็บจะต้องประกาศ Doctype (Document Type Declaration) ไว้ในส่วนเริ่มต้นของเว็บเพจหรือกำหนดไว้ในบรรทัดแรกของเอกสาร HTML

📚 : ใช้งาน CSS ให้เต็มประสิทธิภาพ (11) 🔗 Doctype : https://en.wikipedia.org/wiki/Document_type_declaration

• HTML 1 (ไม่มีการประกาศ Doctype)
• HTML 2.0

<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">

• HTML 3.2

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

• HTML 4.01 Transitional เป็นการประกาศ Doctype เพื่อให้เบราว์เซอร์เวอร์ชั่นเก่าสามารถเข้าใจคำสั่งแท็กในเอกสาร HTML ที่ถูกประกาศยกเลิกไปแล้วได้

<!-- Transitional DTD -->
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

• HTML 4.01 Strict เป็นการประกาศ Doctype ในเอกสาร HTML แบบเข้มงวดเพื่อให้นักพัฒนาเว็บตรวจสอบความถูกต้องของคำสั่งและไม่อนุญาตให้ใช้แท็กที่ถูกยกเลิกไปแล้ว พร้อมสนับสนุนการทำงานกับ Cascading Style Sheet (CSS)

<!-- Strict DTD --> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

• HTML 4.01 Frameset เป็นการประกาศ Doctype ในเอกสาร HTML ที่มีการ ใช้แท็กคำสั่ง <frameset> ในการแบ่งพื้นที่หน้าเว็บออกเป็นหลายๆส่วน

<!-- Frameset DTD -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">

• HTML5 (ปัจจุบัน) ไม่ต้องระบุเลขเวอร์ชั่นกำกับในเอกสาร (Living Standard)

<!DOCTYPE html>

DOCTYPE กับ DTD ต่างกันอย่างไร (ทำไมชื่อคล้ายๆกัน)

• Document Type Declaration (DOCTYPE) เป็นคำสั่งที่ประกาศไว้บรรทัดแรกของไฟล์ HTML บอกให้เบราว์เซอร์รู้ว่าเอกสารนี้เป็น HTML เวอร์ชั่นอะไร เป็นเพียงการอ้างอิงเท่านั้นไม่ใช่การกำหนดกฎเกณฑ์
• Document Type Definition (DTD) เป็นเอกสารที่กำหนดกฎเกณฑ์ว่า HTML เวอร์ชั่นนั้นๆ มี Element และ Attribute อะไรบ้าง โดยจะเป็นไฟล์แยกต่างหาก สำหรับเก็บกฎเกณฑ์และโครงสร้างที่ถูกต้อง โดยจะใช้ DOCTYPE ประกาศเพื่ออ้างอิงไปยัง DTD เสมอ (ในยุค HTML4, XHTML)

สรุปความแตกต่าง

• DOCTYPE คือ ป้ายบอกเวอร์ชั่น
• DTD คือ คู่มือหรือกฎเกณฑ์ที่ DOCTYPE อ้างอิงถึง

HTML4 / XHTML (มีการอ้างอิงถึง DTD)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">

HTML5 (ไม่มีการอ้างอิงถึง DTD แล้ว)

<!DOCTYPE html>

📚 : ใช้งาน CSS ให้เต็มประสิทธิภาพ (11–12) 🔗 : https://www.w3.org/TR/html401/ (HTML4.01) 🔗 : https://html.spec.whatwg.org/ (ข้อกำหนดมาตรฐานของ HTML5)

สรุปเกี่ยวกับ HTML

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

ข้อจำกัดของ HTML

ภาษา HTML ช่วยให้เราสร้างสรรค์เว็บเพจได้สวยงามและหลากหลายก็จริง แต่ความสามารถดังกล่าวนั้นเป็นเพียงแค่ “การแสดงผล”

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

นอกจากนี้ยังต้องแปลงข้อมูลในหน้าเว็บให้เป็นรูปแบบอื่นๆ ยิ่งทำให้การจัดการข้อมูลยากมากขึ้นไปอีกเพราะ

• ไม่รู้ว่าข้อมูลในเอกสารส่วนไหนซ้ำกันบ้าง
• ไม่รู้ว่าข้อมูลส่วนไหนมีสำคัญและน่าเชื่อถือ
• ไม่รู้ว่าข้อมูลส่วนไหนที่ไม่ได้ใช้
• ไม่รู้ว่าจุดเริ่มต้นและจุดสิ้นสุดของข้อมูลอยู่ตรงไหน

ทำให้เกิดความสับสนในข้อมูลจนนำไปใช้ประโยชน์อะไรไม่ได้ จึงเป็นที่มาของการพัฒนาภาษาใหม่ขึ้นมา เพื่อจัดการเกี่ยวกับข้อมูลโดยเฉพาะ นั่นก็คือภาษา XML

XML (eXtensible Markup Language)

เป็นภาษามาร์กอัปที่ถูกพัฒนาขึ้นโดยรวมเอาความสามารถของภาษา SGML และภาษา HTML เข้าไว้ด้วยกัน คือ

• ความสามารถในการนิยามข้อมูลของภาษา SGML
• ความสามารถในการนำมาใช้งานผ่านระบบอินเทอร์เน็ตของภาษา HTML

โดยมีวัตถุประสงค์หลักเพื่อจัดเก็บและแลกเปลี่ยนข้อมูล โดยจะเน้นที่โครงสร้างและความหมายของข้อมูลมากกว่าการแสดงผล

📚 : XML 2nd Edition (25) 📚 : HTML4 Visual Guide (286)

จุดเด่นของ XML คือ มีโครงสร้างที่ชัดเจนและมีความยืดหยุ่นสูง อนุญาตให้ผู้ใช้สามารถกำหนดแท็กเองได้ (Data Definition) โดยนำเอาแนวคิด Descriptive Markup จาก SGML มาใช้ในบริบทของข้อมูลด้วย เช่น

ตัวอย่างที่ 1 :

<price>150</price>

คำสั่งดังกล่าวไม่ได้บอกว่าตัวเลข 150 ต้องแสดงสีอะไรหรือขนาดเท่าไร แต่บอกว่า “150” มีความหมาย คือ ราคา

ตัวอย่างที่ 2 :

<user>
  <name>KongRuksiam</name>
  <role>Developer</role>
</user>

<employee>
  <name>Jojo</name>
  <position>Marketing</position>
</employee>

<?xml version="1.0" encoding="UTF-8"?>
<bookstore>
  <book category="computer">
    <title lang="th">หนังสือคอมพิวเตอร์เบื้องต้น</title>
    <author>ก้องรักสยาม</author>
    <year>20xx</year>
    <price>350.00</price>
  </book>
</bookstore>

จะเห็นว่า XML ต่างกับ HTML อย่างชัดเจน คือ

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

ลักษณะเด่นของ XML

• ใช้เป็นมาตรฐานในการแลกเปลี่ยนข้อมูลในระบบต่างๆ
• สามารถกำหนดแท็กเองได้ (ต่างจาก HTML ที่มีการกำหนดแท็กไว้ล่วงหน้า)
• เน้นความหมายของข้อมูล โดยการเขียนจะอยู่ในรูปแบบ Case Sensitive เช่น <user> กับ <User> ถือว่ามีความหมายต่างกัน
• มีโครงสร้างการเขียนที่เข้มงวด ต้องเปิด–ปิดแท็กให้ถูกต้อง (ถ้าเขียนผิดจะไม่แสดงผลเลย)
• มี Element ที่เป็น root ได้เพียงอันเดียวเท่านั้น
• หนึ่ง Attribute สามารถเก็บได้เพียงค่าเดียว
• ค่าของ Attribute จะต้องเขียนอยู่ภายในเครื่องหมายคำพูด (Quote)

การประยุกต์ใช้งาน

• แลกเปลี่ยนข้อมูลระหว่างระบบที่แตกต่างกัน (System Integration)
• ใช้กับ Web Services (SOAP)
• ไฟล์ตั้งค่าต่างๆ (Configuration files) เช่น Android Layout files
• เอกสารอื่นๆ เช่น RSS , SVG , Office Documents (DOCX, XLSX) เป็นต้น

🔗 : https://www2.cs.science.cmu.ac.th/staff/THAPANAPONG/lib/exe/fetch.php?media=lec02_19s2.pdf

XHTML ภาษามาตรฐานใหม่ที่มาแทน HTML4

ก่อนจะมาถึงยุคของภาษา XHTML ทาง W3C องค์กรกลางผู้พัฒนาเทคโนโลยีเว็บ ได้พบข้อจำกัดของ HTML4.01 จึงได้มีการพัฒนาภาษามาตรฐานใหม่โดยพัฒนาจาก SGML ที่ชื่อว่า XML (eXtensible Markup Language) หรือแปลตรงตัวก็คือภาษามาตรฐานที่มีขีดความสามารถมากยิ่งขึ้น สามารถใช้งานได้หลายแพลตฟอร์ม

ต่อมาเมื่อมีความต้องการให้การเขียนเว็บมีรูปแบบที่รัดกุมมากยิ่งขึ้น จึงได้รวบรวม คำสั่งของ HTML4.01 กับมาตรฐานของ XML เข้าไว้ด้วยกันเกิดเป็นภาษา HTML แบบใหม่ที่มีกฎและระเบียบมากยิ่งขึ้นและตั้งชื่อว่า XHTML (eXtensible HyperText Markup Language)

📚 : XHTML (30)

ไม่มีมาตรฐานที่แน่นอนและตรวจสอบหาจุดผิดพลาดได้ยาก เช่น

• สามารถพิมพ์ชื่อแท็กเป็นตัวอักษรพิมพ์เล็ก-พิมพ์ใหญ่ก็ได้

<!-- <HTML> , <html> , <Html> มีความหมายเหมือนกัน -->
<HTML> 
<html> 
<Html>

• ไม่ต้องใส่แท็กปิด แต่โค้ดก็ยังสามารถทำงานได้

<P>This is a paragraph
<BR>

• ค่าแอตทริบิวต์ไม่ได้ระบุอยู่ภายในเครื่องหมายคำพูด (Quote) แต่ทำงานได้ เช่น

<INPUT TYPE=TEXT>
<hr width=600 size=5>

• เมื่อเขียนหลายๆแท็กซ้อนกัน สามารถย้ายลำดับการใส่แท็กเปิด-แท็กปิดได้

<b><u> Hello World </b></ul>

จากตัวอย่าง การเขียนคำสั่ง HTML 4.01 นั้นไม่มีมาตรฐานที่แน่นอน เพราะ

• มีการนำแท็กไปใช้อย่างผิดความหมายและผิดวัตถุประสงค์ แต่ผลลัพธ์กลับทำงานออกมาถูกต้อง เช่น ปิดแท็กไม่เป็นตามลำดับ
• ไม่มีการแจ้งเตือนเกิดขึ้น ทำให้นักพัฒนาเว็บไม่ทราบถึงข้อบกพร่องและปล่อยเว็บเข้าสู่โลกอินเทอร์เน็ต เมื่อผู้เยี่ยมชมเข้ามาดูและใช้เบราว์เซอร์ตัวอื่นที่ไม่อนุญาตให้สลับแท็กปิดได้ การแสดงผลของหน้าเว็บนั้นอาจจะผิดพลาดจาก รูปแบบที่นักพัฒนาเว็บได้ออกแบบไว้

การใช้งานบนแพลตฟอร์มที่จำกัด

เมื่อการท่องเว็บเป็นที่นิยมอย่างแพร่หลายส่งผลให้อุปกรณ์สื่อสาร เครื่องใช้และเทคโนโลยีต่างๆ หันมาเพิ่มความสามารถให้เชื่อมต่อการท่องเว็บได้มากขึ้น เช่น คอมพิวเตอร์ โทรศัพท์มือถือ ตู้เย็นที่สั่งซื้อของผ่านเว็บ

ดังนั้นเมื่อความต้องการเว็บมีมากขึ้น แต่ภาษา HTML4.01 มีความซับซ้อนเกินไป ต้องใช้ความสามารถของเบราว์เซอร์และคอมพิวเตอร์ประมวลผลมากขึ้นไปด้วยจึงได้มีการพัฒนาภาษาที่ประมวลผลได้ง่าย สามารถใส่หน่วยประมวลผลขนาดเล็กเข้าไปในอุปกรณ์และเครื่องใช้ต่างๆแล้วประมวลผลหน้าเว็บได้ นั่นก็คือภาษา XHTML

📚 : XHTML (28–29)

XHTML คือภาษามาร์กอัปที่เกิดจากการผสมผสานระหว่าง HTML และ XML ทำให้เกิดเป็นมาตรฐานใหม่ของ HTML เพื่อให้การเขียนโค้ดมีกฎระเบียบและเพิ่มความเข้มงวดในเรื่องโครงสร้างภาษาให้มีความชัดเจนมากขึ้นช่วยลดความคลุมเครือในการตีความของเบราว์เซอร์

ข้อดีของ XHTML

• การเริ่มต้นใช้งานไม่ยุ่งยาก เนื่องจากคำสั่งใน XHTML นั้นพัฒนามาจาก HTML4.01 ซึ่งนักพัฒนาเว็บคุ้นเคยกันดีอยู่แล้วเพียงแต่ใช้รูปแบบการเขียนเหมือน XML นอกจากนี้เว็บเพจที่สร้างขึ้น สามารถใช้กับเบราว์เซอร์ที่มีอยู่ได้ทันที ไม่ต้องอัปเดตเบราว์เซอร์ให้ยุ่งยาก (แสดงผลเหมือนกันทุกเบราว์เซอร์)
• การใช้คำสั่งและโมดูลร่วมกัน ในภาษา XHTML อนุญาตให้พัฒนา Element , Attribute และโมดูลการทำงานต่างๆได้ พร้อมทั้งสามารถส่งต่อให้นักพัฒนาเว็บคนอื่นๆ นำคำสั่งหรือโมดูลไปใช้งานได้เลย
• การพัฒนาเบราว์เซอร์ทำได้ง่ายและสะดวก เนื่องจากการเขียนด้วย XHTML มีโครงสร้างที่เป็นมาตรฐานและมีรูปแบบที่แน่นอนตายตัว ดังนั้นการออกแบบและพัฒนาเบราว์เซอร์จึงไม่จำเป็นต้องเขียนโปรแกรมรองรับรูปแบบเพี้ยนๆมากนัก
• การทำงานเข้ากับทุกระบบ เพราะ XHTML เป็นภาษาที่ไม่ซับซ้อนและมีความแน่นอน จึงไม่จำเป็นต้องใช้เบราว์เซอร์หรือโปรเซสเซอร์ในการประมวลผลสูง ซึ่งส่งผลทำให้อุปกรณ์ต่างๆ พัฒนาระบบให้สามารถเปิดใช้เว็บได้มากยิ่งขึ้น

📚 : XHTML (30)

กฎเกณฑ์พื้นฐานในการเขียน XHTML

การประการ DOCTYPE (Document Type Declaration) เป็นการประกาศชนิด ของเอกสารซึ่งจะมีผลต่อรูปแบบและคุณสมบัติการทำงานของแท็กที่เราจะใช้ ในเอกสารหน้านั้น สำหรับนักพัฒนาโปรแกรมที่สร้างแท็กและแอตทริบิวต์ขึ้นมาใช้งานเองจะต้องระบุคุณสมบัติของแท็กและแอตทริบิวต์นั้นที่ DTD ด้วย เพื่อให้นักพัฒนาคนอื่นสามารถนำแท็กและแอตทริบิวต์นั้นไปใช้ต่อได้ ตัวอย่าง เช่น

• XHTML 1.0 Transitional เป็นการกำหนดรูปแบบให้กับเว็บเพจที่กำลังเปลี่ยนมาใช้ XHTML นั้นสามารถใช้แท็กและแอตทริบิวต์ที่ยกเลิกไปแล้วได้อีกทั้งยังรองรับการแสดงผลด้วยเบราว์เซอร์รุ่นเก่าที่ไม่สนับสนุน Cascading Style Sheet

<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

• XHTML 1.0 Strict เป็นการกำหนดรูปแบบที่เคร่งครัดขึ้น โดยจะไม่สนับสนุนการแสดงผลแอตทริบิวต์ที่ถูกตัดออกหรือยกเลิกใช้งานและจะรองรับการแสดงผลเฉพาะเบราว์เซอร์ที่สนับสนุน Cascading Style Sheet เท่านั้น จึงเหมาะสำหรับการสร้างเว็บเพจแบบใหม่ที่ต้องการรองรับเทคโนโลยีในอนาคต

<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

• XHTML 1.0 Frameset เป็นการกำหนดรูปแบบให้กับเว็บเพจที่มีการใช้เฟรม หรือที่รู้จักในคำสั่ง Frameset ที่มีรูปแบบเหมือนกับ Transitional ยกเว้นการใช้ส่วนของ Frameset แทนส่วนของ body

<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

ต้องมีแท็กพื้นฐานครบถ้วน การเขียนเว็บเพจด้วย XHTML จะต้องมีแท็กพื้นฐานที่ครบถ้วนโดยให้แท็ก <html> อยู่ด้านนอกสุดและแท็กต่างๆอยู่ด้านในเรียงตามลำดับ

<html>
  <head>
    <title>....</title>
  </head>
  <body>
      ....
  </body>
</html>

การเรียงลำดับแท็กที่ซ้อนกัน XHTML จะเคร่งครัดกับแท็กที่ทำงานซ้อนกัน โดยต้องมีการเรียงลำดับการเปิด-ปิดแท็กที่ถูกต้อง เช่น

<b><u>Hello World!</b></ul> ❌

<b><u>Hello World!</u></b> ✅

แท็กและแอตทริบิวต์ทุกตัวต้องเขียนด้วยตัวพิมพ์เล็กเสมอ เนื่องจาก XHTML ได้รับอิทธิพลมาจากรูปแบบโครงสร้างภาษา XML ซึ่งจะมองตัวพิมพ์ใหญ่กับตัวพิมพ์เล็กมีความหมายต่างกัน ดังนั้นเพื่อลดความผิดพลาดจึงกำหนดให้ประกาศใช้แท็กและแอตทริบิวต์ทุกตัวเป็นตัวพิมพ์เล็ก

<BODY> ❌
   <TABLE WIDTH="100%"> ❌
</BODY> ❌

<!--เปลี่ยนเป็น-->
<body> ✅
   <table width="100%">✅
</body>✅

ทุกแท็กเปิดต้องมีแท็กปิด เดิมทีใน HTML แท็กเปิดบางตัวจะไม่มีแท็กปิด หรือบางครั้งลืมใส่แท็กปิดก็ยังสามารถแสดงผลได้ แต่ใน XHTML จะเคร่งครัดเรื่องความถูกต้องโดยทุกแท็กเปิดต้องปิดแท็กด้วย เช่น

<p>Hello World! ❌

<!--เปลี่ยนเป็น-->
<p>Hello World!</p> ✅

กรณีเป็นแท็กว่างไม่มีเนื้อหาต้องมีแท็กปิดตัวเอง (Self-Closing) เช่น

<br> ❌
<hr> ❌
<img src="happy.gif" alt="Happy face"> ❌

<!--เปลี่ยนเป็น-->
<br/>
<hr/>
<img src="happy.gif" alt="Happy face"/>

ต้องกำหนดค่าแอตทริบิวต์ในเครื่องหมายคำพูด (“”) เสมอ ค่าที่กำหนดให้ใช้ในแอตทริบิวต์ทั้งหมด จะต้องอยู่ภายในเครื่องหมาย “..” ซึ่งต่างจาก HTML แบบเดิมที่ใส่เฉพาะค่าตัวเลขเท่านั้น

<td rowspan=3> ❌

<!--เปลี่ยนเป็น-->
<td rowspan="3"> ✅ 

ห้ามย่อแอตทริบิวต์ ไม่รองรับการย่อแอตทริบิวต์ โดยเฉพาะการใช้ค่าแอตทริบิวต์ ที่มีชื่อเหมือนกัน เพราะผู้เขียนเว็บส่วนใหญ่มักจะย่อสั้นๆแล้วเขียนละไว้เฉพาะชื่อแอตทริบิวต์เท่านั้น

<dl compact> ❌
<input type="checkbox" value="car" checked />
<input type="text" name="first" disabled />

<!--เปลี่ยนเป็น-->
<dl compact="compact"> ✅
<input type="checkbox" value="car" checked="checked" /> ✅
<input type="text" name="first" disabled="disabled" /> ✅

🔗 : https://en.wikipedia.org/wiki/XHTML 🔗 : https://www2.cs.science.cmu.ac.th/staff/THAPANAPONG/lib/exe/fetch.php?media=lec02_19s2.pdf 📚 : XHTML (31–33)

เปรียบเทียบความแตกต่าง

HTML4.01

<P>This is a paragraph
<BR>
<INPUT TYPE=TEXT>

XHTML

<p>This is a paragraph</p>
<br />
<input type="text" />

สรุปแบบสั้นๆ

• ต้องมีการประกาศ DOCTYPE
• แท็กและแอตทริบิวต์ต้องเขียนเป็นตัวพิมพ์เล็ก เช่น <html>, <body> , <p>
• ต้องมีแท็กปิดเสมอ เช่น <p>text</p>
• กรณีเป็นแท็กว่างไม่มีเนื้อหาต้องมีแท็กปิดตัวเอง เช่น <br />, <img />
• การกำหนดค่าแอตทริบิวต์ต้องเขียนอยู่ในเครื่องหมายคำพูด (quotes) เช่น class=”test” , type=”text” เป็นต้น

สถานะปัจจุบัน : การมาของ HTML5 ที่มีความยืดหยุ่นสูงและใช้งานได้สะดวกกว่า ได้กลายมาเป็นมาตรฐานใหม่ในปัจจุบัน ทำให้ XHTML ได้รับความนิยมน้อยลง

🔗 : https://en.wikipedia.org/wiki/XHTML

การพัฒนาสู่ HTML5

หลังจาก HTML 4.01 เป็นต้นมา องค์กรกลางที่ดูแลมาตรฐานอินเทอร์เน็ต หรือ W3C ได้หยุดพัฒนา HTML แล้วเปลี่ยนไปพัฒนาภาษาใหม่ที่ชื่อว่า XHTML แทน เพื่อใช้เป็นภาษามาตรฐานในการสร้างเว็บและขยายการใช้งานไปสู่อุปกรณ์ต่างๆ แต่ก็ยังคงให้เบราว์เซอร์ใช้งาน HTML ได้เช่นเดิม (นับสิบกว่าปีเลยนะ) เนื่องจากยังสามารถ ใช้งานได้อยู่ แม้ว่าจะมีเทคโนโลยีใหม่เกิดขึ้นมามากมาย ก็อาศัยโปรแกรมเสริมต่างๆ (Extension หรือ Plug-in) เข้ามาช่วยเพิ่มความสามารถให้เว็บรองรับการทำงานกับเทคโนโลยีเหล่านั้น เช่น

• เล่นวิดีโอผ่าน Flash Player
• ตกแต่งเว็บให้สวยงามด้วย CSS
• เพิ่มลูกเล่นและโต้ตอบกับผู้ใช้งานด้วย JavaScript

https://whatwg.org/

ต่อมากลุ่มบริษัทผู้สร้างเว็บเบราว์เซอร์ได้แก่ Apple , Mozilla และ Opera ได้รวมตัวกันก่อตั้งกลุ่มที่ชื่อว่า WHATWG (Web Hypertext Application Technology Working Group) เพื่อต้องการสร้างมาตรฐานใหม่และขยายขีดความสามารถของภาษา HTML ให้มากกว่าเดิม เนื่องจากรู้สึกไม่เห็นด้วยกับมาตรฐานของทาง W3C ที่มุ่งเน้นพัฒนา XHTML มากเกินไปและละเลยความต้องการจริงๆของนักพัฒนาเว็บ

ตัวอย่างมาตรฐานใหม่

• ต้องการให้เว็บมีแบบฟอร์มที่ฉลาดขึ้น โต้ตอบกับผู้ใช้งานได้ดี
• สามารถเล่นวิดีโอได้เอง (โดยไม่ต้องพึ่ง Flash Player)
• สามารถนำไปใช้งานกับอุปกรณ์ต่างๆได้โดยไม่มีปัญหา เช่น คอมพิวเตอร์ตั้งโต๊ะ โน้ตบุ๊ก มือถือ แท็บเล็ต เพื่อตอบสนองต่อการเปลี่ยนแปลงของเทคโนโลยีในปัจจุบัน โดยตอนแรกจะใช้ชื่อว่า Web Applications 1.0

🔗 : https://blog.whatwg.org/html-is-the-new-html5 🔗 : https://en.wikipedia.org/wiki/WHATWG

ในขณะนั้นองค์กร W3C เองก็ไม่เห็นด้วยกับกลุ่ม WHATWG เนื่องจากมีโครงการที่จะพัฒนา XHTML2.0 อยู่แล้ว แต่จากนั้นไม่นานก็ได้ยกเลิกโครงการดังกล่าวไป แล้วหันมาสนับสนุนกลุ่ม WHATWG แทน และได้ประกาศใช้งาน HTML5 อย่างเป็นทางการในเวลาต่อมา

ซึ่งทาง W3C และ WHATWG ได้ตกลงร่วมกันที่จะเผยแพร่ข้อกำหนดของ HTML และ DOM ผ่านเว็บ “Living Standard” ของ WHATWG เป็นหลักเพื่อแก้ปัญหาไม่ให้นักพัฒนาเว็บสับสนและเพื่อติดตามเกี่ยวกับการอัปเดตใหม่ๆของ HTML ด้วย

เกร็ดความรู้ — Living Standard คือ มาตรฐานที่ไม่ได้ระบุเลขเวอร์ชั่นกำกับ (เช่น HTML5.1, 5.2) แต่เป็นมาตรฐานที่มีการปรับปรุงอยู่ตลอดเวลาไม่หยุดนิ่ง

📚 : พัฒนาเว็บสมัยใหม่ (19) 📚 : รวมพื้นฐานการสร้างเว็บ (26–27)

การประกาศ Doctype ใน HTML5 (ไม่ต้องระบุเลขเวอร์ชั่นกำกับ)

<!DOCTYPE html>

🔗 Living Standard : https://html.spec.whatwg.org/ (ข้อกำหนดของ HTML5)

มีอะไรใหม่บ้างใน HTML5 ?

[embed]Canvas

• Canvas สำหรับสร้างรูปภาพ ตกแต่งภาพ ทำภาพเคลื่อนไหว (Animation) สร้างกราฟและแผนภูมิต่างๆตามที่เราต้องการ รวมถึงสามารถทำงานร่วมกับ Audio / Video เพื่อแสดงผลวิดีโอและไฟล์เสียงต่างๆได้

• Audio / Video สำหรับแสดงผลวิดีโอและเล่นไฟล์เสียงต่างๆ ได้โดยไม่ต้องลงโปรแกรมเสริมหรือ Plug-in อื่นๆเพิ่มเติม

[embed]Geolocation

• Geolocation แสดงตำแหน่งพิกัดปัจจุบันอยู่ในรูปแบบละติจูดและลองจิจูด สามารถนำพิกัดไป mark ตำแหน่งบน Google Map เพื่อแสดงแผนที่ได้หรือ นำไปประยุกต์ใช้งานร่วมกับแอพพลิเคชั่นอื่น

[embed]Drag and Drop

• Drag and Drop ใช้ในการลากสิ่งต่างๆที่อยู่ในเว็บเบราเซอร์ เช่น ลากไฟล์จากคอมพิวเตอร์มาวางบนเว็บเบราว์เซอร์เพื่ออัปโหลดไฟล์โดยไม่จำเป็นต้องกดปุ่ม

[embed]Local Storage

• Local Storage ใช้เก็บข้อมูลต่างๆลงบนเว็บเบราว์เซอร์เครื่องผู้ใช้ในลักษณะ Offline ถึงแม้ผู้ใช้งานจะปิดเว็บเบราว์เซอร์ไปแล้วแต่เมื่อเปิดขึ้นมาใหม่ข้อมูล ก็จะยังคงอยู่ เหมาะสำหรับการเพิ่มลูกเล่นในเว็บไซต์ในการเก็บข้อมูล โดยที่สามารถดึงข้อมูลกลับมาใช้งานได้ทันทีเมื่อผู้ใช้เปิดเว็บไซต์เดิมอีกครั้ง

[embed]ContentEditable

• ContentEditable ใช้ในการเปลี่ยนแปลงข้อมูล สามารถคลิกที่ข้อมูลบนหน้าเว็บและแก้ไขได้ทันที ซึ่งช่วยอำนวยความสะดวกให้กับผู้ใช้งานในการแก้ไขข้อมูล

[embed]Form Enhancement

• Form Enhancement คือ ประเภท input แบบใหม่สำหรับเพิ่มประสิทธิภาพ การทำงานของฟอร์มให้ดีขึ้น ช่วยลดการทำงานของผู้พัฒนาเว็บลง เช่น e-mail , date , datetime , datetime-local ,month , time , week , color , number , range , search , telephone , url เป็นต้น

นอกจากแท็กดังกล่าว ใน HTML5 ก็ได้มีการนำแนวคิดของ Descriptive Markup มาใช้ในบริบทของการนิยามแท็กที่มีความหมายในตัวเองเรียกว่า “Semantic Tags หรือ Semantic Elements”เพื่อช่วยให้เว็บไซต์มีโครงสร้างที่ชัดเจน โค้ดอ่านง่ายและสื่อความหมายมากขึ้นมีผลดีต่อ SEO ทำให้ Search Engine ค้นหาข้อมูลภายในหน้าเว็บได้ง่าย ทำให้เว็บไซต์ของเรานั้นติดอันดับต้นๆในหน้าค้นหาและเป็นที่รู้จัก ได้ในระยะเวลาที่รวดเร็ว

ตัวอย่าง Semantic Elements ใน HTML5

• <header> หมายถึง พื้นที่ส่วนหัวของเว็บไซต์ เช่น โลโก้ ชื่อเว็บไซต์
• <nav> หมายถึง พื้นที่แถบเมนูในหน้าเว็บ
• <main> หมายถึง พื้นที่เนื้อหาหลักในหน้าเว็บ
• <article> หมายถึง พื้นที่เนื้อหาเดี่ยวที่แยกอิสระ เช่น บทความหรือข่าว
• <section> หมายถึง พื้นที่แบ่งเนื้อหาออกเป็นหมวดหมู่ (หัวข้อใหญ่–ย่อย)
• <aside> หมายถึง พื้นที่เนื้อหาเสริม เช่น กล่องโฆษณา , บทความแนะนำ
• <footer> หมายถึง ส่วนท้ายเว็บไซต์ เช่น ลิขสิทธิ์ ข้อมูลติดต่อ หรือลิงก์เพิ่มเติม

🔗 มาตรฐานทางการ HTML (แนะนำ) : https://html.spec.whatwg.org/multipage/ 🔗 MDN Web Docs : https://developer.mozilla.org/en-US/docs/Web/HTML 🔗 HTML Reference (เรียนรู้พื้นฐาน): https://htmlreference.io/

Markdown

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

ทำไมต้องใช้ Markdown ?

• มีไวยากรณ์ที่เรียบง่าย (ใช้เครื่องหมายแทนแท็ก เช่น #, *, -)
• เขียนง่ายกว่า HTML และสามารถแปลงไปเป็น HTML ได้โดยอัตโนมัติ
• นิยมใช้ในงานเอกสารเป็นหลัก (บทความ , เอกสารโครงการ , เอกสารอื่นๆ)

เปรียบเทียบ HTML กับ Markdown

HTML

<h1>หัวข้อ</h1>
<h2>หัวข้อย่อย</h2>
<ul>
  <li>รายการ 1</li>
  <li>รายการ 2</li>
</ul>
<strong>ตัวหนา</strong> <em>ตัวเอียง</em>

Markdown

# หัวข้อ
## หัวข้อย่อย
- รายการ 1
- รายการ 2
**ตัวหนา** *ตัวเอียง*

ได้ผลลัพธ์เหมือนกันแต่ Markdown เขียนง่ายและกระชับกว่า

Markdown ได้รับความนิยมอย่างแพร่หลายในหลายๆแพลตฟอร์ม โดยส่วนใหญ่ จะอยู่ในรูปแบบการเขียนเอกสาร / การสร้างคู่มือประกอบโครงการซอฟต์แวร์ต่างๆ

ตัวอย่าง

• GitHub (README.md)
• Discord (การจัดรูปแบบข้อความ)
• Slack (การจัดรูปแบบข้อความ)
• Jupyter Notebook (Documentation cells)
• VS Code (Documentation)

🎓 หลักสูตรที่เกี่ยวข้อง

[embed]

📚 แหล่งอ้างอิงที่น่าเชื่อถือ

🔗 มาตรฐาน Markdown (แนะนำ) : https://spec.commonmark.org/ 🔗 ทดลองใช้ Markdown (Interactive) : https://commonmark.org/ 🔗 Markdown แบบดั้งเดิม : https://daringfireball.net/projects/markdown/ 🔗 คู่มือ Markdown (ภาษาไทย) : https://www.markdownlang.com/th/ 🔗 เครื่องมือ Markdown (ภาษาไทย) : https://md-tool.com/th

🌎 ติดตามข่าวสารเพิ่มเติมได้ที่ Facebook | YouTube | TikTok