สัปดาห์ที่ 2 HTML5 พื้นฐานและโครงสร้างเว็บ

สไลด์บทเรียน

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

  1. อธิบายโครงสร้างพื้นฐานของเอกสาร HTML ได้
  2. ใช้ Semantic HTML เพื่อจัดโครงสร้างเนื้อหาได้เหมาะสม
  3. สร้างเว็บเพจส่วนตัวที่มีเนื้อหาและลำดับข้อมูลชัดเจนได้

หัวข้อย่อย

  1. โครงสร้างเอกสาร HTML
  2. Elements, Tags และ Attributes
  3. Heading, Paragraph, Link, Image และ List
  4. Semantic HTML: header, nav, main, section, article, aside, footer
  5. Forms เบื้องต้น
  6. การตั้งชื่อไฟล์และโครงสร้างโฟลเดอร์
  7. HTML Validation และแนวทางเขียนโค้ดให้อ่านง่าย

เนื้อหา

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

Semantic HTML คือการเลือก element ให้ตรงกับความหมาย เช่น ใช้ nav สำหรับเมนู ใช้ main สำหรับเนื้อหาหลัก และใช้ article สำหรับเนื้อหาที่อ่านแยกได้ แนวทางนี้ทำให้เว็บดูแลต่อได้ง่ายและรองรับ Accessibility ได้ดีขึ้น

1. โครงสร้างเอกสาร HTML

เอกสาร HTML 1 หน้าเปรียบเหมือนโครงกระดูกของเว็บเพจ เบราว์เซอร์จะอ่านไฟล์จากบนลงล่าง แล้วแปลง tag ต่าง ๆ ให้กลายเป็นโครงสร้างหน้าเว็บที่ผู้ใช้เห็นและโต้ตอบได้

โครงสร้างพื้นฐานควรมีส่วนสำคัญดังนี้

  1. <!doctype html> บอกเบราว์เซอร์ว่าเอกสารนี้ใช้มาตรฐาน HTML5
  2. <html lang="th"> เป็น root element ของทั้งหน้า และระบุภาษาหลักของเอกสาร
  3. <head> เก็บข้อมูลกำกับหน้าเว็บ เช่น charset, title, metadata และ link ไปยังไฟล์ CSS
  4. <body> เก็บเนื้อหาที่ผู้ใช้มองเห็น เช่น heading, paragraph, image, link, form และ section ต่าง ๆ
<!doctype html>
<html lang="th">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>เว็บแนะนำตัว</title>
  </head>
  <body>
    <h1>สวัสดี ฉันกำลังเรียน Front-end Development</h1>
    <p>หน้านี้เป็นตัวอย่างโครงสร้าง HTML พื้นฐาน</p>
  </body>
</html>

meta charset="utf-8" สำคัญมากสำหรับเว็บภาษาไทย เพราะช่วยให้เบราว์เซอร์อ่านตัวอักษรไทยได้ถูกต้อง ส่วน meta viewport ช่วยให้หน้าเว็บแสดงผลเหมาะสมบนอุปกรณ์พกพา เป็นพื้นฐานของ Responsive Web Design

2. Elements, Tags และ Attributes

คำว่า Element, Tag และ Attribute มักถูกใช้ร่วมกัน แต่มีความหมายต่างกันเล็กน้อย

คำ ความหมาย ตัวอย่าง
Tag เครื่องหมายที่ใช้เปิดหรือปิด element <p>, </p>
Element ส่วนประกอบ HTML ทั้งชุด ตั้งแต่ tag เปิด เนื้อหา จนถึง tag ปิด <p>ข้อความ</p>
Attribute ข้อมูลเพิ่มเติมที่อยู่ใน tag เปิด เพื่อกำหนดคุณสมบัติของ element href, src, alt, id, class

ตัวอย่าง element ที่มี attribute:

<a href="https://example.com" target="_blank">เปิดเว็บไซต์ตัวอย่าง</a>
<img src="profile.jpg" alt="รูปโปรไฟล์ของนักศึกษา">
<section id="about" class="profile-section">
  <h2>เกี่ยวกับฉัน</h2>
</section>

แนวทางใช้งาน attribute ที่ควรจำ:

  1. ใช้ id สำหรับระบุ element ที่ไม่ซ้ำในหน้าเดียว
  2. ใช้ class สำหรับจัดกลุ่ม element ที่มีรูปแบบหรือหน้าที่คล้ายกัน
  3. รูปภาพควรมี alt เพื่ออธิบายภาพให้ผู้ใช้ที่มองไม่เห็นภาพหรือเมื่อภาพโหลดไม่สำเร็จ
  4. Link ควรมี href ที่ชัดเจน และข้อความ link ควรบอกปลายทาง ไม่ควรใช้คำว่า “คลิกที่นี่” อย่างเดียว

3. Heading, Paragraph, Link, Image และ List

องค์ประกอบพื้นฐานเหล่านี้เป็นสิ่งที่ใช้บ่อยที่สุดในการสร้างเว็บเพจ

Heading ใช้กำหนดหัวข้อและลำดับความสำคัญของเนื้อหา โดย h1 ควรเป็นหัวข้อหลักของหน้า และควรมีเพียงหัวข้อหลักที่ชัดเจน ส่วน h2 ถึง h6 ใช้แบ่งหัวข้อย่อยตามลำดับ

<h1>Portfolio ของฉัน</h1>
<h2>ประวัติส่วนตัว</h2>
<h3>ทักษะด้าน Front-end</h3>

Paragraph ใช้สำหรับข้อความเนื้อหา ไม่ควรใช้ heading เพียงเพราะต้องการให้ตัวใหญ่ และไม่ควรใช้ <br> จำนวนมากเพื่อจัด layout เพราะการจัดรูปแบบควรทำด้วย CSS

<p>
  ฉันสนใจการพัฒนาเว็บ เพราะเป็นการผสมผสานระหว่างการออกแบบ
  การเขียนโปรแกรม และการแก้ปัญหาให้ผู้ใช้
</p>

Link ใช้เชื่อมไปยังหน้าอื่น ไฟล์อื่น หรือ section ภายในหน้าเดียวกัน

<a href="contact.html">ติดต่อฉัน</a>
<a href="#projects">ดูผลงาน</a>
<a href="https://developer.mozilla.org/" target="_blank" rel="noopener">MDN Web Docs</a>

Image ใช้แสดงภาพ โดยควรระบุ src และ alt เสมอ

<img src="images/profile.jpg" alt="รูปโปรไฟล์ของเจ้าของเว็บไซต์">

List ใช้แสดงรายการข้อมูล มีทั้ง unordered list (ul) และ ordered list (ol)

<h2>ทักษะที่กำลังฝึก</h2>
<ul>
  <li>HTML5</li>
  <li>CSS3</li>
  <li>JavaScript</li>
</ul>

<h2>ขั้นตอนการสร้างเว็บ</h2>
<ol>
  <li>วางโครงสร้าง HTML</li>
  <li>ตกแต่งด้วย CSS</li>
  <li>เพิ่มการโต้ตอบด้วย JavaScript</li>
</ol>

4. Semantic HTML: header, nav, main, section, article, aside, footer

Semantic HTML คือการใช้ element ที่มีความหมายตรงกับบทบาทของเนื้อหา ไม่ใช่ใช้ div เป็นกล่องครอบทุกอย่าง แม้ div จะยังมีประโยชน์ แต่ควรใช้เมื่อไม่มี element เชิงความหมายที่เหมาะกว่า

Element ใช้เมื่อใด
header ส่วนหัวของหน้าเว็บหรือส่วนหัวของ section
nav กลุ่ม link สำหรับนำทาง
main เนื้อหาหลักของหน้า ควรมีหนึ่งชุดหลักต่อหน้า
section กลุ่มเนื้อหาที่มีหัวข้อร่วมกัน
article เนื้อหาที่อ่านแยกได้ เช่น ข่าว บทความ การ์ดผลงาน
aside เนื้อหาเสริม เช่น sidebar, link เพิ่มเติม, note
footer ส่วนท้ายของหน้าเว็บหรือท้าย section

ตัวอย่างหน้าเว็บที่ใช้ Semantic HTML:

<header>
  <h1>Portfolio</h1>
  <nav aria-label="เมนูหลัก">
    <a href="#about">เกี่ยวกับฉัน</a>
    <a href="#projects">ผลงาน</a>
    <a href="#contact">ติดต่อ</a>
  </nav>
</header>

<main>
  <section id="about">
    <h2>เกี่ยวกับฉัน</h2>
    <p>นักศึกษาที่สนใจงาน Front-end Development</p>
  </section>

  <section id="projects">
    <h2>ผลงาน</h2>
    <article>
      <h3>เว็บแนะนำร้านอาหาร</h3>
      <p>ออกแบบหน้าเว็บด้วย HTML และ CSS</p>
    </article>
  </section>
</main>

<footer>
  <p>© 2026 Front-end Development</p>
</footer>

ข้อดีของ Semantic HTML:

  1. อ่านโค้ดง่ายขึ้น เพราะเห็นบทบาทของแต่ละส่วน
  2. ช่วยให้ screen reader เข้าใจโครงสร้างหน้าเว็บ
  3. ช่วยให้ search engine เข้าใจเนื้อหา
  4. ทำให้ทีมพัฒนาแก้ไขและต่อยอดได้ง่ายขึ้น

5. Forms เบื้องต้น

Form ใช้รับข้อมูลจากผู้ใช้ เช่น ชื่อ อีเมล ความคิดเห็น ตัวเลือก หรือข้อมูลสมัครสมาชิก Form ที่ดีต้องมี label ชัดเจน เลือก input type ให้เหมาะสม และเตรียมโครงสร้างสำหรับ validation

องค์ประกอบสำคัญของ form:

Element หน้าที่
form ครอบกลุ่ม input ที่ต้องการส่งข้อมูล
label ข้อความอธิบาย input
input ช่องรับข้อมูลแบบบรรทัดเดียว
textarea ช่องรับข้อความหลายบรรทัด
select รายการตัวเลือก
button ปุ่มส่งหรือควบคุมการทำงาน

ตัวอย่าง form ติดต่อ:

<form action="/contact" method="post">
  <div>
    <label for="fullname">ชื่อ-สกุล</label>
    <input id="fullname" name="fullname" type="text" required>
  </div>

  <div>
    <label for="email">อีเมล</label>
    <input id="email" name="email" type="email" required>
  </div>

  <div>
    <label for="topic">หัวข้อ</label>
    <select id="topic" name="topic">
      <option value="question">สอบถามข้อมูล</option>
      <option value="project">ติดต่องาน</option>
    </select>
  </div>

  <div>
    <label for="message">ข้อความ</label>
    <textarea id="message" name="message" rows="5"></textarea>
  </div>

  <button type="submit">ส่งข้อความ</button>
</form>

ข้อควรระวัง:

  1. label ควรเชื่อมกับ input ผ่าน for และ id
  2. เลือก type ให้เหมาะ เช่น email, number, date, password
  3. ใช้ required เมื่อช่องนั้นจำเป็น
  4. อย่าพึ่ง validation ฝั่ง HTML เพียงอย่างเดียวในระบบจริง เพราะ server ต้องตรวจซ้ำเสมอ

6. การตั้งชื่อไฟล์และโครงสร้างโฟลเดอร์

การตั้งชื่อไฟล์และจัดโฟลเดอร์ที่ดีช่วยให้โปรเจกต์อ่านง่าย ส่งงานง่าย และลดปัญหาลิงก์เสีย โดยเฉพาะเมื่อมี HTML, CSS, JavaScript และรูปภาพหลายไฟล์

แนวทางตั้งชื่อไฟล์:

  1. ใช้ตัวพิมพ์เล็กทั้งหมด เช่น index.html, about.html
  2. ใช้เครื่องหมายขีดกลางแทนช่องว่าง เช่น my-profile.html
  3. หลีกเลี่ยงชื่อไฟล์ภาษาไทยหรือมีช่องว่างในงานเว็บพื้นฐาน เพื่อลดปัญหา path
  4. ตั้งชื่อให้สื่อความหมาย เช่น contact.html, portfolio.html
  5. หน้าแรกของโฟลเดอร์ควรใช้ชื่อ index.html

ตัวอย่างโครงสร้างโปรเจกต์:

my-portfolio/
  index.html
  about.html
  contact.html
  css/
    style.css
  js/
    main.js
  images/
    profile.jpg
    project-01.jpg

ตัวอย่างการอ้างไฟล์จาก index.html:

