قالب مقاله نمونه - راهنمای ساختاردهی HTML5

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

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

تگ‌های HTML5 معنایی مانند <header>، <main>، <article>، <section>، <figure> و <footer> برای ارائه یک ساختار سند واضح و معنادار استفاده می‌شوند. این امر هم خوانایی برای انسان‌ها و هم قابلیت تجزیه برای ماشین‌ها و فناوری‌های کمکی را افزایش می‌دهد.

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

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

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

• به هیچ وجه عناصر SVG گنجانده نمی‌شوند؛ هر محتوای SVG تبدیل یا حذف خواهد شد.
• هیچ گونه تبلیغات، محتوای حمایت‌شده، یا پیشنهادات مقالات مرتبط ("شاید اینها را هم دوست داشته باشید"، "انتخاب سردبیر" و غیره) وجود ندارد.
• هیچ گونه توصیه محصول، نظرات اضافی، یا بخش‌های نامرتبط وجود ندارد.
• هیچ گونه متن، پیوند، یا عناصر دارای حق چاپ وجود ندارد.

پردازش تصاویر تضمین می‌کند که تنها ویژگی‌های ضروری حفظ می‌شوند (src، srcset، sizes، alt، width، height، loading، fetchpriority، decoding) و مسیرهای src و srcset به URL‌های مطلق تبدیل می‌شوند. همه ویژگی‌های غیرضروری مانند class، style و ویژگی‌های داده خاص (مگر اینکه data-level='IMPORTANT' باشد) حذف می‌شوند.

عناصر دارای ویژگی data-level='IMPORTANT' هرگز حذف نمی‌شوند و ترتیب جریان سند اصلی آنها به شدت حفظ می‌شود، همانطور که طبق قوانین مشخص شده است.

HTML تولید شده برای گذراندن اعتبارسنجی W3C در نظر گرفته شده است و نشان‌گذاری قوی و مطابق با استانداردها را تضمین می‌کند. آزمایش دقیق در مرورگرهای متعدد (کروم، فایرفاکس، سافاری، اج) و با استفاده از ابزارهایی مانند Google Lighthouse، عملکرد، دسترسی‌پذیری و بهترین شیوه‌ها را تأیید می‌کند.

تأیید دستی، عدم وجود تبلیغات، اسکریپت‌های شخص ثالث (فراتر از تحلیل‌های اولیه در صورت مجاز بودن صریح، که در اینجا مجاز نیست) و سایر عناصر ممنوعه را تأیید می‌کند. این قالب نشان‌دهنده یک صفحه مقاله بنیادی است که آماده است تا با محتوای خاص پر شود و در عین حال به سختگیرانه‌ترین دستورالعمل‌های ساختاری و اخلاقی پایبند باشد.

برای مثال، یک تصویر درون خطی: محتوای متنی با یک آیکون کوچک نمونه، و سپس ادامه متن.