تگ های مهم html و تگ هایی که نباید از آن ها استفاده کنید.

اگر با خصوصیات HTML5 آشنا شوید و از این تگ‌های معنایی جدیدش استفاده کنید، مفهوم تگ‌های HTML را بیشتر درک می کنید. با این دسته از تگ ها طراحان وب دیگر نیاز ندارند از تگ های <div> برای ایجاد ساختار سایتشان استفاده کنند. در ادامه با تگ های مهم html آشنا خواهید شد و هم چنین چندین تگ منسوخ شده را نیز به شما معرفی خواهیم کرد.

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

8 مورد از تگ های مهم html

تگ <picture>

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

تگ <datalist>

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

تگ <d‎l>

این تگ لیستی برای توضیحات مورد نیاز است و از آن به عنوان جعبه‌ای استفاده می‌شود که گروهی از اصطلاحات تعریف شده را در خود نگه می‌دارد. هر اصطلاح (<dt>) و هر تعریفی (<dd>)  با هم گروه بندی می‌شوند تا ساختاری  شبیه واژه نامه‌ها به وجود آید. اگرچه همچنان به طور پیش فرض  از همان قالب بندی اصلی استفاده می‌شود، اما HTML معنایی برای خوانندگان صفحه و بقیه ابزارهای خودکار مثل خزنده‌های وب به شدت مفید است.

تگ <details>

وقتی باید داده‌های زیادی به طور همزمان نمایش داده شود، مثل صفحه‌های پرس و جو، معمولا طراحان وب از الگوی طراحی Accordions   استفاده می‌کنند. اگر از عنصر <deatail> در کنار <summary> استفاده کنید، می‌توانید همان نتیجه را به دست آورید؛ بدون این که به JavaScript  نیاز داشته باشید. با کلیک روی summary  می‌توانید بقیه مطلب را تغییر دهید.

تگ <dfn>

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

تگ <figure>

این تگ یکی از تگ های مهم html به شمار می رود. Figure را می‌توان به این صورت تعریف کرد: محتوایی که معمولا در جریان اصلی یک سند (document) ظاهر می‌شود اما می‌توان آن را به صورت جداگانه هم تعریف کرد. عنصر <figure> تصویر یا محتوایی از منبع مرجع را پنهان می‌کند و نیز می‌تواند با <figcaption> شامل توضیحاتی از محتوهایش باشد.

تگ <code>

با نوشتار فنی می‌توان از این تگ برای جدا کردن کد کامپیوتری از بقیه‌ی جمله استفاده کرد. اگر در کنار هر واقعه‌ای از تگ <code> استفاده کنیم، مرورگر ممکن است بعضی از قالب‌های پیش فرض را برای نمایش مناسب‌تر اعمال کند. برای کد بلاک‌های بزرگتر این تگ را با تگ <pre> ترکیب کنید.

تگ <time>

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

تگ های مهم html که در نسخه ی 5 منسوخ شده است.

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

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

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

 تگ <font>

قبلا از تگ <font> برای طراحی بلوک متنی استفاده می‌شد. الان بهترین کار این است که متن را نشانه گذاری کنید و از CSS در آن استفاده کنید. طبق گزارش Web Ranking تقریبا 6.5 میلیون سایت از این تگ استفاده می‌کنند در حالی که سال‌ها است ارزشش را از دست داده است.

تگ <menuitem>

اگر تگ <menu> با تگ <menuitem> ترکیب شود، گزینه ها و اقداماتی را ارائه می‌دهد که در فهرست‌های داخلی متن اجرا می‌شوند. حالا دیگر ‌نمی‌توان این کار را کرد چون دیگر مرورگرها آن را پشتیبانی نمی‌کنند.

تگ <big>

این تگ در گذشته اندازه متن درون تگ را یک مرحله بیشتر می‌کرد. تگ <small> هنوز هم معتبر است اما تعریف آن تغییر کرده و حالا به چاپ ریز اشاره می‌کند.

تگ <center>

قبلا تگ <center> تنها راهی بود که با آن می‌شد هم محتوی بلوکی و هم محتوای درون خطی را متمرکز کرد اما حالا “text-align: center” در CSS جایگزین آن شده است که همان کار را انجام می‌دهد.

تگ <marquee>

تگ <marquee> به متنی که درون آن است اجازه می‌دهد که مثل تیتر اخبار روی صفحه نمایش حرکت کند . قبلا این خاصیت یکی از خاصیت‌های محبوب طراحان وب و بهترین ویژگی برای انیمیشن های مبتنی بر CSS بود. این تگ که از تگ های مهم html به شمار میرفت حالا دیگر این تگ منسوخ شده است.