พื้นฐาน tag Html
องค์ประกอบการจัดรูปแบบ HTML (HTML Formatting Elements) คือชุดคำสั่งในภาษา HTML ที่ใช้ในการกำหนดรูปแบบของข้อความบนหน้าเว็บ เช่น การทำให้ข้อความหนา ตัวเอียง หรือการขีดเส้นใต้.
องค์ประกอบการจัดรูปแบบ HTML ที่พบบ่อย:
<b>: ทำให้ข้อความเป็นตัวหนา.
<strong>: ทำให้ข้อความเป็นตัวหนา และมีความสำคัญ (สำหรับ SEO).
<i>: ทำให้ข้อความตัวเอียง.
<em>: ทำให้ข้อความตัวเอียง และมีความสำคัญ (ส ำหรับ SEO).
<mark>: ทำให้ข้อความถูกเน้น หรือไฮไลท์.
<small>: ทำให้ข้อความมีขนาดเล็กลง.
<del>: ทำให้ข้อความมีเส้นขีดทับ (ลบ).
<ins>: ทำให้ข้อความมีเส้นขีดใต้ (เพิ่มเติม).
: ทำให้ข้อความเป็นตัวห้อย.
: ทำให้ข้อความเป็นตัวยก.
ตัวอย่างการใช้งาน:
โค้ด
<p>นี่คือข้อความ<b>ตัวหนา</b> และ <strong>ข้อความตัวหนาที่มีความสำคัญ</strong></p>
<p>นี่คือข้อความ<i>ตัวเอียง</i> และ <em>ข้อความตัวเอียงที่มีความสำคัญ</em></p>
<p>นี่คือข้อความ <mark>ที่ถูกเน้น</mark></p>
<p>นี่คือข้อความ <small>ขนาดเล็ก</small></p>
<p>นี่คือข้อความ <del>ที่ถูกลบ</del> และ <ins>ที่ถูกเพิ่มเติม</ins></p>
<p>นี่คือข้อความ <sub>ตัวห้อย</sub> และ <sup>ตัวยก</sup></p>
ความสำคัญขององค์ประกอบการจัดรูปแบบ:
ความสวยงาม:
ช่วยให้ข้อความบนหน้าเว็บดูน่าสนใจและอ่านง่าย.
ความหมาย:
องค์ประกอบบางอย่าง เช่น ** และ <em> ช่วยสื่อความหมายของข้อความได้ด้วย.
SEO:
การใช้องค์ประกอบที่เหมาะสม เช่น ** และ <em> ช่วยให้เครื่องมือค้นหาเข้าใจเนื้อหาของหน้าเว็บได้ดีขึ้น.
ถ้าเพิ่งเริ่มทำเว็บ คำถามที่เจอบ่อยมากคือ “index.html คืออะไร?” จากประสบการณ์ตอนเริ่มหัดเขียน HTML ของเราเอง index.html คือ “หน้าเริ่มต้น” (default page) ที่เว็บเซิร์ฟเวอร์มักจะมองหาเป็นอันดับแรกเวลาเราเข้าโดเมนหรือโฟลเดอร์นั้นๆ เช่น เปิด https://example.com/ แล้วไม่ได้ระบุชื่อไฟล์ เบราว์เซอร์/เซิร์ฟเวอร์จะพยายามเรียก index.html ขึ้นมาก่อน ทำให้ไฟล์นี้มักถูกใช้เป็นหน้า Home หรือหน้าแรกของเว็บนั่นเอง โครงสร้างง่ายๆ ของ index.html ที่เราชอบใช้เป็นจุดเริ่มต้นจะมีประมาณนี้: - <!doctype html> บอกว่าเป็นเอกสาร HTML5 - <html> ครอบทั้งหน้า - <head> ใส่ชื่อหน้า (title), meta ต่างๆ - <body> เนื้อหาที่แสดงผลจริง แล้วคำว่า “base44 คืออะไร?” อาจจะเป็นคนพิมพ์คล้ายๆ “Base64” (เบสหกสี่) มากกว่า ซึ่ง Base64 คือรูปแบบการเข้ารหัสข้อมูลให้กลายเป็นตัวอักษร (A–Z, a–z, 0–9, +, /) เพื่อส่งผ่านระบบที่รับแต่ข้อความได้ เช่น แนบรูปเป็น data URL ใน HTML/CSS หรือส่งข้อมูลผ่านบาง API แต่ต้องจำไว้ว่า Base64 ไม่ใช่การ “เข้ารหัสเพื่อความปลอดภัย” มันแค่แปลงรูปแบบข้อมูลเท่านั้น และขนาดไฟล์จะใหญ่ขึ้นเล็กน้อยเมื่อแปลงเป็น Base64 กลับมาที่เนื้อหา HTML ของโพสต์นี้ ถ้าจะให้เข้าใจและใช้งานแบบเป็นมิตรกับ SEO ด้วย เราแนะนำให้แยก “แท็กที่เน้นแค่หน้าตา” กับ “แท็กที่มีความหมาย”: - <b> ทำตัวหนา (เน้นหน้าตา) - <strong> ตัวหนาพร้อมสื่อว่า “สำคัญ” (มีความหมายเชิงเนื้อหา) - <i> ตัวเอียง (เน้นหน้าตา) - <em> ตัวเอียงพร้อมสื่อว่า “ย้ำ/เน้น” (มีความหมาย) เวลาเขียนบทความหรือหน้าเว็บ ถ้าต้องการเน้นคำสำคัญจริงๆ เรามักเลือก <strong> หรือ <em> มากกว่า <b>/<i> เพราะช่วยให้ทั้งคนอ่านและ Search Engine เข้าใจเจตนาได้ดีขึ้น อีกชุดแท็กที่ใช้งานบ่อยและเห็นในภาพตัวอย่างก็มี: - <mark> ไฮไลต์คำ/ประโยคที่อยากให้สะดุดตา - <small> ข้อความหมายเหตุ/เงื่อนไขตัวเล็ก - <del> ขีดทับข้อความ (เช่น ราคาเดิม) - <ins> ขีดเส้นใต้เพื่อบอกว่าเพิ่ม/แก้ไข - <sub> ตัวห้อย และ <sup> ตัวยก (เหมาะกับสูตรคณิต/เคมี เช่น H<sub>2</sub>O, x<sup>2</sup>) ทริคเล็กๆ ที่ช่วยให้หน้า index.html อ่านง่ายขึ้นคือ จัดโครงสร้างด้วยหัวข้อ (<h1>, <h2>) และใช้ <strong>/<em> เฉพาะจุดที่ “สำคัญจริง” ไม่ต้องใส่ถี่เกินไป เพราะคนอ่านจะล้า และความสำคัญจะดูเจือจางไปเอง
