HTML5 కంటెంట్ స్ట్రక్చరింగ్: article, section, aside, figure, figcaption & address

• <article> ఎలిమెంట్: వెబ్‌సైట్ నుండి విడదీసి వేరే ఎక్కడ ప్రచురించినా స్వతంత్రంగా అర్థమయ్యే కంటెంట్ భావన.
• <section> ఎలిమెంట్: సంబంధిత అంశాలను ఒక థీమ్ కింద గ్రూప్ చేసే విధానం మరియు హెడ్డింగ్ తప్పనిసరి నియమం.
• article vs section డీప్ డైవ్: ఇంటర్వ్యూలలో తరచుగా అడిగే ఈ రెండు ట్యాగ్‌ల సూక్ష్మ వ్యత్యాసాల సమగ్ర పట్టిక.
• <aside> ఎలిమెంట్: సంబంధిత అనుబంధ సమాచారం, సైడ్‌బార్స్, గ్లోసరీ మరియు కొటేషన్ బాక్సులు.
• <figure> మరియు <figcaption>: ఫోటోలు, ఇలస్ట్రేషన్లు మరియు కోడ్ బ్లాక్‌లకు వివరణాత్మక క్యాప్షన్లు ఇవ్వడం.
• <address> ట్యాగ్: సరైన కాంటాక్ట్ సెమాంటిక్స్ మరియు ఎక్కడెక్కడ వాడకూడదో నియమాలు.
• సిండికేషన్ & రీడర్ వ్యూ (Reader Mode): బ్రౌజర్లు మరియు RSS రీడర్లు సెమాంటిక్ ఆర్టికల్స్‌ను ఎలా ప్రాసెస్ చేస్తాయి?
• బిగినర్స్ చేసే టాప్ 5 తప్పులు & క్విజ్: నిత్యజీవిత ప్రాజెక్టులలో వచ్చే బగ్స్ మరియు వాటి నివారణ.

<article> ఎలిమెంట్ అనేది ఒక సంపూర్ణమైన, స్వయంప్రతిపత్తి కలిగిన (Self-contained, Independent) కంటెంట్ భాగాన్ని సూచిస్తుంది. దీని ప్రధాన లక్షణం ఏమిటంటే — ఈ కంటెంట్‌ను ప్రస్తుత వెబ్‌సైట్ నుండి విడదీసి వేరే ఏ ఇతర వెబ్‌సైట్‌లో గానీ, RSS ఫీడ్‌లో గానీ, న్యూస్‌లెటర్‌లో గానీ ప్రచురించినా అది దానంతట అదే పూర్తి అర్థాన్ని ఇవ్వగలగాలి!

<article> కి నిత్యజీవిత ఉదాహరణలు:

• ఒక బ్లాగ్ పోస్ట్ (Blog Post) లేదా వార్తా కథనం (News Article).
• ఫోరమ్ లేదా సోషల్ మీడియాలోని ఒక పోస్ట్ లేదా కామెంట్ (Comment box).
• ఈ-కామర్స్ సైట్‌లోని ఒక ఉత్పత్తి కార్డ్ (Product Card in Amazon/Flipkart).
• ఒక వాతావరణ నివేదిక లేదా యూజర్ సమీక్ష (User Review/Testimonial).

<article style="background: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 20px; margin-bottom: 20px;">
  <header>
    <h2 style="color: #0f172a; margin-top: 0;">కృత్రిమ మేధస్సు (AI) భవిష్యత్తు</h2>
    <p style="color: #64748b; font-size: 13px;">
      రచయిత: <strong>డాక్టర్ రాజేష్</strong> · ప్రచురణ తేదీ: <time datetime="2026-10-30">30 అక్టోబర్ 2026</time>
    </p>
  </header>

  <p>ఆర్టిఫిషియల్ ఇంటెలిజెన్స్ నేడు సాఫ్ట్‌వేర్ అభివృద్ధిని వేగవంతం చేయడంలో ప్రధాన పాత్ర పోషిస్తోంది...</p>

  <footer style="margin-top: 16px; padding-top: 10px; border-top: 1px solid #f1f5f9; font-size: 13px; color: #64748b;">
    ట్యాగ్‌లు: <span style="background: #ecfdf5; color: #059669; padding: 2px 8px; border-radius: 4px;">AI</span>, <span style="background: #ecfdf5; color: #059669; padding: 2px 8px; border-radius: 4px;">టెక్నాలజీ</span>
  </footer>
</article>

<section> ఎలిమెంట్ అనేది ఒక నిర్దిష్టమైన అంశం లేదా థీమ్‌కు సంబంధించిన కంటెంట్‌ను సమూహపరచడానికి (Thematic Grouping of Content) ఉపయోగించే కంటైనర్. ఇది ఒక పుస్తకంలోని అధ్యాయాలు (Chapters) లేదా ఒక డాక్యుమెంట్‌లోని విభాగాలు లాంటిది.

