صفات HTML
دسته بندی : آموزش HTML سطح مقاله : مقدماتی زمان مطالعه : 2 دقیقه آخرین بروز رسانی: 09 آبان 1399صفات HTML اطلاعات اضافی را در مورد عناصر HTML ارائه میدهند. این اطلاعات به مرورگر کمک میکنند تا نحوه نمایش و عملکرد عنصر را درک کند.
جهان شگفتانگیز صفات HTML
صفات HTML، دروازهای به دنیای شگفتانگیز و پر رمز و راز صفحات وب هستند. این المانهای کوچک، اطلاعات حیاتی را در مورد نحوه نمایش و عملکرد عناصر HTML به مرورگر ارائه میدهند. بدون صفات، صفحات وب ما چیزی جز صفحات خالی و بیروح نخواهند بود.
معرفی انواع صفات
دو نوع صفت در HTML وجود دارد:
1. صفات عمومی:
این صفات میتوانند در اکثر عناصر HTML استفاده شوند.
برخی از صفات عمومی پرکاربرد عبارتند از:
id
: شناسه منحصر به فرد برای عنصرclass
: نام کلاس برای عنصرstyle
: تنظیمات سبک برای عنصرtitle
: متن راهنما برای عنصرlang
: زبان محتوای عنصرdir
: جهت متن در عنصرtabindex
: ترتیب تب برای عنصرaccesskey
: کلید میانبر برای دسترسی به عنصرcontenteditable
: قابل ویرایش بودن محتوای عنصرhidden
: پنهان کردن عنصرdata
: ذخیره اطلاعات سفارشی در عنصر
2. صفات اختصاصی:
این صفات فقط در یک یا چند عنصر خاص قابل استفاده هستند.
برخی از صفات اختصاصی پرکاربرد عبارتند از:
href
: در تگa
برای تعیین آدرس لینکsrc
: در تگimg
برای تعیین مسیر تصویرalt
: در تگimg
برای متن جایگزین تصویرtype
: در تگinput
برای تعیین نوع ورودیvalue
: در تگinput
برای تعیین مقدار پیشفرضname
: در تگinput
برای نام عنصرfor
: در تگlabel
برای مرتبط کردن با عنصرmethod
: در تگform
برای تعیین روش ارسال فرمaction
: در تگform
برای تعیین آدرس ارسال فرم
ساختار و نحوه استفاده از صفات
ساختار صفات :
- نام صفت: به حروف کوچک نوشته میشود.
- مقدار صفت: در داخل علامت نقل قول (“”) یا آپستروف (‘) قرار میگیرد.
- مثال:
HTML
<img src="image.jpg" alt="My image">
در مثال بالا، src
و alt
دو صفت هستند.
src
: نام صفت است که به مرورگر میگوید تصویر را از کجا بارگیری کند.- “image.jpg”: مقدار صفت
src
است که مسیر تصویر را مشخص میکند. alt
: نام صفت دیگری است که به مرورگر متن جایگزین تصویر را در صورت عدم بارگیری تصویر ارائه میدهد.- “My image”: مقدار صفت
alt
است که متن جایگزین تصویر را مشخص میکند.
کاربردهای خاص صفات HTML
صفات HTML علاوه بر کاربردهای عمومی، کاربردهای خاص و جالبی نیز دارند که میتوانند صفحات وب شما را بهینهسازی کرده و تجربه کاربری بهتری را برای کاربران شما فراهم میکند.
برای آموزش طراحی سایت از مبتدی تا حرفهای در زمینه html و css به شما پیشنهاد میکنیم مقالات این دسته را در آکادمی بینالمللی دویکس مطالعه کنید.
1. سئو:
صفات HTML نقشی کلیدی در سئو ایفا میکنند. این صفات به موتورهای جستجو مانند گوگل کمک میکنند تا محتوای صفحات وب شما را درک کنند و رتبه آن را در نتایج جستجو تعیین کنند.
title
- عنوان صفحه را مشخص میکند.
- به موتورهای جستجو در درک موضوع صفحه کمک میکند.
- در نتایج جستجو نمایش داده میشود.
meta name="description"
:
- خلاصهای از محتوای صفحه را ارائه میدهد.
- در نتایج جستجو نمایش داده میشود.
- به موتورهای جستجو در درک موضوع صفحه کمک میکند.
alt
:
- متن جایگزین برای تصاویر را مشخص میکند.
- به موتورهای جستجو در درک محتوای تصاویر کمک میکند.
- برای کاربران دارای معلولیت و کمبینا مفید است.
lang
:
- زبان محتوای صفحه را مشخص میکند.
- به موتورهای جستجو در نمایش نتایج جستجو به زبان مورد نظر کاربر کمک میکند.
hreflang
:
- زبان و منطقه محتوای صفحه را مشخص میکند.
- به موتورهای جستجو در نمایش نتایج جستجو به زبان و منطقه مورد نظر کاربر کمک میکند.
keywords
:
- کلمات کلیدی مرتبط با محتوای صفحه را مشخص میکند.
- تاثیر آن بر سئو به طور کامل اثبات نشده است.
schema.org
:
- به موتورهای جستجو در درک نوع محتوای صفحه (مانند مقاله، محصول، رویداد و…) کمک میکند.
- میتواند به رتبهبندی بهتر صفحات در نتایج جستجو کمک کند.
- استفاده از صفات
title
وalt
: برای ارائه توضیحات متنی به موتورهای جستجو و بهبود رتبه سئو صفحات وب. - استفاده از صفت
lang
: برای تعیین زبان محتوای صفحات وب و کمک به موتورهای جستجو در درک بهتر محتوای صفحات
2. دسترسپذیری:
- استفاده از صفت
alt
: برای ارائه متن جایگزین برای تصاویر و کمک به افراد نابینا و کمبینا در درک محتوای صفحات وب - استفاده از صفت
aria-label
: برای ارائه توضیحات متنی برای عناصر مختلف صفحات وب و کمک به افراد دارای معلولیت در استفاده از صفحات وب.
3. فرمها:
- استفاده از صفت
type
: برای تعیین نوع ورودی در فرمها، مانند متن، عدد، تاریخ و… - استفاده از صفت
required
: برای الزامی کردن پر کردن برخی از فیلدهای فرم - استفاده از صفت
placeholder
: برای ارائه متن راهنما در داخل فیلدهای فرم
4. انیمیشن و جلوههای بصری:
- استفاده از صفت
style
: برای اعمال انیمیشن و جلوههای بصری به عناصر مختلف صفحات وب - استفاده از صفات
data-*
: برای ذخیره اطلاعات سفارشی و استفاده از آنها در JavaScript برای ایجاد انیمیشن و جلوههای بصری
5. ریسپانسیو:
- استفاده از صفت
media
: برای نمایش عناصر مختلف صفحات وب در دستگاههای مختلف مانند موبایل، تبلت و دسکتاپ - استفاده از صفت
viewport
: برای تنظیم ابعاد viewport صفحات وب برای نمایش صحیح در دستگاههای مختلف
نکاتی برای استفاده بهتر از صفات HTML
1. از نامهای واضح و گویا برای صفات استفاده کنید.
نام صفات باید به طور واضح بیان کند که صفت چه کاری انجام میدهد. به عنوان مثال، به جای استفاده از نام “my-attribute” از نام “image-alt” برای صفت alt
تصویر استفاده کنید.
2. از مقادیر صحیح و معتبر برای صفات استفاده کنید.
مقادیر صفات باید با نوع داده صفت مطابقت داشته باشند. به عنوان مثال، برای صفت type
در تگ input
باید از یک نوع داده معتبر مانند “text” یا “number” استفاده کنید.
3. از صفات به طور صحیح و اصولی استفاده کنید.
از صفات فقط برای اهداف مورد نظر خود استفاده کنید. از استفاده از صفات به روشهای غیرمعمول یا غیراخلاقی خودداری کنید.
4. از اسناد و منابع معتبر برای یادگیری بیشتر در مورد صفات HTML استفاده کنید.
منابع آنلاین و کتابهای زیادی در مورد HTML وجود دارند که میتوانید از آنها برای یادگیری بیشتر در مورد صفات HTML استفاده کنید.
5. از ابزارهای آنلاین برای بررسی صفات HTML خود استفاده کنید.
ابزارهای آنلاین زیادی وجود دارند که میتوانید از آنها برای بررسی صفات HTML خود و اطمینان از صحت آنها استفاده کنید.
6. از صفات HTML به طور متعادل و نه افراطی استفاده کنید.
استفاده بیش از حد از صفات HTML میتواند به کد شما آسیب برساند و خوانایی آن را دشوار کند.
با رعایت این نکات، میتوانید از صفات HTML به طور موثر و کارآمد برای ارتقای صفحات وب خود استفاده کنید.
این مقاله چقدر براتون مفید بود؟