ویب پیج کا ڈھانچہ تیار کرنے والے ایچ ٹی ایم ایل فائیو کے ایلی منٹس

انٹرنیٹ پر جب Web کا آغاز ہوا تو ابتداء میں ویب پیج کا ڈیزائن تیار کرنے کے لیے HTML کے table ایلی منٹ کا عام استعمال کیا جاتا تھا۔ یعنی اگر ویب پیج میں تین کالم درکار ہوتے تو اس مقصد کے لیے تین کالموں پر مشتمل ٹیبل بنایا جاتا۔ لیکن ٹیبل ایلی منٹ کی مدد سے بنائے گئے ڈیزائن کا نقصان یہ تھا کہ اسے آزادانہ طریقے سے CSS کی مدد سے تبدیل نہیں کیا جا سکتا تھا، اور ایسا ڈیزائن تبدیل کرنے کے لیے ویب پیج کا کوڈ تبدیل کرنا ضروری ہو جاتا تھا۔ چنانچہ اس مسئلے کے حل کے لیے Table-less ڈیزائن کا تصور متعارف کرایا گیا جس کے تحت ویب پیج کے ڈیزائن کی تیاری کے لیے div ایلی منٹ کا بکثرت استعمال کیا جانے لگا۔ div ایلی منٹس کو CSS کی مدد سے ویب پیج کے مختلف کالمز اور سیکشنز کے طور پر دکھایا جاتا ہے۔

HTML5 نے ویب پیج کے اسٹرکچر کی تیاری کے لیے aside, section, article, nav, footer, header کی صورت میں نئے ایلی منٹس متعارف کرائے ہیں۔ یہ ایلی منٹس عملی طور پر div ایلی منٹ کی طرح ہی کام کرتے ہیں، اور ویب سائیٹ کے ناظرین کو اس سے کوئی فرق نہیں پڑتا کہ ویب پیج کے ڈیزائن کے لیے div ایلی منٹس استعمال کیے گئے ہیں یا HTML5 میں متعارف کرائے گئے ایلی منٹس۔ لیکن ویب پیجز کو صرف انٹرنیٹ کے صارفین ہی نہیں پڑھتے، بلکہ بہت سی ایپلی کیشنز مثلاً‌ سرچ انجنز اور کرالرز وغیرہ بھی ویب پیجز پڑھتے ہیں اور ان کی معلومات کو مختلف مقاصد کےلیے استعمال کرتے ہیں۔ HTML5 میں متعارف کرائے گئے ان نئے ایلی منٹس کا مقصد ایسی ایپلی کیشنز کے کام کو آسان بنانا ہے۔

اگر کسی ویب پیج کا اسٹرکچر تیار کرنے کے لیے div ٹیگز استعمال کیے گئے ہیں تو پھر ایپلی کیشن کو خود سے یہ اندازہ لگانا پڑتا ہے کہ اس ویب پیج کا منفرد مواد کونسا ہے۔ یعنی پھر ایپلی کیشن کو ویب سائیٹ کے دیگر صفحات سامنے رکھ کر یہ دیکھنا ہوتا ہے کہ کونسے حصے ایسے ہیں جو دوسرے صفحات پر یکساں طور پر موجود ہیں، مثلاً‌ مونوگرام، مینیوز، سائیڈ بارز، اشتہارات اور کاپی رائیٹ کی عبارت وغیرہ۔ لیکن اگر ویب سائیٹ کے ویب پیجز HTML5 میں متعارف کرائے گئے ایلی منٹس استعمال کرتے ہوئے تیار کیے گئے ہیں تو پھر ایپلی کیشن کا کام آسان ہو جاتا ہے۔ اس صورت میں ایپلی کیشن باقی مواد کو نظر انداز کرتے ہوئے main ایلی منٹ میں سے مطلوبہ ویب پیج کا منفرد اور مرکزی مواد حاصل کر سکتی ہے۔ اسی طرح ایپلی کیشن اگر یہ معلوم کرنا چاہے کہ ویب پیج میں وہ مینیوز کونسے ہیں جن میں اسی ویب سائیٹ کے دیگر صفحات کے لنکس موجود ہیں، تو ایسے مینیوز nav ایلی منٹس سے حاصل کیے جا سکتے ہیں۔

