เริ่มต้นเขียนเว็บด้วย JS และ TAILWIND

บทที่ 2: แท็ก HTML ที่ใช้บ่อย และ Semantic Elements

แท็กพื้นฐานที่ต้องรู้มีดังนี้: h1–h6 สำหรับหัวข้อ (h1 สำคัญที่สุด ควรมีเพียงหนึ่งต่อหน้า เพื่อ hierarchy ที่ถูกต้อง), p สำหรับย่อหน้า,a สำหรับลิงก์ (ใช้ attribute href สำหรับ URL,target="_blank" สำหรับเปิดแท็บใหม่),img สำหรับรูปภาพ (ใช้ src สำหรับที่อยู่รูป,alt สำหรับคำอธิบายเมื่อโหลดรูปไม่ได้),div เป็น block และ span เป็น inline สำหรับจัดกลุ่ม element

ลิงก์ a สามารถเป็น relative path เช่น href="/about" หรือ absolute URL ใส่ rel="noopener noreferrer" เมื่อใช้ target="_blank" เพื่อความปลอดภัย สำหรับรูป img ควรใส่ width และ height เพื่อป้องกัน layout shift ตอนโหลด หรือใช้ CSS object-fit จัดรูป

รายการ: ul (unordered list) กับ li,ol (ordered list) เมื่อต้องการลำดับเลขdl, dt, dd สำหรับรายการคำจำกัดความ

Attributes สำคัญ: id และ class ใช้สำหรับ styling และ JavaScript, id ต้องไม่ซ้ำในหน้า ส่วน class ใช้ซ้ำได้data-* ใช้เก็บข้อมูล custom ได้ เช่น data-id="123"Attribute สามารถมีได้หลายค่าใน class เช่น class="btn btn-primary"

Semantic elements คือแท็กที่บอก "ความหมาย" ของเนื้อหา เช่น header, nav,main, article, section, aside, footerช่วยให้โค้ดอ่านง่าย screen reader อ่านได้ดี และช่วย SEO เพราะ search engine เข้าใจโครงสร้าง

article ใช้กับเนื้อหาอิสระที่นำไปใช้ซ้ำได้ เช่น บทความ ข่าว section ใช้แบ่งส่วนใน document main เป็นเนื้อหาหลักของหน้า ควรมีเพียงหนึ่ง และไม่ใส่ใน article, aside, header, footer

<header>
  <nav>
    <a href="/">หน้าแรก</a>
  </nav>
</header>
<main>
  <article>
    <h2>หัวข้อบทความ</h2>
    <p>เนื้อหา...</p>
  </article>
</main>
<footer>© 2025</footer>

ฟอร์ม: ใช้ form ครอบ, input, label, buttonattribute type ของ input เช่น text, email, password, number, checkbox, radio, submit ควรใช้ label คู่กับ input ผ่าน for และ id เพื่อ accessibilityplaceholder แสดงคำใบ้, required บังคับกรอก

ฟอร์มยังมี textarea สำหรับข้อความหลายบรรทัด select สำหรับ dropdownname สำคัญเพราะเป็นชื่อที่ส่งไปกับ form data ใส่ action และ method ใน form ถ้าส่งข้อมูลไป server

ตาราง: ใช้ table, thead, tbody, tr (แถว), th (หัวคอลัมน์), td (เซลล์)colspan และ rowspan รวมเซลล์ข้ามคอลัมน์/แถว ใช้ caption สำหรับคำอธิบายตาราง

จัดรูปแบบข้อความ: strong/b ตัวหนา, em/i ตัวเอียง,small ตัวเล็กลง, sub ห้อย, sup ยกpre รักษารูปแบบ (เช่น code), code สำหรับโค้ด, blockquote คำพูดอ้างอิง

สื่อและมัลติมีเดีย: video พร้อม source หรือ src, audio สำหรับเสียงfigure + figcaption ใส่รูปหรือสื่อพร้อมคำบรรยายiframe แทรกหน้าเว็บอื่น เช่น YouTube embed

Head และ Meta: link rel="stylesheet" สำหรับ CSS, link rel="icon" สำหรับ faviconscript src= โหลด JavaScript — async โหลดพร้อมกันไม่บล็อก, defer รอ HTML โหลดเสร็จก่อนรัน Meta OG (og:title, og:description, og:image) สำหรับ share บน social

Accessibility (a11y): ใส่ alt ทุก img, ใช้ label คู่ input, เรียงหัวข้อ h1-h6 ต่อเนื่องaria-label บรรยายเมื่อไม่มีข้อความมองเห็น, role="button" เมื่อใช้ div เป็นปุ่ม ใช้ tabindex จัดลำดับการกด Tab — หลีกเลี่ยง tabindex มากกว่า 0 เว้นจำเป็น

ตัวอย่าง CSS: หน้าเว็บของขวัญหัวข้อ (ต่อ)

ในตัวอย่างหน้าเว็บของขวัญ ใช้ CSS สำหรับ: flex จัด layout, @keyframes ทำ animation (กระโดด, พิมพ์ทีละตัว), transition สำหรับ fade-in

Animation กระโดด (jump):

@keyframes jump {
  0%, 50%, 100% { transform: translateY(0); }
  25%, 75% { transform: translateY(-20px); }
}
.first-image { animation: jump 1s ease-in-out infinite; }

Animation พิมพ์ทีละตัว (typing effect):

@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}
.tonmai h3 {
  overflow: hidden;
  white-space: nowrap;
  border-right: 3px solid #fff;
  animation: typing 3s steps(30) 1s forwards;
}

Flexbox จัด layout กึ่งกลาง:

.headbanner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.tonmai {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

flex-direction: column จัดแนวตั้ง, justify-content: center และ align-items: center ทำให้เนื้อหาอยู่กึ่งกลาง,height: 100vh คือความสูงเต็มจอ, transition ทำให้ fade-in ลื่นไหล