సెమాంటిక్ HTMLను పరిచయం చేయడానికి ముందు, డెవలపర్లు కంటెంట్‌ని నిర్వహించడానికి divలను ఉపయోగించారు. దైవిక అంశాలకు వాటికవే అర్థం లేదు. వారు శైలులను వర్తింపజేయడానికి మరియు కంటెంట్‌ను నిర్వహించడానికి మాత్రమే మార్గాన్ని అందిస్తారు.
సెమాంటిక్ అనే పదానికి అర్థం అర్థానికి సంబంధించినది. సెమాంటిక్ HTML మూలకాలు వాటి కంటెంట్ యొక్క ప్రయోజనాన్ని వివరిస్తాయి. అవి డెవలపర్లు, వినియోగదారులు, శోధన ఇంజిన్‌లు మరియు సహాయక సాంకేతికతలకు అర్థాన్ని అందిస్తాయి. మీ తదుపరి ప్రాజెక్ట్‌లో మీరు ఉపయోగించగల ప్రసిద్ధ సెమాంటిక్ HTML ట్యాగ్‌ల జాబితా ఇక్కడ ఉంది.
divs అంటే ఏమిటి?
HTMLలో, div (డివిజన్) మూలకం బ్లాక్-లెవల్ కంటైనర్. మీరు వెబ్ పేజీలోని విభాగాలుగా HTML మూలకాలను సమూహపరచడానికి divని ఉపయోగిస్తారు.
divs కంటే సెమాంటిక్ HTML మూలకాలను ఉపయోగించడం వల్ల కలిగే ప్రయోజనాలు
HTML5 కోడ్‌ని సులభంగా చదవడానికి సెమాంటిక్ HTML మూలకాలను ప్రవేశపెట్టింది. సెమాంటిక్ మూలకాలు వెబ్ కంటెంట్‌కు అర్థాన్ని మరియు నిర్మాణాన్ని అందిస్తాయి.
వారు మీ కోడ్‌ని ఇతర డెవలపర్‌లకు అర్థమయ్యేలా చేస్తారు. సెర్చ్ ఇంజన్‌లు మీ కంటెంట్‌ను కనుగొనడం మరియు మీ సైట్‌కి ట్రాఫిక్‌ని నడపడం కూడా సులభతరం చేస్తాయి. మీ HTML మరియు CSS ప్రాజెక్ట్‌లలో మీరు ఉపయోగించగల కొన్ని అర్థ అంశాలు ఇక్కడ ఉన్నాయి.
1. <హెడర్>
<header> ట్యాగ్ పత్రంలోని హెడర్ విభాగాన్ని నిర్వచిస్తుంది. సాధారణంగా, ఇది సైట్ యొక్క లోగో, నావిగేషన్ మరియు పేజీ శీర్షికను కలిగి ఉంటుంది. ఇది వెబ్‌పేజీ ఎగువన కనిపించే విభాగం. మీరు మీ అవసరానికి అనుగుణంగా హెడర్‌ను అనుకూలీకరించవచ్చు.
2. <nav>
<nav> ట్యాగ్ వెబ్‌సైట్ కోసం నావిగేషన్ లింక్‌లను కలిగి ఉంది. ఇవి మెనూలు, విషయాల పట్టికలు లేదా సూచికలు కావచ్చు. ఇది సాధారణంగా <heading> ట్యాగ్‌లో ఉంచబడుతుంది.
మీరు మీ వెబ్‌పేజీలో <nav> మూలకాలను సమలేఖనం చేయడానికి CSS Flexbox వంటి CSS లేఅవుట్ మోడల్‌ని ఉపయోగించవచ్చు.
3. <ప్రధాన>
<main> ట్యాగ్ వెబ్ పేజీ యొక్క ప్రధాన కంటెంట్‌ను కలిగి ఉంది. ఇది హెడర్, సైడ్‌బార్ మరియు ఫుటర్ నుండి కంటెంట్‌ను వేరు చేస్తుంది. ప్రధాన <body> విభాగం యొక్క ప్రధాన కంటెంట్‌ను సూచిస్తుంది.
4. <వ్యాసం>
పత్రం లేదా వెబ్‌సైట్‌లో స్వీయ-నియంత్రణ విభాగాలను నిర్వచించడానికి <article> ట్యాగ్‌ని ఉపయోగించండి. ఉదాహరణకు, మీరు బ్లాగ్ పోస్ట్‌లు, మ్యాగజైన్‌లు లేదా ఉత్పత్తి కార్డ్‌లను సృష్టించడానికి వాటిని ఉపయోగించవచ్చు. <article> మూలకం కథనాలు, విభాగాలు మరియు శీర్షికలతో సహా ఇతర అంశాలను చేర్చగలదు. పరివేష్టిత అంశాలు వ్యాసం యొక్క అంశానికి సంబంధించినవిగా ఉండాలి.
5. <ప్రక్కన>
<aside> ట్యాగ్ ప్రధాన కంటెంట్‌కు సంబంధించిన కంటెంట్‌ను కలిగి ఉంది. కోట్‌లు, కామెంట్‌లు లేదా షౌట్-అవుట్‌ల కోసం సైడ్‌బార్‌ను రూపొందించడానికి ఈ ట్యాగ్‌ని ఉపయోగించండి. <aside> రీడర్ తప్పిపోయిన సమాచారాన్ని హైలైట్ చేస్తుంది. ఇది మిగిలిన కంటెంట్ నుండి భిన్నంగా ఉంటుంది.
6. <section>
<section> మూలకం నిర్దిష్ట సెమాంటిక్ మూలకాన్ని కలిగి లేని పేజీలో కొంత భాగాన్ని కలిగి ఉంది. విభాగాలు కంటెంట్‌ను ప్రదర్శించడానికి మరియు ఇతర HTML మూలకాలను చేర్చడానికి శీర్షికను కలిగి ఉంటాయి. <section> అనేది పుస్తకం లేదా బ్లాగ్‌లోని అధ్యాయాలు వంటి వెబ్‌పేజీలోని భాగాలను సూచిస్తుంది.
7. <Figure>
<figure> మూలకం ఇమేజ్‌లు లేదా రేఖాచిత్రాల వంటి స్వీయ-నియంత్రణ చిత్రాలను జతచేస్తుంది. ఈ చిత్రాలు ప్రధాన పేజీలోని కంటెంట్‌ను సూచిస్తాయి. <figcaption> మూలకం ద్వారా పేర్కొన్న శీర్షికతో బొమ్మలు ఉంటాయి. <figcaption> చిత్రం దేనికి సంబంధించినదో వివరిస్తుంది. <figure>, <figcaption> మరియు కంటెంట్ ఒక ఎంటిటీని సూచిస్తాయి.
8. <ఫుటర్>
<footer> HTML మూలకం వెబ్‌పేజీ దిగువన సమాచారాన్ని జతచేస్తుంది. ఇది <header> మూలకానికి వ్యతిరేకం. <footer> పేజీ యజమాని గురించిన సమాచారాన్ని కలిగి ఉంటుంది. ఇది కాపీరైట్ డేటా లేదా అదనపు సైట్ సమాచారానికి లింక్‌లను కలిగి ఉంటుంది.
సెమాంటిక్ HTML మూలకాలను ఎందుకు ఉపయోగించాలి?
సెమాంటిక్ HTML మూలకాల ఉపయోగం కోడ్‌కు సందర్భాన్ని ఇస్తుంది. కోడ్‌ని చూసే ఎవరైనా సులభంగా అర్థం చేసుకోగలరు. ట్యాగ్‌లు అంశాలను స్టైల్ చేయడం మరియు ప్రాజెక్ట్‌లలో సహకరించడం సులభం చేస్తాయి.
మీరు ఫ్రంటెండ్ లైబ్రరీలు మరియు ఫ్రేమ్‌వర్క్‌లతో సెమాంటిక్ HTMLని ఉపయోగించవచ్చు. చాలా ఆధునిక వెబ్ బ్రౌజర్‌లు సాంప్రదాయ మూలకాల కంటే సెమాంటిక్ HTML మూలకాలను ఇష్టపడతాయి. సెమాంటిక్ HTMLని ఉపయోగించడం ప్రారంభించండి మరియు మీ కోడ్ ఆధునికంగా, చదవగలిగేలా మరియు ప్రదర్శించదగినదిగా కనిపించేలా చూడండి.
వెబ్ డిజైన్ యొక్క డిమాండ్లలో మెరుగైన వెబ్ యాక్సెసిబిలిటీ ఎక్కువగా ఉంటుంది. అయితే అన్ని ప్రధాన బ్రౌజర్‌ల కోసం బహుళ పరికర అనుకూలతతో సైట్‌ను ఆప్టిమైజ్ చేయడం సరిపోదా? మీరు Google లైట్‌హౌస్‌ని ఉపయోగించి మీ వెబ్‌సైట్ పనితీరు, చేరుకోవడం, ఉత్తమ అభ్యాసాలు మరియు SEOని సులభంగా కొలవవచ్చు. కాబట్టి రీచ్ ఎందుకు ముఖ్యం?
CDC (సెంటర్స్ ఫర్ డిసీజ్ కంట్రోల్ అండ్ ప్రివెన్షన్) ప్రకారం, 60 మిలియన్ల కంటే ఎక్కువ మంది అమెరికన్లు వైకల్యంతో జీవిస్తున్నారు. వెబ్ కంటెంట్ యాక్సెసిబిలిటీ మార్గదర్శకాలను అనుసరించడం ద్వారా, మీరు యాక్సెస్ చేయగల వెబ్‌సైట్‌ను రూపొందించడానికి దోహదపడే కొన్ని ప్రారంభ ఆలోచనలను అందించవచ్చు. మీరు HTML మరియు CSSని ఉపయోగించి వెబ్ యాక్సెసిబిలిటీని ప్రారంభించడానికి కావలసినవన్నీ ఇక్కడ ఉన్నాయి.
సరైన సెమాంటిక్స్‌తో స్ట్రక్చర్డ్ HTML
వెబ్‌సైట్‌ను దృశ్యమానంగా ఆకర్షణీయంగా చేస్తున్నప్పుడు, సహాయక సాంకేతిక వినియోగదారులు గందరగోళానికి గురికాకూడదు. WordPress వంటి అనేక కంటెంట్ మేనేజ్‌మెంట్ సిస్టమ్‌లు HTMLని అమలు చేస్తున్నప్పటికీ, ఇది సరిగ్గా అమలు చేయబడిందో లేదో పరీక్షించి నిర్ధారించడం మీ బాధ్యత.
ఉదాహరణకు, <div> ట్యాగ్ కంటే <nav> ట్యాగ్ ఎక్కువ వివరాలను అందిస్తుంది. అదేవిధంగా, <div>తదుపరి పోస్ట్</div>ని ఉపయోగించకుండా, మీరు స్పష్టత కోసం <button>తదుపరి పోస్ట్</button>ని జోడించాలి. <button> ఇప్పటికే కొంత డిఫాల్ట్ స్టైలింగ్‌ని కలిగి ఉన్నందున, మీరు బహుశా దాన్ని భర్తీ చేయాలనుకోవచ్చు.