HTML และ XML แตกต่างกันอย่างไร


สร้างบัญชี AWS
บริการเครื่องมือฟรีสำหรับนักพัฒนาบน AWS
ดูข้อเสนอฟรีสำหรับบริการเครื่องมือสำหรับนักพัฒนาในระบบคลาวด์
ดูบริการเครื่องมือสำหรับนักพัฒนา
สร้างสรรค์นวัตกรรมได้เร็วยิ่งขึ้นด้วยชุดบริการเครื่องมือสำหรับนักพัฒนาที่ครอบคลุมที่สุด
เรียกดูการฝึกอบรมเกี่ยวกับเครื่องมือสำหรับนักพัฒนา
เริ่มต้นการฝึกอบรมเกี่ยวกับเครื่องมือสำหรับนักพัฒนาด้วยเนื้อหาที่จัดทำขึ้นโดยผู้เชี่ยวชาญของ AWS
อ่านบล็อกเครื่องมือสำหรับนักพัฒนา
อ่านข่าวสารล่าสุดและแนวปฏิบัติที่ดีที่สุดเกี่ยวกับผลิตภัณฑ์เครื่องมือสำหรับนักพัฒนาของ AWS
HTML และ XML แตกต่างกันอย่างไร HTML และ XML มีความคล้ายคลึงกันอย่างไร ความแตกต่างทางไวยากรณ์หลักระหว่าง HTML กับ XML ความแตกต่างที่สำคัญอื่นๆ ระหว่าง HTML กับ XML ควรใช้ HTML กับ XML ตอนไหน วิธีการใช้ HTML และ XML ร่วมกัน สรุปความแตกต่างที่สำคัญระหว่าง HTML กับ XML AWS รองรับข้อกำหนดด้านความต้องการของ HTML และ XML ได้อย่างไรบ้าง

HTML และ XML แตกต่างกันอย่างไร

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

อ่านเกี่ยวกับ XML »

HTML และ XML มีความคล้ายคลึงกันอย่างไร

ทั้ง XML และ HTML รวมถึงภาษาอื่นๆ เช่น LaTeX, SVG, Markdown และ SGML นั้นอยู่ในตระกูลภาษาเขียนโปรแกรมที่เรียกว่าภาษามาร์กอัป

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

ในฐานะที่เป็นภาษามาร์กอัปเหมือนกัน ทั้ง HTML และ XML จึงมีความคล้ายคลึงกันหลายประการ

Syntax

ภาษามาร์กอัปโดยทั่วไปมีไวยากรณ์ที่คล้ายกัน รวมถึงแท็กและแอตทริบิวต์

แท็ก

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

คุณลักษณะ

แอตทริบิวต์ให้ข้อมูลเพิ่มเติมเกี่ยวกับองค์ประกอบ เช่น URL ภาพ โดยใน HTML และ XML คุณจะกำหนดแอตทริบิวต์ขององค์ประกอบภายในแท็กเปิด

โครงสร้างที่กำหนดไว้อย่างดี

ทั้งเอกสาร HTML และ XML ต้องเป็นไปตามกฎไวยากรณ์ของภาษาที่กำหนดเพื่อให้สามารถประมวลผลได้ถูกต้อง เอกสารที่เป็นไปตามกฎเรียกว่าเอกสารที่มีรูปแบบสมบูรณ์ เอกสารที่มีรูปแบบสมบูรณ์ต้องมีสิ่งต่อไปนี้

  1. องค์ประกอบรากเดี่ยว
  2. แท็กปิด (หรือแบบปิดตัวเอง) สำหรับองค์ประกอบทั้งหมด
  3. การแก้ไขการซ้อนแท็กที่อยู่ในแท็กอื่นๆ
  4. คำอธิบายที่ถูกต้องของอักขระพิเศษ เช่น & แทนเครื่องหมาย &

นักพัฒนาใช้แอปพลิเคชันแก้ไขข้อความหรือสภาพแวดล้อมการพัฒนาแบบผสานรวม (IDE) ในการเขียนและตรวจสอบไวยากรณ์

อ่านเกี่ยวกับ IDE »

การใช้งาน

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

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

ความเป็นอิสระจากแพลตฟอร์ม

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

ความแตกต่างทางไวยากรณ์หลักระหว่าง HTML กับ XML

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

ต่อไป เราจะพูดถึงความแตกต่างด้านแท็กของ HTML และ XML

แท็กที่กำหนดไว้ล่วงหน้า

ใน HTML มีแท็กที่กำหนดไว้ล่วงหน้า ซึ่งหมายความว่าแท็กนั้นมาจากชุดที่มีการกำหนดไว้ตามมาตรฐานของ HTML โดยมาตรฐานของ HTML ในปัจจุบันคือ HTML5 

