Heading (หัวเรื่อง)

ใน HTML ใช้แท็ก Heading เพื่อกำหนดหัวเรื่องและหัวข้อย่อย โดยมีระดับตั้งแต่ <h1> (สำคัญที่สุด) ไปจนถึง <h6> (สำคัญน้อยที่สุด) การใช้ Heading ที่เหมาะสมช่วยให้โครงสร้างของเอกสารชัดเจนและเป็นมิตรต่อ Search Engine

หัวเรื่องหลัก h1

หัวเรื่องรอง h2

หัวเรื่องย่อย h3

หัวเรื่องย่อย h4

หัวเรื่องย่อย h5

หัวเรื่องย่อย h6

Paragraph (ย่อหน้า)

แท็ก <p> ใช้สำหรับสร้างย่อหน้าข้อความทั่วไป

สามารถใช้แท็ก <br> เพื่อขึ้นบรรทัดใหม่
โดยไม่ต้องสร้างย่อหน้าใหม่

และแท็ก <hr> ใช้สำหรับสร้างเส้นแบ่งแนวนอนเพื่อแบ่งเนื้อหา

Unordered Lists (รายการที่ไม่มีลำดับ)

ใช้แท็ก <ul> สำหรับรายการที่ไม่มีลำดับ และ <li> สำหรับแต่ละรายการ

• กาแฟ
• ชา
• นม

Ordered Lists (รายการที่มีลำดับ)

ใช้แท็ก <ol> สำหรับรายการที่มีลำดับ และ <li> สำหรับแต่ละรายการ

1. เตรียมส่วนผสม
2. ผสมให้เข้ากัน
3. อบ

Description Lists (รายการคำอธิบาย)

ใช้แท็ก <dl> สำหรับรายการคำอธิบาย, <dt> สำหรับคำศัพท์, และ <dd> สำหรับคำอธิบายของคำศัพท์นั้นๆ

HTML

HyperText Markup Language: ภาษามาตรฐานที่ใช้สำหรับสร้างเว็บเพจ

CSS

Cascading Style Sheets: ภาษาที่ใช้สำหรับการจัดรูปแบบเอกสารที่เขียนด้วย HTML

Inline Elements คือองค์ประกอบที่กินพื้นที่เท่าที่จำเป็นและไม่ขึ้นบรรทัดใหม่

• <em>: ใช้สำหรับเน้นข้อความให้มีความหมาย (emphasis)
• <strong>: ใช้สำหรับเน้นข้อความให้มีความสำคัญ (strong importance)
• <b>: ใช้สำหรับทำให้ข้อความเป็นตัวหนา (bold text) โดยไม่มีความหมายเชิงอรรถ
• <i>: ใช้สำหรับทำให้ข้อความเป็นตัวเอียง (italic text) โดยไม่มีความหมายเชิงอรรถ
• <s>: ใช้สำหรับระบุข้อความที่ไม่มีความถูกต้องหรือไม่อยู่ในบริบทอีกต่อไป (strikethrough)
• <u>: ใช้สำหรับขีดเส้นใต้ข้อความ (underline text)
• <small>: ใช้สำหรับข้อความขนาดเล็กและมีความสำคัญน้อยลง (small print)
• <q>: ใช้สำหรับข้อความอ้างอิงสั้นๆ ที่เป็น Inline เช่น สวัสดีครับ
• <sub>: ใช้สำหรับสร้างตัวห้อย เช่น H₂O
• <sup>: ใช้สำหรับสร้างตัวยก เช่น x² + y²
• <mark>: ใช้สำหรับไฮไลต์ข้อความ (highlighted text)
• <span>: เป็นแท็ก Inline อเนกประสงค์ที่ใช้สำหรับจัดกลุ่มข้อความเพื่อนำไปใช้ จัดสไตล์ด้วย CSS หรือจัดการด้วย JavaScript โดยที่ไม่มีความหมายเฉพาะเจาะจงทางโครงสร้าง
  เช่น สามารถใช้ <span> เพื่อเปลี่ยนสีข้อความบางส่วนในย่อหน้าได้

