Article · programming

HTML & CSS EP2: รู้จักแท็ก HTML และสร้างโครงสร้างหน้าเว็บอย่างถูกต้อง

HTML & CSS

เรียนรู้แท็ก HTML ที่สำคัญ การซ้อนองค์ประกอบอย่างถูกต้อง การใช้หัวข้อ ย่อหน้า ลิงก์ รูปภาพ รายการ และ semantic HTML พร้อมตัวอย่างหน้าเว็บฉบับเต็มที่คัดลอกไปทดลองได้ทันที

EP2: ทำความเข้าใจแท็ก HTML และโครงสร้างหน้าเว็บ

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

โค้ดโปรแกรมบนหน้าจอคอมพิวเตอร์ — การอ่านและจัดระเบียบโค้ดเป็นทักษะสำคัญของการพัฒนาเว็บไซต์

1. Tag, Element และ Attribute แตกต่างกันอย่างไร

คำศัพท์สามคำนี้พบได้บ่อยเมื่อเรียน HTML โดย tag คือเครื่องหมายที่ใช้ระบุชื่อองค์ประกอบ เช่น <p> ส่วน element หมายถึงองค์ประกอบ HTML ทั้งชุด ซึ่งอาจประกอบด้วยแท็กเปิด เนื้อหา และแท็กปิด ขณะที่ attribute เป็นข้อมูลเพิ่มเติมที่เขียนอยู่ในแท็กเปิด เช่น href ของลิงก์ หรือ alt ของรูปภาพ

คำศัพท์	ตัวอย่าง	คำอธิบาย
Tag	<p>	แท็กเปิดสำหรับย่อหน้า
Element	<p>สวัสดี</p>	องค์ประกอบย่อหน้าพร้อมเนื้อหา
Attribute	href="https://example.com"	ข้อมูลเพิ่มเติมที่กำหนดให้กับแท็ก

ตัวอย่าง Element พร้อม Attribute

<a href="https://example.com" target="_blank" rel="noopener noreferrer">เปิดเว็บไซต์ตัวอย่าง</a>

ตัวอย่างนี้สร้างลิงก์ไปยังเว็บไซต์ตัวอย่าง โดย href ระบุปลายทาง target="_blank" ขอให้เปิดปลายทางในแท็บใหม่ และ rel="noopener noreferrer" เป็นการตั้งค่าที่เหมาะสมเมื่อเปิดลิงก์ภายนอกในแท็บใหม่ โค้ดนี้เป็นเพียงองค์ประกอบหนึ่ง จึงกำหนดให้แสดงเฉพาะโค้ด

2. แท็กเปิดและแท็กปิด

แท็กส่วนใหญ่ที่ครอบเนื้อหาจะมีแท็กเปิดและแท็กปิด เช่น <h1>หัวข้อ</h1> และ <p>ข้อความ</p> แท็กปิดจะมีเครื่องหมาย / ก่อนชื่อแท็ก แต่ HTML ยังมีองค์ประกอบบางประเภทที่ไม่ต้องใช้แท็กปิดแบบเดียวกัน เช่น img และ br การเลือกใช้แท็กให้ถูกชนิดช่วยลดความสับสนเมื่อแก้ไขเอกสาร

ตัวอย่างหัวข้อ ย่อหน้า และการขึ้นบรรทัด

<h1>หัวข้อหลัก</h1>
<p>นี่คือย่อหน้าแรกของหน้าเว็บ</p>
<p>ข้อความบรรทัดแรก<br>ข้อความบรรทัดถัดไป</p>

ใช้ br เท่าที่จำเป็นแท็ก br ใช้ขึ้นบรรทัดใหม่ภายในเนื้อหา เช่น ที่อยู่หรือบทกวี ไม่ควรใช้ br ซ้ำ ๆ เพื่อสร้างช่องว่างขนาดใหญ่ ควรใช้ CSS เช่น margin และ padding สำหรับควบคุมระยะห่างแทน

3. เลือกระดับหัวข้อให้เป็นลำดับ

HTML มีหัวข้อตั้งแต่ h1 ถึง h6 โดย h1 เป็นหัวข้อระดับหลัก และระดับถัดไปใช้แบ่งหัวข้อย่อยตามลำดับเนื้อหา ไม่ควรเลือกแท็กหัวข้อเพียงเพราะขนาดตัวอักษรที่เห็นบนหน้าจอ หากต้องการให้หัวข้อมีขนาดเล็กหรือใหญ่ขึ้น ให้ใช้ CSS จัดรูปแบบแทนการข้ามระดับหัวข้อโดยไม่มีเหตุผล

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

ตัวอย่างลำดับหัวข้อ

<h1>คู่มือการดูแลต้นไม้</h1>
<h2>การรดน้ำ</h2>
<h3>ช่วงเวลาที่เหมาะสม</h3>
<p>ควรพิจารณาความชื้นของดินและชนิดของต้นไม้</p>
<h2>การรับแสง</h2>
<p>เลือกตำแหน่งให้เหมาะกับความต้องการของต้นไม้</p>

การแบ่งหัวข้อช่วยให้ผู้อ่านสแกนเนื้อหาได้ง่าย และช่วยให้โครงสร้างหน้าเว็บมีความหมายชัดเจน ตัวอย่างข้างต้นใช้ h1 สำหรับหัวข้อหลัก h2 สำหรับหัวข้อใหญ่ และ h3 สำหรับหัวข้อย่อยภายในหัวข้อการรดน้ำ

4. ย่อหน้าและการเน้นข้อความ

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

ตัวอย่างการเน้นข้อความ

<p><strong>ข้อสำคัญ:</strong> ควรบันทึกไฟล์ก่อนรีเฟรชหน้าเว็บ</p>
<p>อย่าลืมทดลองแก้ไขโค้ดด้วยตัวเอง <em>ทีละส่วน</em></p>

5. สร้างลิงก์ภายในและลิงก์ภายนอก

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

ตัวอย่างลิงก์ไปยังส่วนหนึ่งของหน้า

<nav>
  <a href="#about">เกี่ยวกับเรา</a>
  <a href="#contact">ติดต่อ</a>
</nav>

<section id="about">
  <h2>เกี่ยวกับเรา</h2>
  <p>ข้อมูลแนะนำเว็บไซต์</p>
</section>

<section id="contact">
  <h2>ติดต่อ</h2>
  <p>ช่องทางติดต่อของเว็บไซต์</p>
</section>

ตรวจสอบปลายทางของลิงก์ค่าหลังเครื่องหมาย # ต้องตรงกับ id ขององค์ประกอบปลายทาง และ id ควรไม่ซ้ำกันภายในเอกสารเดียวกัน หากสะกดไม่ตรง ลิงก์อาจไม่เลื่อนไปยังส่วนที่ต้องการ

6. แสดงรูปภาพด้วย img

แท็ก img ใช้แสดงรูปภาพ โดย src ระบุแหล่งที่มาของภาพ และ alt ใช้เป็นข้อความทดแทนเมื่อภาพไม่สามารถแสดงได้หรือเมื่อผู้ใช้ใช้โปรแกรมอ่านหน้าจอ ควรเขียน alt ให้บอกสาระสำคัญของภาพ ไม่จำเป็นต้องขึ้นต้นด้วยคำว่า “รูปภาพของ” ทุกครั้ง

ตัวอย่างแท็กรูปภาพ

<img src="images/workspace.jpg" alt="โต๊ะทำงานพร้อมคอมพิวเตอร์สำหรับเขียนเว็บไซต์">

ตัวอย่างนี้สมมติว่ามีไฟล์ workspace.jpg อยู่ในโฟลเดอร์ images ภายในโปรเจกต์ หากไม่มีไฟล์ภาพดังกล่าว รูปจะไม่ปรากฏตามต้องการ โค้ดจึงเป็นตัวอย่างเฉพาะส่วนและกำหนดให้แสดงเฉพาะโค้ด

7. สร้างรายการแบบมีจุดและรายการแบบมีหมายเลข

แท็ก ul ใช้สร้างรายการที่ไม่มีลำดับตัวเลข ส่วน ol ใช้สร้างรายการที่มีลำดับ และ li ใช้ระบุรายการแต่ละข้อ การเลือกใช้รายการช่วยให้ข้อมูลหลายข้ออ่านง่ายกว่าการนำทุกอย่างไปรวมอยู่ในย่อหน้าเดียว

ตัวอย่างรายการสองประเภท

<h2>เครื่องมือที่ต้องเตรียม</h2>
<ul>
  <li>โปรแกรมแก้ไขโค้ด</li>
  <li>เว็บเบราว์เซอร์</li>
  <li>โฟลเดอร์สำหรับเก็บไฟล์</li>
</ul>

