کدلپر - مرجع جامع آموزش برنامه‌نویسی

All Right Reserved © 2025 Codoloper

background codoloper

ویژگی های HTML

خانه

ویژگی‌ها (Attributes) اطلاعات بیشتری درباره‌ی عناصر HTML ارائه می‌دهند.

✅ نکات مهم درباره‌ی Attributeها:

  • همه‌ی عناصر HTML می‌توانند attribute داشته باشند.
  • attributeها اطلاعات اضافی به تگ‌ها اضافه می‌کنند.
  • همیشه در تگ شروع نوشته می‌شوند.
  • معمولاً به صورت جفت نام/مقدار هستند: name="value"

🔸 ویژگی href

ویژگی href مسیر لینکی را که باید باز شود مشخص می‌کند.

 مثال:

<a href="https://https://codoloper.liara.run/">Visitcodoloper</a>

ویژگی src

ویژگی src در تگ <img> مسیر تصویر را مشخص می‌کند.

 مثال:

<img src="img_girl.jpg">

🔹 روش‌های مشخص‌کردن آدرس (URL) در ویژگی src

دو روش برای مشخص کردن آدرس (URL) در ویژگی src وجود دارد:

  1. آدرس مطلق (Absolute URL)

  2. آدرس نسبی (Relative URL)

 

1. آدرس مطلق (Absolute URL)

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

مثال کد:

src="https://https://codoloper.liara.run//images/img_girl.jpg"

نکات:

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

  • همچنین شما کنترلی روی تصاویر خارجی ندارید؛ ممکن است ناگهان حذف شده یا تغییر کنند.

🔹 2. آدرس نسبی (Relative URL)

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

اگر آدرس بدون اسلش / شروع شود، نسبت به صفحه‌ی فعلی در نظر گرفته می‌شود.
مثال کد:

  
src="img_girl.jpg"

اگر آدرس با اسلش / شروع شود، نسبت به دامنه اصلی سایت در نظر گرفته می‌شود.
مثال کد:

 
src="/images/img_girl.jpg"

نکته:
تقریباً همیشه بهتر است از آدرس‌های نسبی استفاده کنید؛ زیرا اگر دامنه‌ی سایت را تغییر دهید، این لینک‌ها دچار مشکل نخواهند شد.

 

🔹 ویژگی‌های width و height (عرض و ارتفاع)

تگ <img> باید شامل ویژگی‌های width (عرض) و height (ارتفاع) نیز باشد که اندازه‌ی تصویر را بر حسب پیکسل مشخص می‌کنند.

مثال:

<img src="img_girl.jpg" alt="Girl with a jacket" width="200" height="200">
 
 

🔹 ویژگی alt

ویژگی alt که برای تگ <img> الزامی است، یک متن جایگزین برای تصویر مشخص می‌کند؛ در صورتی که تصویر به هر دلیلی نمایش داده نشود.
دلایل ممکن شامل سرعت پایین اینترنت، خطا در آدرس src یا استفاده‌ی کاربر از صفحه‌خوان (screen reader) می‌باشند.

مثال:

  
<img src="img_girl.jpg" alt="Girl with a jacket">

مثال: نمایش خطا
ببینید چه اتفاقی می‌افتد اگر بخواهیم تصویری را نمایش دهیم که وجود ندارد:

 
<img src="img_girl.jpg" alt="Girl with a jacket">
 

📘 شما در فصل تصاویر HTML اطلاعات بیشتری درباره‌ی تصاویر یاد خواهید گرفت.

🔹 ویژگی style

ویژگی style برای اضافه‌کردن استایل (سبک‌های ظاهری) به یک عنصر استفاده می‌شود؛ مانند رنگ، فونت، اندازه و موارد دیگر.

مثال:

 
<p style="color:red;">This is a red paragraph.</p>
 

📘 شما در فصل استایل‌های HTML اطلاعات بیشتری درباره‌ی style یاد خواهید گرفت.

🔹 ویژگی lang

شما همیشه باید ویژگی lang را در داخل تگ <html> قرار دهید تا زبان صفحه‌ی وب را مشخص کند.
این کار برای کمک به موتورهای جست‌وجو و مرورگرها انجام می‌شود.