Block Elements คือองค์ประกอบที่สร้างบรรทัดใหม่ก่อนและหลังตัวเอง และกินพื้นที่เต็มความกว้างที่มีอยู่

• <div>: เป็น Block Element ที่ใช้บ่อยที่สุดสำหรับจัดกลุ่มองค์ประกอบอื่นๆ เพื่อวัตถุประสงค์ในการจัดสไตล์หรือจัดการด้วย JavaScript
  นี่คือข้อความภายในแท็ก <div>

  หากเป็น Block Element เนื้อหาข้างในจะขึ้นบรรทัดใหม่เสมอ

• <blockquote>: ใช้สำหรับข้อความอ้างอิงขนาดยาว

  "The best way to predict the future is to create it."

• <pre> และ <code>: ใช้สำหรับแสดงโค้ดที่จัดรูปแบบไว้ล่วงหน้า (preformatted text)

  ตัวอย่างโค้ด JavaScript:

  function greet(name) {
      console.log("Hello, " + name + "!");
  }
  greet("World");

• <address>: ใช้สำหรับข้อมูลติดต่อของผู้เขียน/เจ้าของเอกสารหรือบทความ
  ผู้เขียน: สมชาย ใจดี
  อีเมล: somchai@example.com
  วันที่: 20 มิถุนายน 2568
• <figure> และ <figcaption>: ใช้สำหรับรูปภาพ, โค้ด, หรือข้อมูลอื่นๆ ที่มีคำบรรยาย

  

อักขระพิเศษใน HTML คือตัวอักษรที่ไม่สามารถพิมพ์ได้โดยตรงหรือมีผลต่อโครงสร้าง HTML

• เครื่องหมายน้อยกว่า: < หรือ <
• เครื่องหมายมากกว่า: > หรือ >
• เครื่องหมายและ: & หรือ &
• ช่องว่าง:   (non-breaking space) -    ช่องว่างเพิ่มเติม
• ลิขสิทธิ์: © หรือ © 2023
• เครื่องหมายการค้าจดทะเบียน: ® หรือ ®
• เครื่องหมายการค้า: ™ หรือ ™

ตัวอย่างการใช้งาน: ต้องการแสดง <p> แทนที่จะเป็นย่อหน้าจริง

การจัดระเบียบเนื้อหาใน HTML ใช้ Semantic Tags เพื่อให้โครงสร้างของเว็บมีความหมายและเป็นระเบียบ

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

ตัวอย่างในหน้าเว็บนี้แสดงให้เห็นการใช้งานแท็กเหล่านี้เพื่อจัดระเบียบเนื้อหา

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

รูปแบบการเขียนคอมเมนต์คือ:

<!-- นี่คือคอมเมนต์ใน HTML -->

ตัวอย่างการใช้งาน:

<!-- ส่วนนี้คือเนื้อหาหลักของหน้าเว็บ -->
<main>
    <p>เนื้อหา...</p>
</main>

ตารางใน HTML ใช้สำหรับแสดงข้อมูลในรูปแบบแถวและคอลัมน์

• <table>: แท็กหลักสำหรับสร้างตาราง
• <thead>: ส่วนหัวของตาราง (table head)
• <tbody>: ส่วนเนื้อหาหลักของตาราง (table body)
• <tfoot>: ส่วนท้ายของตาราง (table foot)
• <tr>: แถวของตาราง (table row)
• <th>: เซลล์หัวเรื่องของตาราง (table header)
• <td>: เซลล์ข้อมูลของตาราง (table data)
• rowspan: คุณสมบัติสำหรับรวมเซลล์ในแนวตั้ง (หลายแถว)
• colspan: คุณสมบัติสำหรับรวมเซลล์ในแนวนอน (หลายคอลัมน์)