<main>
  <!-- సెక్షన్ 1: పరిచయ బ్యానర్ -->
  <section id="hero" style="padding: 30px; background: #ecfdf5; border-radius: 8px;">
    <h2 style="color: #059669;">కోడింగ్ నేర్చుకోండి తెలుగులో!</h2>
    <p>భారతదేశంలోనే అత్యుత్తమ ఉచిత ప్రోగ్రామింగ్ ప్లాట్‌ఫామ్.</p>
  </section>

  <!-- సెక్షన్ 2: ఫీచర్లు -->
  <section id="features" style="padding: 30px;">
    <h2 style="color: #0f172a;">మా ప్లాట్‌ఫామ్ ప్రత్యేకతలు</h2>
    <p>లైవ్ కంపైలర్, లోతైన తెలుగు వివరణలు మరియు ప్రాక్టీస్ ల్యాబ్‌లు.</p>
  </section>

  <!-- సెక్షన్ 3: యూజర్ రివ్యూలు -->
  <section id="reviews" style="padding: 30px; background: #f8fafc;">
    <h2 style="color: #0f172a;">విద్యార్థుల అభిప్రాయాలు</h2>
    <p>వేలాది మంది ఇంజనీరింగ్ విద్యార్థుల ప్రశంసలు.</p>
  </section>
</main>

ఫ్రంటెండ్ డెవలపర్ టెక్నికల్ ఇంటర్వ్యూలలో అత్యంత తరచుగా అడిగే ప్రశ్న: "article మరియు section మధ్య తేడా ఏమిటి? ఒకదాని లోపల మరొకటి ఉండవచ్చా?"

<aside> ఎలిమెంట్ అనేది దాని పక్కన ఉన్న ప్రధాన కంటెంట్‌తో పరోక్షంగా లేదా అనుబంధంగా (Tangentially Related) సంబంధం ఉన్న సమాచారాన్ని ఉంచడానికి ఉపయోగిస్తారు. ఒకవేళ ఈ సమాచారాన్ని తొలగించినా, ప్రధాన కంటెంట్‌కు ఎటువంటి నష్టం వాటిల్లదు!

<aside> ఎక్కడెక్కడ వాడతారు?

• వెబ్‌సైట్ యొక్క సైడ్‌బార్ (Sidebar — కేటగిరీలు, రీసెంట్ పోస్టులు, ఆర్కైవ్స్).
• కథనం మధ్యలో వచ్చే "మీకు తెలుసా? (Did you know?)" లాంటి ఆసక్తికరమైన సమాచార పెట్టెలు.
• రచయిత బయో బాక్స్ (Author Bio Card) లేదా కొటేషన్ బాక్సులు (Pull Quotes).
• సంబంధిత ప్రకటనలు (Advertisements / Sponsored links).

<div style="display: flex; gap: 20px;">
  <!-- ప్రధాన కంటెంట్ -->
  <article style="flex: 3; background: #ffffff; padding: 20px; border: 1px solid #e2e8f0; border-radius: 8px;">
    <h1>వెబ్ డెవలప్‌మెంట్ రోడ్‌మ్యాప్ 2026</h1>
    <p>మొదట HTML5 మరియు CSS3 లో ప్రావీణ్యం సంపాదించాలి. ఆ తర్వాత జావాస్క్రిప్ట్ నేర్చుకోవాలి...</p>
  </article>

  <!-- సైడ్‌బార్ అనుబంధ సమాచారం -->
  <aside style="flex: 1; background: #f8fafc; padding: 16px; border: 1px solid #cbd5e1; border-radius: 8px;">
    <h3 style="color: #0f172a; margin-top: 0;">📌 సంబంధిత కోర్సులు</h3>
    <ul style="padding-left: 18px; line-height: 1.8;">
      <li><a href="#">CSS Flexbox గైడ్</a></li>
      <li><a href="#">JavaScript ES6+</a></li>
      <li><a href="#">Git & GitHub ల్యాబ్</a></li>
    </ul>
  </aside>
</div>

గతంలో ఒక ఫోటో కింద క్యాప్షన్ రాయడానికి <img> కింద <p class="caption"> రాసేవారు. కానీ బ్రౌజర్‌కు లేదా స్క్రీన్ రీడర్‌కు ఆ పేరా ఆ ఫోటో గురించిన వివరణ అని అర్థమయ్యేది కాదు.

దీన్ని పరిష్కరించడానికి HTML5 లో <figure> మరియు <figcaption> ట్యాగ్‌లు వచ్చాయి:

• <figure>: చిత్రం, చార్ట్, డయాగ్రమ్ లేదా కోడ్ స్నిప్పెట్‌ను కలిగి ఉండే స్వయంప్రతిపత్తి కంటైనర్.
• <figcaption>: ఆ చిత్రానికి లేదా కోడ్‌కు అధికారిక శీర్షిక/వివరణ (Caption). దీనిని figure లోపల మొట్టమొదటి లేదా చిట్టచివరి చైల్డ్‌గా మాత్రమే ఉంచాలి!