ตัวอย่างแท็กที่กำหนดไว้ล่วงหน้าของ HTML5 มีดังนี้

  • <header> เป็นแท็กสำหรับส่วนหัวของเอกสาร
  • <p> เป็นแท็กสำหรับย่อหน้า
  • <h1> ถึง <h6> เป็นแท็กสำหรับหัวเรื่อง 6 ระดับ
  • <a> เป็นแท็กสำหรับไฮเปอร์ลิงก์
  • <img> เป็นแท็กสำหรับภาพ
  • <div> เป็นแท็กสำหรับองค์ประกอบคอนเทนเนอร์เพื่อจัดกลุ่มองค์ประกอบอื่นๆ
  • <body> เป็นแท็กที่กำหนดเนื้อหาหลัก

ในทางกลับกัน แท็กของ XML นั้นสามารถขยายได้ ซึ่งหมายความว่าเป็นแท็กที่กำหนดสร้างขึ้นตามวัตถุประสงค์ของเอกสารได้ ในฐานะผู้สร้างเอกสาร คุณจะต้องเป็นผู้กำหนดแท็กและแอตทริบิวต์ อาจเป็นตัวอักษรและตัวเลขผสมกันก็ได้

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

เราจะยกตัวอย่างไวยากรณ์ของ HTML และ XML บางส่วนไว้ในตารางต่อไปนี้

HTML

XML

<p class="body_paragraph">ส่วนนี้คือย่อหน้า</p>

class= หมายความว่าองค์ประกอบนั้นๆ มีคลาสแอตทริบิวต์ ได้แก่ body_paragraph ที่สามารถนำมาปรับใช้กับรูปแบบต่างๆ ได้

<country language="English">แคนาดา</country>

ประเทศหมายถึงองค์ประกอบเกี่ยวกับประเทศ ส่วนภาษาบ่งบอกว่าองค์ประกอบนั้นมีแอตทริบิวต์ภาษาเป็นภาษาอังกฤษ

<body>

<h1>ส่วนนี้คือหัวเรื่อง</h1>

<p class="body_paragraph">ส่วนนี้คือย่อหน้า</p>

<div>

<h2>ส่วนนี้คือหัวเรื่องย่อย</h2>

<p>ส่วนนี้คือย่อหน้าอื่น</p>

</div>

</body>

<continent name="Europe">

<country language="English">

สหราชอาณาจักร

<currency>GBP</currency>

</country>

<country language="German">

เยอรมนี

<currency>EUR</currency>

</country>

</continent>

แท็กแบบปิดตัวเอง

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

ในทางตรงกันข้าม แท็กแบบปิดตัวเองใน XML นั้นสามารถใช้ในที่ใดก็ได้เมื่อไม่มีเนื้อหา

HTML

XML

<img src="my_image.jpg" alt="My image" />

<country name="United Kingdom" currency="GBP" />

ความแตกต่างที่สำคัญอื่นๆ ระหว่าง HTML กับ XML

แม้จะมีความคล้ายคลึงกัน แต่ XML และ HTML ก็มีความแตกต่างกันหลายประการ

วัตถุประสงค์

HTML เป็นที่รู้จักกันทั่วไปว่าเป็นภาษาของเว็บ จุดประสงค์หลักของ HTML คือการแสดงเนื้อหาซึ่งกำหนดเป็นเอกสารที่มีข้อความในรูปแบบกราฟิกในเบราว์เซอร์

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

การพิมพ์

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

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

สคีมา

คำจำกัดความประเภทเอกสาร (DTD) หรือสคีมาจัดเตรียมโครงสร้างที่สามารถตรวจสอบและทำซ้ำได้สำหรับเอกสารที่คล้ายกัน ซึ่งโดยทั่วไปจะมีข้อมูลดังนี้

  • เวอร์ชัน HTML หรือ XML ที่ใช้
  • องค์ประกอบและแอตทริบิวต์ที่อนุญาต
  • กฎสำหรับโครงสร้างเอกสารและความสัมพันธ์ขององค์ประกอบ

ใน HTML นั้น DTD คือการประกาศที่รวมอยู่ในส่วนเริ่มต้นของเอกสาร HTML

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

ควรใช้ HTML กับ XML ตอนไหน

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

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

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

วิธีการใช้ HTML และ XML ร่วมกัน

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

XML ใน HTML

HTML ใน XML

<html>

  <head>

    <title>หน้าที่มีการฝัง XML</title>

    <script type="text/xml">

      <data>

        <item>

          <name>แอปเปิล</name>

          <price>1.00</price>

        </item>

        <item>

          <name>เสาวรส</name>

          <price>2.00</price>

        </item>

      </data>

    </script>

  </head>

  <body>

    <h1>ราคาผลไม้แบบไดนามิก</h1>

    <div id="output"></div>

    <script>

      var xml = document.querySelector('script[type="text/xml"]').textContent;

      var parser = new DOMParser();

      var doc = parser.parseFromString(xml, "text/xml");

      var output = document.querySelector('#output');

      var items = doc.getElementsByTagName('item');

      สำหรับ (var i = 0; i < items.length; i++) {

        var item = items[i];

        var name = item.getElementsByTagName('name')[0].textContent;

        var price = item.getElementsByTagName('price')[0].textContent;

        output.innerHTML += '<div><strong>' + ชื่อ + '</strong>: ' + ราคา + '</div>';

      }

    </script>

  </body>

