۱۰ عنصر HTML که شاید ندانید که به آنها نیاز دارید

من بار‌ها توسط افراد زیادی شنیده‌ام که HTML آسان است، ولی من موافق این موضوع هستم که HTML شاید از سایر زبان‌ها آسان‌تر باشد اما نباید آن را تنها یک زبان بدیهی دانست.

HTML یک زبان نشانه‌گذاری قدرتمند است که می‌تواند در صورت بهره‌گیری مناسب برای ایجاد ساختار در برنامه‌های کاربردی وب و ارائه مزایای قدرتمند دسترسی مورد استفاده قرار گیرد.

بنابراین، ما در این مقاله ۱۰ عنصر HTML که احتمالا نمی‌دانستید را کشف خواهیم کرد، با این امید که برای ایجاد برنامه‌های وب قابل دسترس با ساختاری باکیفیت مورد استفاده شما قرار‌گیرد.

اگر می‌خواهید درباره HTML بیشتر بدانید، می‌توانید برای کسب عناصر HTML بیشتر به W3Schools مراجعه کنید.

Audio

تگ <audio> صدایی مانند موسیقی یا سایر استریم‌های صوتی را تعریف می‌کند. در حال حاضر سه فرمت فایل پشتیبانی می شود: MP3 ، WAV و OGG.

Blockquote

تگ <blockquote> بخشی از منبع دیگری که نقل شده‌ست را مشخص می‌کند.

۲.png

Output

تگ <output> نتیجه یک محاسبه را نشان می‌دهد. شما‌ می‌توانید از علامت اضافه و برابر استفاده کنید تا نشان دهید که مقادیر ورودی اول و دوم باید با تگ "outputted" استفاده شوند؛ همچنین می‌توانید این را با یک for نشان دهید که id های دو عنصر را برای ترکیب کردن نشان می‌دهد.

۳.png

Picture

تگ <picture> به شما امکان می‌دهد منابع تصویر را مشخص کنید. به جای داشتن یک تصویر که با توجه به اندازه مدنظرتان، آن را بالا و پایین می‌کنید، می‌توان از چندین تصویر برای پر‌کردن نمای مرورگر استفاده‌ کرد.

تگ <picture> شامل دو تگ متفاوت است: یک یا چند عنصر <source> و یک عنصر <image>.

عنصر <source> دارای ویژگی‌های زیر است‌:

Srcset: URL، تصویری را برای نمایش تعریف می‌کند
Media: هرگونه پرسش معتبر رسانه را که ممکن است در CSS تعریف کنید، می‌پذیرد
Sizes: یک مقدار عرض واحد، یک مدیاکوئری برای واحد عرض یا لیستی از مدیا کوئری با مقدار عرض جدا شده‌
Type: نوع MIME را تعریف می کند.

مرورگر توسط مقادیر ویژه برای بارگذاری مناسب‌ترین تصویر استفاده می‌کند و اولین عنصر <source> مطابقت می‌دهد و عناصر منبع بعدی را نادیده می‌گیرد.

اگر مرورگر موردنظر ما از هیچ یک از تگ‌های <source> پشتیبانی نمی‌کند، برای سازگاری باید از تگ <img> استفاده شود.

اگر مرورگر از این عنصر پشتیبانی نمی‌کند یا اگر هیچ یک از برچسب‌های <source> مطابقت ندارند، از برچسب <img> برای ایجاد سازگاری به عقب استفاده می‌شود.

۴.png

Progress

برچسب <progress> پیشرفت یک پروژه را نشان می‌دهد.

برچسب <progress> جایگزینی برای برچسب <meter> نیست‌، پس در نظر‌داشته باشید که برای نشان‌دادن میزان استفاده از فضای دیسک یا نتیجه جستجو باید از برچسب <meter> استفاده کنید.

۵.png

Meter

برچسب <meter> اندازه‌‌گیری اسکالر را در یک محدوده تعریف شده یا یک مقدار کسری تعریف می‌کند. شما همچنین می‌توانید این برچسب را با نام "gauge" جستجو کنید.

همانطور که اشاره شد از برچسب <meter> نباید برای نشان دادن پیشرفت کار استفاده شود. این نوع اجزا باید توسط یک عنصر‌ <progress> تعریف شوند.

۶.png

Template

برچسب <template> حاوی محتوایی است که از دید کاربر پنهان است‌، اما به طور مکرر برای تهیه HTML استفاده می‌شود.

۷.png

با استفاده از JavaScript می‌توانید این محتوا را با‌ روش ()‌cloneNode ارائه دهید.

۸.png

Time

برچسب <time> یک تاریخ یا زمان قابل خواندن برای انسان را تعریف می‌کند. این می‌تواند برای رمزگذاری تاریخ و زمان‌ها به روشی قابل خواندن توسط ماشین استفاده شود تا user agent‌ها بتوانند یادآوری‌های تولد یا رویدادهای برنامه‌ریزی شده را به تقویم کاربر اضافه کنند.

همچنین، این موضوع به موتورهای جستجو کمک می‌کند تا نتایج جستجوی دقیق‌تری ایجاد کنند.

۹.png

Video

برچسب <video> یک کلیپ فیلم یا یک استریم ویدئو را مشخص می‌کند. قالب‌های پشتیبانی شده شامل MP4 ، WebM و Ogg هستند.

۱۰.png

Word Break Opportunity (فرصت شکست کلمات)

اگر یک بلوک طولانی متنی داشته باشید‌، می‌توانید با استفاده از تگ <wbr> مشخص کنید که در کدام قسمت از متن، شکستن ایده‌آل است. این یکی از روش‌های مورد اطمینان از مرورگر است که با تغییر اندازه‌، متن شما را در یک قسمت عجیب نمی‌شکند.

۱۱.png