تا اینجا با ساختار صفحات وب، تگ‌های HTML، متن، لینک، تصویر، جدول و فرم‌ها آشنا شدیم. اما HTML در طول سال‌ها توسعه پیدا کرده و امکانات جدیدی به آن اضافه شده است تا ساخت صفحات وب مدرن، استاندارد و قابل فهم ساده‌تر شود. یکی از مهم‌ترین مراحل این توسعه، HTML5 است.

HTML5 را می‌توان نسل مدرن HTML دانست؛ نسخه‌ای که علاوه بر حفظ قابلیت‌های اصلی HTML، عناصر معنایی جدید، پشتیبانی استاندارد از صوت و ویدئو، امکانات گرافیکی، کنترل‌های پیشرفته‌تر فرم و APIهای مختلف را در اختیار توسعه‌دهندگان قرار می‌دهد.

در این مقاله ابتدا بررسی می‌کنیم HTML5 چیست و چه تفاوتی با HTML قدیمی دارد. سپس با مهم‌ترین عناصر HTML5 مانند header، nav، main، section، article، aside و footer آشنا می‌شویم و در ادامه قابلیت‌هایی مانند audio، video، figure، details، progress و meter را بررسی خواهیم کرد.

HTML5 چیست؟

HTML5 نسخه مدرن و توسعه‌یافته HTML است که برای ساخت ساختار و محتوای صفحات وب استفاده می‌شود.

HTML5 یک زبان کاملاً متفاوت از HTML نیست. در واقع همان HTML است که در طول زمان توسعه پیدا کرده و قابلیت‌های جدیدی به آن اضافه شده است.

به زبان ساده:

HTML
│
├── نسخه‌های قدیمی
│
└── HTML5
    ├── عناصر معنایی
    ├── Audio و Video
    ├── Canvas
    ├── امکانات جدید فرم
    ├── Web Storage
    └── APIهای مختلف

بنابراین اگر HTML را یاد گرفته باشید، برای یادگیری HTML5 نیازی نیست یک زبان جدید را از ابتدا شروع کنید.

چرا HTML5 به وجود آمد؟

با گسترش اینترنت و افزایش امکانات وب، صفحات ساده HTML دیگر تمام نیازهای توسعه‌دهندگان را پوشش نمی‌دادند.

وب‌سایت‌های جدید به امکاناتی مانند موارد زیر نیاز داشتند:

• نمایش ویدئو و صوت

• ساختار معنایی بهتر

• فرم‌های پیشرفته‌تر

• امکانات گرافیکی

• ذخیره اطلاعات در مرورگر

• قابلیت‌های تعاملی بیشتر

• پشتیبانی بهتر از برنامه‌های تحت وب

HTML5 برای پاسخ دادن به بسیاری از این نیازها توسعه پیدا کرد.

یکی از اهداف مهم HTML5 این بود که قابلیت‌های رایج وب تا حد امکان به شکل استاندارد و بدون وابستگی به فناوری‌های قدیمی یا افزونه‌های جانبی در اختیار توسعه‌دهندگان قرار بگیرند.

HTML و HTML5 چه تفاوتی دارند؟

HTML5 را نباید یک زبان کاملاً جدا از HTML در نظر بگیریم.

تگ‌های معمول HTML همچنان در HTML5 قابل استفاده هستند:

<h1>عنوان صفحه</h1>

<p>این یک پاراگراف است.</p>

<a href="about.html">درباره ما</a>

<img src="image.jpg" alt="تصویر">

تفاوت اصلی در این است که HTML5 امکانات و عناصر جدیدتری را نیز معرفی کرده یا استفاده استاندارد از قابلیت‌های مدرن وب را ساده‌تر کرده است.

برای مثال:

<video>

برای ویدئو،

<audio>

برای صوت،

و عناصر معنایی مانند:

<header>
<nav>
<main>
<section>
<article>
<aside>
<footer>

برای ساختار بهتر صفحات استفاده می‌شوند.

DOCTYPE در HTML5

یکی از ساده‌ترین تغییرات HTML5، ساده شدن DOCTYPE است.

در یک سند HTML5 کافی است بنویسیم:

<!DOCTYPE html>

این خط به مرورگر اعلام می‌کند که سند با استاندارد HTML مدرن نوشته شده است.

یک سند ساده HTML5 می‌تواند با این ساختار شروع شود:

<!DOCTYPE html>

<html lang="fa" dir="rtl">

<head>

    <meta charset="UTF-8">

    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0">

    <title>صفحه HTML5</title>

</head>

<body>

</body>

</html>

عناصر معنایی HTML5 چیستند؟

یکی از مهم‌ترین ویژگی‌های HTML5 معرفی و استفاده گسترده‌تر از عناصر معنایی یا Semantic Elements است.

عنصر معنایی عنصری است که علاوه بر نمایش محتوا، نقش و مفهوم آن قسمت از صفحه را نیز مشخص می‌کند.

برای مثال:

<header>

از روی نام آن مشخص است که مربوط به سربرگ است.

یا:

<footer>

نشان می‌دهد این بخش مربوط به قسمت پایانی صفحه یا یک بخش است.

در مقابل، div به تنهایی مفهوم خاصی درباره محتوای داخل خود ارائه نمی‌دهد.

مهم‌ترین عناصر معنایی HTML5

مهم‌ترین عناصر معنایی که باید در طراحی صفحات وب بشناسید عبارت‌اند از:

header
nav
main
section
article
aside
footer

در ادامه هرکدام را بررسی می‌کنیم.

1. تگ header

تگ header برای مشخص کردن سربرگ یک صفحه یا یک بخش از محتوا استفاده می‌شود.

مثال:

<header>

    <h1>بنو سرویس</h1>

    <p>
        خدمات و محصولات دیجیتال
    </p>

</header>

header فقط مخصوص سربرگ کل سایت نیست.

یک article نیز می‌تواند header مخصوص خودش را داشته باشد:

<article>

    <header>

        <h2>HTML5 چیست؟</h2>

        <p>
            نویسنده: تیم آموزشی
        </p>

    </header>

    <p>
        HTML5 نسل مدرن HTML است.
    </p>

</article>

2. تگ nav

تگ nav برای بخش‌هایی استفاده می‌شود که شامل لینک‌های اصلی پیمایش سایت هستند.

مثال:

<nav>

    <a href="/">خانه</a>

    <a href="/products.html">
        محصولات
    </a>

    <a href="/services.html">
        خدمات
    </a>

    <a href="/contact.html">
        تماس با ما
    </a>

</nav>

نکته مهم این است که هر لینک موجود در صفحه نباید داخل nav قرار بگیرد.

nav بیشتر برای مجموعه لینک‌های اصلی یا مهم پیمایش استفاده می‌شود.

3. تگ main

تگ main محتوای اصلی صفحه را مشخص می‌کند.

مثال:

<main>

    <h1>محصولات سایت</h1>

    <p>
        در این بخش محصولات ما را مشاهده می‌کنید.
    </p>

</main>

ساختار معمول یک صفحه می‌تواند چنین باشد:

<header>
    <h1>بنو سرویس</h1>
</header>

<nav>
    <a href="/">خانه</a>
    <a href="/products.html">محصولات</a>
</nav>

<main>

    <h2>محصولات</h2>

    <p>
        محصولات سایت در این بخش قرار دارند.
    </p>

</main>

<footer>
    <p>تمامی حقوق محفوظ است.</p>
</footer>

4. تگ section

تگ section برای مشخص کردن یک بخش موضوعی و مرتبط از محتوا استفاده می‌شود.

مثلاً:

<main>

    <section>

        <h2>درباره ما</h2>

        <p>
            ما در زمینه توسعه نرم‌افزار فعالیت می‌کنیم.
        </p>

    </section>

    <section>

        <h2>خدمات ما</h2>

        <p>
            طراحی سایت و اپلیکیشن از خدمات ماست.
        </p>

    </section>

</main>

هر section بهتر است یک موضوع مشخص داشته باشد و معمولاً یک heading مانند h2 یا h3 برای معرفی آن بخش داشته باشد.