</html>

<embeddedHTML>

    <title>โค้ด HTML ที่ฝังใน XML</title>

    <description><![CDATA[

        <div>

            <h1>ส่วนหัวที่มีการฝัง HTML</h1>

            <p>ย่อหน้าที่มีการฝัง HTML</p>

        </div>

    ]]></description>

</embeddedHTML>

Extensible HyperText Markup Language (XHTML) เป็นภาษามาร์กอัปอีกภาษาหนึ่งที่รวมทั้ง HTML และ XML ไว้ในไวยากรณ์

สรุปความแตกต่างที่สำคัญระหว่าง HTML กับ XML

 

HTML

XML

คืออะไร

ภาษามาร์กอัปที่ใช้ในการแสดงเนื้อหาที่มีโครงสร้างในเบราว์เซอร์เป็นหลัก

ภาษามาร์กอัปที่ใช้ในการแลกเปลี่ยนข้อมูลที่มีโครงสร้างระหว่างระบบคอมพิวเตอร์เป็นหลัก

ปีที่เผยแพร่

1993

1998

วัตถุประสงค์

ภาษาในการนำเสนอ

ภาษาในการแลกเปลี่ยนข้อมูล

ใช้เมื่อ

สร้างหน้าเว็บฝั่งไคลเอ็นต์หรือเว็บแอป

แลกเปลี่ยนข้อมูลระหว่างสองระบบ (แต่ต้องตรวจสอบว่า JSON เป็นรูปแบบที่ดีกว่าสำหรับคุณหรือไม่)

แท็ก

แท็กที่กำหนดไว้ล่วงหน้า

แท็กที่ขยายได้

การพิมพ์

ไดนามิก

แก้ไขเมื่อใช้สคีมา XML

AWS รองรับข้อกำหนดด้านความต้องการของ HTML และ XML ได้อย่างไรบ้าง

บริการผสานรวมข้อมูล Amazon Web Services (AWS) ทั้งหมดสามารถประมวลผลไฟล์ XML ได้ ยกตัวอย่าง 2 บริการดังนี้

  • AWS Glue คือบริการผสานรวมข้อมูลแบบไม่ต้องใช้เซิร์ฟเวอร์ ซึ่งคุณสามารถใช้เพื่อเตรียมข้อมูลในรูปแบบอินเตอร์เฟซแบบโต้ตอบแบบชี้และคลิกโดยไม่ต้องเขียนโค้ดได้ AWS Glue DataBrew สามารถป้อนข้อมูลในรูปแบบไฟล์ได้ทุกประเภท รวมทั้ง XML
  • Amazon Simple Queue Service (Amazon SQS) เป็นบริการการจัดคิวข้อความที่มีการจัดการอย่างเต็มที่ที่สามารถใช้ในการส่ง จัดเก็บ และรับข้อความระหว่างส่วนประกอบซอฟต์แวร์ที่ปริมาณใดๆ ข้อความ Amazon SQS สามารถจุข้อมูลที่เป็นข้อความได้สูงสุด 256 KB ซึ่งรวมไปถึง XML, JSON และข้อมูลที่ไม่มีการจัดรูปแบบ

ในทำนองเดียวกัน AWS มีชุดเครื่องมือและบริการมากมาย คุณจึงสามารถพัฒนา ปรับใช้ และดำเนินงานบนแอปพลิเคชันได้ทุกขนาด ตัวอย่าง 2 บริการของ AWS ที่คุณสามารถใช้ได้มีดังนี้

  • AWS Amplify ช่วยให้คุณสร้าง UI ที่มีความคมชัดในระดับพิกเซลได้ เชื่อมโยงฟรอนต์เอนด์ UI กับแบ็คเอนด์ระบบคลาวด์ด้วยการคลิกเพียงไม่กี่ครั้ง
  • ด้วย Amazon Lightsail คุณสามารถใช้สแต็กการพัฒนาที่กำหนดค่าไว้ล่วงหน้าเพื่อสร้างแอปพลิเคชันและเว็บไซต์แบบกำหนดเองได้ภายในไม่กี่คลิก

เริ่มต้นใช้งานการพัฒนาแอปพลิเคชันของคุณบน AWS โดยสร้างบัญชีวันนี้

ขั้นตอนถัดไปกับ AWS

เรียนรู้วิธีเริ่มต้นใช้งาน HTML 

เรียนรู้วิธีเริ่มต้นใช้งาน XML