వెబ్ స్టాండర్డ్స్ ఉద్యమం యొక్క ముఖ్యమైన సూత్రం మనకు నేడు పరిశ్రమకు బాధ్యత వహిస్తుంది, HTML బ్రౌజర్లను వారు డిఫాల్ట్గా ఎలా కనిపించాలో కాకుండా కాకుండా వాటి కోసం ఉపయోగిస్తున్నారు. ఇది సెమాంటిక్ HTML ను ఉపయోగించడం.
సెమాంటిక్ HTML ఏమిటి
సెమాంటిక్ HTML లేదా సెమాంటిక్ మార్కప్ HTML కేవలం వెబ్ ప్రదర్శనకు కేవలం ప్రదర్శనను కాకుండా పరిచయం చేస్తోంది. ఉదాహరణకు, ఒక
ట్యాగ్ పరివేష్టిత టెక్స్ట్ ఒక పేరా అని సూచిస్తుంది.
ఇది సెమాంటిక్ మరియు ప్రెజెంటెషినల్, ఇందుకు కారణం ప్రజలు పేరాలేమిటో మరియు బ్రౌజర్లు ఎలా ప్రదర్శించాలో తెలుసని తెలుసు.
ఈ సమీకరణం యొక్క ఫ్లిప్ వైపున, మరియు వంటి ట్యాగ్లు సిమెంటిక్ కాదు, ఎందుకంటే టెక్స్ట్ ఎలా ఉందో (బోల్డ్ లేదా ఇటాలిక్) కనిపించాలి మరియు మార్కప్కు ఏదైనా అదనపు అర్ధాన్ని అందించవద్దు.
సిమెంటిక్ HTML ట్యాగ్లకు ఉదాహరణలు
, , మరియు ద్వారా శీర్షిక టాగ్లను కలిగి ఉంటాయి. మీరు ప్రమాణాలు-కంప్లైంట్ వెబ్ సైట్ ను నిర్మించటానికి ఉపయోగించుకునే అనేక సిమెంటిక్ HTML ట్యాగ్లు ఉన్నాయి.
ఎందుకు మీరు సెమాంటిక్స్ గురించి శ్రద్ధ వహించాలి
సిమెంటిక్ HTML ను వ్రాసే లాభం ఏదైనా వెబ్ పుట యొక్క డ్రైవింగ్ లక్ష్యంగా ఉండాలి-కమ్యూనికేట్ చేయాలనే కోరిక. మీ పత్రానికి సెమాంటిక్ ట్యాగ్లను జోడించడం ద్వారా, మీరు ఆ పత్రం గురించి అదనపు సమాచారాన్ని అందించవచ్చు, ఇది కమ్యూనికేషన్లో సహాయపడుతుంది. ప్రత్యేకంగా, సెమాంటిక్ ట్యాగ్లు బ్రౌసర్కు ఒక పేజీ యొక్క అర్థం మరియు దాని కంటెంట్ ఏమిటో స్పష్టంగా తెలియజేస్తాయి.
ఆ స్పష్టత శోధన ఇంజిన్లతో కూడా తెలియజేయబడుతుంది, కుడివైపు ప్రశ్నలకు కుడి పేజీలు పంపిణీ చేయబడిందని.
సెమాంటిక్ HTML ట్యాగ్లు వారు ఒక పేజీలో కనిపించే తీరును దాటి ఆ ట్యాగ్ల విషయాల గురించి సమాచారాన్ని అందిస్తాయి. ట్యాగ్లో వున్న వచనం వెంటనే కోడింగ్ భాష యొక్క కొన్ని రకమైన బ్రౌజర్చే గుర్తించబడుతుంది.
ఆ కోడ్ను అందించడానికి ప్రయత్నిస్తున్న బదులు, ఆ పాఠాన్ని ఒక వ్యాసం లేదా ఆన్లైన్ ట్యుటోరియల్ యొక్క ప్రయోజనం కోసం కోడ్ యొక్క ఉదాహరణగా మీరు ఆ పాఠాన్ని ఉపయోగిస్తున్నారని అర్థం.
అర్థపు టాగ్లు ఉపయోగించి మీ కంటెంట్ను స్టైలింగ్ చేయడానికి మీకు మరిన్ని ఎక్కువ హుక్స్ ఇస్తుంది. బహుశా నేడు మీరు మీ కోడ్ నమూనాలను డిఫాల్ట్ బ్రౌజర్ శైలిలో ప్రదర్శించడానికి ఇష్టపడతారు, కానీ రేపు, మీరు వాటిని బూడిదరంగు నేపథ్య రంగుతో కాల్ చేయాలనుకుంటున్నారు, తరువాత మీరు ఖచ్చితమైన మోనో-ఖాళీ ఫాంట్ కుటుంబం లేదా ఫాంట్ స్టాక్ని మీ నమూనాలు. మీరు అర్థ మార్కప్ మరియు తెలివిగా నడిపిన దరఖాస్తు CSS ఉపయోగించి ఈ విషయాలు అన్ని సులభంగా చేయవచ్చు.
సరిగ్గా సెమాంటిక్ టాగ్లు ఉపయోగించండి
మీరు ప్రదర్శన ప్రయోజనాల కోసం కాకుండా అర్ధాన్ని తెలియజేయడానికి అర్థ టాగాలను ఉపయోగించాలనుకున్నప్పుడు, మీరు వారి సాధారణ ప్రదర్శన లక్షణాలకు సరిగ్గా వాటిని ఉపయోగించకపోవడాన్ని జాగ్రత్తగా ఉండవలసి ఉంది. చాలా సాధారణంగా దుర్వినియోగమైన పదార్ధ టాగాలలో కొన్ని:
- బ్లాక్కోట్ - కొందరు ప్రజలు కొటేషన్ను లేని టెక్స్ట్ను ఇండెంట్ చెయ్యడానికి ట్యాగ్ను ఉపయోగిస్తారు. ఎందుకంటే blockquotes డిఫాల్ట్గా ఇండెంట్ చేయబడతాయి. మీరు ఇండెంటేషను యొక్క ప్రయోజనాలను కావాలనుకుంటే, కానీ టెక్స్ట్ బ్లాక్కోట్ కాదు, బదులుగా CSS మార్జిన్లను ఉపయోగించండి.
- p - కొంతమంది వెబ్ సంపాదకులు పేజీ యొక్క అంశాలకు అసలు పేరాలను నిర్వచించకుండా కాకుండా, పేజీ అంశాల మధ్య అదనపు స్థలాన్ని జోడించడానికి
& nbsp; p> (ఒక పారాగ్రాఫ్లో లేని ఒక ఖాళీ స్థలం) ను ఉపయోగిస్తారు. గతంలో పేర్కొన్న ఇండెంటింగ్ ఉదాహరణ మాదిరిగా, మీరు ఖాళీని జోడించడానికి మార్జిన్ లేదా ప్యాడింగ్ స్టైల్ ఆస్తిని ఉపయోగించాలి.
- ul - బ్లాక్కోట్ వలె, ఒక
ట్యాగ్ లోపల వున్న వచనం చాలా బ్రౌజరులో పాఠాన్ని సూచిస్తుంది. - ట్యాగ్లు మాత్రమే
ట్యాగ్లో చెల్లుబాటు అయ్యేవి కావున ఇది సెమాంటిక్గా తప్పు మరియు చెల్లని HTML. మళ్ళీ, వచనాన్ని ఇండెంట్ చేయడానికి మార్జిన్ లేదా ప్యాడింగ్ శైలిని ఉపయోగించండి.
- h1-h6 - శీర్షిక ట్యాగ్లు ఫాంట్లను పెద్దవిగా మరియు పెద్దగా చేయటానికి ఉపయోగించబడతాయి, కానీ టెక్స్ట్ ఒక శీర్షిక కానట్లయితే, అది శీర్షిక ట్యాగ్ లోపల ఉండకూడదు. మీరు మీ పేజీలో నిర్దిష్ట టెక్స్ట్ పరిమాణం లేదా బరువు మార్చాలనుకుంటే బదులుగా ఫాంట్-బరువు మరియు ఫాంట్-సైజు CSS లక్షణాలను ఉపయోగించండి ..
అర్థం కలిగి HTML టాగ్లు ఉపయోగించి, మీరు కేవలం
టాగ్లు తో పరిసర ప్రతిదీ కంటే మరింత సమాచారాన్ని అందించే పేజీలు సృష్టించడానికి.
ఏ HTML టాగ్లు సెమాంటిక్?
దాదాపు ప్రతి HTML4 ట్యాగ్ మరియు అన్ని HTML5 ట్యాగ్లకు ఒక అర్థ అర్థం ఉన్నప్పటికీ, కొన్ని ట్యాగ్లు ప్రధానంగా అర్థంలో ఉంటాయి.
ఉదాహరణకు, HTML5 మరియు ట్యాగ్ల యొక్క అర్ధాన్ని అర్ధం చేసుకోవడానికి అర్ధాన్ని పునర్నిర్వచించింది. ట్యాగ్ అదనపు ప్రాముఖ్యతను తెలియజేయదు, అయితే వచనంగా బోల్డ్లో ఇవ్వబడిన వచనం ఉంటుంది. ట్యాగ్ అదనపు ప్రాముఖ్యత లేదా ప్రాముఖ్యతను తెలియజేయదు, కానీ సాధారణంగా ఇటాలిక్స్లో వ్రాయబడిన వచనాన్ని నిర్వచిస్తుంది.
సెమాంటిక్ HTML టాగ్లు
సంక్షిప్తీకరణ <ఎక్రోనిం> సంక్షిప్తనామం
లాంగ్ కొటేషన్ నిర్వచనం పత్రం యొక్క రచయిత (లు) కోసం చిరునామా citation
కోడ్ సూచన టెలిటైప్ టెక్స్ట్ లాజికల్ డివిజన్ సాధారణ ఇన్లైన్ శైలి కంటైనర్ <డెల్> వచనం తొలగించబడింది <ఇన్లు> వచనం చేర్చబడింది ఉద్ఘాటన బలమైన ఉద్ఘాటన
ఫస్ట్-లెవల్ శీర్షిక
రెండవ-స్థాయి శీర్షిక
మూడవ-స్థాయి శీర్షిక
నాల్గవ స్థాయి శీర్షిక ఐదవ-స్థాయి శీర్షిక
ఆరవ స్థాయి శీర్షిక
థిమాటిక్ బ్రేక్ యూజర్ ద్వారా నమోదు టెక్స్ట్
ముందు ఆకృతీకరణ టెక్స్ట్
చిన్న ఇన్లైన్ కొటేషన్ నమూనా ఉత్పత్తి <ఉప> ఉపస్క్రిప్ట్ సూపర్స్క్రిప్ట్గా వేరియబుల్ లేదా యూజర్ నిర్వచించిన టెక్స్ట్
, మరియు ద్వారా శీర్షిక టాగ్లను కలిగి ఉంటాయి. మీరు ప్రమాణాలు-కంప్లైంట్ వెబ్ సైట్ ను నిర్మించటానికి ఉపయోగించుకునే అనేక సిమెంటిక్ HTML ట్యాగ్లు ఉన్నాయి.
ఎందుకు మీరు సెమాంటిక్స్ గురించి శ్రద్ధ వహించాలి
సిమెంటిక్ HTML ను వ్రాసే లాభం ఏదైనా వెబ్ పుట యొక్క డ్రైవింగ్ లక్ష్యంగా ఉండాలి-కమ్యూనికేట్ చేయాలనే కోరిక. మీ పత్రానికి సెమాంటిక్ ట్యాగ్లను జోడించడం ద్వారా, మీరు ఆ పత్రం గురించి అదనపు సమాచారాన్ని అందించవచ్చు, ఇది కమ్యూనికేషన్లో సహాయపడుతుంది. ప్రత్యేకంగా, సెమాంటిక్ ట్యాగ్లు బ్రౌసర్కు ఒక పేజీ యొక్క అర్థం మరియు దాని కంటెంట్ ఏమిటో స్పష్టంగా తెలియజేస్తాయి.
ఆ స్పష్టత శోధన ఇంజిన్లతో కూడా తెలియజేయబడుతుంది, కుడివైపు ప్రశ్నలకు కుడి పేజీలు పంపిణీ చేయబడిందని.
సెమాంటిక్ HTML ట్యాగ్లు వారు ఒక పేజీలో కనిపించే తీరును దాటి ఆ ట్యాగ్ల విషయాల గురించి సమాచారాన్ని అందిస్తాయి. ట్యాగ్లో వున్న వచనం వెంటనే కోడింగ్ భాష యొక్క కొన్ని రకమైన బ్రౌజర్చే గుర్తించబడుతుంది.
ఆ కోడ్ను అందించడానికి ప్రయత్నిస్తున్న బదులు, ఆ పాఠాన్ని ఒక వ్యాసం లేదా ఆన్లైన్ ట్యుటోరియల్ యొక్క ప్రయోజనం కోసం కోడ్ యొక్క ఉదాహరణగా మీరు ఆ పాఠాన్ని ఉపయోగిస్తున్నారని అర్థం.
అర్థపు టాగ్లు ఉపయోగించి మీ కంటెంట్ను స్టైలింగ్ చేయడానికి మీకు మరిన్ని ఎక్కువ హుక్స్ ఇస్తుంది. బహుశా నేడు మీరు మీ కోడ్ నమూనాలను డిఫాల్ట్ బ్రౌజర్ శైలిలో ప్రదర్శించడానికి ఇష్టపడతారు, కానీ రేపు, మీరు వాటిని బూడిదరంగు నేపథ్య రంగుతో కాల్ చేయాలనుకుంటున్నారు, తరువాత మీరు ఖచ్చితమైన మోనో-ఖాళీ ఫాంట్ కుటుంబం లేదా ఫాంట్ స్టాక్ని మీ నమూనాలు. మీరు అర్థ మార్కప్ మరియు తెలివిగా నడిపిన దరఖాస్తు CSS ఉపయోగించి ఈ విషయాలు అన్ని సులభంగా చేయవచ్చు.
సరిగ్గా సెమాంటిక్ టాగ్లు ఉపయోగించండి
మీరు ప్రదర్శన ప్రయోజనాల కోసం కాకుండా అర్ధాన్ని తెలియజేయడానికి అర్థ టాగాలను ఉపయోగించాలనుకున్నప్పుడు, మీరు వారి సాధారణ ప్రదర్శన లక్షణాలకు సరిగ్గా వాటిని ఉపయోగించకపోవడాన్ని జాగ్రత్తగా ఉండవలసి ఉంది. చాలా సాధారణంగా దుర్వినియోగమైన పదార్ధ టాగాలలో కొన్ని:
- బ్లాక్కోట్ - కొందరు ప్రజలు కొటేషన్ను లేని టెక్స్ట్ను ఇండెంట్ చెయ్యడానికి ట్యాగ్ను ఉపయోగిస్తారు. ఎందుకంటే blockquotes డిఫాల్ట్గా ఇండెంట్ చేయబడతాయి. మీరు ఇండెంటేషను యొక్క ప్రయోజనాలను కావాలనుకుంటే, కానీ టెక్స్ట్ బ్లాక్కోట్ కాదు, బదులుగా CSS మార్జిన్లను ఉపయోగించండి.
- p - కొంతమంది వెబ్ సంపాదకులు పేజీ యొక్క అంశాలకు అసలు పేరాలను నిర్వచించకుండా కాకుండా, పేజీ అంశాల మధ్య అదనపు స్థలాన్ని జోడించడానికి
& nbsp; p> (ఒక పారాగ్రాఫ్లో లేని ఒక ఖాళీ స్థలం) ను ఉపయోగిస్తారు. గతంలో పేర్కొన్న ఇండెంటింగ్ ఉదాహరణ మాదిరిగా, మీరు ఖాళీని జోడించడానికి మార్జిన్ లేదా ప్యాడింగ్ స్టైల్ ఆస్తిని ఉపయోగించాలి.
- ul - బ్లాక్కోట్ వలె, ఒక
ట్యాగ్ లోపల వున్న వచనం చాలా బ్రౌజరులో పాఠాన్ని సూచిస్తుంది. - ట్యాగ్లు మాత్రమే
ట్యాగ్లో చెల్లుబాటు అయ్యేవి కావున ఇది సెమాంటిక్గా తప్పు మరియు చెల్లని HTML. మళ్ళీ, వచనాన్ని ఇండెంట్ చేయడానికి మార్జిన్ లేదా ప్యాడింగ్ శైలిని ఉపయోగించండి.
- h1-h6 - శీర్షిక ట్యాగ్లు ఫాంట్లను పెద్దవిగా మరియు పెద్దగా చేయటానికి ఉపయోగించబడతాయి, కానీ టెక్స్ట్ ఒక శీర్షిక కానట్లయితే, అది శీర్షిక ట్యాగ్ లోపల ఉండకూడదు. మీరు మీ పేజీలో నిర్దిష్ట టెక్స్ట్ పరిమాణం లేదా బరువు మార్చాలనుకుంటే బదులుగా ఫాంట్-బరువు మరియు ఫాంట్-సైజు CSS లక్షణాలను ఉపయోగించండి ..
అర్థం కలిగి HTML టాగ్లు ఉపయోగించి, మీరు కేవలం
టాగ్లు తో పరిసర ప్రతిదీ కంటే మరింత సమాచారాన్ని అందించే పేజీలు సృష్టించడానికి.
ఏ HTML టాగ్లు సెమాంటిక్?
దాదాపు ప్రతి HTML4 ట్యాగ్ మరియు అన్ని HTML5 ట్యాగ్లకు ఒక అర్థ అర్థం ఉన్నప్పటికీ, కొన్ని ట్యాగ్లు ప్రధానంగా అర్థంలో ఉంటాయి.
ఉదాహరణకు, HTML5 మరియు ట్యాగ్ల యొక్క అర్ధాన్ని అర్ధం చేసుకోవడానికి అర్ధాన్ని పునర్నిర్వచించింది. ట్యాగ్ అదనపు ప్రాముఖ్యతను తెలియజేయదు, అయితే వచనంగా బోల్డ్లో ఇవ్వబడిన వచనం ఉంటుంది. ట్యాగ్ అదనపు ప్రాముఖ్యత లేదా ప్రాముఖ్యతను తెలియజేయదు, కానీ సాధారణంగా ఇటాలిక్స్లో వ్రాయబడిన వచనాన్ని నిర్వచిస్తుంది.
సెమాంటిక్ HTML టాగ్లు
సంక్షిప్తీకరణ <ఎక్రోనిం> సంక్షిప్తనామం
లాంగ్ కొటేషన్ నిర్వచనం పత్రం యొక్క రచయిత (లు) కోసం చిరునామా citation
కోడ్ సూచన టెలిటైప్ టెక్స్ట్ లాజికల్ డివిజన్ సాధారణ ఇన్లైన్ శైలి కంటైనర్ <డెల్> వచనం తొలగించబడింది <ఇన్లు> వచనం చేర్చబడింది ఉద్ఘాటన బలమైన ఉద్ఘాటన
ఫస్ట్-లెవల్ శీర్షిక
రెండవ-స్థాయి శీర్షిక
మూడవ-స్థాయి శీర్షిక
నాల్గవ స్థాయి శీర్షిక ఐదవ-స్థాయి శీర్షిక
ఆరవ స్థాయి శీర్షిక
థిమాటిక్ బ్రేక్ యూజర్ ద్వారా నమోదు టెక్స్ట్
ముందు ఆకృతీకరణ టెక్స్ట్
చిన్న ఇన్లైన్ కొటేషన్ నమూనా ఉత్పత్తి <ఉప> ఉపస్క్రిప్ట్ సూపర్స్క్రిప్ట్గా వేరియబుల్ లేదా యూజర్ నిర్వచించిన టెక్స్ట్