แท็กที่เกี่ยวข้องกับข้อความ

บทความนี้อธิบายเกี่ยวกับแท็กที่เกี่ยวข้องกับข้อความ

คำอธิบายถูกแบ่งออกเป็นแท็กที่มีความหมายและไม่มีความหมาย

YouTube Video

การสร้าง CSS สำหรับการดูตัวอย่าง

  1body {
  2    font-family: Arial, sans-serif;
  3    line-height: 1.6;
  4    margin: 20px 20px 20px 20px;
  5    background-color: #f4f4f9;
  6    color: #333;
  7}
  8
  9header h1 {
 10    font-size: 24px;
 11    color: #333;
 12    text-align: center;
 13    margin-bottom: 20px;
 14}
 15
 16h2, h3 {
 17    color: #555;
 18}
 19
 20h2 {
 21    font-size: 20px;
 22    border-bottom: 2px solid #ccc;
 23    padding-bottom: 5px;
 24}
 25
 26h3 {
 27    font-size: 18px;
 28    margin-top: 20px;
 29}
 30
 31p, pre {
 32    margin: 10px 0;
 33    padding: 0;
 34}
 35
 36ul, ol, dl, menu {
 37    margin: 0;
 38}
 39
 40pre {
 41    background-color: #f0f0f0;
 42    border-left: 4px solid #ccc;
 43    padding: 10px;
 44    overflow-x: auto;
 45}
 46
 47p.sample, .sample {
 48    background-color: #e7f4e9;
 49    padding: 10px;
 50    border-left: 4px solid #7bbd82;
 51    color: #333;
 52}
 53
 54p.sample-error, .sample-error {
 55    background-color: #f4e7e7;
 56    padding: 10px;
 57    border-left: 4px solid #bd827b;
 58    color: #333;
 59}
 60
 61p.sample-warn, .sample-warn {
 62    background-color: #f4f1e7;
 63    padding: 10px;
 64    border-left: 4px solid #bda97b;
 65    color: #333;
 66}
 67
 68code {
 69    padding: 2px 4px;
 70    border-radius: 4px;
 71    font-family: monospace;
 72}
 73
 74span {
 75    font-weight: bold;
 76}
 77
 78main {
 79    padding-bottom: 100px;
 80}
 81
 82article {
 83    background-color: white;
 84    padding: 20px;
 85    margin-bottom: 10px;
 86    border-radius: 8px;
 87    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 88}
 89
 90section {
 91    margin-bottom: 20px;
 92}
 93
 94table {
 95    width: 100%;
 96    border-collapse: collapse;
 97}
 98
 99th, td {
100    border: 1px solid #ddd;
101}

แท็กพื้นฐานที่เกี่ยวข้องกับข้อความ

แท็ก <div>

1<div>This is a division of content.</div>

• แท็ก <div> เป็นองค์ประกอบระดับบล็อกที่ใช้ในการสร้างการแบ่งภายใน HTML

• แท็ก <div> เป็นแท็กที่ไม่มีความหมายในตัวเอง

  เมื่อเน้นที่ HTML เชิงความหมาย สามารถใช้แท็กที่มีความหมาย (เช่น <section>, <article>) ได้ สิ่งนี้ช่วยให้เครื่องมือค้นหาและเครื่องอ่านหน้าจอเข้าใจเนื้อหาของหน้าได้ดีขึ้น

• โดยการผสานรวมกับ CSS และ JavaScript คุณสามารถควบคุมลักษณะและพฤติกรรมของหน้าได้

  แท็ก <div> ใช้สำหรับจัดกลุ่มเนื้อหาในหน้าเป็นองค์ประกอบระดับบล็อก มันถูกใช้พร้อมกับ CSS และ JavaScript เพื่อปรับเลย์เอาต์ของหน้า สไตล์ และการจัดการองค์ประกอบต่างๆ เป็นหลัก

แท็ก <p>

1<p>This is a paragraph of text.</p>

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

แท็ก <a>

1<a href="https://codesparklab.com" title="Code Spark Lab">Go to codesparklab.com</a>

• แท็ก <a> ใช้สำหรับสร้างลิงก์

  แท็ก <a> ใช้ในการสร้างลิงก์ไปยังหน้าอื่นๆ เว็บไซต์ภายนอก หรือไฟล์ต่างๆ แอตทริบิวต์ href ใช้ในการกำหนดปลายทางของลิงก์

• มันสามารถใช้กับลิงก์ข้อความหรือลิงก์ภาพ และการใช้ target="_blank" จะเปิดลิงก์ในแท็บใหม่

• คุณสมบัติ target ใช้เพื่อระบุว่าจะให้แสดงปลายทางลิงก์อย่างไร

  • _self (ค่าเริ่มต้น): เปิดลิงก์ในหน้าต่างหรือแท็บปัจจุบัน
  • _blank: เปิดลิงก์ในหน้าต่างหรือแท็บใหม่
  • _parent: เปิดลิงก์ในเฟรมแม่
  • _top: เปิดลิงก์ในหน้าต่างเต็มรูปแบบ ไม่สนใจเฟรมใดๆ

• แอตทริบิวต์ title ใช้สำหรับแสดงข้อมูล Tooltip บนลิงก์ เมื่อผู้ใช้เลื่อนไปวางบนลิงก์ จะปรากฏคำอธิบายที่กำหนดไว้

1<a href="#section1">Go to Section 1</a>
2
3<h2 id="section1">Section 1</h2>
4<p>This is Section 1 content.</p>

• แท็ก <a> ยังใช้ในการข้ามไปยังตำแหน่งที่เฉพาะเจาะจงภายในหน้าเดียวกัน ในการทำเช่นนี้ คุณจะตั้งค่าแอตทริบิวต์ id บนอีลิเมนต์เป้าหมายและใช้ id นี้ในแอตทริบิวต์ href ของลิงก์

แท็ก <span>

1Here is some <span style="color: red;">highlighted text

• แท็ก <span> เป็นองค์ประกอบแบบอินไลน์

  แท็ก <span> เป็นอินไลน์เอลิเมนต์ ดังนั้นจึงไม่ทำให้เกิดการขึ้นบรรทัดใหม่เมื่อใช้งานกับข้อความ, ลิงก์, รูปภาพ หรืออินไลน์เอลิเมนต์อื่น ๆ มันเข้ากับการไหลของหน้าตามธรรมชาติได้ดี

• สามารถปรับใช้สไตล์เฉพาะบางส่วน

  เมื่อคุณต้องการปรับใช้สไตล์เฉพาะบางส่วนของเอกสาร คุณสามารถใช้แท็ก <span> เพื่อกำหนดคลาสหรือ ID ของ CSS และปรับใช้สไตล์ในช่วงที่ต้องการ

• แท็ก <span> เป็นองค์ประกอบที่ไม่ใช่เชิงความหมาย

  เนื่องจากแท็ก <span> ไม่มีความหมายเฉพาะหรือบทบาทในโครงสร้าง มันจึงถูกใช้เพื่อวัตถุประสงค์ในการสไตล์หรือการสคริปต์เท่านั้น เมื่อจำเป็นต้องเน้นข้อความเชิงความหมาย จะเหมาะสมกว่าที่จะใช้แท็กเชิงความหมายเช่น <strong> หรือ <em> ซึ่งจะอธิบายในภายหลัง

แท็ก <br>

1Here is some text with a <br> line break.

• แท็ก <br> เป็นองค์ประกอบแบบอินไลน์

  เนื่องจากแท็ก <br> เป็นอินไลน์เอลิเมนต์ จึงไม่ครอบคลุมทั้งบล็อก และสร้างการพักบรรทัดในส่วนที่วางไว้ ในขณะที่แท็ก <p> เพิ่มระยะห่างด้านบนและด้านล่างเพื่อแยกย่อหน้าออกจากกัน แท็ก <br> จะสร้างการพักบรรทัดโดยไม่เพิ่มระยะห่างใด ๆ

• มันเป็นแท็กที่ปิดตัวเอง จึงไม่จำเป็นต้องมีแท็กปิด (</br>)

• ควรหลีกเลี่ยงการใช้แท็กนี้มากเกินไป และใช้แท็ก <p> หรือ CSS สำหรับการแยกย่อหน้าหรือการปรับแต่งการจัดองค์ประกอบ

  เมื่อการจัดระเบียบข้อความเป็นย่อหน้า จะเหมาะสมกว่าที่จะใช้แท็ก <p> ขอแนะนำให้ใช้ CSS สำหรับการปรับแต่งการจัดองค์ประกอบ ตัวอย่างเช่น การใช้คุณสมบัติ white-space ใน CSS สามารถแสดงการพักบรรทัดและช่องว่างในข้อความตามที่ปรากฏได้

