HTML - แท็กวลี
แท็กวลีได้รับการ desicolgned สำหรับวัตถุประสงค์เฉพาะแม้ว่าจะแสดงในลักษณะเดียวกันกับแท็กพื้นฐานอื่น ๆ เช่น <b>, <i>, <pre>และ <tt>คุณเคยเห็นในบทที่แล้ว บทนี้จะนำคุณไปสู่แท็กวลีที่สำคัญทั้งหมดดังนั้นเรามาเริ่มดูทีละแท็ก
ข้อความที่เน้น
สิ่งที่ปรากฏภายใน <em>...</em> องค์ประกอบจะแสดงเป็นข้อความที่เน้น
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<title>Emphasized Text Example</title>
</head>
<body>
<p>The following word uses an <em>emphasized</em> typeface.</p>
</body>
</html>สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -
ข้อความที่ทำเครื่องหมาย
ทุกสิ่งที่ปรากฏภายใน <mark>...</mark> จะแสดงเป็นเครื่องหมายด้วยหมึกสีเหลือง
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<title>Marked Text Example</title>
</head>
<body>
<p>The following word has been <mark>marked</mark> with yellow</p>
</body>
</html>สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -
ข้อความที่ชัดเจน
สิ่งที่ปรากฏภายใน <strong>...</strong> องค์ประกอบจะแสดงเป็นข้อความสำคัญ
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<title>Strong Text Example</title>
</head>
<body>
<p>The following word uses a <strong>strong</strong> typeface.</p>
</body>
</html>สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -
อักษรย่อ
คุณสามารถย่อข้อความโดยใส่ไว้ในแท็กเปิด <abbr> และปิด </abbr> หากมีแอตทริบิวต์ title ต้องมีคำอธิบายทั้งหมดนี้และไม่มีอะไรอื่น
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<title>Text Abbreviation</title>
</head>
<body>
<p>My best friend's name is <abbr title = "Abhishek">Abhy</abbr>.</p>
</body>
</html>สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -
องค์ประกอบอักษรย่อ
<acronym> องค์ประกอบช่วยให้คุณระบุว่าข้อความระหว่างแท็ก <acronym> และ </acronym> เป็นตัวย่อ
ในปัจจุบันเบราว์เซอร์หลักไม่ได้เปลี่ยนลักษณะที่ปรากฏของเนื้อหาขององค์ประกอบ <acronym>
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<title>Acronym Example</title>
</head>
<body>
<p>This chapter covers marking up text in <acronym>XHTML</acronym>.</p>
</body>
</html>สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -
ทิศทางข้อความ
<bdo>...</bdo> องค์ประกอบย่อมาจาก Bi-Directional Override และใช้เพื่อแทนที่ทิศทางข้อความปัจจุบัน
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<title>Text Direction Example</title>
</head>
<body>
<p>This text will go left to right.</p>
<p><bdo dir = "rtl">This text will go right to left.</bdo></p>
</body>
</html>สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -
เงื่อนไขพิเศษ
<dfn>...</dfn>องค์ประกอบ (หรือองค์ประกอบนิยาม HTML) ช่วยให้คุณระบุว่าคุณกำลังแนะนำคำพิเศษ การใช้งานคล้ายกับคำตัวเอียงในย่อหน้า
โดยทั่วไปคุณจะใช้องค์ประกอบ <dfn> ในครั้งแรกที่คุณแนะนำคำสำคัญ เบราว์เซอร์ล่าสุดแสดงเนื้อหาขององค์ประกอบ <dfn> ในแบบอักษรตัวเอียง
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<title>Special Terms Example</title>
</head>
<body>
<p>The following word is a <dfn>special</dfn> term.</p>
</body>
</html>สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -
ข้อความอ้างอิง
เมื่อคุณต้องการอ้างอิงข้อความจากแหล่งอื่นคุณควรใส่ไว้ระหว่าง <blockquote>...</blockquote> แท็ก
ข้อความภายในองค์ประกอบ <blockquote> มักจะเยื้องจากขอบด้านซ้ายและด้านขวาของข้อความโดยรอบและบางครั้งใช้แบบอักษรตัวเอียง
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<title>Blockquote Example</title>
</head>
<body>
<p>The following description of XHTML is taken from the W3C Web site:</p>
<blockquote>XHTML 1.0 is the W3C's first Recommendation for XHTML,following on
from earlier work on HTML 4.01, HTML 4.0, HTML 3.2 and HTML 2.0.</blockquote>
</body>
</html>สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -
ใบเสนอราคาสั้น ๆ
<q>...</q> องค์ประกอบถูกใช้เมื่อคุณต้องการเพิ่มเครื่องหมายคำพูดคู่ภายในประโยค
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<title>Double Quote Example</title>
</head>
<body>
<p>Amit is in Spain, <q>I think I am wrong</q>.</p>
</body>
</html>สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -
การอ้างอิงข้อความ
หากคุณกำลังอ้างอิงข้อความคุณสามารถระบุแหล่งที่มาที่วางไว้ระหว่างช่องเปิด <cite> แท็กและการปิด </cite> แท็ก
ตามที่คุณคาดหวังในสิ่งพิมพ์สิ่งพิมพ์เนื้อหาขององค์ประกอบ <cite> จะแสดงเป็นข้อความตัวเอียงตามค่าเริ่มต้น
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<title>Citations Example</title>
</head>
<body>
<p>This HTML tutorial is derived from <cite>W3 Standard for HTML</cite>.</p>
</body>
</html>สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -
รหัสคอมพิวเตอร์
รหัสการเขียนโปรแกรมใด ๆ ที่จะปรากฏบนเว็บเพจควรอยู่ภายใน <code>...</code>แท็ก โดยปกติเนื้อหาขององค์ประกอบ <code> จะถูกนำเสนอในแบบอักษรที่เว้นวรรคเช่นเดียวกับโค้ดในหนังสือการเขียนโปรแกรมส่วนใหญ่
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<title>Computer Code Example</title>
</head>
<body>
<p>Regular text. <code>This is code.</code> Regular text.</p>
</body>
</html>สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -
ข้อความแป้นพิมพ์
เมื่อคุณกำลังพูดถึงคอมพิวเตอร์หากคุณต้องการบอกให้ผู้อ่านป้อนข้อความคุณสามารถใช้ไฟล์ <kbd>...</kbd> องค์ประกอบเพื่อระบุสิ่งที่ควรพิมพ์ดังตัวอย่างนี้
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<title>Keyboard Text Example</title>
</head>
<body>
<p>Regular text. <kbd>This is inside kbd element</kbd> Regular text.</p>
</body>
</html>สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -
ตัวแปรการเขียนโปรแกรม
โดยปกติองค์ประกอบนี้จะใช้ร่วมกับไฟล์ <pre> และ <code> องค์ประกอบเพื่อระบุว่าเนื้อหาขององค์ประกอบนั้นเป็นตัวแปร
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<title>Variable Text Example</title>
</head>
<body>
<p><code>document.write("<var>user-name</var>")</code></p>
</body>
</html>สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -
เอาต์พุตโปรแกรม
<samp>...</samp> องค์ประกอบระบุผลลัพธ์ตัวอย่างจากโปรแกรมและสคริปต์เป็นต้นอีกครั้งส่วนใหญ่จะใช้เมื่อจัดทำเอกสารเกี่ยวกับการเขียนโปรแกรมหรือการเข้ารหัสแนวคิด
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<title>Program Output Example</title>
</head>
<body>
<p>Result produced by the program is <samp>Hello World!</samp></p>
</body>
</html>สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -
ข้อความที่อยู่
<address>...</address> องค์ประกอบใช้เพื่อบรรจุที่อยู่ใด ๆ
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<title>Address Example</title>
</head>
<body>
<address>388A, Road No 22, Jubilee Hills - Hyderabad</address>
</body>
</html>สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -