HTML Part - 05 - Semantic TAG என்றால் என்ன?

இந்த பதிவில் 

• Semantic TAG என்றால் என்ன?
• Semantic TAG இன் நன்மைகள் என்ன?
• Text Formatting செய்வதற்கு பயன்படுத்தப்படும் TAG யாவை? 

போன்றவற்றை  பார்ப்போம்

ஏற்கனவே எழுதப்பட்ட தொடரை பார்வையிட இங்கு கிளிக் செய்யவும்.

Semantic TAG என்றால் என்ன?

நாம்  ஏற்கனவே Text ஒன்றை Bold செய்வதற்கு b TAG இணை அறிந்து கொண்டோம்.அது போல் strong என்ற TAG உம் உள்ளது இதனை Web Browser இல் பார்வையிட்டால் இரண்டும் ஒன்று போல் தென்படும். ஆனால் அதனுடைய பயன்படு Text ஒன்றை Bold செய்வது அல்ல மாறாக குறித்த எழுத்துக்கு Important வழங்குவதே ஆகும்.

<b> This text is bold </b> <br> <br>

<strong> This text is important! </strong>

Heading ஒன்றை Web page இல் வழங்கும் போது Heading Tags (H1,H2,etc) இணையும் Paragraph ஒன்றை எழுதும் போது P tag இணையும் குறிப்பிட வேண்டும். மாறாக Word ஒன்றை பெரிதாக காட்ட  Heading TAG பயன்படுத்த கூடாது.

Semantic Element என்பது Web Browser இல் காட்சிப்படுத்தப்படும்  தோற்றத்தை குறிப்பிடுவது அல்ல. Web Page இல் நாம் வழங்கும் தகவலுக்கு பொருத்தமான Semantic Element இணை பயன்படுத்துவதாகும். 

Semantic Element ஆனது அதில் உள்ள Content இணை பிரதிபலிக்கும் வகையில் அமைந்திருக்கும்.

உதாரணம் நாம் ஏற்கனவே பார்த்த H1 தொடக்கம் H6 மற்றும்  P TAG ஆகியவை Semantic TAGஆகும்.

Semantic Element சில

• header
• footer
• article
• table
• form
• address
• details
• summary
• time

இன்னும் பல இருக்கின்றது,  அடுத்தடுத்த தொடரில் இந்த TAGS பற்றி அறிந்து கொள்வோம்.

Semantic TAG இன் நன்மைகள் என்ன?  

• Semantic Element ஆனது Web Page இல் காணப்டும் தகவல்களை தெளிவாக குறிப்பிடுவதால் Developer, Browser மற்றும் Search Engine ஆகியவை புரிந்து கொள்ள இலகுவாக அமையும்.
  
  
• Search Engine இற்கு Web Page இல் எவ்வாறான  Content உள்ளது என்பதை விளக்குவதற்கு  சிறப்பாக துணை புரியும்.
  
  
• தெளிவாக இதில் உள்ள விடயங்கள் குறிப்பிடப்பட்டிருப்பதால் வேறு Developer  குழப்பமடையாமல் Web Page இணை Maintain செய்வதற்கு இலகுவாக அமையும்.
  
  

Text Formatting செய்வதற்கு பயன்படுத்தப்படும் TAG யாவை? 

  

• i
  
  <i>This text is italic</i>
  
  
• Em
  
  <em>This text is emphasized</em>
  
  
• small
  
  <small>This is some smaller text.</small>
  
  
• del
  
  My favorite color is <del>blue</del> red.
  
  
• ins
  
  My favorite color is blue<ins>red</ins>.
  
  
• u
  
  My favorite color is blue<u>red</u>.
  
  
• sub
  
  This is _subscripted text.
  
  
• sup
  
  This is ^{superscripted} text.
  
  
• mark
  
  Do not forget to buy <mark>milk</mark> today.
  
  
• blockquote
  
  <blockquote align="justify">Video provides a powerful way to help you prove your point. When you click Online Video, you can paste in the embed code for the video you want to add. You can also type a keyword to search online for the video that best fits your document.</blockquote>
  

Web Browser இல் இவ்வாறு காட்சியளிக்கும்.

அடுத்த தொடரில், வீடியோ மூலம் இன்னும் பல புதிய TAG களை Body  இற்குல் பயன்படுத்தி பார்ப்போம்.இந்த தொடரை தொடர்ச்சியாக எழுத உங்கள் ஆதரவை (Like, Comment and Share) தாருங்கள்.

NimTech இன் WhatsApp குழுவில் இணைய இங்கு கிளிக் செய்யவும்

பிடித்திருந்தால் உங்கள் நண்பர்களுடன் Share செய்யுங்கள்.