แท็ก <hr>

1This is some text.<hr>This is another section of text.

• แท็ก <hr> เป็นบล็อกเลเวลเอลิเมนต์

  แท็ก <hr> ใช้สำหรับซ้อนเส้นแนวนอนเพื่อแยกส่วนต่าง ๆ ของเนื้อหาในภาพรวม มันยังสามารถใช้เพื่อระบุการเปลี่ยนแปลงธีม ทำให้มีความหมายตามบริบท

• มันเป็นแท็กที่ปิดในตัวเอง จึงไม่จำเป็นต้องมีแท็กปิด (</hr>)

• คุณสามารถปรับแต่งสี ความยาว และความหนาของมันได้โดยใช้ CSS

แท็กที่เกี่ยวข้องกับข้อความเชิงความหมาย

จากแท็ก <h1> ถึงแท็ก <h6>

1<h1>Main Heading</h1>
2<h2>Subheading</h2>
3<h3>Sub-subheading</h3>

• แท็ก <h1> ถึง <h6> เป็นแท็กสำหรับหัวข้อที่ใช้ใน HTML

  แท็ก <h1> แทนหัวข้อที่สำคัญที่สุด และโดยทั่วไปใช้เป็นชื่อหลักของทั้งหน้า เป็นปกติที่จะใช้แท็ก <h1> เพียงหนึ่งแท็กต่อเอกสาร HTML หนึ่งชุด

  แท็ก <h2> เป็นหัวเรื่องที่สำคัญรองลงมาจาก <h1> และใช้สำหรับชื่อส่วนหรือบทตอนในหน้า

  แท็ก <h3> แทนหัวข้อย่อยหรือส่วนที่เล็กกว่าภายใต้ <h2>

  แท็ก <h4>, <h5>, และ <h6> แทนหัวข้อในระดับที่ต่ำกว่า ใช้สำหรับรายการที่ละเอียดยิ่งขึ้นหรือชื่อของส่วนต่าง ๆ

• แท็กหัวข้อบ่งบอกถึงความสำคัญของข้อความและช่วยสร้างโครงสร้างที่มีเหตุผลของหน้า เครื่องมือค้นหายังใช้แท็กหัวข้อเพื่อทำความเข้าใจเนื้อหาของหน้า

แท็ก <strong>

1<strong>Important text</strong> to emphasize significance.

• แท็ก <strong> เป็นแท็ก HTML ที่ใช้เพื่อบ่งบอกถึงความสำคัญหรือเน้นข้อความและโดยทั่วไปจะแสดงเป็นตัวหนา

• แท็ก <strong> เป็นแท็กเชิงความหมาย โดยมีวัตถุประสงค์หลักเพื่อเพิ่มความหมาย

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

แท็ก <em>

1<em>Emphasized text</em> for italics and emphasis.

• แท็ก <em> เป็นแท็ก HTML ที่ใช้บ่งบอกถึงความสำคัญหรือการเน้นในข้อความและโดยปกติจะแสดงเป็นตัวเอียง

• แท็ก <em> เป็นแท็กเชิงความหมาย โดยมีจุดประสงค์หลักในการให้ความหมาย

  เช่นเดียวกับแท็ก <strong> สามารถบ่งบอกได้ว่าข้อความนั้นมีความสำคัญในบริบท แท็ก <strong> มักจะแสดงเป็นตัวหนา ส่วนแท็ก <em> จะแสดงเป็นตัวเอียง ทั้งสองแท็กได้รับการยอมรับจากเครื่องอ่านหน้าจอและเครื่องมือค้นหาสำหรับการเน้นด้วยความหมาย แต่ <strong> บ่งบอกถึงความสำคัญที่มากกว่า ในขณะที่ <em> สื่อถึงการเน้นทางอารมณ์ นอกจากนี้ แท็ก <i> ที่จะกล่าวถึงในภายหลัง ทำให้ข้อความเป็นตัวเอียงเท่านั้นและไม่ได้ให้ความหมายเชิงความหมาย

แท็ก <mark>

1<mark>Highlighted text</mark> for attention.

• แท็ก <mark> ใช้เพื่อบ่งบอกว่าข้อความเฉพาะนั้นมีความสำคัญในบริบท มีประโยชน์ในการเน้นผลการค้นหาหรือจุดสำคัญ
• ตามค่าเริ่มต้น ข้อความที่อยู่ในแท็ก <mark> จะแสดงด้วยพื้นหลังสีเหลือง เพื่อเน้นความสำคัญด้วยสายตา

