HTML5 సమానతా కంపోనెంట్స్

సెమాంటిక్స్ (ప్రాచీన గ్రీకు మూలం నుండి) అనేది భాష అర్థాలను అధ్యయనం చేసే విధానం అని వర్ణించవచ్చు.

సెమాంటిక్ ఎలిమెంట్స్ అనేది సెమాంటిక్ కలిగిన ఎలిమెంట్స్.

సెమాంటిక్ ఎలిమెంట్స్ ఏమిటి?

సెమాంటిక్ ఎలిమెంట్స్ బ్రౌజర్లకు మరియు డెవలపర్లకు వారి అర్థాన్ని స్పష్టంగా వర్ణిస్తాయి.

నాన్-సెమాంటిక్ఎలిమెంట్ ఉదాహరణలు: <div> మరియు <span> - వారి కంటెంట్ను గురించి ఏ సమాచారం అందించబడదు.

సెమాంటిక్ఎలిమెంట్ ఉదాహరణలు: <form>, <table> మరియు <img> - వారి కంటెంట్ను స్పష్టంగా నిర్వచిస్తాయి.

బ్రౌజర్ మద్దతు

అవును అవును అవును అవును అవును

అన్ని ఆధునిక బ్రౌజర్లు HTML5 సెమాంటిక్ ఎలిమెంట్స్ ను మద్దతు ఇస్తాయి.

పాత బ్రౌజర్లను 'అజ్ఞాత ఎలిమెంట్స్' ప్రాసెస్‌చేయడానికి 'సహాయం' అంటండి.

ఈ చాప్టర్‌లో కలిగిన బ్రౌజర్లు మరింత తెలుసుకోవడానికి పాఠించండి.

HTML5 లో కొత్త సెమాంటిక్ ఎలిమెంట్స్

అనేక వెబ్‌సైట్లు గైడెనేషన్ నేవిగేషన్, హెడర్, ఫూటర్ వంటి HTML కోడ్స్ నిర్వహిస్తాయి, ఉదాహరణకు ఈ విధంగా:<div id="nav"> <div class="header"> <div id="footer">.

HTML5 పేజీ వివిధ భాగాలను నిర్వచించే కొత్త సెమాంటిక్ ఎలిమెంట్స్ ను అందిస్తుంది:

  • <figcaption>
  • <figure>
  • <footer>
  • <header>
  • <main>
  • <mark>
  • <nav>
  • <section>
  • <summary>
  • <time>

HTML5 సమానతా కంపోనెంట్స్

HTML5 సమానతా కంపోనెంట్స్

HTML5 <section> ఎలిమెంట్

<section> ఎలిమెంట్ డాక్యుమెంట్‌లోని భాగాన్ని నిర్వచిస్తుంది.

W3C యొక్క HTML పత్రం ప్రకారం: 'భాగం (section) అనేది ప్రధానంగా అంశం కలిగిన కంటెంట్ సమూహం, సాధారణంగా శీర్షికను కలిగింది.'

వెబ్‌సైట్ హోమ్‌పేజ్‌ను పరిచయం, కంటెంట్, సంప్రదింపు సమాచారం వంటి భాగాలుగా విభజించవచ్చు.

ఉదాహరణ

<section>
   <h1>WWF</h1>
   <p>ది వరల్డ్ వైడ్ ఫండ్ ఫర్ నేచర్ (WWF) ఉంది....</p>
</section>

మీరే ప్రయత్నించండి

HTML5 అర్టికల్ ఎలమెంట్

అర్టికల్ ఎలమెంట్ స్వతంత్రమైన స్వయం అంతర్భాగం నిర్వచిస్తుంది。

డాక్యుమెంట్లు తమను తాము అర్థం కలిగి ఉంటాయి మరియు సైట్ యొక్క ఇతర సమాచారం నుండి స్వతంత్రంగా పఠించబడవచ్చు。

అర్టికల్ ఎలమెంట్ ఉపయోగం కోసం:

  • ఫోరం
  • బ్లాగులు
  • వార్తలు

ఉదాహరణ


   <h1>విశ్వ వన్ ఫండ్ (WWF) ఏమి చేస్తుంది?</h1>
   <p>WWF యొక్క లక్ష్యం మా ప్రపంచం ప్రకృతి పర్యావరణం అణగారిన నిర్మూలనను ఆపడానికి ఉంది,</p>
  మరియు ప్రకృతితో సహకారంగా జీవించే భవిష్యత్తును నిర్మించండి.</p>
</article>

మీరే ప్రయత్నించండి

నివృత్తి సైమాన్ ఎలమెంట్లు

HTML5 పేరాన్ని నిర్వచించిన <article> ఎలమెంట్ పూర్తి సంబంధిత ఎలమెంట్ స్వయం అంతర్భాగం నిర్వచిస్తుంది。

సెక్షన్ ఎలమెంట్ సంబంధిత ఎలమెంట్ బ్లాక్లను నిర్వచించబడింది。

మనం ఈ నిర్వచనాన్ని ఉపయోగించి ఎలా ఎలమెంట్లను నివృత్తించాలి అని నిర్ణయించగలమా? లేదు, మనం కాదు!

ఇంటర్నెట్లో, మీరు <section> ఎలమెంట్లులో <article> ఎలమెంట్లును మరియు <article> ఎలమెంట్లులో <sections> ఎలమెంట్లును కనుగొంటారు。

మీరు <section> ఎలమెంట్లులో <section> ఎలమెంట్లును మరియు <article> ఎలమెంట్లులో <article> ఎలమెంట్లును కనుగొంటారు。

HTML5 హెడర్ ఎలమెంట్

హెడర్ ఎలమెంట్ డాక్యుమెంట్ లేదా భాగానికి హెడర్ నిర్వచిస్తుంది。

హెడర్ ఎలమెంట్ పరిచయం కలిగిన సమాచారం కంటైనర్ గా ఉపయోగించబడాలి。

ఒక డాక్యుమెంట్లో అనేక హెడర్ ఎలమెంట్లు ఉండవచ్చు。

ఈ ఉదాహరణలో ఒక వ్యాసానికి హెడర్ నిర్వచించబడింది:

ఉదాహరణ


   <header>
     <h1>విశ్వ వన్ ఫండ్ (WWF) ఏమి చేస్తుంది?</h1>
     <p>WWF యొక్క లక్ష్యం:</p>
   </header>
   <p>WWF యొక్క లక్ష్యం మా ప్రపంచం ప్రకృతి పర్యావరణం అణగారిన నిర్మూలనను ఆపడానికి ఉంది,</p>
  మరియు ప్రకృతితో సహకారంగా జీవించే భవిష్యత్తును నిర్మించండి.</p>
</article>

మీరే ప్రయత్నించండి

HTML5 ఫూటర్ ఎలమెంట్

ఫూటర్ ఎలమెంట్ డాక్యుమెంట్ లేదా భాగానికి ఫూటర్ నిర్వచిస్తుంది。

ఫూటర్ ఎలమెంట్ దాని అందించిన ఎలమెంట్లపై సమాచారం అందించాలి。

ఫూటర్లు సాధారణంగా డాక్యుమెంట్ రచయిత, కాపీరైట్ సమాచారం, ఉపయోగ నిబంధనల లింకులు, పరిచయ సమాచారం మొదలైన విషయాలను కలిగి ఉంటాయి。

ఒక డాక్యుమెంట్లో అనేక ఫూటర్ ఎలమెంట్లు ఉపయోగించవచ్చు。

ఉదాహరణ

<footer>
   <p>పోస్ట్ చేసినవాడు: హెగ్ రెఫ్స్నెస్</p>
   <p>పరిచయ సమాచారం: <a href="mailto:someone@example.com">
  <a href="mailto:someone@example.com">someone@example.com</a>.</p>
</footer>

మీరే ప్రయత్నించండి

హెచ్ఎంఎల్5 <nav> ఎలంమెంట్

<nav> ఎలంమెంట్ నావిగేషన్ లింక్ సెట్ని నిర్వచిస్తుంది.

