بنیادی ڈھانچہ کے ٹیگز

<!DOCTYPE html>
<html>
<head>
  <title>صفحہ کا عنوان</title>
</head>
<body>
  <h1>میرا پہلا صفحہ</h1>
</body>
</html>

وضاحت:

ہر HTML دستاویز ان بنیادی ٹیگز سے شروع ہوتی ہے۔ <!DOCTYPE html> دستاویز کی قسم بتاتا ہے، <html> روٹ ایلیمنٹ ہے، <head> میں میٹا ڈیٹا ہوتا ہے، اور <body> میں صفحہ کا مواد ہوتا ہے۔

ہیڈنگ اور پیراگراف

<h1>سب سے بڑی ہیڈنگ</h1>
<h2>چھوٹی ہیڈنگ</h2>
<h3>اس سے چھوٹی ہیڈنگ</h3>
<h4>...</h4>
<h5>...</h5>
<h6>سب سے چھوٹی ہیڈنگ</h6>
<p>یہ ایک پیراگراف ہے۔</p>

وضاحت:

ہیڈنگز <h1> سے <h6> تک ہوتی ہیں، جہاں <h1> سب سے اہم اور بڑی ہیڈنگ ہے۔ <p> ٹیگز پیراگراف کے لیے استعمال ہوتے ہیں۔

فارمیٹنگ ٹیگز

<b>موٹا متن</b>
<i>ترچھا متن</i>
<u>انڈر لائن متن</u>
<strong>اہم متن</strong>
<em>زور دار متن</em>
<mark>نمایاں متن</mark>
<small>چھوٹا متن</small>
<del>حذف شدہ متن</del>
<ins>درج شدہ متن</ins>
<sub>سب سکرپٹ</sub>
<sup>سپر سکرپٹ</sup>

وضاحت:

یہ ٹیگز متن کو مختلف انداز میں ظاہر کرنے کے لیے استعمال ہوتے ہیں۔ <strong> اور <em> سیمنٹک معنی رکھتے ہیں جبکہ <b> اور <i> صرف ظاہری شکل بدلتے ہیں۔

لنکس اور امیجز

<a href="https://example.com">ایک لنک</a>
<img src="image.jpg" alt="تصویر کی وضاحت">
<map> اور <area> امیج میپ کے لیے
<figure> اور <figcaption> تصویر کے گروپ کے لیے

وضاحت:

<a> ٹیگ ہائپر لنکس بنانے کے لیے استعمال ہوتا ہے۔ <img> ٹیگ تصاویر شامل کرنے کے لیے استعمال ہوتا ہے، جہاں src خصوصیت تصویر کا راستہ بتاتی ہے اور alt خصوصیت متبادل متن فراہم کرتی ہے۔

لِسٹ کے ٹیگز

<ul>
  <li>پہلا آئٹم</li>
  <li>دوسرا آئٹم</li>
</ul>

<ol>
  <li>پہلا آئٹم</li>
  <li>دوسرا آئٹم</li>
</ol>

<dl>
  <dt>اصطلاح</dt>
  <dd>وضاحت</dd>
</dl>

وضاحت:

<ul> غیر ترتیب شدہ فہرست (bullet points)، <ol> ترتیب شدہ فہرست (نمبرڈ)، اور <dl> تفریقی فہرست (اصطلاح اور وضاحت) کے لیے استعمال ہوتے ہیں۔

ٹیبل کے ٹیگز

<table>
  <caption>ٹیبل کا عنوان</caption>
  <tr>
    <th>ہیڈر 1</th>
    <th>ہیڈر 2</th>
  </tr>
  <tr>
    <td>ڈیٹا 1</td>
    <td>ڈیٹا 2</td>
  </tr>
</table>

وضاحت:

<table> ٹیبل بنانے کے لیے، <tr> قطار کے لیے، <th> ہیڈر سیل کے لیے، اور <td> عام ڈیٹا سیل کے لیے استعمال ہوتے ہیں۔

فارم کے ٹیگز

<form action="/submit" method="post">
  <label for="name">نام:</label>
  <input type="text" id="name" name="name"><br>
  <label for="email">ای میل:</label>
  <input type="email" id="email" name="email"><br>
  <textarea id="message" name="message"></textarea><br>
  <button type="submit">جمع کرائیں</button>
</form>

وضاحت:

فارم ٹیگز صارف سے ڈیٹا لینے کے لیے استعمال ہوتے ہیں۔ <input> مختلف قسم کے ان پٹ فیلسز بناتا ہے، <textarea> بڑے ٹیکسٹ ایریا کے لیے ہے، اور <button> بٹن کے لیے استعمال ہوتا ہے۔

سیمینٹک ٹیگز

<header>سربراہی</header>
<nav>نیویگیشن</nav>
<main>مرکزی مواد</main>
<section>سیکشن</section>
<article>مضمون</article>
<aside>ضمنی مواد</aside>
<footer>فوٹر</footer>

وضاحت:

سیمینٹک ٹیگز ویب صفحہ کے ڈھانچے کو بہتر طور پر بیان کرتے ہیں، جس سے سرچ انجنوں اور ایکسیسibiliٹی ٹولز کے لیے صفحہ کو سمجھنا آسان ہو جاتا ہے۔

میڈیا ٹیگز

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
</audio>

<video controls width="250">
  <source src="video.mp4" type="video/mp4">
</video>

<iframe src="https://example.com"></iframe>

وضاحت:

<audio> اور <video> ٹیگز آڈیو اور ویڈیو مواد کے لیے استعمال ہوتے ہیں۔ <iframe> دوسرے ویب صفحات کو موجودہ صفحہ میں ایمبیڈ کرنے کے لیے استعمال ہوتا ہے۔