Basic tag Html
HTML Formatting Elements are a set of commands in the HTML language used to define the format of text on a web page, such as making text bold, italic, or underlining.
Common HTML formatting elements:
< b >: Make the text bold.
< Strong >: Make text bold and important (for SEO).
< i >: Make the text italic.
< em >: Make text italic and important (for SEO).
< mark >: Make the text highlighted or highlighted.
< small >: Make the text smaller.
< del >: Make the text have a dash line (delete).
< ins >: Make text with an underline (more).
: Make the text a subscript.
: Make the text a superscript.
Example of use:
Code
< p > This is bold < b > text < / b > and < strong > bold text that is important < / strong > < / p >
< p > This is the text < i > italics < / i > and < em > italics text that is important < / em > < / p >.
< p > This is the text < mark > that is highlighted. < / mark > < / p >
< p > This is a < small > small < / small > < / p > message.
< p > This is the deleted < del > and < ins > text. < / ins > < / p >
< p > This is the text < sub > subscript < / sub > and < sup > superscript < / sup > < / p >.
Importance of formatting elements:
Beauty:
Allows text on web pages to look interesting and easy to read.
Meaning:
Some elements, such as * * and < em >, can also convey the meaning of the text.
SEO:
Using appropriate elements such as * * and < em > helps search engines better understand the content of web pages.
ถ้าเพิ่งเริ่มทำเว็บ คำถามที่เจอบ่อยมากคือ “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> เฉพาะจุดที่ “สำคัญจริง” ไม่ต้องใส่ถี่เกินไป เพราะคนอ่านจะล้า และความสำคัญจะดูเจือจางไปเอง