در HTML5، هفت مدل محتوای اصلی (Content Model) معرفی می شود. هر عنصر می تواند در هیچ یک یا تعدادی از این مدل ها (که عناصر مشابه با ویژگی های مشابه را با هم گروه بندی می کند) قرار بگیرد.
این 7 مدل عبارتند از:
- Metadata
- Embedded
- Interactive
- Heading
- Phrasing
- Flow
- Sectioning
⚠️ مدل‌های محتوای HTML5 به گونه‌ای طراحی شده‌اند که ساختار نشانه‌گذاری را برای مرورگر و طراح وب معنادارتر کنند.
مدل های محتوایی
- Metadata: محتوایی است که ارائه یا رفتار بقیه محتوا را تنظیم می‌کند یا ارتباط سند HTML با بقیه ی اسناد را مشخص می‌کند. این عناصر در Head یافت می‌شود.
برخی از عناصر این دسته: <base>, <link>, <meta>, <noscript>, <script>, <style>, <title>
- Embedded: محتوایی است که منابع دیگری را به سند وارد می‌کند.
برخی از عناصر این دسته: <audio>, <video>, <canvas>, <iframe>, <img>, <math>, <object>, <svg>
- Interactive: محتوایی است که به طور خاص برای تعامل با کاربر در نظر گرفته شده است.
برخی از عناصر این دسته: <audio>, <video>, <button>, <details>, <embed>, <iframe>, <img>, <input>, <label>, <object>, <select>, <textarea>
- Heading: محتوایی است که عنوان یک بخش را تعریف می کند.
برخی از عناصر این دسته: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <hgroup>
- Phrasing: محتوایی که متن سند و عناصر درون پاراگراف را مشخص می کند. اجرای محتوای phrasing پاراگراف ها را تشکیل می دهد. این مدل دارای تعدادی عناصر inline مشترک با HTML4 است.
برخی از عناصر این دسته: <input>, <video>, <img>, <span>, <strong>, <label>, <br />, <small>, <sub>
- Flow content: این محتوا شامل اکثر عناصر HTML5 است که در جریان عادی سند گنجانده می شود.
- Sectioning content: محدوده‌ی عناوین (headings)، محتوا (content) و پاورقی‌ها (footers) را تعریف می کند.
برخی از عناصر این دسته: <article>, <aside>, <nav>, <section>
⚠️ یک عنصر می تواند به بیش از یک مدل محتوا تعلق داشته باشد.
⚠️ بسته به نحوه‌ی استفاده، مدل‌های محتوای مختلف در حوزه‌های خاصی با هم همپوشانی دارند.
