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>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -