بررسی و معرفی تگ های HTML5

HTML5 چیست؟

HTML5 آخرین نسخه Hypertext Markup Language است. HTML5 به گونه ای طراحی شده است که تقریباً بدون نیاز به نرم افزارهای اضافی مانند پلاگین های مرورگرها، تقریباً همه کارهایی را که می خواهید بصورت آنلاین انجام دهید را ارائه می دهد. همه آنچه که در ذهن دارید از انیمیشن گرفته تا برنامه ها، موسیقی و فیلم ها را بسیار ساده انجام می دهد، همچنین می تواند برای ساختن برنامه های فوق العاده پیچیده ای که در مرورگر وجود دارند از آن استفاده نمایید.

بنابراین برای استفاده از آن نیازی به پرداخت حق اشتراک ندارید. HTML کراس پلتفرم نیز هست، به این معنی که اهمیتی ندارد از تبلت یا تلفن هوشمند، نوت بوک یا اولترابوک یا تلویزیون هوشمند استفاده کنید. اگر مرورگر شما از HTML5 پشتیبانی می کند تمامی المان ها بی عیب و نقص کار می کنند.

تگهای اصلی مانند <nav> ، <footer> ، <header> همان طور که از نامشان پیداست مشخص کننده المانی توصیفی هستند. اما تعدادی از تگهای جدیدتر در HTML وجود دارد که طراحان وب نیز باید از آنها استفاده کنند. در این مقاله تعدادی از تگ HTML را معرفی می کنیم که شما هم میتوانید از آنها در پروژه های خود استفاده کنید و به طور خلاصه نحوه استفاده از آنها را توضیح خواهیم داد.

1. تگ <picture>

تگ <picture> مشابه تگ <img> است با این تفاوت که تگ picture به شما امکان ایجاد چند تگ <source> که هر کدام با ویژگی srcset و سایز را برای عکس مورد نظر تعریف کردیم و قابلیت انعطاف پذیری را فراهم می کند که در کدام دیوایس تصویر باید بارگذاری شوند. به عنوان مثال، می توانید تصاویر برای مرورگرهایی ارائه دهد که اندازه طول و عرض آنها بسیار بزرگ و یا حتی کوچکترین اندازه پشتیبانی می کنند.

                            <picture>   
                               <source media="(min-width: 650px)" srcset="img1.jpg">
                               <source media="(min-width: 465px)" srcset="img2.jpg">
                               <img src="img_original.jpg" style="width:auto;">
                            </picture>
                            

2. تگ <datalist>

تگ <datalist> لیستی از گزینه های از پیش تعریف شده را برای عنصر <input> فراهم می کند. هر لیست شامل مجموعه ای از عناصر <option> است که دارای مقادیر مرتبط هستند و مشخص می کند کدام از ویژگی لیست به <input> مرتبط می باشد و یا حتی یک لیست کشویی پیشنهادی را به کاربر ارائه دهید.

                            <form action="/action_page.php" method="get">   
                               <input list="browsers" name="browser">
                               <datalist id="browsers">
                                  <option value="Internet Explorer">
                                  <option value="Firefox">
                                  <option value="Chrome">
                                  <option value="Opera">
                                  <option value="Safari">
                               </datalist>
                               <input type="submit">
                            </form>
                            

3. تگ <dl>

تگ <dl> لیستی از توضیحات را تعریف می کند و مانند تگ لیست می باشد، با این تفاوت که هر آیتم از این تگ دارای دو تگ <dt> برای تعریف اصطلاح یا نام ها و <dd> برای توصیف هر اصطلاح یا نام استفاده می شوند. تگ <dl> به همراه تگ های <dt> و <dd> کاربرد دارند.

                            <dl>   
                               <dt>قهوه</dt>
                                  <dd>نوشیدنی گرم سیاه</dd>
                               <dt>شیر</dt>
                                  <dd>نوشیدنی سرد سفید</dd>
                            </dl>
                            

4. تگ <details>

از تگ <details> می توان برای ایجاد ویجت تعاملی استفاده کرد و جزئیات متنی را نشان می دهد که کاربر می تواند جزئیات محتوای را مشاهده یا مخفی کند. با استفاده از عنصر <details> در کنار <summary> می توان بدون JavaScript این کار را انجام دهیم.

در واقع یک الگوی طراحی معمولی است که تعداد زیادی از داده ها باید به طور همزمان نشان داده شوند، مانند صفحه پرسش و پاسخ که به آنها آکاردئون نیز گفته می شود.

                            <details>   
                               <summary>Copyright 1999-2018.</summary>
                               <p> - by Refsnes Data. All Rights Reserved.</p>
                               <p>All content graphics web site property company.</p>
                            </details>
                            

5. تگ <figure>

تگ <figure> تگی است که محتواهایی چون تصاویر، نمودار، لیست کدها و غیره را شامل می شود. <figure> به عنوان واحدی از محتوا تعریف می شود که غالباً در یک سند اصلی ظاهر می شود اما می تواند به طور جداگانه تفسیر شود.

عنصر <figcaption> اغلب در عنصر<figure> قرار دارد تا یک عنوان را به محتوای مشخص شده توسط برچسب های <figure> اضافه کند.

                            <figure>
                               <img src="/content/uploads/img.jpg" alt="flamingo">   
                               <figcaption><i>fig. 1</i> A pink.</figcaption>
                            </figure>
                            

6. تگ <code>

از این تگ برای نمایش متن بنحوی که بصورت یک قطعه کد کامپیوتری بنظر آید، استفاده می شود. با استفاده از تگ <code> میتوان لیست از متن با قطعه کد کامپیوتری تفکیک کرد، همین امر موجب میشود مرورگر برخی از قالب های پیش فرض را برای نمایش مناسب تر اعمال کند.

 
                               <code>A piece of computer code</code>
                            

7. کد <time>

می توانیم بسته به متن یا زبان مقادیر زمانی متفاوتی بنویسیم. با علامت گذاری این مقادیر با تگ <time> ، موتورهای جستجو و سایر ابزارهای خودکار می توانند به سرعت این اطلاعات را استخراج کنند. با استفاده از ویژگی <datetime> ، زمان مشخصی را با فرمت استاندارد تری میتوان ایجاد کرد.

 
                               <p>A piece of computer code<time>10:00</time>morning.</p>
                            

این عنصر همچنین می تواند برای رمزگذاری تاریخ ها و زمان ها به روشی قابل خواندن برای دیوایس ها مورد استفاده قرار گیرد تا کاربر بتوانند یادآورهای تولد یا رویدادهای برنامه ریزی شده را به تقویم کاربر اضافه کنند و موتورهای جستجو نیز می توانند نتایج جستجوی هوشمندانه تری ایجاد کنند.

مقاله های مرتبط

مقاله 7 ابزار عالی برای طراحی وب در سال 2019

مقاله 8 ابزار کتابخانه جاوا اسکریپت در سال 2019

بهترین ابزار رایگان طراحی وب سایت در سال 2019