HTML5 کے یہ نئے ایلی منٹس اور ان کی وضاحت درج ذیل پیش کی جا رہی ہے۔

1. ویب پیج کا ڈھانچہ تیار کرنے والے HTML5 کے ایلی منٹس
2. نمونے کا HTML5 ویب پیج
3. براؤزرز میں HTML5 کے نئے ایلی منٹس کی سپورٹ

ویب پیج کا ڈھانچہ تیار کرنے والے HTML5 کے ایلی منٹس

<footer> ، <main> ، <header>

ان ایلی منٹس کا مقصد یہ ہے کہ

• header ایلی منٹ میں ویب سائیٹ کا نام اور مونوگرام وغیرہ رکھے جائیں،
• main ایلی منٹ میں ویب پیج کا مرکزی مواد یعنی پوسٹ یا مضمون رکھا جائے، یا پھر کیٹیگری پیج ہونے کی صورت میں پوسٹس یا مضامین کی فہرست رکھی جائے،
• footer ایلی منٹ میں کاپی رائیٹ کی عبارت اور اس نوعیت کی چیزیں رکھی جائیں۔

لیکن header اور footer ایلی منٹس کا استعمال صرف مکمل ویب پیج تک محدود نہیں ہے بلکہ ویب پیج کے کسی بھی حصے کے اپنے ہیڈر اور فوٹر ہو سکتے ہیں۔ مثلاً‌ article ایلی منٹ کے اندر یہ دونوں ایلی منٹس رکھے جا سکتے ہیں۔ اس صورت میں header ایلی منٹ میں مضمون نگار کی معلومات رکھی جا سکتی ہیں، اور footer ایلی منٹ میں مضمون کے متعلق کیٹیگریز اور ٹیگز وغیرہ رکھے جا سکتے ہیں۔
جبکہ main ایلی منٹ ویب پیج میں ایک سے زیادہ مرتبہ استعمال نہیں کیا جا سکتا۔ اس کا مقصد یہ ہے کہ اگر روبوٹ ایپلی کیشنز اور سرچ انجنز وغیرہ ویب پیج کا مرکزی مواد حاصل کرنا چاہیں، جو اس صفحہ پر ویب سائیٹ کے باقی صفحات سے منفرد ہے، تو ویب پیج کے باقی حصوں کو بالکل نظر انداز کرتے ہوئے صرف main ایلی منٹ کا مواد لیا جا سکے۔ اور ڈیویلپرز کو یہ ہدایت کی گئی ہے کہ وہ main ایلی منٹ کو کسی دوسرے ایلی منٹ مثلاً‌ aside, article, section وغیرہ کے ذیلی ایلی منٹ کے طور پر استعمال نہ کریں۔

<nav>

اس ایلی منٹ کا مقصد یہ ہے کہ اس کی مدد سے ویب سائیٹ کا مرکزی مینیو اور ذیلی مینیوز بنائے جائیں۔ لیکن یہ ایلی منٹ انفرادی لنکس کے لیے استعمال نہیں کیا جانا چاہیے، بلکہ صرف لنکس کا مجموعہ یعنی مینیو اس ایلی منٹ کے اندر رکھا جانا چاہیے۔ اسی طرح بیرونی لنکس مثلاً‌ سپانسر اور اشتہارات وغیرہ کے لنکس کے لیے بھی nav ایلی منٹ استعمال نہیں کیا جانا چاہیے۔

<section>

اس ایلی منٹ کی مدد سے ویب پیج کے مختلف قسم کے مواد مختلف حصوں میں رکھے جا سکتے ہیں۔ مثلاً‌ ویب پیج کا بینر، سائیڈ بارز، اور ان جیسے دوسرے حصے section ایلی منٹس کی مدد سے بنائے جا سکتے ہیں۔

<article>

یہ ایلی منٹ کسی بھی قسم کے مکمل متن کے لیے استعمال کیا جا سکتا ہے، مثلاً‌ مضمون، بلاگ پوسٹ، نیوز اسٹوری، تبصرہ وغیرہ۔ ویب پیج میں ایک سے زیادہ article ایلی منٹس بھی موجود ہو سکتے ہیں، مثلاً‌ جب مضامین کی ایسی فہرست دکھانا مقصود ہو جس میں ہر مضمون کے عنوان کے ساتھ اس کا مختصر حصہ دکھایا گیا ہو۔

<aside>

aside ایلیمنٹ کو اگر article ایلیمنٹ کے اندر استعمال کیا جائے تو اس کا مواد اس مضمون کا ضمنی مواد شمار ہوگا۔ لیکن اگر یہ ویسے ہی ویب پیج میں کسی جگہ استعمال کیا جائے تو اس میں موجود مواد کی حیثیت ثانوی ہوگی، یعنی اسے ویب پیج کا مرکزی مواد شمار نہیں کیا جائے گا، لیکن یہ مواد کسی نہ کسی حوالے سے ویب پیج کے مرکزی مواد سے متعلقہ ہونا چاہیے۔

نمونے کا HTML5 ویب پیج

پہلے درج ذیل امیج دیکھیں جس میں نمونے کے HTML5 ویب پیج کا ڈھانچہ دکھایا گیا ہے۔ اس کے بعد اس ویب پیج کا کوڈ دیا گیا ہے۔





نمونے کے اس ویب پیج کا کوڈ درج ذیل ہے۔ یہ مارک اپ مختصر رکھنے کی کوشش کی گئی ہے، اصلی ویب پیج کی تیاری کے وقت پوزیشننگ کے لیے حسب ضرورت div ایلی منٹ کو بطور Wrapper استعمال کیا جا سکتا ہے۔

<!DOCTYPE HTML>
<html>
<head>
  <title>HTML5 Document</title>
  <meta charset="UTF-8">
</head>
<body>
  <header>Logo, slogan, basic contact etc.</header>
  <nav>main navigation of the website</nav>
  <section id="sidebar1">
    <aside>Stuff related to main content</aside>
    <nav>Popular content links</nav>
  </section>
  <main>
    <article>
      <h1>Article 1</h1>
      <p>Some sample text.</p>
      <aside>Categories, tags</aside>
    </article>
    <article>
      <h1>Article 1</h1>
      <p>Some sample text.</p>
      <aside>Categories, tags</aside>
    </article>
  </main>
  <section id="sidebar2">
    <nav>Recent content links</nav>
    <nav>Ads, sponsors links</nav>
  </section>
  <footer>Copyright text, privacy-page link etc.</footer>
</body>
</html>

براؤزرز میں HTML5 کے نئے ایلی منٹس کی سپورٹ

ویب پیج ڈیزائن کی تیاری کے لیے HTML5 کے ایلی منٹس کافی حد تک بے فکر ہو کر استعمال کیے جا سکتے ہیں۔ اس لیے کہ ایسے تمام براؤزرز جو بہت زیادہ پرانے نہیں ہیں، وہ کسی بھی نا معلوم ایلی منٹ کو inline ایلی منٹ کے طور پر دکھاتے ہیں۔ چنانچہ وہ براؤزرز جن میں HTML5 کے ان نئے ایلی منٹس کی سپورٹ موجود نہیں ہے، انہیں CSS کی مدد سے اس بات کا پابند کیا جا سکتا ہے کہ وہ ان ایلی منٹس کو block ایلی منٹ کے طور پر دکھائیں۔ اس مقصد کے لیے درج ذیل CSS کوڈ استعمال کیا جا سکتا ہے۔

<style>
    header, nav, section, main, article, aside, footer {
        display:block;
    }
</style>

جبکہ انٹرنیٹ ایکسپلورر 9 سے پہلے کے ورژنز میں HTML5 کے نئے ایلی منٹس کو دکھانے کے لیے پہلے انہیں جاوا اسکرپٹ کی مدد سے بنانا پڑتا ہے۔ اور پھر ان ایلی منٹس کو CSS کی مدد سے بلاک کے طور پر دکھایا جا سکتا ہے۔ درج ذیل کوڈ دیکھیں:

<script>
    document.createElement('header');
    document.createElement('nav');
    document.createElement('section');
    document.createElement('main');
    document.createElement('article');
    document.createElement('aside');
    document.createElement('footer');
</script>
<style>
    header, nav, section, main, article, aside, footer {
        display:block;
    }
</style>