హెడ్డింగ్స్ (h1-h6), పేరాగ్రాఫ్స్ (p) & టెక్స్ట్ ఫార్మాటింగ్ ట్యాగ్స్
మీరు రోజూ ఉదయం చదివే దినపత్రికను ఒక్కసారి ఊహించుకోండి. మొదటి పేజీలో పెద్ద అక్షరాలతో ప్రధాన వార్తా శీర్షిక (Main Headline) ఉంటుంది. దాని కింద సబ్-హెడ్డింగ్స్ ఉంటాయి. వివరాలన్నీ స్పష్టమైన పేరాగ్రాఫ్‌లలో ఉంటాయి. ముఖ్యమైన విషయాలు బోల్డ్ అక్షరాలలో, ప్రముఖుల వ్యాఖ్యలు ఇటాలిక్స్‌లో, ఆఫర్ ధరలు కొట్టివేతలతో (Strikethrough) ఉంటాయి. ఒకవేళ న్యూస్‌పేపర్ మొత్తం ఒకే సైజు అక్షరాలతో, ఎలాంటి శీర్షికలు లేకుండా ఒకే ముద్దగా ఉంటే ఎవరైనా ఒక్క పేజీ అయినా చదవగలరా? అస్సలు చదవలేరు!
వెబ్‌సైట్లలో కూడా యూజర్లను ఆకట్టుకోవడానికి, అలాగే Google లాంటి సెర్చ్ ఇంజన్లకు కంటెంట్ యొక్క ప్రాధాన్యతను అర్థం చేయించడానికి హెడ్డింగ్స్ (h1 నుండి h6) మరియు టెక్స్ట్ ఫార్మాటింగ్ ట్యాగ్స్ వెన్నెముక లాంటివి.
కానీ చాలామంది విద్యార్థులు కేవలం అక్షరాలను లావుగా చూపించడానికి <b> కి <strong> కి మధ్య ఉన్న తేడా తెలియక, లేదా ఫాంట్ సైజు పెంచడానికి హెడ్డింగ్స్ వాడి తీవ్రమైన SEO తప్పిదాలు చేస్తారు! ఈ నాల్గవ అధ్యాయంలో (Phase 1 ఫైనల్ చాప్టర్) మనం కంటెంట్‌ను అందంగా, ప్రొఫెషనల్‌గా తీర్చిదిద్దే టెక్స్ట్ ఫార్మాటింగ్ కళను, శాస్త్రీయ సూత్రాలను పూర్తి తెలుగులో నేర్చుకుందాం!
- హెడ్డింగ్స్ హైరార్కీ (h1 నుండి h6): 6 స్థాయిల శీర్షికల నిర్మాణం మరియు SEO లో వాటికున్న అపారమైన ప్రాముఖ్యత.
- పేరాగ్రాఫ్స్, లైన్ బ్రేక్స్ & డివైడర్లు:
<p>,<br>మరియు థీమాటిక్ బ్రేక్<hr>ట్యాగ్‌ల సరైన వినియోగం. - దృశ్యరూపం vs సెమాంటిక్ ప్రాముఖ్యత:
<b>vs<strong>మరియు<i>vs<em>ల మధ్య గల అసలైన అంతరార్థం. - ఎడిటోరియల్ ట్యాగ్స్: టెక్స్ట్ హైలైటింగ్ (
<mark>), కొట్టివేతలు & ఆఫర్లు (<del>,<ins>,<s>). - గణిత & సైన్స్ ఫార్ములాలు: ఘాతాంకాల కోసం
<sup>, రసాయన సూత్రాల కోసం<sub>ల ప్రయోగం. - వైట్‌స్పేస్ కొలాప్స్ & ప్రీఫార్మాటెడ్ టెక్స్ట్:
<pre>,<code>మరియు కీబోర్డ్ షార్ట్‌కట్స్ కోసం<kbd>. - బిగినర్స్ సాధారణ పొరపాట్లు & క్విజ్: హెడ్డింగ్ లెవల్ స్కిప్పింగ్, స్పేసింగ్ బగ్స్ మరియు Phase 1 మైల్‌స్టోన్ సారాంశం.
HTML లో శీర్షికలను నిర్వచించడానికి 6 స్థాయిల హెడ్డింగ్ ట్యాగ్‌లు ఉన్నాయి. <h1> నుండి <h6> కి వెళ్లేకొద్దీ వాటి ఫాంట్ సైజు మరియు ప్రాముఖ్యత తగ్గుతూ వస్తుంది:
| ట్యాగ్ | ప్రాముఖ్యత స్థాయి | పుస్తకంతో పోలిక | డిఫాల్ట్ సైజు |
|---|---|---|---|
<h1> |
అత్యున్నత ప్రాధాన్యత (Main Title) | పుస్తకం పేరు (Book Title) — పేజీకి ఒక్కటే ఉండాలి. | 2.00em (~32px) |
<h2> |
ప్రధాన విభాగం (Major Section) | అధ్యాయం పేరు (Chapter Title) | 1.50em (~24px) |
<h3> |
ఉప-విభాగం (Sub-section) | అధ్యాయంలోని ఉప-శీర్షిక (Sub-topic) | 1.17em (~18.7px) |
<h4> |
చిన్న శీర్షిక (Minor Topic) | సబ్-టాపిక్ లోని చిన్న విభాగం | 1.00em (~16px) |
<h5> |
అల్ప శీర్షిక (Sub-minor) | సైడ్‌బార్ లేదా కార్డ్ హెడ్డింగ్ | 0.83em (~13.3px) |
<h6> |
అత్యల్ప ప్రాధాన్యత (Least Important) | ఫుట్‌నోట్ లేదా చట్టబద్ధమైన చిన్న హెడ్డింగ్ | 0.67em (~10.7px) |
1. ఒక పేజీకి కేవలం ఒక్క <h1> మాత్రమే ఉండాలి! అది పేజీ యొక్క ప్రధాన అంశాన్ని వివరించాలి.
2. హెడ్డింగ్ స్థాయిలను ఎప్పుడూ దాటవేయకూడదు (Do not skip levels): <h1> తర్వాత నేరుగా <h3> లేదా <h4> కి వెళ్ళకూడదు. క్రమపద్ధతిలో h1 ➔ h2 ➔ h3 అని మాత్రమే వెళ్ళాలి. లేకపోతే స్క్రీన్ రీడర్స్ మరియు గూగుల్ బాట్స్ గందరగోళానికి గురవుతాయి!
టెక్స్ట్ కంటెంట్‌ను విభజించడానికి ఈ మూడు ట్యాగ్‌లు ప్రాథమిక సాధనాలు:
పేజీలోని సాధారణ టెక్స్ట్ పేరాగ్రాఫ్‌లను రాయడానికి దీనిని వాడతారు. బ్రౌజర్లు ప్రతి
<p> ఎలిమెంట్‌కు ఆటోమేటిక్‌గా పైన మరియు కింద 1em (సుమారు 16px) మార్జిన్ స్పేస్‌ను ఇస్తాయి. దీనివల్ల పేరాగ్రాఫ్‌లు ఒకదానికొకటి అంటుకోకుండా స్పష్టంగా కనిపిస్తాయి.
కొత్త పేరాగ్రాఫ్ ప్రారంభించకుండా, కేవలం అదే పేరాగ్రాఫ్ లోపల తర్వాతి లైన్‌కు వెళ్ళడానికి
<br> వాడతారు. ఇది చిరునామాలు (Addresses) మరియు కవితలు (Poems) రాయడానికి సరైనది. (గమనిక: పేరాగ్రాఫ్‌ల మధ్య ఖాళీ పెంచడానికి పదే పదే <br><br><br> వాడకూడదు, CSS మార్జిన్ వాడాలి).
ఆధునిక HTML5 లో
<hr> అనేది కేవలం ఒక గీత మాత్రమే కాదు. కథలో లేదా ఆర్టికల్‌లో ఒక ముఖ్యమైన సన్నివేశం/విషయం ముగిసి, వేరొక సరికొత్త టాపిక్ ప్రారంభమైందని సూచించే సెమాంటిక్ డివైడర్.
స్క్రీన్ మీద చూసినప్పుడు <strong> మరియు <b> రెండూ అక్షరాలను లావుగా (Bold) నే చూపిస్తాయి. కానీ వాటి అంతర్గత తాత్వికత పూర్తిగా వేరు:
| ఫీచర్ | <strong> (సెమాంటిక్ - అర్ధవంతమైనది) |
<b> (నాన్-సెమాంటిక్ - కేవలం అలంకరణ) |
|---|---|---|
| ఉద్దేశం | విషయంలో తీవ్రమైన ప్రాముఖ్యత, హెచ్చరిక లేదా గంభీరత ఉందని సూచిస్తుంది. | కేవలం దృష్టిని ఆకర్షించడానికి అక్షరాలను లావుగా చూపుతుంది (ఎలాంటి ప్రాముఖ్యత లేదు). |
| స్క్రీన్ రీడర్స్ | అంధులకు చదివేటప్పుడు గొంతును గట్టిగా నొక్కి, ఒత్తిడితో చదువుతుంది. | సాధారణ అక్షరాల లాగానే మామూలుగా చదువుతుంది. |
| Google SEO | సెర్చ్ ఇంజన్లు ఈ పదాలను కీలకమైన కీవర్డ్స్‌గా గుర్తిస్తాయి. | సెర్చ్ ఇంజన్లు ఎలాంటి అదనపు ప్రాధాన్యత ఇవ్వవు. |
| ఉదాహరణ | <strong>హెచ్చరిక:</strong> విద్యుత్ తీగలను తాకవద్దు! |
పుస్తకంలో కీవర్డ్: ఈ కథలోని ముఖ్య పాత్ర <b>రాముడు</b>. |
ఆధునిక వెబ్ ప్రమాణాల ప్రకారం ముఖ్యమైన సమాచారాన్ని బోల్డ్ చేయడానికి ఎల్లప్పుడూ <strong> కే ప్రాధాన్యత ఇవ్వండి!
బోల్డ్ ట్యాగ్‌ల లాగే <em> మరియు <i> రెండూ స్క్రీన్ మీద అక్షరాలను వాలుగా (Italics) చూపిస్తాయి. కానీ వాటి ఉద్దేశం వేరు:
-
<em>(Emphasis - ఉద్ఘాటన): వాక్యంలో ఒక నిర్దిష్ట పదంపై నొక్కి చెప్పడానికి (Stress emphasis) దీనిని వాడతారు. ఆ పదం మారితే మొత్తం వాక్యం యొక్క భావమే మారిపోతుంది! ఉదాహరణకు:
• నేను నిన్న సినిమా చూశాను (వేరెవరో కాదు, నేనే).
• నేను నిన్న సినిమా చూశాను (ఈరోజు కాదు, నిన్ననే).
• నేను నిన్న సినిమా చూశాను (నాటకం కాదు, సినిమా). -
<i>(Idiomatic Text / Italic): వాక్యంలో వేరే మూడ్‌ను సూచించడానికి — సాంకేతిక పదాలు (Technical terms), ఇతర భాషా పదాలు (Foreign phrases), ఓడల పేర్లు లేదా ఆలోచనలను చూపించడానికి వాడతారు. ఉదాహరణ:టైటానిక్ ఓడను <i>RMS Titanic</i> అని పిలుస్తారు.
HTML5 లో కంటెంట్‌ను అత్యంత ఆకర్షణీయంగా మార్చే శక్తివంతమైన టెక్స్ట్ ట్యాగ్‌లు ఉన్నాయి:
| ట్యాగ్ | సింటాక్స్ ఉదాహరణ | డిస్ప్లే ఫలితం | వాస్తవ ఉపయోగం |
|---|---|---|---|
<mark> |
<mark>ముఖ్యమైన గమనిక</mark> |
ముఖ్యమైన గమనిక | హైలైటర్ పెన్‌తో గీసినట్లు పసుపు రంగులో హైలైట్ చేస్తుంది (సెర్చ్ రిజల్ట్స్‌లో వాడతారు). |
<del> |
<del>₹2,999</del> |
తొలగించిన లేదా పాతదైన టెక్స్ట్‌పై కొట్టివేత గీత (Strikethrough) వేస్తుంది. | |
<ins> |
<ins>₹1,499</ins> |
₹1,499 | కొత్తగా చేర్చిన టెక్స్ట్ కింద అండర్‌లైన్ వేస్తుంది (ఆఫర్ ధరలు, డాక్యుమెంట్ సవరణలు). |
<small> |
<small>© 2026 కాపీరైట్</small> |
© 2026 కాపీరైట్ | చట్టబద్ధమైన నిబంధనలు, నిరాకరణలు (Disclaimers) మరియు కాపీరైట్ చిన్న అక్షరాల కోసం. |
<s> |
<s>స్టాక్ అయిపోయింది</s> |
ఇకపై చెల్లని లేదా వర్తించని సమాచారాన్ని కొట్టివేయడానికి. |
ఆధునిక ప్రొడక్ట్ కార్డులలో డిస్కౌంట్ చూపించడానికి:
ధర: <del>₹4,999</del> <ins>₹2,499</ins> (50% ఆదా!)
గణిత సమీకరణాలు, తేదీలు మరియు రసాయన ఫార్ములాలను సరైన పద్ధతిలో రాయడానికి HTML లో రెండు అద్భుతమైన ట్యాగ్‌లు ఉన్నాయి:
అక్షరాన్ని సాధారణ లైన్ కంటే కొంచెం పైకి, చిన్న సైజులో ఉంచుతుంది. గణిత ఘాతాంకాలు (Powers) మరియు తేదీల కోసం ఉపయోగిస్తారు.
ఫలితం: (a + b)2 = a2 + b2 + 2ab
కోడ్: 15<sup>th</sup> August
ఫలితం: 15th August
అక్షరాన్ని సాధారణ లైన్ కంటే కొంచెం కిందకు, చిన్న సైజులో ఉంచుతుంది. కెమిస్ట్రీ ఫార్ములాలు మరియు గణిత బేస్ నంబర్లకు వాడతారు.
ఫలితం: నీరు = H2O
కోడ్: గ్లూకోజ్ = C<sub>6</sub>H<sub>12</sub>O<sub>6</sub>
ఫలితం: గ్లూకోజ్ = C6H12O6
HTML లో చాలా ఆసక్తికరమైన ఒక ప్రవర్తన ఉంది. దానిని Whitespace Collapse (ఖాళీలను కుదించడం) అంటారు. ఉదాహరణకు మీరు HTML కోడ్‌లో ఒక పదం తర్వాత 10 స్పేస్‌లు ఇచ్చినా, లేదా 5 సార్లు Enter కొట్టినా, బ్రౌజర్ వాటన్నింటినీ కేవలం ఒకే ఒక్క స్పేస్ గా కుదించి చూపిస్తుంది!
<!-- బ్రౌజర్ ఇందులో ఉన్న అన్ని స్పేస్‌లను, ఎంటర్‌లను తొలగించి ఒకే లైన్‌లో చూపుతుంది -->
<p>
హలో తెలుగు
మిత్రులారా!
</p>దీనిని యథాతథంగా చూపించడానికి పరిష్కారం — <pre> ట్యాగ్:
<pre> (Preformatted Text) ట్యాగ్ లోపల మీరు ఎన్ని స్పేస్‌లు ఇస్తే అన్ని స్పేస్‌లు, ఎన్ని లైన్లు మారితే అన్ని లైన్లు ఖచ్చితంగా అలాగే బ్రౌజర్‌లో రెండర్ అవుతాయి. దీనిని కవితలు, ASCII ఆర్ట్ మరియు కంప్యూటర్ కోడ్ చూపించడానికి వాడతారు:
<!-- pre ట్యాగ్ స్పేస్‌లను అలాగే కాపాడుతుంది -->
<pre>
గురజాడ అప్పారావు గారి మాట:
దేశమును ప్రేమించుమన్నా,
మంచియన్నది పెంచుమన్నా!
</pre>
<!-- kbd ట్యాగ్ కీబోర్డ్ షార్ట్‌కట్లను సూచిస్తుంది -->
<p>కాపీ చేయడానికి <kbd>Ctrl</kbd> + <kbd>C</kbd> నొక్కండి.</p>ఈ అధ్యాయంలో నేర్చుకున్న హెడ్డింగ్స్, పేరాగ్రాఫ్స్, ఫార్మాటింగ్, మ్యాథ్స్, కెమిస్ట్రీ మరియు ప్రీఫార్మాటెడ్ ట్యాగ్స్ అన్నింటినీ కలిపి ఒక ప్రొఫెషనల్ ఆర్టికల్ కోడ్‌ను పరిశీలిద్దాం:
<!DOCTYPE html>
<html lang="te">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>టెక్స్ట్ ఫార్మాటింగ్ మాస్టర్ డెమో | Our Compiler</title>
</head>
<body>
<!-- ప్రధాన శీర్షిక (h1) -->
<h1>ఆధునిక వెబ్ టెక్నాలజీస్ పరిచయం</h1>
<p>రచయిత: <strong>అవర్ కంపైలర్ ఎడిటోరియల్ టీమ్</strong> · ప్రచురణ: <small>2026 ఎడిషన్</small></p>
<hr />
<!-- ఉప-శీర్షిక (h2) -->
<h2>1. ముఖ్యమైన ఫార్మాటింగ్ నియమాలు</h2>
<p>
వెబ్‌సైట్లలో <strong>strong ట్యాగ్</strong> ప్రాముఖ్యతను సూచిస్తుంది, మరియు <em>em ట్యాగ్</em> భావోద్వేగ ఒత్తిడిని సూచిస్తుంది.
సెర్చ్ ఫలితాలలో కీవర్డ్స్‌ను చూపించడానికి <mark>హైలైటింగ్ మార్క్</mark> ట్యాగ్ అద్భుతంగా పనిచేస్తుంది.
</p>
<!-- ఇ-కామర్స్ ఆఫర్ విభాగం (h3) -->
<h3>ప్రత్యేక కోర్సు ఆఫర్</h3>
<p>
కోర్సు అసలు ఫీజు: <del>₹3,999</del> <br />
నేటి ప్రత్యేక డిస్కౌంట్ ధర: <ins>₹1,499</ins> మాత్రమే!
</p>
<!-- సైన్స్ & మ్యాథ్స్ విభాగం (h3) -->
<h3>2. సైన్స్ & గణిత సమీకరణాలు</h3>
<p>
• ఆక్సిజన్ మరియు హైడ్రోజన్ కలిస్తే నీరు (H<sub>2</sub>O) ఏర్పడుతుంది. <br />
• ఐన్‌స్టీన్ ద్రవ్యరాశి శక్తి సమీకరణం: E = mc<sup>2</sup>
</p>
<!-- కీబోర్డ్ షార్ట్‌కట్ -->
<p>
కోడ్ రన్ చేయడానికి <kbd>Ctrl</kbd> + <kbd>Enter</kbd> నొక్కండి.
</p>
</body>
</html>బ్రౌజర్‌లో ఇది ఎలా కనిపిస్తుంది? (Visual Preview):
ఆధునిక వెబ్ టెక్నాలజీస్ పరిచయం
రచయిత: అవర్ కంపైలర్ ఎడిటోరియల్ టీమ్ · ప్రచురణ: 2026 ఎడిషన్
1. ముఖ్యమైన ఫార్మాటింగ్ నియమాలు
వెబ్‌సైట్లలో strong ట్యాగ్ ప్రాముఖ్యతను సూచిస్తుంది, మరియు em ట్యాగ్ భావోద్వేగ ఒత్తిడిని సూచిస్తుంది. సెర్చ్ ఫలితాలలో కీవర్డ్స్‌ను చూపించడానికి హైలైటింగ్ మార్క్ ట్యాగ్ అద్భుతంగా పనిచేస్తుంది.
ప్రత్యేక కోర్సు ఆఫర్
కోర్సు అసలు ఫీజు: ₹3,999
నేటి ప్రత్యేక డిస్కౌంట్ ధర: ₹1,499 మాత్రమే!
2. సైన్స్ & గణిత సమీకరణాలు
• ఆక్సిజన్ మరియు హైడ్రోజన్ కలిస్తే నీరు (H2O) ఏర్పడుతుంది.
• ఐన్‌స్టీన్ ద్రవ్యరాశి శక్తి సమీకరణం: E = mc2
టెక్స్ట్ మరియు హెడ్డింగ్స్ వాడేటప్పుడు ప్రారంభకులు చేసే 5 పెద్ద తప్పులు:
❌ తప్పు 1: కేవలం ఫాంట్ సైజు పెద్దగా కనిపించడానికి <h1> వాడటం
నియమం: అక్షరాలు పెద్దగా కనిపించాలని హెడ్డింగ్ ట్యాగ్స్ వాడకూడదు. అక్షరాల సైజు మార్చడానికి CSS font-size వాడాలి. హెడ్డింగ్స్ కేవలం డాక్యుమెంట్ స్ట్రక్చర్ మరియు శీర్షికల కోసం మాత్రమే!
❌ తప్పు 2: పేజీలో మల్టిపుల్ <h1> ట్యాగ్స్ పెట్టడం
సమస్య: ఒక పేజీకి ఒకే ఒక్క <h1> మాత్రమే ఉండాలి. నాలుగైదు h1 లు ఉంటే గూగుల్ సెర్చ్ ఇంజన్లకు పేజీ యొక్క అసలు ప్రధాన ఉద్దేశం ఏమిటో అర్థం కాదు.
❌ తప్పు 3: హెడ్డింగ్ లెవల్స్ స్కిప్ చేయడం (Heading Level Skipping)
లోపం: <h1> తర్వాత నేరుగా <h4> రాయడం. ఇది ప్రామాణిక హైరార్కీ నియమాలకు విరుద్ధం. ఎల్లప్పుడూ h1 ➔ h2 ➔ h3 క్రమంలోనే వెళ్ళాలి.
❌ తప్పు 4: స్పేసింగ్ కోసం పదే పదే <br><br><br> కొట్టడం
సమస్య: ఎలిమెంట్ల మధ్య గ్యాప్ పెంచడానికి వరుసగా <br> లు వాడటం అత్యంత నాసిరకం పద్ధతి. ఎలిమెంట్ల మధ్య ఖాళీ కోసం CSS margin-bottom లేదా gap మాత్రమే వాడాలి.
❌ తప్పు 5: strong మరియు b ల మధ్య వ్యత్యాసం గుర్తించకపోవడం
సమస్య: స్క్రీన్ రీడర్స్ దృష్టిలో <strong> శ్రవణాత్మక ఒత్తిడిని కలిగిస్తుంది. కేవలం రంగు/లావు కోసమే అయితే CSS font-weight: bold; వాడాలి.
ఈ క్రింది ప్రశ్నలకు స్వయంగా సమాధానాలు ఆలోచించండి, ఆపై డ్రాప్‌డౌన్ తెరిచి పరిశీలించండి:
<strong>మరియు<b>ల మధ్య స్క్రీన్ రీడర్స్ మరియు SEO పరంగా ఉన్న తేడా ఏమిటి?- ఒక వెబ్‌పేజీలో ఎన్ని
<h1>ట్యాగ్‌లు ఉండాలి? ఎందుకు? - HTML లో Whitespace Collapse అంటే ఏమిటి? స్పేస్‌లను యథాతథంగా చూపించడానికి ఏ ట్యాగ్ వాడాలి?
- రసాయన సమీకరణం "H2SO4" (సల్ఫ్యూరిక్ యాసిడ్) మరియు గణిత సూత్రం "x3 + y3" లను సరైన HTML ట్యాగ్స్‌తో రాయండి.
- ఆధునిక HTML5 లో
<hr>ట్యాగ్ యొక్క సెమాంటిక్ అర్థం ఏమిటి?
🔍 సమాధానాలు & లోతైన వివరణ చూడండి (Click to expand)
1. సమాధానం: <b> కేవలం దృశ్యరూపం కోసం మాత్రమే లావుగా చూపిస్తుంది. <strong> వాక్యానికి తీవ్రమైన ప్రాముఖ్యత ఉందని తెలియజేస్తుంది; స్క్రీన్ రీడర్స్ గట్టిగా ఒత్తిడితో చదువుతాయి మరియు SEO కి అదనపు విలువ లభిస్తుంది.
2. సమాధానం: ఒక పేజీకి ఒకే ఒక్క <h1> మాత్రమే ఉండాలి. ఇది పుస్తకం పేరు లాంటిది. సెర్చ్ ఇంజన్లు పేజీ యొక్క ప్రధాన అంశాన్ని గుర్తించడానికి దీనిని ప్రామాణికంగా తీసుకుంటాయి.
3. సమాధానం: HTML లో ఎన్ని స్పేస్‌లు లేదా లైన్ బ్రేకులు ఇచ్చినా బ్రౌజర్ వాటన్నింటినీ ఒకే ఒక్క స్పేస్‌గా కుదిస్తుంది. స్పేస్‌లు, లైన్లు యథాతథంగా కనిపించాలంటే <pre> ట్యాగ్ వాడాలి.
4. సమాధానం: సల్ఫ్యూరిక్ యాసిడ్: H<sub>2</sub>SO<sub>4</sub>.
గణిత సమీకరణం: x<sup>3</sup> + y<sup>3</sup>.
5. సమాధానం: ఆధునిక HTML5 లో <hr> అనేది ఒక టాపిక్ పూర్తయి వేరొక టాపిక్ ప్రారంభమైందని సూచించే థీమాటిక్ బ్రేక్ (Thematic Break) సెమాంటిక్ డివైడర్.
పైన నేర్చుకున్న హెడ్డింగ్స్, strong, em, mark, del, sup, sub ట్యాగ్‌లను మన ఇంటరాక్టివ్ ఎడిటర్‌లో నేరుగా రన్ చేసి చూడండి. మీ స్వంత బయోడేటా లేదా న్యూస్ ఆర్టికల్ రాసి లైవ్ ప్రివ్యూను పరిశీలించండి!
🎉 అభినందనలు! మీరు విజయవంతంగా Phase 1 పూర్తి చేశారు!
ఈ 4 అధ్యాయాలతో మీరు HTML5 కి సంబంధించిన అత్యంత బలమైన పునాదిని నిర్మించుకున్నారు:
- Chapter 1: HTML పరిచయం, వెబ్ చరిత్ర, Tim Berners-Lee CERN కథ, Web Trio & ఎడిటర్స్ సెటప్.
- Chapter 2: డాక్యుమెంట్ స్ట్రక్చర్, DOCTYPE, Standards vs Quirks mode, UTF-8 & Mobile Viewport.
- Chapter 3: ట్యాగ్స్ vs ఎలిమెంట్స్, Void Elements, గ్లోబల్ ఆట్రిబ్యూట్స్ (id, class, data-*) & DOM Tree ఆర్కిటెక్చర్.
- Chapter 4: హెడ్డింగ్స్ హైరార్కీ, పేరాగ్రాఫ్స్, strong vs b, em vs i, mark, del, sup & sub.
తదుపరి Phase 2 (Chapters 5 నుండి 8) లో మనం వెబ్‌సైట్లను అనుసంధానించే యాంకర్ ట్యాగ్స్ & లింకులు (Links & Navigation), బుల్లెట్/నంబర్డ్ లిస్టులు (Lists), రెస్పాన్సివ్ ఇమేజెస్ (picture, srcset & WebP), మరియు అడ్వాన్స్‌డ్ టేబుల్స్ (Tables, Colspan & Rowspan) గురించి విప్లవాత్మకంగా నేర్చుకోబోతున్నాం!