Attribute ها در زبان HTML

با سلام و احترام خدمت شما همراهان روکسو، امروز می خواهیم در رابطه با Attribute ها و نحوه ی کار آن ها صحبت کنیم.

Attribute ها چه کار می کنند؟

همانطور که می دانید هر عنصر HTML می تواند Attribute هایی (به معنی «ویژگی») داشته باشد. کار این Attribute ها ارائه ی اطلاعات بیشتر به این عناصر است و همیشه در تگ آغازین حاضر می شوند. در اکثر مواقع این Attribute ها دارای جفت های "name="value هستند که در ادامه با مهم ترین آن ها آشنا می شویم.

ویژگی href

لینک ها در زبان HTML با تگ <a> تعریف می شوند و برای آدرس دهی این لینک ها از Attribute ای به نام href استفاده می شود. مثال:

<!DOCTYPE html>
<html>
<body>

<h2>The href Attribute</h2>
<p>HTML links are defined with the a tag. The link address is specified in the href attribute:</p>

<a href="https://roxo.ir/plus">This is a link</a>

</body>
</html>

همانطور که می بینید آدرس لینک را توسط href به تگ <a> داده ایم. در مورد لینک ها و تگ <a> بعدا به شکل مفصل صحبت خواهیم کرد.

ویژگی src

تصاویر در زبان HTML با تگ <img> تعریف می شوند اما این تگ تنها تعریف کننده ی یک تصویر است. اینکه کدام تصویر به نمایش در بیاید به عهده ی src می باشد. این Attribute آدرس فایل تصویری مورد نظر را به تگ <img> می دهد. به مثال زیر توجه کنید:

<!DOCTYPE html>
<html>
<body>

<h2>The src Attribute</h2>
<p>HTML images are defined with the img tag, and the filename of the image source is specified in the src attribute:</p>

<img src="https://www.roxo.ir/blog-panel/wp-content/uploads/2019/03/HTML-define-element.jpg" width="800" height="500">

</body>
</html>

مشاهده ی خروجی این کد در JSBin

اگر به مثال بالا دقت کنید، دو Attribute دیگر نیز می بینید؛ width (به معنی «عرض») و height («طول»). در واقع اینها دو Attribute دیگر هستند که در واحد پیکسل نوشته می شوند بنابراین در تصویر بالا که "width="800 است منظور این است که عرض تصویر 800 پیکسل باشد.

در مورد تصاویر و Attribute هایشان بعدا به صورت مفصل صحبت خواهیم کرد و اینجا تنها قصد آشنایی با Attribute ها را داریم.

ویژگی alt

alt متنی را مشخص می کند تا اگر به هر دلیلی تصویر ما به کاربر نمایش داده نشد (مانند حذف شدن تصویر از سرور ما، تحریم شدن تصویر در ایران، ناسازگار بودن مرورگر کاربر با سایت ما و ...) به جای آن متنی نمایش داده شود تا کاربر بداند آن عکس چه بوده است. همچنین این نوشته می تواند توسط screen reader ها خوانده شود (دستگاه هایی که محتوای صفحه را برای افراد نابینا می خوانند) تا افراد نابینا یا کسانی که نمی توانند صفحه را ببینند بتوانند آن را بخوانند.

از دیگر فایده های این Attribute کمک کردن به طراحی سایت است. تصور کنید در src آدرس اشتباه یک تصویر را بدهید. زمانی که سایتتان بالا می آید دیگر تصویری در کار نیست و اگر برایش alt تعریف نکرده باشید، ممکن است یادتان رفته باشد که این تصویر چه بوده است. حالا باید بگردید و ببینید این تصویر مربوط به چه پست یا مطلبی بوده اما با alt می توانید به راحتی بفهمید کدام تصویر مد نظر بوده است.

به مثال زیر توجه کنید:

<!DOCTYPE html>
<html>
<body>

<h2>The alt Attribute</h2>
<p>The alt attribute should reflect the image content, so users who cannot see the image gets an understanding of what the image contains:</p>

<img src="https://www.roxo.ir/blog-panel/wp-content/uploads/2019/03/HTML-define-element.jpg" alt="HTML5 Tutorials from Roxo.ir" width="800" height="500">


</body>
</html>

اگر خروجی این این کد را در JSBin مشاهده کنید، متوجه می شوید که در ظاهر هیچ تفاوتی ایجاد نشده است. همین مسئله باعث می شود که بسیاری از طراحان سایت آن را نادیده بگیرند اما باید بدانید این Attribute از مهم ترین Attribute هایی است که باید برای تک تک عناصر تصویری تان تعریف کنید چرا که علاوه بر حرفه ای کردن صفحه تان، در موتورهای جست و جو و مسائل سئو اهمیت ویژه ای پیدا می کند.