<h2>ขั้นตอนการทำงาน</h2>
<ol>
  <li>สร้างไฟล์ HTML</li>
  <li>เขียนโครงสร้างหน้าเว็บ</li>
  <li>เพิ่ม CSS</li>
  <li>เปิดไฟล์ในเบราว์เซอร์</li>
</ol>

8. ใช้ div และ span ให้เหมาะสม

div เป็นองค์ประกอบแบบ block ที่ใช้จัดกลุ่มเนื้อหา ขณะที่ span เป็นองค์ประกอบแบบ inline สำหรับครอบข้อความหรือเนื้อหาสั้น ๆ ภายในบรรทัด ทั้งสองแท็กไม่มีความหมายเฉพาะด้านเนื้อหาเหมือน header หรือ article จึงควรเลือกใช้เมื่อจำเป็นต้องจัดกลุ่มหรือกำหนดรูปแบบ และเลือก semantic HTML เมื่อมีแท็กที่สื่อความหมายตรงกับเนื้อหา

ตัวอย่าง div และ span

<div class="product-card">
  <h2>คอร์ส HTML เบื้องต้น</h2>
  <p>เหมาะสำหรับ <span class="highlight">ผู้เริ่มต้น</span></p>
</div>

div ช่วยจัดกลุ่มการ์ดสินค้า ส่วน span ใช้ครอบข้อความ “ผู้เริ่มต้น” เพื่อให้สามารถตกแต่งเฉพาะข้อความนั้นด้วย CSS ได้ ทั้งนี้ class เป็นชื่อที่ผู้พัฒนากำหนดขึ้นเองและสามารถใช้ซ้ำกับหลายองค์ประกอบได้

9. รู้จัก Semantic HTML

Semantic HTML คือการเลือกแท็กที่อธิบายหน้าที่ของเนื้อหาได้อย่างชัดเจน เช่น header สำหรับส่วนหัวของหน้าเว็บ nav สำหรับชุดนำทาง main สำหรับเนื้อหาหลัก section สำหรับส่วนเนื้อหาที่มีหัวข้อ article สำหรับเนื้อหาที่เป็นชิ้นงานแยกได้ และ footer สำหรับส่วนท้าย การใช้แท็กเหล่านี้ช่วยให้โครงสร้างเอกสารอ่านเข้าใจง่ายกว่าการใช้ div ทุกส่วนโดยไม่จำเป็น

แท็ก	ใช้เมื่อใด
header	ส่วนหัวของหน้าเว็บหรือส่วนเนื้อหา
nav	กลุ่มลิงก์นำทางหลัก
main	เนื้อหาหลักของเอกสาร
section	กลุ่มเนื้อหาที่มีหัวข้อหรือจุดประสงค์ร่วมกัน
article	เนื้อหาอิสระ เช่น บทความหรือโพสต์
aside	เนื้อหาเสริมที่สัมพันธ์กับเนื้อหาหลัก
footer	ส่วนท้ายของหน้าเว็บหรือส่วนเนื้อหา

ตัวอย่างโครงสร้างแบบ Semantic

<header>
  <h1>ชื่อเว็บไซต์</h1>
</header>
<nav aria-label="เมนูหลัก">
  <a href="#home">หน้าหลัก</a>
  <a href="#articles">บทความ</a>
</nav>
<main id="home">
  <article id="articles">
    <h2>บทความแนะนำ</h2>
    <p>เนื้อหาของบทความ</p>
  </article>
</main>
<footer>
  <p>สงวนสิทธิ์ตามเงื่อนไขของเว็บไซต์</p>
</footer>

10. การซ้อนแท็กและการจัดย่อหน้าโค้ด

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

ตัวอย่างการซ้อนแท็กที่ถูกต้อง

<article>
  <h2>หัวข้อบทความ</h2>
  <p>ข้อความที่มี <strong>ส่วนสำคัญ</strong> อยู่ภายใน</p>
</article>

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

11. Attribute ที่ควรรู้จัก

นอกจาก href, src และ alt แล้ว HTML ยังมี attribute ที่ใช้บ่อย เช่น id สำหรับระบุองค์ประกอบหนึ่งรายการ class สำหรับจัดกลุ่มองค์ประกอบ title สำหรับให้ข้อมูลเพิ่มเติม และ lang สำหรับกำหนดภาษาของเนื้อหา Attribute บางชนิดเป็น global attribute ซึ่งใช้ได้กับองค์ประกอบ HTML หลายประเภท แต่ยังต้องเลือกใช้ตามความหมายและความเหมาะสม