<nav> ఎలంమెంట్ పెద్ద నావిగేషన్ లింక్ బుక్ నిర్వచించడానికి ఉద్దేశించబడింది. అయితే, డాక్యుమెంట్లో అన్ని లింక్లు <nav> ఎలంమెంట్లో ఉండకూడదు!

ఉదాహరణ

<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>

మీరే ప్రయత్నించండి

హెచ్ఎంఎల్5 <aside> ఎలంమెంట్

<aside> ఎలంమెంట్ పేజీ ప్రధాన కంటెంట్తో వ్యతిరేకంగా ఉన్న కొన్ని కంటెంట్స్ (ఉదాహరణకు సైడ్బార్).

aside కంటెంట్ చుట్టూ ఉన్న కంటెంట్తో సంబంధించి ఉండాలి.

ఉదాహరణ

<p>నా కుటుంబం మరియు నేను ఈ గ్రీష్మకాలంలో ఎప్కాట్ సెంటర్ సందర్శించాము.</p>

మీరే ప్రయత్నించండి

హెచ్ఎంఎల్5 <figure> మరియు <figcaption> ఎలంమెంట్స్

పుస్తకాలు మరియు పత్రికల్లో, చిత్రాలతో కలిసి ఉండే పేరులు సాధారణంగా ఉంటాయి.

క్యాప్షన్ యొక్క పని చిత్రానికి కనిపించే వివరణను జోడించడం ఉంటుంది.

హెచ్ఎంఎల్5 ద్వారా, చిత్రాలు మరియు పేరులు కలిసి ఉంచబడవచ్చు <figure> ఎలంమెంట్ లో:

ఉదాహరణ

<figure>
   <img src="pic_mountain.jpg" alt="The Pulpit Rock" width="304" height="228">
   <figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption>
</figure>

మీరే ప్రయత్నించండి

<img> ఎలంమెంట్ చిత్రాన్ని నిర్వచిస్తుంది.<figcaption> ఎలంమెంట్ గలుగుతుంది పేరు నిర్వచిస్తుంది.

ఎందుకు హెచ్ఎంఎల్5 ఎలంమెంట్స్ ఉపయోగించాలి?

హెచ్ఎంఎల్4 ఉపయోగించినప్పుడు, డెవలపర్లు వారి మనస్సులో ఉన్న అట్రిబ్యూట్ పేర్లను ఉపయోగించి పేజీ ఎలంమెంట్స్ స్టైల్స్ అమర్చతారు:

హెడర్, టాప్, బోటమ్, ఫూటర్, మెనూ, నావిగేషన్, మేన్, కంటైనర్, కంటెంట్, ఆర్టికల్, సైడ్బార్, టాప్నేవ్, ...

如此，浏览器便无法识别正确的网页内容。

而通过 HTML5 元素，比如：

HTML5 中的语义元素

下面列出了以字母顺序排列的 HTML5 新语义元素。

这些链接指向完整的 HTML 参考手册。

标签 描述
定义文章。
定义页面内容以外的内容。
定义用户能够查看或隐藏的额外细节。
<figcaption> <figure> అంశం యొక్క పేరును నిర్వచించండి.
<figure> స్వయంసంకేతికతలు, విగ్రహాలు, చిత్రాలు, కోడ్ జాబితాలు వంటి ప్రత్యేక అంశాలను నిర్వచించండి.
<footer> డాక్యుమెంట్ లేదా భాగం యొక్క ఫూటర్ ను నిర్వచించండి.
<header> డాక్యుమెంట్ లేదా భాగం యొక్క హెడర్ ను నిర్వచించండి.
<main> డాక్యుమెంట్ యొక్క ప్రధాన అంశాన్ని నిర్వచించండి.
<mark> ముఖ్యమైన లేదా గుర్తింపును కలిగించిన టెక్స్టును నిర్వచించండి.
<nav> నేవిగేషన్ లింకులను నిర్వచించండి.
<section> డాక్యుమెంట్ లో భాగాలను నిర్వచించండి.
<summary> డాక్యుమెంట్ లో దృశ్యమయంతో ఉన్న <details> అంశం పేరును నిర్వచించండి.
<time> తేదీ/సమయాన్ని నిర్వచించండి.