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

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

برای مشاوره بیشتر در زمینه طراحی وب، به جمع بندی ابزارهای طراحی وب، فهرست سازندگان وب سایت برتر یا راهنمای ما در مورد نحوه ساخت یک برنامه مراجعه کنید.

01. <picture>

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

02. <datalist>

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

03. <dl>

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

04. <details>

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

05. <dfn>

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

06. <figure>

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

07. <code>

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

08. <time>

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

5 تگ HTML برای دوری از آنها

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

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

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

01. <font>

از لحاظ تاریخی، از تگ <font> برای استایل دادن به یک بلوک از متن استفاده می‌شد، اکنون بهترین کار این است که متن را با CSS هدف قرار داده و به آن استایل دهید. بر اساس رتبه بندی وب پیشرفته، نزدیک به 6.5 میلیون وب سایت هنوز از این برچسب استفاده می کنند، علیرغم اینکه برای چندین سال منسوخ شده است.

02. <menuitem>

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

03. <big>

تگ <big> اندازه متن داخل تگ را یک سطح افزایش می داد. همراه آن <small> هنوز HTML معتبر است، اما اکنون معنای معنایی تعریف شده تری دارد که به چاپ کوچک اشاره دارد.

04. <center>

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

05. <marquee>

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

برای اینکه سایت خود را همانطور که می خواهید اجرا کنید، مطمئن شوید که سرویس میزبانی وب مناسب را برای خود دارید. آیا یک دسته دارایی برای ذخیره کردن دارید؟ شما به فضای ذخیره سازی ابری قابل اعتماد نیاز دارید.