با سلام و احترام خدمت شما همراهان روکسو، امروز می خواهیم در رابطه با Attribute ها و نحوه ی کار آن ها صحبت کنیم.
Attribute ها چه کار می کنند؟
همانطور که می دانید هر عنصر HTML می تواند Attribute هایی (به معنی «ویژگی») داشته باشد. کار این Attribute ها ارائه ی اطلاعات بیشتر به این عناصر است و همیشه در تگ آغازین حاضر می شوند. در اکثر مواقع این Attribute ها دارای جفت های “name=”value هستند که در ادامه با مهم ترین آن ها آشنا می شویم.
ویژگی href
لینک ها در زبان HTML با تگ <a>
تعریف می شوند و برای آدرس دهی این لینک ها از Attribute ای به نام href
استفاده می شود. مثال:
همانطور که می بینید آدرس لینک را توسط href به تگ <a>
داده ایم. در مورد لینک ها و تگ <a>
بعدا به شکل مفصل صحبت خواهیم کرد.
ویژگی src
تصاویر در زبان HTML با تگ <img>
تعریف می شوند اما این تگ تنها تعریف کننده ی یک تصویر است. اینکه کدام تصویر به نمایش در بیاید به عهده ی src
می باشد. این Attribute آدرس فایل تصویری مورد نظر را به تگ <img>
می دهد. به مثال زیر توجه کنید:
مشاهده ی خروجی این کد در JSBin
در مورد تصاویر و Attribute هایشان بعدا به صورت مفصل صحبت خواهیم کرد و اینجا تنها قصد آشنایی با Attribute ها را داریم.
ویژگی alt
alt
متنی را مشخص می کند تا اگر به هر دلیلی تصویر ما به کاربر نمایش داده نشد (مانند حذف شدن تصویر از سرور ما، تحریم شدن تصویر در ایران، ناسازگار بودن مرورگر کاربر با سایت ما و …) به جای آن متنی نمایش داده شود تا کاربر بداند آن عکس چه بوده است. همچنین این نوشته می تواند توسط screen reader ها خوانده شود (دستگاه هایی که محتوای صفحه را برای افراد نابینا می خوانند) تا افراد نابینا یا کسانی که نمی توانند صفحه را ببینند بتوانند آن را بخوانند.
از دیگر فایده های این Attribute کمک کردن به طراحی سایت است. تصور کنید در src آدرس اشتباه یک تصویر را بدهید. زمانی که سایتتان بالا می آید دیگر تصویری در کار نیست و اگر برایش alt تعریف نکرده باشید، ممکن است یادتان رفته باشد که این تصویر چه بوده است. حالا باید بگردید و ببینید این تصویر مربوط به چه پست یا مطلبی بوده اما با alt می توانید به راحتی بفهمید کدام تصویر مد نظر بوده است.
به مثال زیر توجه کنید:
اگر خروجی این این کد را در JSBin مشاهده کنید، متوجه می شوید که در ظاهر هیچ تفاوتی ایجاد نشده است. همین مسئله باعث می شود که بسیاری از طراحان سایت آن را نادیده بگیرند اما باید بدانید این Attribute از مهم ترین Attribute هایی است که باید برای تک تک عناصر تصویری تان تعریف کنید چرا که علاوه بر حرفه ای کردن صفحه تان، در موتورهای جست و جو و مسائل سئو اهمیت ویژه ای پیدا می کند.
ویژگی style
این Attribute مربوط به استایل (همان سبک و سیاق ظاهری عناصر) می باشد مانند رنگ متن، اندازه ی فونت ها و … . مثال:
با استفاده از این روش ساده، متن خود را قرمز رنگ کرده ایم! این Attribute مربوط به زبان CSS است که همیشه در کنار زبان HTML میباشد. ما در این دوره و در قسمت های آینده به صورت خلاصه در مورد CSS صحبت خواهیم کرد و در آینده ای نزدیک یک دوره ی جداگانه برای آن خواهیم داشت.
ویژگی lang
شما می توانید زبان یک سند را در تگ <html>
تعریف کنید. این کار از طریق lang
(مخفف language به معنی «زبان») انجام می شود. مثال:
مشخص کردن زبان صفحه تان برای موتور های جست و جو ضروری است. اگر به کد بالا نگاه کنید میبینید که زبان صفحه را en-US گذاشته ایم. دو حرف اول (یعنی en که مخفف English یا همان زبان انگلیسی است) مشخص کننده ی زبان است و دو حرف دوم (یعنی US یا همان آمریکا) تنها در صورتی می آیند که زبان ما چندین گویش داشته باشد. به طور مثال زبان انگلیسی گویش های آمریکایی، استرالیایی، بریتانیایی و … دارد. ما اینجا گویش آمریکایی را انتخاب کرده ایم.
ویژگی title
در واقع title
متنی را مشخص می کند که به آن tooltip میگوییم. tooltip ها همان متن هایی هستند که اگر موس را روی عنصر خاصی نگه دارید ظاهر می شوند. حتما با آن ها در اینترنت آشنا هستید. به طور مثال اگر به سایتی بروید و موس را روی عنصری که title
را به عنوان attribute داشته باشید نگه دارید، نوشته ای ظاهر می شود که معمولا شامل توضیحات اضافی در مورد آن عنصر است. در مثال زیر ما یک title
را به تگ <p>
اضافه کرده ایم:
زمانی که به JSBin رفتید، موس خود را روی پاراگرافی که میبینید نگه دارید تا متن tooltip به نمایش در بیاید.
حروف بزرگ یا کوچک؟
همانطور که می دانید در attribute های زبان HTML و تگ های مختلف آن الزامی به نوشتن حروف به صورت بزرگ یا کوچک نیست. شما می توانید title را به صورت title و یا TITLE بنویسید و تفاوتی در کد هایتان ایجاد نمی شود اما کنسرسیوم جهانی وب (W3C) پیشنهاد می کند در اسناد HTML از حروف کوچک استفاده کنید اما در اسنادی که قوانین سخت گیرانه تری دارند (مانند XHTML) مجبور هستید از حروف کوچک استفاده کنید. تقریبا در تمام دنیا HTML را با حروف کوچک می نویسند بنابراین ما نیز همین کار را می کنیم.
مثال بد و غیر استاندارد:
مثال صحیح و استاندارد:
همچنین در مواقعی نیز مجبور هستید از quotation استفاده کنید. به مثال زیر نگاه کنید:
از آن جایی که این attribute دارای اسپیس است اگر quotation ها را حذف کنید، دیگر اجرا نخواهد شد.
خلاصه ی مقاله
در این قسمت در رابطه با attribute ها و انواع مختلف آن ها صحبت کردیم و برخی از قوانین مربوط به استفاده از آن ها را بررسی کردیم. می توان گفت attribute ها پرکاربردترین اجزاء برای تگ ها هستند و بدون آن ها نمی توان حتی چند خط HTML را به صورت صحیح نوشت!
منبع: روکسو