แท็ก <del>

1<del>Deleted text</del> shows removed content.

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

• ข้อความที่อยู่ในแท็ก <del> มักจะแสดงด้วยการขีดทับ สิ่งนี้บ่งบอกเนื้อหาที่ถูกลบอย่างชัดเจน

  ข้อความที่อยู่ในแท็ก <del> ยังได้รับการยอมรับว่าเป็นข้อความที่ถูกลบโดยเครื่องอ่านหน้าจอ สิ่งนี้ช่วยให้เนื้อหาที่ไม่ปรากฏอย่างเห็นได้ชัดถูกเข้าใจได้

แท็ก <ins>

1<ins>Inserted text</ins> shows added content.

• แท็ก <ins> ถูกใช้เพื่อระบุข้อความที่ถูกเพิ่มใหม่หรือแก้ไขในเอกสาร แท็กนี้มีประโยชน์ในการแสดงประวัติการเพิ่มหรือแก้ไขข้อความ

• ในเบราว์เซอร์ ข้อความที่อยู่ในแท็ก <ins> มักจะแสดงเป็นการขีดเส้นใต้ สิ่งนี้บ่งบอกถึงเนื้อหาที่ถูกเพิ่มเข้ามาอย่างเป็นภาพ

  ข้อความที่อยู่ในแท็ก <ins> จะถูกมองว่าเป็นข้อความที่เพิ่มใหม่โดยโปรแกรมอ่านหน้าจอด้วยเช่นกัน สิ่งนี้ช่วยให้เนื้อหาที่ไม่ปรากฏอย่างเห็นได้ชัดถูกเข้าใจได้

แท็ก <abbr>

1<abbr title="World Health Organization">WHO</abbr>

• แท็ก <abbr> เป็นองค์ประกอบแบบอินไลน์ที่ใช้เพื่อระบุคำย่อหรืออักษรย่อ การใช้แท็กนี้ช่วยให้ความหมายเต็มของคำย่อและช่วยปรับปรุง SEO และการเข้าถึง มันช่วยเป็นพิเศษให้ผู้อ่านที่ไม่คุ้นเคยกับคำย่อและผู้ใช้โปรแกรมอ่านหน้าจอเข้าใจเนื้อหาได้ดีขึ้น

แท็กเกี่ยวกับการตกแต่งข้อความ

แท็ก <b>

1<b>Bold text</b> without semantic emphasis.

• แท็ก <b> เป็นองค์ประกอบแบบอินไลน์ที่ใช้ทำให้ข้อความหนา เหมือนกับแท็กอื่นๆ ที่เราจะแนะนำ มันถูกใช้สำหรับเน้นภาพแต่ไม่ใช่เน้นความหมาย

แท็ก <i>

1<i>Italic text</i> for style.

• แท็ก <i> เป็นองค์ประกอบแบบอินไลน์ที่ใช้ทำให้ข้อความเป็นตัวเอน

แท็ก <u>

1<u>Underlined text</u> for decoration.

• แท็ก <u> เป็นองค์ประกอบแบบอินไลน์ที่ใช้ขีดเส้นข้อความใต้

แท็ก <small>

1<small>This is small text.</small>

• แท็ก <small> เป็นองค์ประกอบอินไลน์ที่ใช้เพื่อแสดงข้อความในขนาดเล็กลง มันถูกใช้เป็นประจำเพื่อแสดงข้อมูลเสริมหรือคำอธิบายประกอบที่อยู่เป็นรองกว่ากับเนื้อหาหลัก

แท็ก <s>

1<s>Strikethrough text</s>

• แท็ก <s> เป็นองค์ประกอบแบบอินไลน์ที่ใช้ขีดเส้นขีดฆ่าผ่านข้อความ

แท็ก <sub>

1H<sub>2</sub>O

• แท็ก <sub> เป็นองค์ประกอบอินไลน์ที่ใช้แสดงข้อความตัวห้อย

แท็ก <sup>

1E = mc<sup>2</sup>

• แท็ก <sup> เป็นองค์ประกอบอินไลน์ที่ใช้แสดงข้อความตัวยก

คุณสามารถติดตามบทความข้างต้นโดยใช้ Visual Studio Code บนช่อง YouTube ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย

YouTube Video