ویژگیها (Attributes) اطلاعات بیشتری دربارهی عناصر HTML ارائه میدهند.
✅ نکات مهم دربارهی Attributeها:
🔸 ویژگی href
ویژگی href مسیر لینکی را که باید باز شود مشخص میکند.
مثال:
<a href="https://https://codoloper.liara.run/">Visitcodoloper</a>
ویژگی src
ویژگی src در تگ <img> مسیر تصویر را مشخص میکند.
مثال:
<img src="img_girl.jpg">
دو روش برای مشخص کردن آدرس (URL) در ویژگی src وجود دارد:
آدرس مطلق (Absolute URL)
آدرس نسبی (Relative URL)
تعریف:
لینکی است به یک تصویر خارجی که در یک وبسایت دیگر میزبانی شده است.
مثال کد:
src="https://https://codoloper.liara.run//images/img_girl.jpg"
نکات:
تصاویر خارجی ممکن است دارای حق کپیرایت باشند. اگر بدون اجازه از آنها استفاده کنید، ممکن است قوانین کپیرایت را نقض کرده باشید.
همچنین شما کنترلی روی تصاویر خارجی ندارید؛ ممکن است ناگهان حذف شده یا تغییر کنند.
تعریف:
لینکی است به تصویری که درون همان وبسایت میزبانی میشود. در این حالت، آدرس شامل نام دامنه نیست.
اگر آدرس بدون اسلش / شروع شود، نسبت به صفحهی فعلی در نظر گرفته میشود.
مثال کد:
src="img_girl.jpg"
اگر آدرس با اسلش / شروع شود، نسبت به دامنه اصلی سایت در نظر گرفته میشود.
مثال کد:
src="/images/img_girl.jpg"
نکته:
تقریباً همیشه بهتر است از آدرسهای نسبی استفاده کنید؛ زیرا اگر دامنهی سایت را تغییر دهید، این لینکها دچار مشکل نخواهند شد.
تگ <img> باید شامل ویژگیهای width (عرض) و height (ارتفاع) نیز باشد که اندازهی تصویر را بر حسب پیکسل مشخص میکنند.
مثال:
<img src="img_girl.jpg" alt="Girl with a jacket" width="200" height="200">
ویژگی 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 برای اضافهکردن استایل (سبکهای ظاهری) به یک عنصر استفاده میشود؛ مانند رنگ، فونت، اندازه و موارد دیگر.
مثال:
<p style="color:red;">This is a red paragraph.</p>
📘 شما در فصل استایلهای HTML اطلاعات بیشتری دربارهی style یاد خواهید گرفت.
شما همیشه باید ویژگی lang را در داخل تگ <html> قرار دهید تا زبان صفحهی وب را مشخص کند.
این کار برای کمک به موتورهای جستوجو و مرورگرها انجام میشود.
مثال زیر زبان انگلیسی را مشخص میکند:
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
میتوان کد کشور را نیز به کد زبان در ویژگی lang اضافه کرد.
در این صورت:
دو حرف اول، زبان صفحهی HTML را مشخص میکنند.
دو حرف آخر، کشور مربوط به آن زبان را مشخص میکنند.
مثال زیر زبان انگلیسی و کشور ایالات متحده (United States) را تعیین میکند:
کد:
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>
تمام کدهای زبان را میتوانید در مرجع کدهای زبان HTML ما مشاهده کنید.
ویژگی 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 اطلاعات اضافی درباره یک عنصر تعریف میکند
این محتوا کاملا رایگان توسط تیم کدلپر ترجمه شده و در اختیار شما کاربران عزیز قرار گرفته است، هر گونه کپی برداری برای مقاصد غیر رایگان و بدون ذکر منبع، مورد پیگیری قانونی قرار میگیرد.
ترجمه شده از منبع: https://www.w3schools.com/