<link rel="stylesheet" href="css/style.css">
<script src="js/main.js" defer></script>
<img src="images/profile.jpg" alt="รูปโปรไฟล์">

ควรระวัง path แบบ relative เช่น images/profile.jpg หมายถึงเข้าโฟลเดอร์ images จากตำแหน่งไฟล์ HTML ปัจจุบัน หากไฟล์ HTML อยู่คนละโฟลเดอร์ path อาจต้องเปลี่ยน

7. HTML Validation และแนวทางเขียนโค้ดให้อ่านง่าย

HTML Validation คือการตรวจว่าโค้ด HTML เขียนถูกต้องตามมาตรฐานหรือไม่ เช่น tag ปิดครบหรือไม่ attribute ถูกต้องหรือไม่ และ element ถูกซ้อนกันเหมาะสมหรือไม่ การ validate ช่วยลด bug ที่เกิดจากโครงสร้างผิดตั้งแต่ต้น

ปัญหาที่พบบ่อย:

  1. ลืมปิด tag เช่น <li> หรือ <section>
  2. ซ้อน element ผิดตำแหน่ง
  3. ใช้ id ซ้ำในหน้าเดียวกัน
  4. รูปภาพไม่มี alt
  5. Form input ไม่มี label
  6. ใช้ heading ข้ามลำดับ เช่น จาก h1 ไป h4 โดยไม่มีเหตุผล

แนวทางเขียนโค้ดให้อ่านง่าย:

  1. เยื้องโค้ดให้เห็นลำดับชั้นของ element
  2. ใช้ชื่อ id และ class ที่สื่อความหมาย
  3. แบ่งหน้าเป็นส่วน ๆ ด้วย semantic element
  4. ไม่เขียน HTML, CSS และ JavaScript ปนกันมากเกินจำเป็น
  5. เพิ่ม comment เฉพาะจุดที่ช่วยอธิบายโครงสร้าง ไม่ใช่ comment ทุกบรรทัด

ตัวอย่างโค้ดที่อ่านง่าย:

<main>
  <section class="profile-section" aria-labelledby="profile-heading">
    <h2 id="profile-heading">ข้อมูลส่วนตัว</h2>
    <p>สนใจการพัฒนาเว็บและการออกแบบประสบการณ์ผู้ใช้</p>
  </section>

  <section class="project-section" aria-labelledby="project-heading">
    <h2 id="project-heading">ผลงาน</h2>
    <article class="project-card">
      <h3>Portfolio Website</h3>
      <p>เว็บแนะนำตัวที่สร้างด้วย HTML และ CSS</p>
    </article>
  </section>
</main>

Checklist ก่อนส่งงาน

  1. มี <!doctype html>, html lang, meta charset และ meta viewport
  2. ใช้ heading เรียงลำดับเหมาะสม
  3. ใช้ Semantic HTML อย่างน้อย header, nav, main, section, footer
  4. Link และ Image มี attribute ที่จำเป็น
  5. รูปภาพมี alt
  6. Form มี label เชื่อมกับ input
  7. ตั้งชื่อไฟล์เป็นภาษาอังกฤษตัวพิมพ์เล็กและไม่มีช่องว่าง
  8. โค้ดเยื้องอ่านง่าย และไม่มี tag ค้าง

ตัวอย่างโครงสร้างหน้าเว็บ

<header>
  <h1>My Portfolio</h1>
  <nav>
    <a href="#about">About</a>
    <a href="#work">Work</a>
  </nav>
</header>
<main>
  <section id="about">
    <h2>About Me</h2>
    <p>Front-end learner</p>
  </section>
</main>

กิจกรรมในชั้นเรียน

สร้างเว็บเพจส่วนตัว 1 หน้า โดยมี header, navigation, main content, profile, contact และ footer

ศึกษาค้นคว้านอกเวลา

ปรับเว็บเพจให้ใช้ Semantic HTML ให้ครบ และตรวจความถูกต้องของโครงสร้าง

คำถามทบทวน

  1. HTML ทำหน้าที่อะไรในเว็บเพจ
  2. Semantic HTML มีประโยชน์ต่อ Accessibility อย่างไร
  3. เหตุใดจึงไม่ควรใช้ div แทนทุกอย่าง

กลับรายวิชา