Attribute	ตัวอย่าง	การใช้งาน
id	id="contact"	ระบุองค์ประกอบด้วยชื่อที่ไม่ซ้ำในเอกสาร
class	class="card"	กำหนดกลุ่มสำหรับ CSS หรือการเลือกองค์ประกอบ
href	href="#contact"	กำหนดปลายทางของลิงก์
src	src="photo.jpg"	ระบุแหล่งที่มาของรูปภาพหรือทรัพยากร
alt	alt="โต๊ะทำงาน"	ข้อความทดแทนสำหรับรูปภาพ
lang	lang="th"	กำหนดภาษาของเอกสารหรือเนื้อหา

12. ข้อผิดพลาดที่ผู้เริ่มต้นมักพบ

ข้อผิดพลาดที่พบได้บ่อย ได้แก่ พิมพ์ชื่อแท็กผิด ลืมใส่เครื่องหมายคำพูดในค่า attribute ที่มีช่องว่าง ใช้ id ซ้ำหลายองค์ประกอบ ลืมกำหนด alt ให้ภาพที่มีความหมาย และใช้แท็กเพื่อให้ได้รูปลักษณ์แทนที่จะเลือกตามความหมาย เมื่อหน้าเว็บไม่แสดงตามต้องการ ควรตรวจทีละส่วนและหลีกเลี่ยงการเปลี่ยนหลายอย่างพร้อมกัน เพราะจะทำให้หาสาเหตุได้ยาก

ปัญหา	วิธีตรวจสอบ
ลิงก์ไม่ไปยังส่วนที่ต้องการ	ตรวจว่า href และ id ตรงกัน
รูปภาพไม่ปรากฏ	ตรวจ path ของ src และชื่อไฟล์
CSS เลือกองค์ประกอบไม่ถูก	ตรวจชื่อ class และ id ให้ตรงกัน
โครงสร้างอ่านยาก	เยื้องบรรทัดและจัดกลุ่มแท็กให้ชัดเจน
ข้อความภาษาไทยผิดปกติ	ตรวจว่ามี meta charset="UTF-8"

13. ฝึกสร้างโครงสร้างหน้าแนะนำตัว

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

หลักการสำคัญเริ่มจากถามว่าเนื้อหาแต่ละส่วนมีหน้าที่อะไร แล้วเลือกแท็ก HTML ให้ตรงความหมาย หลังจากนั้นจึงใช้ CSS ควบคุมรูปลักษณ์

14. ตรวจสอบความพร้อมก่อนเปิดหน้าเว็บ

ก่อนเปิดไฟล์ในเบราว์เซอร์ ให้ตรวจว่ามี doctype, html, head, title และ body ครบถ้วน ตรวจว่ารหัสภาษาและชุดอักขระเหมาะสม ตรวจว่ามีแท็กเปิดและปิดตามลำดับ และตรวจว่าลิงก์หรือรูปภาพใช้ตำแหน่งไฟล์ถูกต้อง จากนั้นบันทึกไฟล์แล้วเปิดในเบราว์เซอร์เพื่อดูผลลัพธ์จริง

15. สรุปบทเรียน

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

แบบฝึกหัดท้ายบท

สร้างหน้าแนะนำตัวเองหนึ่งหน้า โดยใช้ header, nav, main, section, article และ footer ให้เหมาะสม เพิ่มหัวข้อหลักและหัวข้อย่อย ใส่ย่อหน้าอย่างน้อยสองย่อหน้า เพิ่มรายการความสนใจอย่างน้อยสามข้อ และสร้างลิงก์ที่พาไปยังส่วนติดต่อของหน้า จากนั้นตรวจว่าโครงสร้าง HTML ถูกต้องและเปิดไฟล์ในเบราว์เซอร์ได้

Full Page Code — หน้าแนะนำตัวด้วย HTML และ CSS

โค้ดด้านล่างเป็นหน้าเว็บฉบับเต็มที่สามารถนำไปใช้งานได้ทันที คัดลอกโค้ดทั้งหมดไปบันทึกเป็น index.html แล้วเปิดด้วยเบราว์เซอร์ ตัวอย่างนี้ใช้ Semantic HTML มีเมนูนำทาง ลิงก์ภายใน การ์ดแนะนำตัว รายการความสนใจ และส่วนติดต่อ พร้อม CSS ที่ปรับการจัดวางให้เหมาะกับหน้าจอขนาดเล็ก โดยไม่ต้องใช้ JavaScript หรือไลบรารีภายนอก

