19 แท็ก HTML ที่ใช้กันทั่วไปที่ควรรู้สำหรับผู้เริ่มต้น
เผยแพร่แล้ว: 2022-12-08หากคุณต้องการเป็นนักพัฒนาส่วนหน้า หนึ่งในคำแนะนำทั่วไปที่คุณจะได้รับคือการเรียนรู้ HTML Hypertext Markup Language หรือเรียกโดยย่อว่า HTML เป็นรากฐานของเว็บเพจส่วนใหญ่
HTML สร้างขึ้นจากสิ่งต่าง ๆ เช่น แท็ก แอตทริบิวต์ และองค์ประกอบ โฟกัสของเราจะเป็นแท็ก HTML เราใช้แท็ก HTML เพื่อบอกเบราว์เซอร์ถึงวิธีจัดโครงสร้างเนื้อหาเป็นส่วนหัว ชื่อเรื่อง ย่อหน้า รูปภาพ และอื่นๆ อีกมากมาย แท็ก HTML เป็นเหมือนคำหลักที่กำหนดวิธีที่เบราว์เซอร์จะแสดงหรือจัดรูปแบบเนื้อหา
เซิร์ฟเวอร์อ่านแท็ก HTML จากบนลงล่าง ไม่มีการจำกัดจำนวนแท็ก HTML ที่หน้าเว็บควรมี
- แท็ก HTML ทั้งหมดอยู่ใน
<> - ทุกแท็ก HTML ทำหน้าที่ต่างกัน
- แท็ก HTML ส่วนใหญ่เปิด
<tag>และปิด</tag>
แท็ก HTML เทียบกับองค์ประกอบ HTML เทียบกับแอตทริบิวต์ HTML
คนส่วนใหญ่ใช้คำว่าแท็กและองค์ประกอบ HTML แทนกันได้ แต่พวกเขาเหมือนกันหรือไม่? ในทางเทคนิคแล้ว องค์ประกอบ HTML และแท็ก HTML นั้นแตกต่างกัน
แท็ก HTML กำหนดองค์ประกอบ HTML เพื่อให้บรรลุเป้าหมายนี้ เนื้อหาจะถูกรวมโดยใช้ชื่อแท็กเปิดและปิดที่ตรงกับเนื้อหาของแท็กที่เรากำลังทำงานด้วย
นี่คือตัวอย่างขององค์ประกอบ HTML:
<p> This is a paragraph </p><p> เป็นตัวอย่างของแท็ก HTML
แอตทริบิวต์ HTML ให้ข้อมูลเพิ่มเติมเกี่ยวกับองค์ประกอบ HTML ในเอกสาร พบแอตทริบิวต์ภายในองค์ประกอบ HTML
นี่คือตัวอย่างของแอตทริบิวต์ HTML
<button id=" SubmitOrder" class="btn">Order</button>แท็ก HTML ที่ทุกคนควรรู้
HTML ในฐานะภาษามาร์กอัปได้รับการพัฒนามาหลายปีนับตั้งแต่ Tim Berners-Lee เปิดตัวในปี 1993 HTML เวอร์ชันแรกมี 18 แท็ก แท็กใหม่จะถูกเพิ่มใน HTML ทุกรุ่น การอัปเกรดล่าสุดคือ HTML5 ในปี 2014
การเปรียบเทียบอย่างใกล้ชิดของ HTML และ HTML5 แสดงให้เห็นว่าอย่างหลังมีแท็กความหมาย เช่น <บทความ> <ส่วนหัว> และ <ส่วนท้าย> ที่อธิบายเนื้อหาได้อย่างชัดเจน ขณะนี้เรามีแท็ก HTML มากกว่า 100 รายการ ต่อไปนี้เป็นแท็กยอดนิยมบางส่วนที่คุณควรทราบ:
<!DOCTYPE>
DOCTYPE ไม่ใช่แท็กทางเทคนิค แต่เป็นการประกาศที่บอกเบราว์เซอร์ว่าไฟล์ประเภทใดที่จะโหลด แท็กนี้บอกเบราว์เซอร์ถึงประเภทของ HTML ที่จะถูกโหลด
ใน HTML5 คุณสามารถประกาศไฟล์ของคุณเป็น
<!DOCTYPE html>หรือ
<!doctype html>หมายเหตุ: การประกาศไม่มีแท็กปิดและไม่คำนึงถึงตัวพิมพ์เล็กและใหญ่
<html> </html>
แท็ก <html> ….. </html> จะอยู่หลังแท็ก DOCTYPE แท็กนี้กำหนดเอกสารเป็นเว็บเพจ ทุกองค์ประกอบอื่น ๆ จะซ้อนอยู่ภายใน แท็ก HTML ระบุจุดเริ่มต้นและจุดสิ้นสุดของเอกสาร HTML
แท็ก <html> แสดงเป็น;
<html>Content</html><หัว</หัว>
ส่วนหัวของเอกสาร HTML จะแสดงด้วยแท็ก <head> แท็กนี้อยู่ภายในแท็ก <html> และให้ข้อมูลทั่วไปเกี่ยวกับหน้าเว็บ
แท็ก <head> มีแท็กอื่นๆ ที่ระบุเฉพาะของหน้าเว็บ เช่น ชื่อเรื่องของหน้าและผู้เขียน เนื้อหาของแท็กนี้จะไม่แสดงบนหน้าเว็บ
นี่คือไวยากรณ์ของแท็ก <head>
<head> …….. </head><title></title>
แท็ก <title> ประกาศชื่อเรื่องของเว็บเพจ แท็กนี้อยู่ภายในแท็ก <head> แท็ก <title> จะปรากฏบนแถบชื่อเรื่องหรือแท็บในหน้าต่างเบราว์เซอร์ แต่ไม่ปรากฏในหน้าเว็บจริง
ไวยากรณ์สำหรับแท็ก <title> คือ;
<title>HTML Tags for Beginners</title>เมื่ออยู่ในแท็ก <head> จะปรากฏเป็น;
<head> <title>HTML Tags for Beginners</title> </head><ร่างกาย> </body>
แท็ก <body> แสดงเนื้อหาที่มองเห็นได้ทั้งหมดบนหน้าเว็บ รูปภาพ ลิงก์ ข้อความธรรมดา วิดีโอ และอื่นๆ สามารถพบได้ในแท็ก <body> และ </body>
แท็กอื่นๆ บางส่วนที่คุณจะพบภายในเนื้อหา ได้แก่ แท็ก <p> สำหรับย่อหน้า แท็ก <a> สำหรับรูปภาพ แท็ก <strong> สำหรับข้อความตัวหนา และแท็ก <ol> สำหรับรายการลำดับ เป็นต้น
ไวยากรณ์สำหรับแท็ก <body> คือ;
<body> Content </body><h1> ถึง <h6> แท็ก
สามารถมีแท็กหัวเรื่องได้สูงสุด 6 แท็กในเอกสาร HTML แต่ละแท็กจะแสดงด้วยตัวเลขตั้งแต่ 1 ถึง 6 เช่น <h1>, <h2>, <h3>, <h4>, <h5> และ <h6>
H1 คือแท็กส่วนหัวที่ใหญ่ที่สุด ในขณะที่ H6 คือแท็กที่เล็กที่สุด
ในเอกสาร HTML แท็กหัวเรื่องสามารถแสดงได้ดังนี้:
<h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6>แท็ก <h1> ถึง <h6> อยู่ภายในแท็ก <body>
ตัวอย่างเช่น แท็ก ,<H1> จะถูกล้อมรอบด้วย;
<body> <h1> This is heading 1 >/h1> </body><p> </p>
<p> </p> หรือเพียงแค่แท็กย่อหน้าจะใช้เมื่อคุณต้องการจัดโครงสร้างเนื้อหาลงในย่อหน้า การกดปุ่ม 'Enter' ในเอกสาร HTML ในโปรแกรมแก้ไขโค้ดจะไม่สร้างย่อหน้าใหม่
หากคุณต้องการมากกว่าหนึ่งย่อหน้า คุณต้องใช้แท็ก <p> </p> หลายแท็กในเอกสารของคุณ แท็กย่อหน้าควรอยู่ในแท็ก <body >
ไวยากรณ์สำหรับแท็กย่อหน้าคือ
<p> ….some content here….</p>หากคุณต้องการให้มี 4 ย่อหน้า รหัสของคุณจะมีโครงสร้างดังนี้
<body> <p>Content for first paragraph.</p> <p>Content for the second paragraph.</p> <p>Content for the fourth paragraph.</p> </body><b> </b>
<b> </b> หรือแท็ก ตัวหนา จะจัดรูปแบบเนื้อหาระหว่างส่วนเปิด <b> และส่วนปิด </b> ให้เป็นตัวหนา
แท็กตัวหนาสามารถอยู่ระหว่างส่วนหัว เช่น H1 หรือแม้แต่ภายในแท็กย่อหน้า
นี่คือตัวอย่างของแท็กตัวหนา
<b> Bold Tag </b>วลี 'แท็กตัวหนา' จะปรากฏเป็นตัวหนา
<h1> Keeping it cool, <b> Fifth edition </b>, the winners edition </h1>ฉบับที่ห้า จะเป็นตัวหนา
<i> </i>
แท็กตัวเอียง แสดงโดย <i> ทำให้ข้อความภายในแท็กเป็นตัวเอียง
เช่น ถ้าเรามี
<i> These are italics </i>คำว่า ' ตัวเอียงเหล่านี้ ' จะปรากฏเป็นตัวเอียง
<u> </u>
แท็กขีดเส้นใต้หรือ <u> ใช้เมื่อคุณต้องการขีดเส้นใต้ข้อความบางส่วนในเอกสาร HTML
ตัวอย่างเช่น ถ้าเรามี;
<u> underline these words </u>วลีระหว่างแท็กจะถูกขีดเส้นใต้
<center> </center>
แท็ก Center <center> ใช้เพื่อจัดกึ่งกลางเนื้อหาในเอกสาร HTML
ตัวอย่างเช่น ถ้าเรามีแท็ก h2 ที่เขียนเป็น <h2> Centering Content in HTML </h2> เราสามารถจัดกึ่งกลางได้ดังนี้
<center> <h2> Centering Content in HTML </h2> </center><span></span>
แท็กช่วง <span> เป็นคอนเทนเนอร์แบบอินไลน์ทั่วไปที่ไม่ได้มาพร้อมกับสไตล์เริ่มต้น คุณสามารถใช้แท็ก span เพื่อจัดกลุ่มข้อความที่คุณต้องการจัดรูปแบบ
คุณสามารถขยายแท็กภายในแท็กอื่นๆ เช่น หัวเรื่องและย่อหน้า
<h2> Learn HTML <span> from experts </span> and be ready for the market </h2> <p> Learn HTML <span> from experts </span> and be ready for the market </p><div></div>
แท็กแบ่ง ซึ่งเรียกโดยย่อว่า div เป็นแท็กที่ให้คุณจัดกลุ่มแท็กต่างๆ ในเอกสาร HTML
แท็ก div สามารถกำหนด 'คลาส' เพื่อเพิ่มรูปแบบภายนอกโดยใช้ CSS
นี่คือวิธีการแสดง div ที่ล้อมรอบแท็ก h1, h2 และย่อหน้า
<div > <h1> Learn HTML </h1> <h2> HTML Tags </h2> <p> HTML is a markup language……… </p> </div><em></em>
การเน้นหรือแท็ก <em> ใช้เพื่อเน้นคำบางคำในเอกสาร HTML
เนื้อหาที่อยู่ระหว่างแท็ก <em> จะมีลักษณะเอียงหรือเอียง
เนื้อหาที่เน้นภายในย่อหน้าสามารถปรากฏในโปรแกรมแก้ไขรหัสจะปรากฏเป็น;
<p> The meeting will start at <em> 0800 hrs </em>, please keep time </p><sup></sup>
<sup> หรือแท็กตัวยกช่วยให้ข้อความที่ล้อมรอบอยู่เหนือส่วนที่เหลือ ตัวอย่างที่สมบูรณ์แบบคือเมื่อคุณต้องการยกกำลังสองของจำนวน X และแสดงค่านั้นทางคณิตศาสตร์เพื่อให้ X 2 แก่คุณ
ไวยากรณ์สำหรับ <sup> ภายในแท็กย่อหน้าจะเป็น;
<H1> Harveys <sup>TM </sup> Company Limited </H1><sub></sub>
ตัวห้อยหรือแท็ก <sub> อยู่ตรงข้ามกับแท็กตัวยก เนื้อหาที่อยู่ในแท็ก <sub> จะปรากฏใต้บรรทัดข้อความปกติ ตัวอย่างที่สมบูรณ์แบบคือเมื่อเขียนสูตรเคมีของน้ำเป็น H 2 0
ไวยากรณ์สำหรับแท็กห้อยจะเป็น;
Remember that H <sub> 2 </sub> 0 is the chemical formula for water<br>
<br> เป็นแท็กปิดตัวเองที่หมายถึงการหยุดพัก เนื้อหาทั้งหมดหลัง <br> จะขึ้นบรรทัดใหม่
ไวยากรณ์สำหรับ <br> ภายในย่อหน้าจะเป็น;
<p> HTML is the abbreviation of Hypertext Markup Language <br> There has been an ongoing debate as to whether it is a programming language or not <br> However, we cannot downplay its importance <br> HTML has been used in more than 95% of websites today </p><ol></ol> และ <li> </li>
แท็กรายการที่เรียงลำดับหรือ <ol> ต้องใช้กับแท็กอื่น เช่น <li>
ทั้งสองสามารถปรากฏบนโปรแกรมแก้ไขรหัสเป็น;
<ol> <li> Asia </li> <li> Africa </li> <li> Europe </li> </ol>เมื่อแสดงผลบนเบราว์เซอร์ เนื้อหาจะปรากฏเป็นตัวเลข
<img src=””/>
คุณอาจต้องการเพิ่มรูปภาพเพื่อดึงดูดสายตาหรือแม้แต่โลโก้ แท็กรูปภาพที่ปิดเอง <img src=””/> มีประโยชน์ในกรณีเช่นนี้
ไวยากรณ์สำหรับแท็กรูปภาพจะเป็น;
<img src=“https://cdn.pixabay.com/photo/2015/08/19/15/44/seo-896175_960_720.png”/>เนื้อหาที่อยู่ในเครื่องหมายคำพูดแสดงถึง URL ต้นทาง
ห่อ
มีแท็ก HTML มากกว่า 100 แท็ก แต่ด้านบนเป็นแท็กที่คุณควรรู้ในฐานะผู้เริ่มต้น โปรแกรมแก้ไขโค้ดส่วนใหญ่รองรับ HTML ดังนั้นคุณจึงมั่นใจได้ว่าคุณจะไม่ผิดพลาดเมื่อคุณเริ่มเรียนรู้