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

Fri Jun 29 15:21:34 2018 [14684 views]

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

HTML

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

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

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

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

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

<h1>ทำไมฉันถึงรัก HTML</h1>

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

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

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

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>HTML คืออะไร?</title>
  </head>
  <body>
    <h1>HTML (Hypertext Markup Language)</h1>
    <p>
      HTML เป็นภาษากำกับข้อความที่ใช้ในการจัดโครงสร้างหน้าเว็บ เปรียบเทียบง่ายๆ
      เหมือนใช้ Microsoft Word จัดหน้ากระดาษ พิมพ์หัวข้อเรื่องตัวใหญ่ๆ พิมพ์ย่อหน้า ใส่รูปภาพ แต่ไม่ได้ตกแต่งเพิ่มเติม
    </p>
    <img src="images/HTML.png" alt="รูปภาพ HTML">
  </body>
</html>

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

<!DOCTYPE html> - ทุกวันนี้มันไม่ได้มีความสำคัญอะไรแล้วนอกจากเป็นแค่ตัวบอกเอกสารนี้คือ HTML นะ
<html></html> - html element ซึ่งเอาไว้เป็นตัวครอบเนื้อหาทั้งหมดในเว็บ ซึ่งก็จะเริ่มด้วยแท็กเปิดของ html และแถวสุดท้ายของเว็บก็จะปิดด้วยแท็กปิดของ html
<head></head> - head element ที่เป็นเหมือนภาชนะที่เอาไว้ใส่เนื้อหาต่างๆ ที่ไม่อยากให้ผู้ใช้เว็บเห็น เช่น ชื่อเว็บ คำอธิบายเกี่ยวกับเว็บที่ไว้ให้เวลาคนค้นหาในกูเกิลแล้วรู้ว่าเว็บเราเกี่ยวกับอะไร หรือกำหนดชุดอักขระของเว็บนี้
<body></body> - body element เป็นภาชนะที่เอาไว้ใส่เนื้อหาต่างๆ ที่อยากให้ผู้ใช้เว็บเห็ฯ เช่น หัวข้อเรื่อง ย่อหน้า รูปภาพ วีดีโอ และอื่นๆ อีกมากมาย
<meta charset="UTF-8"> - meta element ที่ไม่มีเนื้อหาที่มี attriibute(คุณสมบัติ) ในการบอกว่า charset(ชุดอักขระ) ที่ใช้ของเว็บนี้คืออะไร ในที่นี้คือ UTF-8 ซึ่งเป็นชุดอักขระที่สนับสนุนทุกภาษาที่คนใช้กัน
<title></title> - title element เป็นตัวบ่งบอกว่าชื่อหน้าเว็บนี้มีชื่อว่าอะไร
<h1></h1> - h1 element ตามที่เคยอธิบายไปแล้วว่าเป็นตัวหัวข้อเรื่องที่ตัวอักษรใหญ่ที่สุด
<p></p> - p element คือตัวที่บ่งบอกว่าเนื้อหานี้คือย่อหน้า
<img src="images/HTML.png" alt="รูปภาพ HTML"> - 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

เกี่ยวกับผู้เขียน

Pongpat Weesommai

เคยทำงานเป็นวิศวกรซอฟต์แวร์อยู่ที่ไต้หวัน และเคยทำงานfreelance ให้บริษัทต่างๆ เช่น aCommerce SoftbankTelecom