مثال زیر زبان انگلیسی را مشخص می‌کند:

 
<!DOCTYPE html>
<html lang="en">
  <body>
    ...
  </body>
</html>
 

🔹 افزودن کد کشور به ویژگی lang

می‌توان کد کشور را نیز به کد زبان در ویژگی lang اضافه کرد.
در این صورت:

  • دو حرف اول، زبان صفحه‌ی HTML را مشخص می‌کنند.

  • دو حرف آخر، کشور مربوط به آن زبان را مشخص می‌کنند.

🔸 مثال: مشخص‌کردن زبان انگلیسی و کشور آمریکا

مثال زیر زبان انگلیسی و کشور ایالات متحده (United States) را تعیین می‌کند:

کد:

 

<!DOCTYPE html>
<html lang="en-US">
  <body>
    ...
  </body>
</html>

 

🔹 مشاهده‌ی کدهای زبان

تمام کدهای زبان را می‌توانید در مرجع کدهای زبان HTML ما مشاهده کنید.

🔹 ویژگی title

ویژگی title اطلاعات اضافی درباره‌ی یک عنصر تعریف می‌کند.

مقدار این ویژگی هنگام قرار گرفتن موس روی آن عنصر به صورت tooltip (نمایش متنی کوچک) نشان داده می‌شود.

مثال:

<p title="I'm a tooltip">This is a paragraph.</p>
 
 

🔹 پیشنهاد: همیشه از حروف کوچک برای نام ویژگی‌ها استفاده کنید

استاندارد HTML الزام نمی‌کند که نام ویژگی‌ها حتماً با حروف کوچک نوشته شوند.

ویژگی title و سایر ویژگی‌ها می‌توانند با حروف بزرگ یا کوچک نوشته شوند، مثلاً title یا TITLE.

اما W3C استفاده از حروف کوچک را در HTML توصیه می‌کند و برای نوع اسناد سختگیرانه‌تر مثل XHTML، حروف کوچک الزامی است.

درcodoloperهمیشه از نام ویژگی‌ها با حروف کوچک استفاده می‌کنیم.

🔹 پیشنهاد: همیشه مقدار ویژگی‌ها را داخل نقل قول بنویسید

استاندارد HTML نیازی به قرار دادن مقدار ویژگی‌ها در داخل نقل قول ندارد.

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

مثال خوب:

 
<a href="https://https://codoloper.liara.run//html/">Visit our HTML tutorial</a>

مثال بد:

<a href=https://https://codoloper.liara.run//html/>Visit our HTML tutorial</a>
 

گاهی اوقات باید حتماً از نقل قول استفاده کنید.
مثلاً این مثال ویژگی title را به درستی نمایش نمی‌دهد، چون شامل فاصله است:

مثال:

<p title=Description ofcodoloper>
 

در codoloperهمیشه مقدار ویژگی‌ها را داخل نقل قول می‌گذاریم.

🔹 استفاده از نقل قول تکی یا دوتایی

در HTML معمولاً از نقل قول دوتایی برای مقدار ویژگی‌ها استفاده می‌شود، اما نقل قول تکی هم قابل قبول است.

گاهی وقتی مقدار ویژگی شامل نقل قول دوتایی است، باید از نقل قول تکی استفاده کرد:

مثال:

  
<p title='John "ShotGun" Nelson'>
 

یا بالعکس:

 <p title="John 'ShotGun' Nelson">
 
 

🔹 خلاصه فصل

  • تمام عناصر HTML می‌توانند ویژگی داشته باشند

  • ویژگی href در تگ <a>، آدرس صفحه‌ای که لینک به آن می‌رود را مشخص می‌کند

  • ویژگی src در تگ <img>، مسیر تصویر را تعیین می‌کند

  • ویژگی‌های width و height برای تصاویر، اندازه تصویر را مشخص می‌کنند

  • ویژگی alt متن جایگزین برای تصویر فراهم می‌کند

  • ویژگی style برای افزودن سبک‌هایی مانند رنگ، فونت، اندازه و ... استفاده می‌شود

  • ویژگی lang در تگ <html> زبان صفحه وب را اعلام می‌کند

  • ویژگی title اطلاعات اضافی درباره یک عنصر تعریف می‌کند