Full Page — Copy & Run | index.html

<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="หน้าแนะนำตัวอย่างง่าย สร้างด้วย HTML และ CSS">
  <title>แนะนำตัว | My Profile</title>
  <style>
    :root {
      --primary: #4f46e5;
      --primary-dark: #3730a3;
      --accent: #0891b2;
      --text: #172033;
      --muted: #64748b;
      --background: #f1f5f9;
      --surface: #ffffff;
      --border: #e2e8f0;
      --radius: 20px;
      --shadow: 0 14px 35px rgba(30, 41, 59, 0.09);
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      color: var(--text);
      background: var(--background);
      font-family: Tahoma, Arial, sans-serif;
      line-height: 1.75;
    }

    a {
      color: inherit;
    }

    .container {
      width: min(1040px, calc(100% - 36px));
      margin: 0 auto;
    }

    .site-header {
      border-bottom: 1px solid var(--border);
      background: var(--surface);
    }

    .navigation {
      display: flex;
      min-height: 76px;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
    }

    .brand {
      color: var(--primary-dark);
      font-size: 1.15rem;
      font-weight: 800;
      text-decoration: none;
    }

    .menu {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 22px;
    }

    .menu a {
      color: var(--muted);
      font-size: 0.92rem;
      font-weight: 700;
      text-decoration: none;
    }

    .menu a:hover {
      color: var(--primary);
    }

    .hero {
      padding: 68px 0;
      color: #ffffff;
      background: linear-gradient(130deg, #312e81, #4f46e5 55%, #0891b2);
    }

    .hero-inner {
      display: grid;
      grid-template-columns: 1.4fr 0.6fr;
      align-items: center;
      gap: 36px;
    }

    .eyebrow {
      display: inline-block;
      margin-bottom: 12px;
      padding: 5px 12px;
      border: 1px solid rgba(255, 255, 255, 0.3);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.1);
      font-size: 0.85rem;
      font-weight: 700;
    }

    .hero h1 {
      margin: 0 0 16px;
      font-size: clamp(2.2rem, 5vw, 3.6rem);
      line-height: 1.2;
    }

    .hero p {
      max-width: 620px;
      margin: 0 0 24px;
      color: #e0e7ff;
    }

    .hero-art {
      display: grid;
      width: min(230px, 100%);
      aspect-ratio: 1;
      margin: 0 auto;
      place-items: center;
      border: 1px solid rgba(255, 255, 255, 0.25);
      border-radius: 36px;
      background: rgba(255, 255, 255, 0.12);
      box-shadow: 0 20px 50px rgba(15, 23, 42, 0.15);
      font-size: 5rem;
    }

    .button {
      display: inline-flex;
      min-height: 46px;
      align-items: center;
      justify-content: center;
      padding: 10px 19px;
      border-radius: 11px;
      background: #ffffff;
      color: var(--primary-dark);
      font-weight: 800;
      text-decoration: none;
      transition: transform 150ms ease;
    }

    .button:hover {
      transform: translateY(-2px);
    }

    .section {
      padding: 60px 0;
    }

    .section-heading {
      margin: 0 0 28px;
    }

    .section-heading h2 {
      margin: 0 0 8px;
      font-size: clamp(1.6rem, 4vw, 2.2rem);
      line-height: 1.35;
    }

    .section-heading p {
      margin: 0;
      color: var(--muted);
    }

    .profile-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 22px;
    }

    .card {
      padding: 28px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--surface);
      box-shadow: var(--shadow);
    }

    .card h3 {
      margin: 0 0 12px;
      font-size: 1.25rem;
    }

    .card p {
      margin: 0;
      color: var(--muted);
    }

    .interest-list {
      display: grid;
      gap: 12px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .interest-list li {
      display: flex;
      align-items: flex-start;
      gap: 10px;
    }

    .interest-list li::before {
      display: inline-grid;
      width: 26px;
      height: 26px;
      flex: 0 0 26px;
      place-items: center;
      border-radius: 8px;
      background: #eef2ff;
      color: var(--primary);
      font-weight: 900;
      content: "✓";
    }

    .contact-panel {
      padding: 32px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--surface);
      text-align: center;
      box-shadow: var(--shadow);
    }

    .contact-panel h2 {
      margin: 0 0 10px;
    }

    .contact-panel p {
      margin: 0 0 20px;
      color: var(--muted);
    }

    .contact-panel .button {
      color: #ffffff;
      background: var(--primary);
    }

    .site-footer {
      padding: 24px 0;
      border-top: 1px solid var(--border);
      background: var(--surface);
      color: var(--muted);
      text-align: center;
      font-size: 0.9rem;
    }

    .site-footer p {
      margin: 0;
    }

    @media (max-width: 700px) {
      .navigation {
        align-items: flex-start;
        flex-direction: column;
        justify-content: center;
        padding: 16px 0;
      }

      .hero {
        padding: 48px 0;
      }

      .hero-inner {
        grid-template-columns: 1fr;
      }

      .hero-art {
        width: 150px;
        border-radius: 25px;
        font-size: 3.5rem;
      }

      .profile-grid {
        grid-template-columns: 1fr;
      }

      .section {
        padding: 44px 0;
      }

      .card,
      .contact-panel {
        padding: 23px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }

      .button {
        transition: none;
      }
    }
  </style>