اگر فقط می‌خواهیم چند عنصر را برای اهدافی مانند CSS یا JavaScript گروه‌بندی کنیم و محتوای ما مفهوم معنایی مشخصی ندارد، div ممکن است انتخاب مناسب‌تری باشد.

5. تگ article

تگ article برای محتوایی استفاده می‌شود که بتوان آن را یک واحد مستقل در نظر گرفت.

نمونه‌های رایج:

• مقاله

• خبر

• پست وبلاگ

• محصول

• نظر کاربر

• محتوای مستقل

مثال:

<article>

    <h2>HTML چیست؟</h2>

    <p>
        HTML زبان نشانه‌گذاری صفحات وب است.
    </p>

</article>

می‌توانیم چند article در یک صفحه داشته باشیم:

<main>

    <article>

        <h2>آموزش HTML</h2>

        <p>
            مقاله آموزش HTML
        </p>

    </article>

    <article>

        <h2>آموزش CSS</h2>

        <p>
            مقاله آموزش CSS
        </p>

    </article>

</main>

تفاوت section و article

یکی از سوالات رایج هنگام یادگیری HTML5 این است که چه زمانی باید از section و چه زمانی از article استفاده کنیم.

به صورت ساده:

section

برای یک بخش موضوعی و مرتبط از محتوا.

article

برای محتوایی که بتواند به عنوان یک واحد مستقل شناخته شود.

برای مثال:

<section>

    <h2>آخرین مقالات</h2>

    <article>

        <h3>آموزش HTML</h3>

        <p>
            ...
        </p>

    </article>

    <article>

        <h3>آموزش CSS</h3>

        <p>
            ...
        </p>

    </article>

</section>

در این مثال:

• section بخش «آخرین مقالات» است.

• هر article یک مقاله مستقل است.

6. تگ aside

تگ aside برای محتوای جانبی مرتبط با محتوای اصلی استفاده می‌شود.

مثلاً:

<aside>

    <h2>مطالب مرتبط</h2>

    <ul>

        <li>
            <a href="#">آموزش CSS</a>
        </li>

        <li>
            <a href="#">آموزش JavaScript</a>
        </li>

    </ul>

</aside>

کاربردهای رایج aside شامل موارد زیر است:

• مطالب مرتبط

• نوار کناری

• تبلیغات مرتبط

• اطلاعات تکمیلی

• لینک‌های مرتبط

7. تگ footer

تگ footer برای قسمت پایانی یک صفحه یا یک بخش استفاده می‌شود.

مثال:

<footer>

    <p>
        © 2026 تمامی حقوق محفوظ است.
    </p>

</footer>

یک article نیز می‌تواند footer خودش را داشته باشد:

<article>

    <h2>آموزش HTML</h2>

    <p>
        HTML زبان نشانه‌گذاری صفحات وب است.
    </p>

    <footer>

        <p>
            نویسنده: تیم آموزشی
        </p>

    </footer>

</article>

عناصر کاربردی دیگر HTML5

HTML5 فقط شامل عناصر ساختاری نیست.

عناصر کاربردی دیگری نیز وجود دارند که می‌توانند ساخت صفحات وب را ساده‌تر کنند.

figure و figcaption

figure برای محتوایی مانند تصویر، نمودار یا نمونه‌ای مستقل از محتوا استفاده می‌شود.

مثال:

<figure>

    <img
        src="images/html5.png"
        alt="HTML5"
        width="300">

    <figcaption>
        ساختار و فناوری HTML5
    </figcaption>

</figure>

در این مثال:

figure
 ├── img
 └── figcaption

figcaption توضیح یا عنوان مربوط به محتوای figure را مشخص می‌کند.

تگ time

تگ time برای مشخص کردن تاریخ یا زمان استفاده می‌شود.

مثال:

<p>

    تاریخ انتشار:

    <time datetime="2026-09-12">
        21 شهریور 1405
    </time>

</p>

در این مثال مقدار datetime تاریخ را به شکل استاندارد مشخص می‌کند، در حالی که متن داخل تگ می‌تواند به شکل مناسب برای کاربر نمایش داده شود.

تگ mark

تگ mark برای برجسته کردن بخشی از متن استفاده می‌شود.

مثال:

