!– کاربر جزئیات برو اینجا →
بخش>
استفاده: ایده آل برای برنامه های پویا که به ابرداده متکی هستند. به علاوه، کد شما را تمیز نگه می دارد!
3 hidden ویژگی – پنهان کردن عناصر بدون CSS
استفاده را فراموش کنید display: none; در شیوه نامه های شما این hidden ویژگی یک روش معنایی تر برای پنهان کردن عناصر است. استفاده از آن آسان است و به مرتب نگه داشتن HTML شما کمک می کند.
This paragraph is visible.
hidden>This paragraph is hidden.
استفاده: از آن با جاوا اسکریپت برای نمایش یا پنهان کردن عناصر به صورت پویا بدون نگرانی در مورد سبک ها استفاده کنید.
4.
– دسترسی بهتر به فرمفرم ها ممکن است به هم ریخته شوند، به خصوص اگر ورودی های زیادی داشته باشند. وارد کنید
. این برچسب‌ها به شما کمک می‌کنند کنترل‌های مرتبط را با هم گروه‌بندی کنید، ساختاری واضح و قابل دسترس برای همه کاربران، از جمله کاربرانی که از صفحه‌خوان‌ها استفاده می‌کنند، ارائه می‌کنند.
استفاده: همه چیز در مورد بهبود تجربه کاربر است. پیمایش و درک فرم های ساختاریافته آسان تر است!
5. download ویژگی – دانلود فایل را ساده کنید
آیا می خواهید یک فایل دانلود در سایت خود ارائه دهید؟ این download صفت بر روی یک برچسب به شما امکان می دهد این کار را یکپارچه انجام دهید. حتی می توانید نام فایلی که فایل باید به عنوان ذخیره شود را مشخص کنید.
استفاده: دانلود فایل ها را برای کاربران شما ساده می کند. بدون نیاز به تنظیمات اضافی سمت سرور!
6. spellcheck – بررسی املا را در ورودی های متن فعال کنید
آیا تا به حال خواسته اید که املا را به ورودی های متن یا قسمت های متنی خود اضافه کنید؟ اینspellcheckویژگی به شما امکان می دهد املای داخلی مرورگر را روشن کنید. این می تواند برای افزایش تجربه کاربر با کاهش اشتباهات تایپی و اشتباهات بسیار مفید باشد.
استفاده: اطمینان حاصل کنید که کاربران همیشه با کمک به آنها از اشتباهات تایپی شرم آور اجتناب می کنند، تجربه خوبی دارند.
7. inputmode – بهبود ورودی موبایل
صفحه کلید مجازی را برای کاربران دستگاه های تلفن همراه با استفاده ازinputmodeویژگی این ویژگی مشخص می‌کند که چه نوع ورودی مورد انتظار است، و صفحه‌کلیدی را فعال می‌کند که برای نوع داده‌های وارد شده بهینه شده است.
استفاده: ارائه صفحه کلید مناسب به کاربران کمک می کند تا داده ها را سریع و صحیح وارد کنند. عالی برای سایت های موبایل پسند!
8.
– محتوای قابل توسعه بومی ایجاد کنیدآیا نیاز به ایجاد محتوای قابل ارتقا بدون تکیه بر جاوا اسکریپت دارید؟ این
عناصر یک راه حل ساده و داخلی برای بخش های جمع شونده ارائه می دهند. ایده‌آل برای پرسش‌های متداول، منوها یا هر محتوای دیگری که از مخفی‌شدن تا زمانی که نیاز باشد سود میبرد.
استفاده: این یک روش سبک وزن و در دسترس برای تغییر قابلیت مشاهده محتوا بدون استفاده از جاوا اسکریپت است.
9. draggable -افزودن قابلیت کشیدن و رها کردن
آیا می خواهید قابلیت کشیدن و رها کردن را به سایت خود اضافه کنید؟ کاربر می تواند عناصر را با ویژگی “کشیدن” بکشد. این یک راه آسان برای معرفی تعامل بدون نیاز به کتابخانه های خارجی است.
![]()
src="image.jpg" alt="Draggable Image" draggable="true">
استفاده: ترکیب کنیدdraggableبا رویدادهای جاوا اسکریپت برای ایجاد تجربیات سفارشی کشیدن و رها کردن!
10.type="date"– ساده کردن ورودی تاریخ
به جای استفاده از فیلدهای متنی و جاوا اسکریپت برای مدیریت تاریخ ها، سعی کنید از آن استفاده کنید . این یک انتخابگر تاریخ بومی در اکثر مرورگرهای مدرن ایجاد می‌کند و ورود تاریخ‌ها را برای کاربران آسان‌تر می‌کند.
استفاده: یک رابط سازگار و با کاربری آسان برای ورودی تاریخ ارائه می کند، بدون نیاز به جاوا اسکریپت اضافی.
11. srcset و sizes – بهینه سازی تصاویر برای دستگاه های مختلف
اگر می‌خواهید وب‌سایت خود را سریع‌تر و واکنش‌گراتر کنید، از آن استفاده کنید srcset وsizesصفات در
![]()
src="image-small.jpg"
srcset="image-medium.jpg 768w, image-large.jpg 1200w"
sizes="(max-width: 768px) 100vw, (min-width: 769px) 50vw"
alt="Responsive Image">
استفاده: ارائه تصویر مناسب برای صفحه نمایش مناسب، کاهش زمان بارگذاری و بهبود تجربه کاربر.
12. placeholder – ورودی های فرم را با نکات افزایش دهید
آیا نیاز به ارائه یک اشاره یا مثال برای ورودی های فرم خود دارید؟ استفاده کنیدplaceholderویژگی برای نمایش یک اشاره کوتاه در داخل یک فیلد ورودی قبل از اینکه کاربر مقداری را وارد کند.
استفاده: این به کاربران کمک می کند بدون اینکه فرم شما را با متن اضافی درهم بریزند، بفهمند چه ورودی مورد انتظار است.
غذای آماده نهایی
این ترفندهای HTML نشان می‌دهد که HTML چیزهای بسیار بیشتری از آنچه به چشم می‌آید وجود دارد. فقط به اصول اولیه بسنده نکنید – این ویژگی ها را کاوش و آزمایش کنید تا صفحات وب پویا، در دسترس و کاربرپسندتر بسازید. شیرجه بزنید و شروع به آزمایش کنید تا تمام کارهای جالبی که HTML می تواند انجام دهد را کشف کنید!
