یاد بگیریم، بسازیم

← بازگشت به صفحه اصلی

عناصر و ساختار محتوای HTML

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

تگ‌های متنی بیشتر

تو بخش اول با <p> و تیترها آشنا شدی. چند تا تگ متنی دیگه هم هست که زیاد به کارت می‌آد:

• <strong>: متن رو پررنگ نشون می‌ده و از نظر معنایی هم می‌گه این بخش مهمه (نه فقط ظاهر)
• <em>: متن رو کج (ایتالیک) نشون می‌ده و از نظر معنایی تأکید داره
• <blockquote>: برای نقل‌قول از یه منبع دیگه
• <code>: برای نمایش کد درون‌خطی — همونی که تو این سایت زیاد دیدی
• <br>: یه شکست خط، بدون شروع پاراگراف جدید
• <hr>: یه خط افقی برای جدا کردن بخش‌ها

نکته: <strong> با CSS font-weight: bold فرق داره. اولی هم پررنگه هم از نظر معنا مهمه؛ دومی فقط ظاهرش پررنگه. برای محتوایی که واقعاً مهمه، همیشه <strong> رو ترجیح بده.

لیست‌ها

دو نوع لیست اصلی داری. لیست بدون ترتیب، وقتی ترتیب موارد مهم نیست:

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

و لیست با ترتیب، وقتی شماره یا مرحله مهمه:

<ol>
    <li>اول یه اکانت بساز</li>
    <li>بعد یه ریپازیتوری بساز</li>
    <li>فایل‌ها رو آپلود کن</li>
</ol>

می‌تونی لیست‌ها رو هم تودرتو کنی، دقیقاً مثل همین «لینک‌های مفید» تو ستون کناری همین سایت:

<ul>
    <li>زبان‌های برنامه‌نویسی
        <ul>
            <li>JavaScript</li>
            <li>Python</li>
        </ul>
    </li>
</ul>

لینک‌ها

تو بخش اول با تگ <a> و ویژگی href آشنا شدی. چند نکته‌ی تکمیلی:

مسیر مطلق در برابر مسیر نسبی: اگه بخوای به یه سایت دیگه لینک بدی، آدرس کامل رو می‌نویسی (مسیر مطلق):

<a href="https://github.com">گیت‌هاب</a>

ولی اگه بخوای به یه صفحه‌ی دیگه از همین سایت لینک بدی، از مسیر نسبی استفاده می‌کنی — دقیقاً همون‌جوری که تو ناوبر همین سایت هست:

<a href="../CSS/css.html">CSS چیست؟</a>

باز شدن تو تب جدید: با ویژگی target="_blank" لینک تو یه تب جدید باز می‌شه. وقتی این کار رو می‌کنی، بهتره rel="noopener noreferrer" رو هم اضافه کنی؛ این یه مسئله‌ی امنیتیه که جلوی دسترسی صفحه‌ی جدید به صفحه‌ی اصلیت رو می‌گیره:

<a href="https://github.com" target="_blank" rel="noopener noreferrer">گیت‌هاب</a>

تصویر

برای نمایش عکس از تگ <img> استفاده می‌کنی. این تگ برخلاف بقیه، بسته نمی‌شه (خودبسته یا self-closing‌ه):

<img src="cat.jpg" alt="یه گربه‌ی نارنجی روی مبل">

ویژگی alt رو هیچ‌وقت خالی یا فراموش نکن. این متن وقتی به کار می‌آد که تصویر لود نشه، و مهم‌تر از اون، صفحه‌خوان‌ها (برای کاربران کم‌بینا) همین متن رو می‌خونن. alt باید توصیف واقعی تصویر باشه، نه چیزی مثل «عکس۱».

اگه تصویر یه توضیح (caption) هم لازم داره، از <figure> و <figcaption> استفاده کن:

<figure>
    <img src="cat.jpg" alt="یه گربه‌ی نارنجی روی مبل">
    <figcaption>گربه‌ی من، تابستون ۱۴۰۴</figcaption>
</figure>

جدول

برای نمایش داده‌های جدولی (مثل یه برنامه‌ی هفتگی یا لیست قیمت) از <table> استفاده می‌کنی:

<table>
    <tr>
        <th>نام</th>
        <th>زبان</th>
    </tr>
    <tr>
        <td>علی</td>
        <td>فارسی</td>
    </tr>
</table>

• <table>: کل جدول
• <tr> (table row): یه ردیف
• <th> (table header): سلول سرستون، معمولاً پررنگ نمایش داده می‌شه
• <td> (table data): یه سلول معمولی

نکته: از جدول فقط برای داده‌ی واقعاً جدولی استفاده کن، نه برای چیدمان کلی صفحه؛ اون کار CSS‌ه (که تو مقاله‌ی CSS چیست؟ باهاش آشنا می‌شی).

فرم

فرم راهیه که از کاربر اطلاعات بگیری — مثل همون باکس جستجوی بالای همین سایت. کل فرم داخل تگ <form> قرار می‌گیره:

<form>
    <label for="name">اسم شما</label>
    <input type="text" id="name" name="name">
    <button type="submit">ارسال</button>
</form>

<label> برچسب یه فیلده. ویژگی for باید دقیقاً با id همون فیلد یکی باشه؛ این کار باعث می‌شه با کلیک روی برچسب، فوکوس بره رو فیلد — هم برای کاربر عادی راحت‌تره، هم برای دسترس‌پذیری لازمه.

انواع input

ویژگی type روی <input> مشخص می‌کنه چه‌جور ورودی‌ایه:

• type="text": متن معمولی
• type="email": ایمیل؛ مرورگر خودش فرمتش رو چک می‌کنه
• type="password": رمز عبور؛ کاراکترها به‌جای نمایش، نقطه نشون داده می‌شن
• type="number": فقط عدد
• type="checkbox": گزینه‌ی تیک‌دار (می‌شه چندتا رو هم‌زمان انتخاب کرد)
• type="radio": گزینه‌ی دایره‌ای (فقط یکی از یه گروه قابل انتخابه)
• type="search": مخصوص جستجو، دقیقاً همونی که تو هدر همین سایت استفاده شده

select و textarea

برای انتخاب از یه لیست کشویی:

<select>
    <option>HTML</option>
    <option>CSS</option>
</select>

و برای متن چندخطی (مثل یه پیام یا نظر):

<textarea rows="4"></textarea>

جمع‌بندی

با این عناصر — لیست، لینک، تصویر، جدول و فرم — دیگه می‌تونی محتوای واقعی یه صفحه رو بسازی، نه فقط یه اسکلت ساده. بخش بعدی این مجموعه به دسترس‌پذیری، سئوی پایه و چندرسانه‌ای می‌پردازه.

← بازگشت به صفحه اصلی