ویژگی style

این Attribute مربوط به استایل (همان سبک و سیاق ظاهری عناصر) می باشد مانند رنگ متن، اندازه ی فونت ها و ... . مثال:

<!DOCTYPE html>
<html>
<body>

<h2>The style Attribute</h2>
<p>The style attribute is used to specify the styling of an element, like color:</p>

<p style="color:red">I am a paragraph.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

با استفاده از این روش ساده، متن خود را قرمز رنگ کرده ایم! این Attribute مربوط به زبان CSS است که همیشه در کنار زبان HTML می‌باشد. ما در این دوره و در قسمت های آینده به صورت خلاصه در مورد CSS صحبت خواهیم کرد و در آینده ای نزدیک یک دوره ی جداگانه برای آن خواهیم داشت.

ویژگی lang

شما می توانید زبان یک سند را در تگ <html> تعریف کنید. این کار از طریق lang (مخفف language به معنی «زبان») انجام می شود. مثال:

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

...

</body>
</html>

مشخص کردن زبان صفحه تان برای موتور های جست و جو ضروری است. اگر به کد بالا نگاه کنید میبینید که زبان صفحه را en-US گذاشته ایم. دو حرف اول (یعنی en که مخفف English یا همان زبان انگلیسی است) مشخص کننده ی زبان است و دو حرف دوم (یعنی US یا همان آمریکا) تنها در صورتی می آیند که زبان ما چندین گویش داشته باشد. به طور مثال زبان انگلیسی گویش های آمریکایی، استرالیایی، بریتانیایی و ... دارد. ما اینجا گویش آمریکایی را انتخاب کرده ایم.

برای زبان فارسی باید از عبارت fa استفاده کنید. برای کامل تر بودن بهتر است آن را به شکل fa-IR بنویسید تا با فارسی کشورهای اطرافمان تمایز پیدا کند.

ویژگی title

در واقع title متنی را مشخص می کند که به آن tooltip میگوییم. tooltip ها همان متن هایی هستند که اگر موس را روی عنصر خاصی نگه دارید ظاهر می شوند. حتما با آن ها در اینترنت آشنا هستید. به طور مثال اگر به سایتی بروید و موس را روی عنصری که title را به عنوان attribute داشته باشید نگه دارید، نوشته ای ظاهر می شود که معمولا شامل توضیحات اضافی در مورد آن عنصر است. در مثال زیر ما یک title را به تگ <p> اضافه کرده ایم:

<!DOCTYPE html>
<html dir='rtl' align='middle'>
<body>

<h2 title="من یک تیتر هستم">The title Attribute</h2>

<p title="هستم tooltip من یک">
موس خود را روی این متن بیاورید و تکان ندهید تا توضیحات را ببینید.
</p>

</body>
</html>

مشاهده ی خروجی در JSBin

زمانی که به JSBin رفتید، موس خود را روی پاراگرافی که میبینید نگه دارید تا متن tooltip به نمایش در بیاید.

حروف بزرگ یا کوچک؟

همانطور که می دانید در attribute های زبان HTML و تگ های مختلف آن الزامی به نوشتن حروف به صورت بزرگ یا کوچک نیست. شما می توانید title را به صورت title و یا TITLE بنویسید و تفاوتی در کد هایتان ایجاد نمی شود اما کنسرسیوم جهانی وب (W3C) پیشنهاد می کند در اسناد HTML از حروف کوچک استفاده کنید اما در اسنادی که قوانین سخت گیرانه تری دارند (مانند XHTML) مجبور هستید از حروف کوچک استفاده کنید. تقریبا در تمام دنیا HTML را با حروف کوچک می نویسند بنابراین ما نیز همین کار را می کنیم.

در مورد دیگر استاندارد ها نیز باید بگوییم در HTML5 نیازی به قرار دادن attribute ها در quotation نیست اما سعی کنید همیشه از چنین کاری دوری کنید چرا که استاندارد نیست و به سئوی شما ضربه می زند.

مثال بد و غیر استاندارد:

<a href=https://roxo.ir>

مثال صحیح و استاندارد:

<a href="https://roxo.ir">

همچنین در مواقعی نیز مجبور هستید از quotation استفاده کنید. به مثال زیر نگاه کنید:

<p title=About roxo.ir>

از آن جایی که این attribute دارای اسپیس است اگر quotation ها را حذف کنید، دیگر اجرا نخواهد شد.

خلاصه ی مقاله

در این قسمت در رابطه با attribute ها و انواع مختلف آن ها صحبت کردیم و برخی از قوانین مربوط به استفاده از آن ها را بررسی کردیم. می توان گفت attribute ها پرکاربردترین اجزاء برای تگ ها هستند و بدون آن ها نمی توان حتی چند خط HTML را به صورت صحیح نوشت!