در این مطلب قصد داریم در مورد 8 تگ HTML که باید از آنها در پروژه های خود استفاده کنید و 5 موردی که باید از استفاده ی آنها اجتناب کنید صحبت کنیم. لطفا با ما همراه باشید.
در ابتدا باید بدانید که همه ی تگ های HTML بصورت یکسان ایجاد نمی شوند.
وقتی ورژن آخر زبان HTML یعنی HTML5 معرفی شد، گروهی از تگ های (Tag) جدید را به همراه داشت که معنا و مفهوم بیشتری به تگ های قدیمی HTML بخشید. این یک خبر عالی برای طراحان وب سایت ها بود، چون دیگر نیازی به ایجاد تگ <div> (بخش بندی) برای ساختن وب سایت خودشان نداشتند. در حالیکه تگ های پایه زبان HTML مانند <header> (سربرگ) و <footer> (پاورقی) و یا تگ <nav> (گشت و گذار در صفحه وب سایت) خودشان بدیهی و آشکار هستند، اما تگ های خیلی زیادی در زبان HTML5 وجود دارند که طراحان وب سایت ها باید از آنها نیز استفاده کنند.
در این مقاله ما هشت تگ محبوب زبان HTML که شما باید از آنها استفاده کنید را جمع بندی می کنیم و شرح می دهیم که چگونه آن ها را به کار ببرید و برای حفظ توازن، پنج تگ را که باید به تاریخ بپیوندند و دیگر مورد استفاده قرار نگیرند را انتخاب کرده ایم.
1. تگ <picture> (تصویر)
تگ <picture> همان مشابه تگ <img> (عکس یا تصویر) می باشد. تگ <picture> انعطاف بیشتری دارد، چرا که با صدور مجوز استفاده از عبارات چندگانه <source> برای منابع یکسان یا برای همان منبع فراهم می کند و می تواند مبتنی بر پشتیبانی از عکس یا درخواست مربوط به رسانه تنظیم شود. به عنوان مثال در مرورگر هایی که از تصاویر با فرمت های جدید تر و با اندازه کوچکتر استفاده می کنند می تواند از عکس هایی با فرمت WebP (فرمت جدید برای تصاویر) پشتیبانی کند.
2. تگ <datalist> (لیست داده)
تگ <datalist> واسطی برای تشخیص و تکمیل سازی خودکار را برای عناصر <input> (ورودی) فراهم می کند. هر لیست شامل مجموعه ای از <option> می باشد که هر کدام مقادیری دارند. وقتی خصوصیت لیست به یک عنصر <input> داده می شود، می تواند یک لیست کشویی بسازد و یا حتی پیشنهاداتی از کلمات را همزمان که کاربر تایپ می کند نمایش دهد.
3. تگ <dl> (لیست توصیفی)
این لیست توصیفی یا تگ <dl> حاوی گروهی از اصطلاحات از پیش تعریف شده می باشد. هر کدام از اصطلاحات <dt> و تعاریف <dd> با یکدیگر گروه بندی می شوند تا ساختاری همانند واژه نامه را تشکیل دهند. گرچه این واژه نامه قالب بندی پایه را بصورت پیش فرض اعمال می کند اما زبان HTML معنایی از قابلیت صفحه خوانی و همچنین ابزارهای خودکار مانند Crawler ها نیز بهره می برد.
4. تگ <details> (جزئیات)
وقتی نیاز داریم داده های زیادی را به سرعت نمایش دهیم (به طور مثال صفحات پرسش ها)، ابزار های نمایش محتوا الگوی طراحی متداولی برای این کار هستند. با استفاده از تگ <details> همراه با تگ <summary> می توانیم به همان نتیجه موثر بدون نیاز به استفاده از زبان جاوا اسکریپت دست پیدا کنیم. استفاده کردن از تگ <summary> می تواند باعث تغییر وضعیت بقیه محتوا شود.
5. تگ <dfn> (تعریف)
اصطلاحات پیچیده یا مخفف شده معمولا برای کسانی که به آنها آشنا نیستند نیاز به تعریف دارند. اصطلاحی که درون تگ <dfn> قرار گرفته باشد توسط متنی که همراه آن نوشته می شود، تعریف می شود. این تگ یک عنصر درون خطی است و به گونه ای طراحی شده که برای برجسته کردن تعاریف در زبان انسان استفاده می شود.
6. تگ <figure> (محتوای تصویری)
محتوای تصویری به عنوان واحدی از محتوا تعریف می شود که غالبا در جریان اصلی یک document ظاهر می شود، اما می تواند جداگانه نیز تفسیر شود. تگ <figure> می تواند محتوای تصویری و یا اشاره ای را مشخص کند. همچنین شامل توصیفی از محتوای خود هم می باشد. (یعنی تگ <figcaption>)
7. تگ <code> ( کد یا دستور)
زمانی هست که شما کدی را در بک اند سایت خود استفاده می کنید و زمانی هست که مثلا در حال تهیه یک مطلب آموزشی هستید و می خواهید به مخاطبان خود بگویید از چه کدی در پروژه خود باید استفاده کنند، در این زمان است که تگ <code> مورد استفاده قرار می گیرد. زمانی که از این تگ استفاده می کنید، مرورگر متوجه می شود که شما قصد ندارید آن را در وب سایت خود اعمال کنید و صرفا می خواهید عینا آن کد را به مخاطبان یا بازدیدکنندگان وب سایت خود نمایش دهید.
اگر قطعه کدی که قصد استفاده از آن را دارید، حاوی مقدار زیادی کد می باشد، می توانید از تگ <pre> استفاده کنید.
8. تگ <time> (زمان)
تگ <time> یکی از مهمترین تگ هایی است که شما استفاده می کنید. تصور کنید که شما یک مطلبی را می خواهید در وب سایتتان منتشر کنید. بسیاری از کاربران برایشان مهم است که این مطلب در چه زمانی منتشر شده است ( چرا که می خواهند بدانند آن مطلب به روز است یا یک مطلب قدیمی و انقضا گذشته است )؛ همینطور موتورهای جستجو مانند گوگل، با استفاده از این تگ، به سرعت متوجه می شوند که مطلب شما در چه زمانی منتشر شده است و می توانند سریعتر برای ایندکس کردن آن اقدام نمایند.
همچنین می توانید از ویژگی (attribute) datetime استفاده کنید تا زمان مشخصی را در یک فرمت سازگار با زبان ماشین ارائه دهد.
5 تگ HTML که باید از آنها اجتناب کنید
زبان HTML تگ هایی قدیمی دارد که هنوز هم استفاده می شوند و هنوز هم کار می کنند. از آنجایی که برای این تگ های قدیمی جایگزین های بهتر و جدیدتری وجود دارد، بهتر است که از آنها استفاده کنید. چرا که بسیاری از آن تگ های قدیمی، در ورژن های جدید مرورگر ها پشتیبانی نمی شوند و ممکن است استفاده از آنها، باعث به هم ریختن صفحات شما شود. پنج تگی که در ذیل به آنها اشاره می کنیم را به خاطر داشته باشید و اگر در کدهای خود آنها را دیدید، به سرعت آنها را با تگ های جدید و مناسب تر جایگزین کنید.
1. تگ <font> (فونت حروف)
در گذشته از تگ <font> برای تغییر فونت حروف داخل یک صفحه وب استفاده می شد. ولی در حال حاضر دیگر نیاز نیست فونت صفحه ی خود را در HTML معرفی کنید، بلکه این کار باید در CSS صورت بگیرد. با اینکه مدت زمان زیادی از انتشار HTML5 و CSS3 می گذرد، ولی هنوز نزدیک به 6.5 میلیون وب سایت، از این تگ قدیمی در صفحات خود استفاده می کنند.
وقتی این آیتم با تگ <menu> ترکیب می شود، گزینه ها و اقداماتی را برای اجرا شدن داخل منوهای متن فراهم کند. این تگ نیز به دلیل پشتیبانی نکردن بیشتر مرورگر ها حذف شد.
3. تگ <big> (بزرگ)
تگ <big> سایز متن درون تگ را به اندازه یک level بزرگ می کرد. که دیگر نیاز از آن استفاده کنید، بلکه می توانید با CSS این تغییرات را در تگ های تعریفی خود مشخص کنید.
4. تگ <center> (مرکز)
قبلا از تگ <center> برای وسط چین کردن محتوای متنی و محتوای درون خطی استفاده می کردند. اما حالا در زبان CSS با کد” text-align: center” به راحتی و به صورت استاندارد می توان همان کار را انجام داد.
5. تگ <marquee> (متحرک سازی)
از تگ <marquee> برای به حرکت درآوردن متن درون داخل تگ در صفحه استفاده می شود (همانند تیترهای خبری). با اینکه قبلا یکی از ویژگی های محبوب وب بود اما در برابر ابزارهای متحرک سازی زبان CSS دیگر کاربردی نیست. در حال حاضر با استفاده از CSS شما می توانید متون خود را ویژگی های بسیار منحصر به فردی متحرک سازی کنید.
منبع مطلب : 8 HTML tags you need to be using (and 5 to avoid) نوشته شده توسط ترجمه شده توسط روشا وب
