جلسه هفتم: معرفی تگ‌های کاربردی HTML – قسمت دوم

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

اول سراغ تگ <a> و ویژگی‌های مهمش می‌ریم. بعد فرق فهرست‌های <ul> و <ol> رو بررسی می‌کنیم و در آخر به تگ <span> می‌رسیم. همه نمونه‌کدها قابل‌کپی هستن؛ پس می‌تونید هم‌زمان با خوندن آموزش، خودتون هم امتحانشون کنید.

تگ <a> برای ساخت لینک

تگ <a> یکی از تگ‌های کاربردی HTML هست و برای ساخت لینک ازش استفاده می‌شه. لینک‌های منو، تصویرهای لینک‌دار و دکمه‌های دانلود معمولاً با همین تگ ساخته می‌شن.

برای اینکه مرورگر و موتور جستجو تگ <a> رو یک لینک قابل‌استفاده بدونن، باید آدرس مقصد رو داخل ویژگی href بنویسید. ویژگی یا Attribute هم اطلاعات بیشتری درباره تگ به مرورگر می‌ده.

<a href="https://example.com">مشاهده سایت نمونه</a>

تگ <a> از نوع inline هست؛ یعنی فقط به‌اندازه محتوای داخل خودش جا می‌گیره. برای همین، چند لینک پشت‌سرهم معمولاً کنار هم دیده می‌شن. این تگ بسته هم هست؛ یعنی باید در انتها </a> رو بنویسید.

در تصویر زیر می‌تونید شکل کلی تگ <a> رو ببینید:

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

<a href="https://example.com" target="_blank" rel="noopener">بازکردن سایت نمونه</a>

ویژگی rel فقط به همین مورد محدود نمی‌شه. برای لینک تبلیغاتی یا پولی از sponsored و برای لینکی که کاربر ثبت کرده از ugc استفاده می‌شه. nofollow هم زمانی به کارتون میاد که نمی‌خواید موتور جستجو سایتتون رو با مقصد لینک مرتبط بدونه. جزئیات این حالت‌ها رو می‌تونید در راهنمای رسمی گوگل برای لینک‌های خروجی بخونید.

تگ <ul> برای فهرست بدون ترتیب

وقتی ترتیب گزینه‌ها مهم نیست، تگ <ul> به کارتون میاد. مثلاً فهرست امکانات یک محصول یا لینک‌های یک منو رو می‌تونید داخل این تگ بذارید. هر گزینه فهرست هم باید داخل یک تگ <li> نوشته بشه.

<ul>  <li>شماره یک</li>  <li>شماره دو</li>  <li>شماره سه</li></ul>

یادتون نره که <li> یک تگ بسته هست. پس هر گزینه رو با </li> ببندید و بعد از آخرین گزینه هم </ul> رو بنویسید.

تگ <ol> برای فهرست مرتب

اگه جابه‌جاشدن گزینه‌ها معنی فهرست رو عوض می‌کنه، بهتره از تگ <ol> کمک بگیرید. مراحل نصب یک برنامه، دستور پخت غذا یا رتبه‌بندی چند گزینه، نمونه‌های خوبی از این نوع فهرست هستن.

<ol>  <li>شماره یک</li>  <li>شماره دو</li>  <li>شماره سه</li></ol>

مرورگر خودش کنار گزینه‌های این فهرست شماره می‌ذاره. ولی فرق اصلی <ol> و <ul> فقط شماره‌هایی نیست که می‌بینید؛ در <ol> ترتیب گزینه‌ها بخشی از معنی محتواست.

تگ <span> برای مشخص‌کردن بخشی از متن

گاهی فقط می‌خواید یک کلمه یا قسمت کوتاهی از متن ظاهر متفاوتی داشته باشه. تگ <span> اون بخش رو جدا می‌کنه تا بتونید با CSS ظاهرش رو تغییر بدید.

<p>این یک <span style="color: red;">متن قرمز</span> هست.</p>

تگ <span> هم inline و بسته هست. خودش به‌تنهایی ظاهر متن رو عوض نمی‌کنه؛ باید با CSS رنگ، اندازه یا ویژگی ظاهری دیگه‌ای براش مشخص کنید.

اگه یک تگ معنایی مناسب‌تر در اختیارتون هست، بهتره فقط برای تغییر ظاهر سراغ <span> نرید. مثلاً برای متن مهم می‌تونید از <strong> و برای تأکید از <em> استفاده کنید. تگ معنایی نقش محتوا رو هم برای مرورگر روشن‌تر می‌کنه.

جمع‌بندی

حالا می‌دونید چطور با <a> لینک بسازید، با <ul> و <ol> دو نوع فهرست درست کنید و با <span> بخشی از متن رو برای استایل‌دهی جدا نگه دارید. بهتره نمونه‌ها رو یک بار خودتون تایپ کنید تا ساختار باز و بسته‌شدن تگ‌ها خوب براتون جا بیفته. توی جلسه‌های بعدی هم سراغ ویژگی‌های کاربردی CSS می‌ریم.

سوالات متداول درباره تگ‌های کاربردی HTML

تیم تولید محتوا

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