<p>

    یادگیری
    <mark>HTML5</mark>
    یکی از مراحل مهم طراحی وب است.

</p>

ظاهر پیش‌فرض mark را می‌توان با CSS تغییر داد.

تگ details و summary

با استفاده از details و summary می‌توان یک بخش باز و بسته‌شونده ایجاد کرد.

مثال:

<details>

    <summary>
        HTML5 چیست؟
    </summary>

    <p>
        HTML5 نسل مدرن HTML است.
    </p>

</details>

کاربر می‌تواند روی عنوان summary کلیک کند و محتوای داخل details را مشاهده کند.

این ساختار برای مواردی مانند FAQ بسیار کاربردی است:

<details>

    <summary>
        HTML چیست؟
    </summary>

    <p>
        HTML برای ساختاردهی محتوای صفحات وب استفاده می‌شود.
    </p>

</details>

<details>

    <summary>
        CSS چیست؟
    </summary>

    <p>
        CSS برای طراحی ظاهری صفحات وب استفاده می‌شود.
    </p>

</details>

progress

تگ progress برای نمایش میزان پیشرفت یک عملیات استفاده می‌شود.

مثال:

<label for="download">
    دانلود فایل:
</label>

<progress
    id="download"
    value="70"
    max="100">
    70%
</progress>

در این مثال مقدار پیشرفت 70 از 100 است.

بنابراین:

value = 70
max = 100

یعنی عملیات 70 درصد پیشرفت کرده است.

meter

تگ meter برای نمایش یک مقدار در یک محدوده مشخص استفاده می‌شود.

مثال:

<label for="score">
    امتیاز:
</label>

<meter
    id="score"
    min="0"
    max="100"
    value="80">
    80 از 100
</meter>

در اینجا مقدار 80 در محدوده 0 تا 100 نمایش داده می‌شود.

تفاوت progress و meter

برای مثال:

<progress value="80" max="100"></progress>

یعنی یک عملیات 80 درصد پیشرفت کرده است.

اما:

<meter min="0" max="100" value="80"></meter>

یعنی مقدار مورد نظر در محدوده 0 تا 100 برابر 80 است.

Audio در HTML5

یکی از قابلیت‌های مهم HTML5 پشتیبانی استاندارد از فایل‌های صوتی است.

برای مثال:

<audio controls>

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

</audio>

ویژگی controls کنترل‌های پخش مانند Play و Pause و تنظیم صدا را در اختیار کاربر قرار می‌دهد.

Video در HTML5

برای نمایش ویدئو نیز می‌توان از عنصر video استفاده کرد:

<video controls width="500">

    <source
        src="videos/example.mp4"
        type="video/mp4">

</video>

در اینجا:

<video>

عنصر اصلی ویدئو است و:

<source>

فایل رسانه‌ای را مشخص می‌کند.

در مقاله بعدی این موضوع را به شکل کامل‌تر بررسی خواهیم کرد.

Canvas چیست؟

HTML5 عنصر canvas را برای ایجاد محیطی جهت رسم گرافیک در اختیار ما قرار می‌دهد.

مثال:

<canvas
    id="myCanvas"
    width="400"
    height="200">
</canvas>

برای رسم روی Canvas معمولاً از JavaScript استفاده می‌شود.

Canvas می‌تواند در مواردی مانند:

• رسم اشکال

• نمودارها

• بازی‌های ساده

• انیمیشن

• پردازش‌های گرافیکی

استفاده شود.

SVG چیست؟

SVG مخفف:

Scalable Vector Graphics

است.

SVG برای ایجاد گرافیک‌های برداری استفاده می‌شود.

یک مثال ساده:

<svg
    width="200"
    height="100">

    <rect
        width="200"
        height="100"
        fill="orange">
    </rect>

</svg>

یکی از مزایای گرافیک برداری این است که می‌تواند در اندازه‌های مختلف بدون افت کیفیت قابل توجه نمایش داده شود.

SVG در مواردی مانند:

• آیکون‌ها

• نمودارها

• نقشه‌ها

• گرافیک‌های رابط کاربری

• تصاویر برداری

کاربرد دارد.

Web Storage

HTML5 و APIهای مرتبط با آن امکاناتی برای ذخیره اطلاعات در مرورگر فراهم می‌کنند.

دو مفهوم مهم عبارت‌اند از:

localStorage
sessionStorage

برای مثال:

localStorage.setItem(
    "username",
    "Ali"
);

و دریافت مقدار:

const username =
    localStorage.getItem("username");

این کد مربوط به JavaScript است و در این مقاله فقط با مفهوم آن آشنا می‌شویم.

در بخش JavaScript و APIهای مرورگر، Web Storage را با جزئیات بیشتری بررسی خواهیم کرد.

Geolocation

یکی دیگر از قابلیت‌های مرتبط با وب مدرن، Geolocation است.

این API می‌تواند در شرایطی که کاربر اجازه دهد، موقعیت جغرافیایی دستگاه را در اختیار وب‌سایت قرار دهد.

کاربردهای آن شامل مواردی مانند:

• نقشه‌ها

• مسیریابی

• خدمات محلی

• پیدا کردن مکان‌های نزدیک

است.

نکته مهم این است که دسترسی به موقعیت جغرافیایی بدون اجازه کاربر انجام نمی‌شود و مرورگر معمولاً درخواست مجوز نمایش می‌دهد.

Drag and Drop

HTML قابلیت‌هایی برای پیاده‌سازی Drag and Drop نیز دارد.

Drag یعنی کشیدن و Drop یعنی رها کردن.

این قابلیت می‌تواند برای مواردی مانند:

• آپلود فایل

• مرتب‌سازی عناصر

• جابه‌جایی آیتم‌ها

• رابط‌های کاربری تعاملی

استفاده شود.

پیاده‌سازی سناریوهای واقعی Drag and Drop معمولاً به JavaScript نیز نیاز دارد.

امکانات جدید فرم‌ها در HTML5

HTML5 کنترل‌های بیشتری برای فرم‌ها ارائه می‌دهد.

برای مثال:

<input type="date">

برای تاریخ،

<input type="number">

برای عدد،

<input type="range">

برای محدوده،

و:

<input type="color">

برای انتخاب رنگ استفاده می‌شود.

همچنین می‌توانیم از اعتبارسنجی داخلی مرورگر استفاده کنیم.

مثلاً:

<input
    type="email"
    required>

ویژگی required مشخص می‌کند که وارد کردن مقدار الزامی است.

یا:

<input
    type="text"
    minlength="3"
    maxlength="20">

حداقل و حداکثر طول مقدار را مشخص می‌کند.

این امکانات برای اعتبارسنجی اولیه مفید هستند؛ اما در برنامه‌های واقعی همچنان باید اعتبارسنجی سمت سرور نیز انجام شود.

آیا HTML5 سایت را Responsive می‌کند؟

خیر.

این یکی از اشتباهات رایج هنگام یادگیری HTML5 است.

HTML5 به تنهایی باعث نمی‌شود یک وب‌سایت روی موبایل، تبلت و دسکتاپ به شکل مناسب نمایش داده شود.

به صورت ساده می‌توان نقش فناوری‌های اصلی را این‌گونه در نظر گرفت:

HTML5
↓
ساختار و محتوای صفحه

CSS
↓
ظاهر، Layout و Responsive Design

JavaScript
↓
رفتار و تعامل

بنابراین برای ساخت یک سایت Responsive به CSS نیاز داریم.

آیا HTML5 جای CSS و JavaScript را گرفته است؟

خیر.

هرکدام وظیفه متفاوتی دارند.

HTML5

ساختار و معنای محتوا:

Structure

CSS

ظاهر و نحوه نمایش:

Presentation

JavaScript

رفتار و تعامل:

Behavior

بنابراین این سه فناوری در کنار یکدیگر پایه اصلی بسیاری از صفحات و رابط‌های وب را تشکیل می‌دهند:

HTML5 + CSS + JavaScript

آیا هنوز از div استفاده می‌کنیم؟

بله.

HTML5 به معنی حذف div نیست.

div همچنان برای گروه‌بندی عمومی عناصر بسیار کاربردی است.

مثلاً:

<div class="product-card">

    <h3>محصول اول</h3>

    <p>
        توضیحات محصول
    </p>

    <button>
        خرید
    </button>

</div>

اگر این عنصر فقط برای گروه‌بندی و اعمال CSS استفاده شده و مفهوم معنایی مشخصی ندارد، div انتخاب مناسبی است.

اما اگر محتوا واقعاً یک مقاله مستقل باشد، بهتر است از:

<article>

استفاده کنیم.

یا اگر یک بخش موضوعی از صفحه باشد:

<section>

می‌تواند انتخاب مناسب‌تری باشد.

هدف HTML5 حذف div نیست؛ بلکه استفاده از عنصر مناسب برای هر نوع محتواست.

ساختار کامل یک صفحه HTML5

حالا می‌توانیم عناصر مختلفی را که یاد گرفتیم در یک صفحه واقعی ترکیب کنیم:

<!DOCTYPE html>

<html lang="fa" dir="rtl">

<head>

    <meta charset="UTF-8">

    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0">

    <title>آموزش HTML5</title>

</head>

<body>

    <header>

        <h1>
            آموزش طراحی وب
        </h1>

        <p>
            یادگیری HTML5 از پایه
        </p>

    </header>

    <nav>

        <a href="#">
            خانه
        </a>

        <a href="#">
            آموزش‌ها
        </a>

        <a href="#">
            درباره ما
        </a>

    </nav>

    <main>

        <section>

            <h2>
                آخرین مقاله
            </h2>

            <article>

                <header>

                    <h3>
                        HTML5 چیست؟
                    </h3>

                    <p>

                        تاریخ انتشار:

                        <time datetime="2026-09-12">
                            21 شهریور 1405
                        </time>

                    </p>

                </header>

                <p>

                    HTML5 نسل مدرن HTML است و امکانات
                    مختلفی برای ساخت صفحات وب ارائه می‌دهد.

                </p>

                <p>

                    یادگیری
                    <mark>HTML5</mark>
                    یکی از مراحل مهم یادگیری طراحی وب است.

                </p>

                <figure>

                    <img
                        src="images/html5.png"
                        alt="HTML5"
                        width="300">

                    <figcaption>

                        نمونه‌ای از استفاده از عناصر HTML5

                    </figcaption>

                </figure>

                <details>

                    <summary>
                        HTML5 چه امکاناتی دارد؟
                    </summary>

                    <p>

                        HTML5 عناصر معنایی، صوت و ویدئو،
                        امکانات فرم، Canvas و قابلیت‌های
                        مختلف دیگری را ارائه می‌دهد.

                    </p>

                </details>

                <footer>

                    <p>
                        نویسنده: تیم آموزشی
                    </p>

                </footer>

            </article>

        </section>

        <aside>

            <h2>
                مطالب مرتبط
            </h2>

            <ul>

                <li>
                    <a href="#">
                        آموزش CSS
                    </a>
                </li>

                <li>
                    <a href="#">
                        آموزش JavaScript
                    </a>
                </li>

                <li>
                    <a href="#">
                        طراحی Responsive
                    </a>
                </li>

            </ul>

        </aside>

    </main>

    <footer>

        <p>
            © 2026 تمامی حقوق محفوظ است.
        </p>

    </footer>

</body>

</html>

ساختار این صفحه به شکل زیر است:

html
│
├── head
│
└── body
    │
    ├── header
    │
    ├── nav
    │
    ├── main
    │   │
    │   ├── section
    │   │   │
    │   │   └── article
    │   │       ├── header
    │   │       ├── content
    │   │       └── footer
    │   │
    │   └── aside
    │
    └── footer

این نوع ساختار از نظر خوانایی و درک نقش قسمت‌های مختلف صفحه بسیار بهتر از صفحه‌ای است که تمام عناصر آن با div ساخته شده‌اند.

جدول مهم‌ترین عناصر HTML5

اشتباهات رایج در استفاده از HTML5

1. تصور HTML5 به عنوان یک زبان کاملاً جدید

HTML5 زبان جداگانه‌ای از HTML نیست.

HTML5 نسل مدرن HTML است که قابلیت‌های بیشتری در اختیار ما قرار می‌دهد.

2. استفاده از عناصر معنایی بدون توجه به مفهوم آن‌ها

نباید فقط به دلیل اینکه یک تگ متعلق به HTML5 است از آن استفاده کنیم.

ابتدا باید معنی و نقش محتوا را مشخص کنیم و سپس عنصر مناسب را انتخاب کنیم.

3. حذف کامل div

div همچنان کاربرد دارد.

در مواردی که عنصر معنایی مناسبی وجود ندارد و فقط به یک container عمومی نیاز داریم، استفاده از div کاملاً منطقی است.

4. تبدیل همه divها به section

section جایگزین عمومی div نیست.

اگر یک بخش موضوعی مشخص نداریم، ممکن است div انتخاب مناسب‌تری باشد.

5. استفاده از nav برای تمام لینک‌ها

هر لینک یا مجموعه کوچکی از لینک‌ها الزاماً navigation اصلی سایت نیست.

nav را برای بخش‌های مهم پیمایش استفاده کنید.

6. اشتباه گرفتن article و section

اگر محتوا بتواند به عنوان یک واحد مستقل شناخته شود، article انتخاب مناسبی است.

اگر صرفاً یک بخش موضوعی مرتبط از صفحه باشد، section معمولاً مناسب‌تر است.

7. اشتباه گرفتن progress و meter

برای پیشرفت یک عملیات از progress استفاده می‌کنیم.

برای نمایش یک مقدار در یک محدوده مشخص، meter مناسب‌تر است.

8. تصور Responsive بودن خودکار HTML5

HTML5 به تنهایی سایت را Responsive نمی‌کند.

Responsive Design عمدتاً با استفاده از CSS و تکنیک‌های مناسب طراحی واکنش‌گرا ایجاد می‌شود.

تمرین اول: ساخت ساختار HTML5

یک فایل با نام:

index.html

ایجاد کنید.

یک سند استاندارد HTML5 بسازید که شامل موارد زیر باشد:

• DOCTYPE

• html

• head

• charset

• viewport

• title

• body

تمرین دوم: ساخت صفحه آموزشی

یک صفحه آموزشی ایجاد کنید که ساختار زیر را داشته باشد:

header
nav
main
    section
        article
    aside
footer

در header نام سایت را قرار دهید.

در nav لینک‌های اصلی سایت را ایجاد کنید.

در article یک مقاله آموزشی قرار دهید.

در aside سه مطلب مرتبط قرار دهید.

تمرین سوم: استفاده از figure

یک تصویر به صفحه اضافه کنید و آن را داخل figure قرار دهید.

سپس با استفاده از figcaption توضیح تصویر را اضافه کنید.

مثال:

<figure>

    <img
        src="images/web.jpg"
        alt="طراحی وب">

    <figcaption>
        نمونه‌ای از طراحی صفحات وب
    </figcaption>

</figure>

تمرین چهارم: ساخت FAQ

با استفاده از details و summary حداقل سه سوال متداول ایجاد کنید.

برای مثال:

HTML چیست؟
HTML5 چیست؟
CSS چه کاربردی دارد؟

تمرین پنجم: استفاده از عناصر رسانه‌ای

یک فایل صوتی و یک فایل ویدئویی به صفحه اضافه کنید.

برای صوت:

<audio controls>

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

</audio>

برای ویدئو:

<video controls width="500">

    <source
        src="videos/video.mp4"
        type="video/mp4">

</video>

تمرین ششم: فرم HTML5

یک فرم ثبت‌نام ایجاد کنید که شامل موارد زیر باشد:

• نام

• ایمیل

• رمز عبور

• تاریخ تولد

• شماره

• دکمه ثبت

از انواع ورودی HTML5 استفاده کنید:

<input type="text">

<input type="email">

<input type="password">

<input type="date">

<input type="number">

همچنین حداقل از این ویژگی‌ها استفاده کنید:

required
minlength
maxlength

چالش این مقاله

یک صفحه معرفی شخصی با استفاده از HTML5 بسازید.

صفحه باید شامل قسمت‌های زیر باشد:

Header

• نام شما

• توضیح کوتاه

Navigation

• خانه

• درباره من

• مهارت‌ها

• تماس با من

Main

یک section برای معرفی خودتان ایجاد کنید.

یک article برای معرفی مهارت‌ها ایجاد کنید.

یک تصویر را با استفاده از figure و figcaption قرار دهید.

تاریخ انتشار یا تاریخ عضویت را با time نمایش دهید.

یک بخش FAQ با details و summary ایجاد کنید.

یک aside برای لینک‌های مرتبط قرار دهید.

Footer

اطلاعات کپی‌رایت را قرار دهید.

هدف این تمرین زیبا کردن صفحه نیست.

در این مرحله هدف اصلی این است که بتوانید برای هر بخش از محتوا عنصر HTML مناسب را انتخاب کنید.

نکات مهم این مقاله

در این مقاله یاد گرفتیم:

• HTML5 نسل مدرن HTML است.

• HTML5 یک زبان کاملاً جدا از HTML نیست.

• DOCTYPE در HTML5 بسیار ساده شده است.

• عناصر معنایی به ساختار بهتر صفحات کمک می‌کنند.

• header برای سربرگ استفاده می‌شود.

• nav برای پیمایش اصلی است.

• main محتوای اصلی صفحه را مشخص می‌کند.

• section برای بخش‌های موضوعی استفاده می‌شود.

• article برای محتوای مستقل مناسب است.

• aside برای محتوای جانبی استفاده می‌شود.

• footer بخش پایانی را مشخص می‌کند.

• figure و figcaption برای محتوایی مانند تصویر و توضیح آن کاربرد دارند.

• time برای تاریخ و زمان استفاده می‌شود.

• mark برای برجسته کردن بخشی از متن کاربرد دارد.

• details و summary برای ایجاد بخش‌های باز و بسته‌شونده استفاده می‌شوند.

• progress میزان پیشرفت یک عملیات را نمایش می‌دهد.

• meter یک مقدار را در یک محدوده مشخص نمایش می‌دهد.

• HTML5 از عناصر audio و video پشتیبانی می‌کند.

• canvas برای ایجاد گرافیک با کمک JavaScript کاربرد دارد.

• SVG برای گرافیک‌های برداری استفاده می‌شود.

• HTML5 امکانات جدیدی برای فرم‌ها ارائه می‌دهد.

• Web Storage امکان ذخیره اطلاعات در مرورگر را فراهم می‌کند.

• HTML5 جای CSS و JavaScript را نمی‌گیرد.

• HTML5 به تنهایی باعث Responsive شدن سایت نمی‌شود.

• div همچنان در صفحات HTML5 کاربرد دارد.

جمع‌بندی

HTML5 نسل مدرن HTML است که امکانات و عناصر مختلفی را برای ساخت صفحات وب استاندارد و امروزی در اختیار توسعه‌دهندگان قرار می‌دهد. یکی از مهم‌ترین ویژگی‌های HTML5 استفاده از عناصر معنایی مانند header، nav، main، section، article، aside و footer است که باعث می‌شوند ساختار و نقش قسمت‌های مختلف صفحه واضح‌تر شود.

در کنار عناصر معنایی، HTML5 امکاناتی مانند audio، video، figure، details، progress، meter و کنترل‌های جدید فرم را نیز در اختیار ما قرار می‌دهد. همچنین فناوری‌هایی مانند Canvas، SVG، Web Storage و Geolocation در اکوسیستم وب مدرن کاربرد دارند.

با وجود این امکانات، HTML5 جای CSS و JavaScript را نمی‌گیرد. HTML5 برای ساختار و معنای محتوا، CSS برای ظاهر و Layout و JavaScript برای رفتار و تعامل صفحه استفاده می‌شوند.

مهم‌ترین نکته این است که در HTML5 نباید فقط به دنبال استفاده از تگ‌های جدید باشیم؛ بلکه باید یاد بگیریم برای هر بخش از محتوا، عنصر مناسب و معنادار را انتخاب کنیم.

در مقاله بعدی، به صورت تخصصی وارد یکی از قابلیت‌های مهم HTML5 می‌شویم و یاد می‌گیریم چگونه فایل‌های صوتی و ویدئویی را در صفحات وب قرار دهیم و کنترل کنیم.