<figure style="margin: 20px 0; padding: 12px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; text-align: center;">
  <img src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=600" 
       alt="కోడింగ్ చేస్తున్న డెవలపర్ ల్యాప్‌టాప్" 
       style="max-width: 100%; height: auto; border-radius: 6px;">
  <figcaption style="margin-top: 8px; font-size: 13.5px; color: #64748b; font-style: italic;">
    చిత్రం 1.1: ఆధునిక వెబ్ అప్లికేషన్ డెవలప్‌మెంట్‌లో ఉపయోగించే వర్క్‌స్టేషన్ అమరిక (ఫోటో: అన్‌స్ప్లాష్).
  </figcaption>
</figure>

<address> ఎలిమెంట్ అనేది ఒక డాక్యుమెంట్ లేదా ఆర్టికల్ యొక్క రచయిత లేదా యజమాని యొక్క సంప్రదింపు సమాచారాన్ని (Contact Information) అందించడానికి ఉపయోగించే ఒక ప్రత్యేకమైన సెమాంటిక్ ట్యాగ్.

<address> లో ఏమి ఉంచవచ్చు?

• రచయిత లేదా కంపెనీ ఈమెయిల్ లింక్ (<a href="mailto:...">).
• ఫోన్ నంబర్ లింక్ (<a href="tel:...">).
• కార్పొరేట్ హెడ్‌ఆఫీస్ భౌతిక చిరునామా.
• రచయిత సోషల్ మీడియా ప్రొఫైల్ లింకులు లేదా వెబ్‌సైట్ URL.

<footer>
  <address style="font-style: normal; line-height: 1.6; color: var(--text2);">
    రచయిత: <a href="mailto:editor@ourcompiler.com" style="color: #10b981; font-weight: bold;">బాలాజీ నాయక్</a><br>
    కార్యాలయం: హైటెక్ సిటీ, మాదాపూర్, హైదరాబాద్, తెలంగాణ 500081<br>
    ఫోన్: <a href="tel:+919876543210" style="color: var(--text);">+91 98765 43210</a>
  </address>
</footer>

మనం ఇప్పటివరకు నేర్చుకున్న header, nav, main, article, section, aside, figure, మరియు footer లు అన్నీ కలిసి ఒక నిజమైన పేజీలో ఎలా అమరుతాయో చూడండి:

Apple Safari, Google Chrome, Mozilla Firefox లేదా Pocket లాంటి యాప్స్‌లో మీరు ఎప్పుడైనా "రీడర్ మోడ్" (Reader View / Clean Mode) బటన్ నొక్కారా? పేజీలోని బ్యానర్లు, అనవసరపు ప్రకటనలు, మెనూలు అన్నీ మాయమైపోయి కేవలం స్వచ్ఛమైన అక్షరాలు మరియు చిత్రాలు మాత్రమే పుస్తకంలా ప్రత్యక్షమవుతాయి!

ఈ మ్యాజిక్ ఎలా జరుగుతుంది?

బ్రౌజర్లు మీ HTML కోడ్‌లో <article> ఎలిమెంట్‌ను వెతుకుతాయి. ఒకవేళ మీరు సరైన సెమాంటిక్ ఆర్టికల్ ట్యాగ్‌ను వాడి ఉంటే, రీడర్ ఇంజిన్ వెంటనే మీ ఆర్టికల్ హెడ్డింగ్, పేరాగ్రాఫ్‌లు మరియు ఫిగర్లను వేరు చేసి యూజర్‌కు అద్భుతమైన రీడింగ్ అనుభవాన్ని అందిస్తుంది. దీనివల్ల యూజర్లు మీ కంటెంట్‌ను ఎక్కువసేపు చదువుతారు (Higher User Retention)!

సెమాంటిక్ కంటెంట్ స్ట్రక్చరింగ్ వల్ల సెర్చ్ ఇంజిన్లు మరియు వికలాంగులకు కలిగే లాభాలు అపారమైనవి:

• గూగుల్ ఆర్టికల్ స్కీమా: <article> లోపల ఉండే <time datetime="..."> మరియు హెడ్డింగ్స్‌ను బట్టి గూగుల్ మీ పోస్ట్‌ను Google Discover మరియు Top Stories కార్డ్స్‌లో చూపించడానికి ప్రాధాన్యత ఇస్తుంది.
• స్క్రీన్ రీడర్ కాంప్లిమెంటరీ ల్యాండ్‌మార్క్: <aside> ని స్క్రీన్ రీడర్స్ "Complementary" సమాచారంగా గుర్తిస్తాయి. అంధుడైన యూజర్ కోరుకుంటే సైడ్‌బార్‌ను సులభంగా స్కిప్ చేయవచ్చు.
• కోడ్ రీడబిలిటీ: ప్రాజెక్ట్‌లో పనిచేసే ఇతర డెవలపర్‌లకు 100 <div> ల కంటే సెమాంటిక్ ట్యాగ్‌లు ఉన్న కోడ్‌ను మెయింటెయిన్ చేయడం 10 రెట్లు వేగంగా ఉంటుంది.

ఈ అధ్యాయంలో మీరు నేర్చుకున్న విషయాలను స్వయంగా పరీక్షించుకోండి. ప్రతి ప్రశ్నను చదివి సమాధానం ఆలోచించిన తర్వాత "సమాధానం చూడండి" పై క్లిక్ చేయండి: