چیت‌شیت HTML

1<header>2  <nav aria-label="ناوبری اصلی">3    <a href="/">خانه</a>4  </nav>5</header>6<main>7  <section aria-labelledby="services-title">8    <h2 id="services-title">خدمات</h2>9  </section>10</main>11<footer>© ۱۴۰۵</footer>

1<nav aria-label="ناوبری اصلی">2  <ul>3    <li><a href="/services">خدمات</a></li>4    <li><a href="/articles">مقالات</a></li>5  </ul>6</nav>

1<video controls playsinline preload="metadata" poster="/media/cover.jpg">2  <source src="/media/intro.mp4" type="video/mp4">3  <track4    kind="captions"5    src="/media/intro-fa.vtt"6    srclang="fa"7    label="فارسی"8    default9  >10  مرورگر شما از پخش ویدیو پشتیبانی نمی‌کند.11</video>

1<audio controls preload="none">2  <source src="/media/podcast.mp3" type="audio/mpeg">3  مرورگر شما از پخش صدا پشتیبانی نمی‌کند.4</audio>

1<label for="upload-progress">پیشرفت بارگذاری</label>2<progress id="upload-progress" value="65" max="100">۶۵٪</progress>

1<p>نام کاربری: <bdi>user_123</bdi></p>2<p>شناسه: <bdi>کاربر-الف</bdi></p>

1<article>2          <h2>راهنمای کوتاه</h2>3          <p>محتوای مستقل و قابل بازنشر.</p>4          <aside>نکتهٔ تکمیلی مرتبط با مقاله</aside>5        </article>67        <figure>8          <img src="/images/chart.png" alt="روند رشد در سه ماه">9          <figcaption>روند رشد در سه ماه نخست.</figcaption>10        </figure>1112        <details>13          <summary>جزئیات بیشتر</summary>14          <p>محتوایی که کاربر می‌تواند باز یا بسته کند.</p>15        </details>

1<p>انتشار: <time datetime="2026-10-21">۲۱ اکتبر ۲۰۲۶</time></p>2        <p>کد محصول: <data value="SKU-204">مدل ۲۰۴</data></p>3        <label for="storage">فضای مصرف‌شده</label>4        <meter id="storage" min="0" max="100" value="72">۷۲٪</meter>5        <label for="calculation">نتیجهٔ محاسبه</label>6        <output id="calculation" for="quantity price">۴۵۰٬۰۰۰</output>

1<picture>2          <source3            media="(max-width: 640px)"4            srcset="/images/cover-small.webp"5            type="image/webp"6          >7          <source srcset="/images/cover.webp" type="image/webp">8          <img9            src="/images/cover.jpg"10            alt="نمای نزدیک از محصول"11            width="1200"12            height="800"13          >14        </picture>

1<ruby>2          漢 <rp>(</rp><rt>hàn</rt><rp>)</rp>3        </ruby>4        <p>نام‌کاربری‌بلند<wbr>برای‌نمایش‌مناسب</p>

1<dialog open aria-labelledby="notice-title">2          <h2 id="notice-title">اطلاعیه</h2>3          <p>این نمونه یک dialog غیرمدالِ باز است.</p>4        </dialog>56        <template id="card-template">7          <article class="card"><h2>عنوان کارت</h2></article>8        </template>910        <canvas id="chart" width="640" height="320" role="img" aria-label="نمودار فروش">11          نمودار فروش در سه ماه اخیر.12        </canvas>1314        <embed src="/documents/guide.pdf" type="application/pdf" width="640" height="480">15        <a href="/documents/guide.pdf">دریافت فایل راهنما</a>

1<table>2  <caption>وضعیت سفارش‌ها</caption>3  <thead>4    <tr><th scope="col">شماره</th><th scope="col">وضعیت</th></tr>5  </thead>6  <tbody>7    <tr><th scope="row">۱۲۰۴</th><td>در حال ارسال</td></tr>8  </tbody>9</table>

1<table>2  <caption>گزارش فروش</caption>3  <colgroup>4    <col>5    <col span="2">6  </colgroup>7  <thead>8    <tr>9      <th scope="col">دسته</th>10      <th scope="col">فصل اول</th>11      <th scope="col">فصل دوم</th>12    </tr>13  </thead>14  <tbody>15    <tr>16      <th scope="row" rowspan="2">فروش</th>17      <td>۱۲۰</td>18      <td>۱۴۵</td>19    </tr>20    <tr>21      <td>۱۳۰</td>22      <td>۱۵۲</td>23    </tr>24    <tr>25      <td colspan="2">جمع کل</td>26      <td>۵۴۷</td>27    </tr>28  </tbody>29</table>

1<ul>2  <li>طراحی ساختار</li>3  <li>پیاده‌سازی رابط</li>4</ul>56<ol>7  <li>نیازمندی‌ها را ثبت کنید</li>8  <li>راهکار را ارزیابی کنید</li>9</ol>

1<dl>2  <dt>HTML</dt>3  <dd>زبان نشانه‌گذاری ساختار صفحه‌های وب.</dd>4</dl>

1<form action="/contact" method="post">2  <label for="email">ایمیل</label>3  <input id="email" name="email" type="email" autocomplete="email" required>4  <button type="submit">ارسال</button>5</form>

1<label for="message">پیام</label>2<textarea id="message" name="message" rows="4"></textarea>34<label for="topic">موضوع</label>5<select id="topic" name="topic">6  <option value="">انتخاب کنید</option>7  <option value="support">پشتیبانی</option>8</select>

1<fieldset>2  <legend>روش تماس ترجیحی</legend>3  <label><input type="radio" name="contact" value="email"> ایمیل</label>4  <label><input type="radio" name="contact" value="phone"> تلفن</label>5</fieldset>67<label><input type="checkbox" name="updates" value="yes"> دریافت خبرنامه</label>

1<fieldset>2  <legend>نشانی</legend>3  <label for="city">شهر</label>4  <input id="city" name="city" autocomplete="address-level2">5</fieldset>

1<label for="browser">مرورگر</label>2<input id="browser" name="browser" list="browser-options">3<datalist id="browser-options">4  <option value="Firefox">5  <option value="Chrome">6</datalist>

1<form action="/profile" method="post" enctype="multipart/form-data">2  <label for="avatar">تصویر پروفایل</label>3  <input id="avatar" name="avatar" type="file" accept="image/*">4  <button type="submit">ذخیره</button>5  <button type="reset">بازنشانی</button>6</form>

1<form action="/signup" method="post" autocomplete="on">2  <label for="username">نام کاربری</label>3  <input4    id="username"5    name="username"6    type="text"7    minlength="3"8    maxlength="24"9    pattern="[A-Za-z0-9_]+"10    autocomplete="username"11    required12  >13  <button type="submit">ثبت‌نام</button>14</form>

1<label for="email">ایمیل</label>2<input id="email" name="email" type="email" autocomplete="email" required>34<label for="phone">شمارهٔ تماس</label>5<input id="phone" name="phone" type="tel" autocomplete="tel">67<label for="count">تعداد</label>8<input id="count" name="count" type="number" min="1" max="10">

1<label for="username">نام کاربری</label>2<input3  id="username"4  name="username"5  type="text"6  minlength="3"7  maxlength="32"8  autocomplete="username"9  required10>

1<label for="search">جست‌وجو</label>2<input id="search" name="q" type="search">34<label for="website">نشانی وب</label>5<input id="website" name="website" type="url">67<label for="birthday">تاریخ</label>8<input id="birthday" name="birthday" type="date">910<label for="reminder">زمان</label>11<input id="reminder" name="reminder" type="time">1213<label for="meeting">تاریخ و زمان</label>14<input id="meeting" name="meeting" type="datetime-local">1516<label for="month">ماه</label>17<input id="month" name="month" type="month">1819<label for="week">هفته</label>20<input id="week" name="week" type="week">2122<label for="volume">میزان صدا</label>23<input id="volume" name="volume" type="range" min="0" max="100" value="50">2425<label for="accent">رنگ اصلی</label>26<input id="accent" name="accent" type="color" value="#2563eb">

1<label for="password">گذرواژه</label>2<input id="password" name="password" type="password" autocomplete="current-password">34<input type="hidden" name="campaign" value="spring">56<input type="submit" value="ارسال فرم">7<input type="reset" value="بازنشانی">8<input type="button" value="کنترل بدون رفتار پیش‌فرض">910<button type="button">دکمهٔ معمولی</button>

1<label for="phone">شمارهٔ تماس</label>2<input3  id="phone"4  name="phone"5  type="tel"6  inputmode="tel"7  autocomplete="tel"8  placeholder="۰۹۱۲۱۲۳۴۵۶۷"9>1011<label for="attachments">پیوست‌ها</label>12<input13  id="attachments"14  name="attachments"15  type="file"16  accept=".pdf,image/*"17  multiple18>1920<label><input type="checkbox" name="terms" required> قوانین را می‌پذیرم</label>

1<meta charset="utf-8">2<meta name="viewport" content="width=device-width, initial-scale=1">3<meta name="description" content="توضیح دقیق و یکتای این صفحه">4<link rel="canonical" href="https://example.com/page">

1<meta property="og:type" content="article">2<meta property="og:locale" content="fa_IR">3<meta property="og:site_name" content="نام وب‌سایت">4<meta property="og:title" content="عنوان صفحه">5<meta property="og:description" content="خلاصه‌ای روشن از محتوای صفحه">6<meta property="og:url" content="https://example.com/page">7<meta property="og:image" content="https://example.com/cover.jpg">

1<meta name="twitter:card" content="summary_large_image">2<meta name="twitter:title" content="عنوان صفحه">3<meta name="twitter:description" content="توضیح کوتاه صفحه">4<meta name="twitter:image" content="https://example.com/cover.jpg">

1<html lang="fa" dir="rtl">2  <head>3    <meta charset="utf-8">4    <meta name="viewport" content="width=device-width, initial-scale=1">5    <title>عنوان یکتای همین صفحه</title>6    <meta name="description" content="توضیح دقیق محتوای همین صفحه">7    <link rel="canonical" href="https://example.com/page">8  </head>9</html>