โครงสร้างของ HTML จะประกอบไปด้วยส่วนของคำสั่ง 2 ส่วน คือ ส่วนที่เป็น ส่วนหัว (Head) และส่วนที่เป็นเนื้อหา (Body) โดยมีรูปแบบคำสั่งดังนี้

การจัดโครงสร้างแฟ้มเอกสาร

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

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

HTML คืออะไร

HTML เป็นภาษาประเภท Markup Language ที่ใช้ในการสร้างเว็บเพจขึ้นมา โดยมีแม่แบบที่มาจากภาษา SGML โดย HTML จะเป็นภาษาในการสร้างเว็บ ที่สามารถเรียนรู้ และทำความเข้าใจได้ง่าย ซึ่งในปัจจุบันก็มีการนำมาใช้กันอย่างแพร่หลายและมีการพัฒนาและกำหนดมาตรฐานจากองค์กร World Wide Web Consortium (W3C)

อธิบายง่ายๆ HTML คือ ภาษาหลักที่นำมาใช้ในการเขียนเว็บเพจขึ้นมา เพื่อให้ได้หน้าเว็บเพจที่สมบูรณ์ที่สุด โดยจะใช้ <Tag></Tag> ในการกำหนดการแสดงผลของ HTML ที่แสดงอยู่บนหน้าเว็บเพจ และเนื่องจาก HTML ย่อมาจากคำว่า Hypertext Markup Language จึงมีความหมายโดยรวมว่า เป็นภาษาในการเขียนเว็บเพจที่ใช้ Tag กำหนดการแสดงผลบนเว็บเพจที่ต่างเชื่อมโยงถึงกันใน Hyperspace ผ่าน Hyperlink นั่นเอง

ความเป็นมาของ HTML

ภาษา HTML มีต้นกำเนิดจากเมื่อปี 1980 ที่ Tim Berners Lee ได้คิดค้นและทำการเสนอต้นแบบสำหรับนักวิจัยใน CERN เพื่อทำการแลกเปลี่ยนข้อมูลข่าวสารต่างๆ ด้านการวิจัย โดยใช้ชื่อว่า Enquire ต่อมาในปี 1990 เขาก็ได้ทำการเขียนโปรแกรมเบราเซอร์ขึ้นมา และทดลองรันบนเซิฟเวอร์ที่พัฒนาขึ้นด้วยภาษา HTML และในปี 1991 ก็ได้มีการรู้จัก HTML Tag ทั้งหมด 18 Tag อย่างแพร่หลายด้วยกัน ซึ่งหลังจากนั้นมาภาษา HTML ก็ได้มีการพัฒนามาอย่างต่อเนื่องจนกลายเป็น HTML 5.0 ที่ใช้กันอยู่ในปัจจุบันนี้

1. <a>
2. <address>
3. <base>
4. <dd>
5. <dir>
6. <dl>
7. <dt>
8. <h1>, …<h6>
9. <hp1>, …<hp2>,
10. <isindex>
11. <li>
12. <listing>
13. <menu>
14. <nextid>
15. <p>
16. <plaintext>
17. <title>
18. <ul>

การแสดงผลที่เว็บเบราเซอร์

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

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

จากบทความก่อนหน้านี้ หลายๆ คนน่าจะพอเข้าใจคร่าวๆ ว่า HTML คืออะไรแล้ว ในบทความนี้เราจะมาทำความเข้าใจถึงโครงสร้างของ HTML และวิธีนำเอามันมาใช้

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

ตัวอย่าง เราต้องการจะทำให้ข้อความข้างล่างนี้เป็นหัวข้อของหน้าและมีตัวอักษรที่ใหญ่สุดๆ เพื่อที่จะดึงความสนใจของผู้อ่าน

ทำไมฉันถึงรัก HTML

เราสามารถใช้ element h1 ซึ่งย่อมาจากคำว่า Heading 1(หัวเรื่องที่หนึ่ง ซึ่งตัวเลขข้างหลังคือความใหญ่ของตัวอักษร 1 คือตัวอักษรใหญ่สุดไล่ลงไปจนถึง 6 ตัวอักษรที่เล็กที่สุดสำหรับหัวเรื่อง) โดยการปิดล้อมเนื้อหาของเรา

ทำไมฉันถึงรัก HTML

โครงสร้างของ element

เรามาทำความเข้าใจกันว่าตัวโครงสร้างของ element มันเป็นอย่างไร

1. แท็กเปิด มีส่วนประกอบไปด้วยชื่อของ element ในที่นี้คือ h1 ล้อมรอบด้วยวงเล็บแหลม เป็นตัวบ่งบอกจุดเริ่มต้นของ element และขอบเขตของการกำกับเนื้อหา
2. แท็กปิด ก็เหมือนกับแท็กเปิดแต่มี forward slash เป็นตัวบ่งบอกว่า element นี้สิ้นสุดตรงไหน ในที่นี้ก็คือจุดสิ้นสุดของหัวเรื่อง
3. เนื้อหา เป็นเนื้อหาของ element ซึ่งในที่นี้ก็คือข้อความธรรมดา
4. element คือ แท็กเปิด แท็กปิด และเนื้อหาประกอบเข้าด้วยกัน

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

  
    
    HTML คืออะไร?
  
  
    
HTML (Hypertext Markup Language)
    

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

  

จากโค้ดนี้เรามี element ตามด้านล่างนี้

•  - ทุกวันนี้มันไม่ได้มีความสำคัญอะไรแล้วนอกจากเป็นแค่ตัวบอกเอกสารนี้คือ HTML นะ
•  - html element ซึ่งเอาไว้เป็นตัวครอบเนื้อหาทั้งหมดในเว็บ ซึ่งก็จะเริ่มด้วยแท็กเปิดของ html และแถวสุดท้ายของเว็บก็จะปิดด้วยแท็กปิดของ html
•  - head element ที่เป็นเหมือนภาชนะที่เอาไว้ใส่เนื้อหาต่างๆ ที่ไม่อยากให้ผู้ใช้เว็บเห็น เช่น ชื่อเว็บ คำอธิบายเกี่ยวกับเว็บที่ไว้ให้เวลาคนค้นหาในกูเกิลแล้วรู้ว่าเว็บเราเกี่ยวกับอะไร หรือกำหนดชุดอักขระของเว็บนี้
•  - body element เป็นภาชนะที่เอาไว้ใส่เนื้อหาต่างๆ ที่อยากให้ผู้ใช้เว็บเห็ฯ เช่น หัวข้อเรื่อง ย่อหน้า รูปภาพ วีดีโอ และอื่นๆ อีกมากมาย
•  - meta element ที่ไม่มีเนื้อหาที่มี attriibute(คุณสมบัติ) ในการบอกว่า charset(ชุดอักขระ) ที่ใช้ของเว็บนี้คืออะไร ในที่นี้คือ UTF-8 ซึ่งเป็นชุดอักขระที่สนับสนุนทุกภาษาที่คนใช้กัน
• - title element เป็นตัวบ่งบอกว่าชื่อหน้าเว็บนี้มีชื่อว่าอะไร
• - h1 element ตามที่เคยอธิบายไปแล้วว่าเป็นตัวหัวข้อเรื่องที่ตัวอักษรใหญ่ที่สุด
•  - p element คือตัวที่บ่งบอกว่าเนื้อหานี้คือย่อหน้า
• 
   - img element หรือ image(รูปภาพ) element ซึ่งเป็น element ที่ไม่มีเนื้อหา

จากโค้ดด้านบนที่เราเห็นกัน เราจะเห็นได้ว่ามีอยู่ 2 elements ที่ไม่เข้าพวกเพราะมันไม่มีแท็กปิด สองตัวนี้คือ element ที่ไม่มีเนื้อหาเพราะฉะนั้นมันจึงไม่จำเป็นต้องมีแท็กปิด
แต่ส่วนใหญ่ element ที่ไม่มีเนื้อหาจะมีคุณสมบัติกำหนดไว้ เช่น img element ที่มีคุณสมบัติ src ในที่นี้ย่อมาจากคำว่า source(แหล่งที่มา) ซึ่งก็คือแหล่งที่มาของรูปภาพนั้นเอง และคุณสมบัติ alt ที่ไว้ใส่คำอธิบายรูปภาพให้คนตาบอดหรือเวลารูปภาพโหลดไม่ขึ้น
จะสังเกตได้ว่าวิธีการเขียน attribute(คุณสมบัติ) จะต้องเว้นว่างช่องนึงจากชื่อ element และมีเครื่องหมายเท่ากับในการบอกว่า attribute นี้เท่ากับอะไร

ทิ้งท้าย

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

ข้อมูลอ้างอิงจากบทความ https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics