ویژگیهای HTML اطلاعات اضافی به تگهای HTML اضافه میکنند. در این مقاله، انواع HTML attributes مثل href، src، alt، style و … را با مثالهای کاربردی یاد میگیرید. 👨💻📚
📜 فهرست مطالب
🎯 HTML Attributes چیست؟
ویژگیهای HTML اطلاعات اضافهای به تگهای HTML میدهند. این ویژگیها معمولاً درون تگ بازکننده (start tag) نوشته میشوند و بهصورت name=”value” مقداردهی میشوند.
🔹 مثال:
<a href="https://www.w3schools.com" target="_blank" rel="noopener">بازدید از W3Schools</a>
📌 در مثال بالا، href مشخص میکند که این لینک به چه صفحهای برود.
🔗 ویژگی href در لینکها
ویژگی href در تگ <a> مشخص میکند که وقتی روی لینک کلیک شود، کاربر به کجا هدایت شود.
✅ مثال:
<a href="https://google.com" target="_blank" rel="noopener">برو به گوگل</a>
📌 وقتی روی این لینک کلیک کنید، صفحه گوگل باز میشود.
🔹 چالش:
یک لینک بسازید که کاربر را به صفحه اصلی سایت شما ببرد! 🌍
🖼️ ویژگی src در تصاویر
ویژگی src در تگ <img> مشخص میکند که تصویر از کجا بارگذاری شود.
✅ مثال:
<img decoding="async" src="logo.png" alt="logo" title="ویژگیهای HTML 1">
📌 این کد تصویری به نام logo.png را در صفحه نمایش میدهد.
🔹 دو روش برای مقداردهی src:
- آدرس مطلق (Absolute URL): آدرس کامل یک تصویر از یک سایت دیگر.
<img decoding="async" src="logo.png" alt="logo" title="ویژگیهای HTML 1">
2. آدرس نسبی (Relative URL): تصویری که درون هاست سایت خودتان ذخیره شده.
<img decoding="async" src="images/photo.jpg" alt="photo" title="ویژگیهای HTML 3">
📌 نکته: استفاده از آدرسهای نسبی بهتر است، چون اگر دامنه سایت تغییر کند، لینک تصاویر خراب نمیشود.
📏 ویژگیهای width و height
این دو ویژگی اندازه تصویر را برحسب پیکسل مشخص میکنند.
✅ مثال:
<img loading="lazy" decoding="async" src="photo.jpg" width="300" height="200" alt="photo" title="ویژگیهای HTML 4">
📌 در اینجا، تصویر عرض 300px و ارتفاع 200px خواهد داشت.
📌 نکته: بهتر است همیشه نسبت عرض و ارتفاع تصویر را رعایت کنید تا تصویر کشیده نشود.
🎭 ویژگی alt برای متن جایگزین
ویژگی alt متنی را نمایش میدهد که اگر تصویر لود نشد، به جای آن نشان داده شود. این ویژگی برای SEO و افراد کمبینا که از Screen Reader استفاده میکنند، اهمیت دارد. 🦾
✅ مثال:
<img decoding="async" src="avatar.jpg" alt="تصویر پروفایل کاربر" title="ویژگیهای HTML 5">
📌 اگر تصویر avatar.jpg خراب یا حذف شود، متن “تصویر پروفایل کاربر” نمایش داده میشود.
🎨 ویژگی style برای تغییر ظاهر
ویژگی style برای افزودن استایلهای CSS به یک تگ استفاده میشود.
✅ مثال:
<p style="color: blue; font-size: 20px;">این یک متن آبی است.</p>
📌 متن بالا به رنگ آبی و اندازه 20px نمایش داده میشود.
📌 نکته: بهتر است استایلها را در یک فایل CSS جداگانه بنویسید و از style فقط در مواقع ضروری استفاده کنید.
🌍 ویژگی lang برای تعیین زبان
ویژگی lang در تگ <html> مشخص میکند که زبان محتوای صفحه چیست. این ویژگی به موتورهای جستجو کمک میکند تا صفحه شما را بهتر پردازش کنند.
✅ مثال:
<html lang="fa">
📌 این کد مشخص میکند که زبان صفحه فارسی است.
همچنین میتوان کد کشور را نیز مشخص کرد:
<html lang="en-US">
📌 در اینجا، صفحه به زبان انگلیسی (امریکا) تنظیم شده است.
🏷️ ویژگی title برای نمایش توضیحات اضافی
ویژگی title وقتی روی یک عنصر موس ببرید، یک توضیح کوچک بهصورت Tooltip نمایش میدهد.
✅ مثال:
<p title="توضیحی برای این متن">متن نمونه</p>
📌 وقتی موس را روی متن ببرید، پیام “توضیحی برای این متن” نمایش داده میشود.
✅ نکات مهم در نوشتن ویژگیهای HTML
1. همیشه نام ویژگیها را با حروف کوچک بنویسید.
❌ TITLE | ✅ title
2. مقدار ویژگیها را همیشه داخل " یا ' قرار دهید.
❌ <a href=https://google.com>گوگل</a>
✅ <a href="https://google.com">گوگل</a>
3. استفاده از " و ' درون همدیگر:
✅
<p title='John "ShotGun" Nelson'></p>
✅
<p title="John 'ShotGun' Nelson"></p>
🔥 جمعبندی
🔹 همهی تگهای HTML میتوانند ویژگی (attribute) داشته باشند.
🔹 href مشخص میکند که یک لینک به کجا برود.
🔹 src مسیر یک تصویر را تعیین میکند.
🔹 alt برای نمایش متن جایگزین تصویر استفاده میشود.
🔹 style برای تغییر ظاهر عنصر به کار میرود.
🔹 lang زبان صفحه را مشخص میکند.
🔹 title یک Tooltip نمایش میدهد.
📌 تمرین:
یک صفحه HTML بسازید که شامل یک لینک، تصویر، پاراگراف با استایل خاص و یک title باشد. 😃