</head>
<body>
  <header class="site-header">
    <div class="container navigation">
      <a class="brand" href="#home">My Profile</a>
      <nav class="menu" aria-label="เมนูหลัก">
        <a href="#home">หน้าหลัก</a>
        <a href="#about">เกี่ยวกับฉัน</a>
        <a href="#interests">ความสนใจ</a>
        <a href="#contact">ติดต่อ</a>
      </nav>
    </div>
  </header>

  <main>
    <section class="hero" id="home">
      <div class="container hero-inner">
        <div>
          <span class="eyebrow">WELCOME TO MY PROFILE</span>
          <h1>สวัสดี! ยินดีที่ได้รู้จัก</h1>
          <p>นี่คือตัวอย่างหน้าแนะนำตัวที่สร้างด้วย HTML และ CSS คุณสามารถเปลี่ยนชื่อ คำอธิบาย และสีต่าง ๆ ให้กลายเป็นเว็บไซต์ในแบบของตัวเองได้</p>
          <a class="button" href="#about">รู้จักฉันมากขึ้น ↓</a>
        </div>
        <div class="hero-art" role="img" aria-label="สัญลักษณ์โปรไฟล์">👋</div>
      </div>
    </section>

    <section class="section" id="about">
      <div class="container">
        <div class="section-heading">
          <h2>เกี่ยวกับฉัน</h2>
          <p>พื้นที่สำหรับแนะนำตัวและบอกเล่าเรื่องราวของคุณ</p>
        </div>
        <div class="profile-grid">
          <article class="card">
            <h3>ฉันเป็นใคร</h3>
            <p>ฉันกำลังเรียนรู้การสร้างเว็บไซต์ด้วย HTML และ CSS ชอบทดลองสิ่งใหม่ ๆ และต้องการพัฒนาทักษะการเขียนโค้ดทีละขั้นตอน ข้อความส่วนนี้สามารถเปลี่ยนเป็นข้อมูลแนะนำตัวจริงของคุณได้</p>
          </article>
          <article class="card" id="interests">
            <h3>สิ่งที่ฉันสนใจ</h3>
            <ul class="interest-list">
              <li>การออกแบบเว็บไซต์ที่ใช้งานง่าย</li>
              <li>การเรียนรู้เทคโนโลยีใหม่ ๆ</li>
              <li>การสร้างโปรเจกต์ด้วยตัวเอง</li>
              <li>การแบ่งปันความรู้กับผู้อื่น</li>
            </ul>
          </article>
        </div>
      </div>
    </section>

    <section class="section" id="contact">
      <div class="container">
        <div class="contact-panel">
          <h2>มาพูดคุยกัน</h2>
          <p>ตัวอย่างนี้ยังไม่ได้เชื่อมต่อระบบส่งข้อความจริง คุณสามารถเปลี่ยนลิงก์ด้านล่างเป็นช่องทางติดต่อของตัวเองได้</p>
          <a class="button" href="mailto:[email protected]">ส่งอีเมลตัวอย่าง</a>
        </div>
      </div>
    </section>
  </main>

  <footer class="site-footer">
    <div class="container">
      <p>© 2026 My Profile · สร้างด้วย HTML และ CSS</p>
    </div>
  </footer>
</body>
</html>

Reach within 500px of the page end and stay for at least 5 minutes to earn EXP once per day.

⏳ Reading timer is running...