بهترین سایت برای توسعه دهندگان وب

دروس HTML5

شروع HTML مقدمه HTML ویرایشگران HTML مثالهای اساسی HTML المان های HTML ویژگی های HTML عناوین HTML بندهای HTML سبک های HTML قالب بندی HTML نقل قول های HTML نظرات HTML رنگهای HTML HTML و CSS پیوندهای HTML تصاویر HTML جداول HTML لیست های HTML بلوک های HTML کلاس های HTML شناسه های HTML فریم های HTML HTML و JavaScript مسیرهای پرونده HTML HTML قسمت هدینگ چیدمان های HTML HTML پاسخگو کد رایانه HTML موجودیت HTML نمادهای HTML رمزگذاری HTML رمزگذاری URL HTML HTML و XHTML

HTML فرم ها

فرم های HTML المان های فرم HTML انواع ورودی HTML صفات ورودی HTML

HTML5

مقدمه HTML5 پشتیبانی HTML5 المان های جدید HTML5 المان های معنایی HTML5 مهاجرت از HTML4 راهنمای سبک HTML5

HTML گرافیک

HTML Canvas HTML SVG

HTML رسانه

HTML ویدیوی HTML صوت HTML افزونه های HTML یوتیوب HTML

HTML API

مکان جغرافیایی HTML کشیدن / رها کردن HTML HTML ذخیره وب HTML کارهای وب HTML و SSE

HTML مثال

مثالهای HTML آزمون ها HTML تمرینات HTML گواهی HTML خلاصه HTML قابلیت دسترسی به HTML

HTML منابع

لیست برچسب های HTML صفات HTML صفات جهانی HTML رویدادهای HTML رنگهای HTML کانواس HTML صوتی / تصویری HTML نسخه معتبر HTML مجموعه نویسه های HTML رمزگذاری URL HTML رمزگذاری زبان HTML پیام های HTTP روشهای HTTP مبدل PX به EM میانبرهای صفحه کلید

HTML5 درسهایی برای مبتدیان

معناشناسی چیست؟


معناشناسی چیست؟

معناشناسی بررسی معانی کلمات و عبارات در یک زبان است.

المان های معنایی = المان های با معنی.


المان های معنایی چیست؟

المان معنایی معنای آن را به طور واضح برای مرورگر و توسعه دهنده نمایش می دهد

نمونه هایی از المان های غیر معنایی: <div> و <span> - در مورد محتوای آنها چیزی گفته نمی شود. .

نمونه هایی از المان های معنایی: <form> ،<table> و <article> - به وضوح محتوای آنها را نشان می دهد.


پشتیبانی مرورگر از المان های HTML معنایی

کروم ادج و اکسپلورر فایرفاکس سفری اوپرا
آره آره آره آره آره

المان های معنایی HTML5 در همه مرورگرهای مدرن پشتیبانی می شوند.

همچنین می توانید به مرورگرهای قدیمی تر "آموزش" رسیدگی به "المان های ناشناخته" را بدهید.

در بخش پشتیبانی مرورگر HTML5 بیشتر بیاموزید.


المان های معنایی جدید در HTML5

بسیاری از وب سایت ها حاوی کد HTML هستند ، به عنوان مثال: <div id="nav"> ، <div class="header"> ، <div id="footer"> ، که ناوبری ، عنوان و پاورقی را تعریف می کند.

HTML5 المان های معنایی جدیدی را برای تعریف قسمتهای مختلف یک صفحه وب ارائه می دهد:

  • <article>
  • <aside>
  • <details>
  • <figcaption>
  • <figure>
  • <footer>
  • <header>
  • <main>
  • <mark>
  • <nav>
  • <section>
  • <summary>
  • <time>
HTML5 Semantic Elements


المان بخش <section>

المان <section> بخشی را در یک سند تعریف می کند.

طبق اسناد W3C HTML5: "یک بخش یک گروه بندی موضوعی از مطالب است که معمولاً با یک عنوان است."

صفحه اصلی را می توان معمولاً به بخشهای اطلاعات ، محتوا و اطلاعات تماس تقسیم کرد.

مثال

<section>
  <h1>WWF</h1>
  <p>صندوق جهانی طبیعت (WWF) ........</p>
</section>
خودتان آزمایش کنید»

المان مقاله <article>

المان <article> محتوای مستقل را تعریف می کند.

مقاله باید به خودی خود منطقی باشد و خواندن آن مستقل از بقیه سایت امکان پذیر باشد.

نمونه هایی که می توان از المان <article> استفاده کرد:

  • پست انجمن
  • پست وبلاگ
  • مقاله

مثال

<article>
  <h1>WWF چه کاری انجام می دهد؟</h1>
  <p>ماموریت WWF جلوگیری از تخریب محیط طبیعی سیاره ما است ،
و آینده ای بسازند که در آن انسان ها با طبیعت هماهنگ زندگی کنند.</p>
</article>
خودتان آزمایش کنید»

مقاله <article> یا بخش <section> ؟

المان <article> محتوای مستقل را تعریف می کند.

المان <section>بخشی را در یک سند تعریف می کند.

آیا می توانیم برای تعیین نحوه درج این المان های از تعریفی استفاده کنیم؟ نه ، نمی توانیم!

بنابراین ، در اینترنت ، صفحات HTML با المان های <section> حاوی المان های<article> و المان های<article> حاوی المان های<section> را پیدا خواهید کرد.

همچنین صفحاتی با المان های <section> حاوی المان های<section> و المان های <article> حاوی المان های <article> را پیدا خواهید کرد. , .

مثال از روزنامه: یک مقاله ورزشی <article> در یک بخش ورزشی ، ممکن است در هر <article> یک بخش فنی داشته باشد.


المان هدر <header>

المان <header> عنوان یک سند یا بخش را تعریف می کند.

از المان <header> باید به عنوان ظرفی برای محتوای مقدماتی استفاده شود.

شما می توانید چندین المان <header> در یک سند داشته باشید.

مثالهای زیر عنوان مقاله را تعریف می کند:

مثال

<article>
  <header>
    <h1>WWF چه کاری انجام می دهد؟</h1>
    <p>ماموریت WWF:</p>
  </header>
  <p> ماموریت WWF جلوگیری از تخریب محیط طبیعی سیاره ما است ، و آینده ای بسازند که در آن انسان ها با طبیعت هماهنگ زندگی کنند.</p>
</article>
خودتان آزمایش کنید»

HTML5 <footer> Element - پاورقی

المان <footer> یک پانویس را برای یک سند یا بخش تعریف می کند.

المان <footer> باید حاوی اطلاعاتی در مورد المان حاوی آن باشد.

پاورقی معمولاً شامل اطلاعاتی درباره نویسنده سند ، اطلاعات مربوط به حق چاپ است حقوق ، پیوندها شرایط استفاده ، اطلاعات تماس و غیره

می تواند چندین المان<footer> در یک سند وجود داشته باشد.

مثال

<footer>
  <p>ارسال شده توسط: هگه رفسنس </p>
  <p>اطلاعات تماس: <a href="mailto:someone@example.com">
  someone@example.com</a>.</p>
</footer>
خودتان آزمایش کنید »

المان ناو <nav>

المان <nav> مجموعه ای از پیوندهای ناوبری را تعریف می کند.

توجه داشته باشید که لازم نیست همه پیوندهای سند درون المان <nav> باشند. المان <nav> فقط برای بلوک پیوند اصلی ناوبری است.

مثال

<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/jquery/">jQuery</a>
</nav>
خودتان آزمایش کنید »

المان کنار <aside>

المان <aside> برخی از محتواها را غیر از محتوایی که در آن قرار گرفته است تعریف می کند (در مثال ، نوار کناری).

محتوای <aside> باید مربوط به محتوای اطراف باشد.

مثال

<p>من و خانواده ام این تابستان از مرکز Epcot بازدید کردیم.</p>

<aside>
  <h4>Epcot Center</h4>
  <p>مرکز Epcot یک پارک موضوعی در دنیای دیزنی ، فلوریدا است.</p>
</aside>
خودتان آزمایش کنید »

المان <figure> یا <figcaption>

هدف از عنوان اضافه کردن توضیح بصری به تصویر است.

در HTML5 ، یک شکل و عنوان را می توان در یک المان <figure> گروه بندی کرد:

مثال

<figure>
  <img src="pic_trulli.jpg" alt="Trulli">
  <figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
</figure>
خودتان آزمایش کنید»

المان <img> یک تصویر را تعریف می کند ، المان <figcaption> یک عنوان برای آن تعریف می کند.


چرا به المان های معنایی نیاز است؟

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

این امر امکان تعیین محتوای صحیح یک صفحه وب را برای موتورهای جستجو غیرممکن می کند.

با المان های جدید <header> <footer> <nav> <section> <article> این امر آسان تر شده است.

طبق W3C ، وب معنایی: "امکان به اشتراک گذاری داده ها در میان برنامه ها ، شرکت ها و جوامع را فراهم می کند."


المان های معنایی در HTML5

در زیر لیستی حروف الفبا از المان های معنایی جدید در HTML5 آورده شده است.

پیوندها منجر به مرجع کامل HTML5 می شوند.

برچسب توضیح
<article> مقاله را تعریف می کند
<aside> محتوایی غیر از محتوای صفحه را تعریف می کند
<details> جزئیات اضافی را تعریف می کند که کاربر می تواند مشاهده یا پنهان کند
<figcaption> امضا را برای المان <figure> تعریف می کند
<figure> محتوای آفلاین ، در مثال ، تصاویر ، نمودارها ، عکس ها ، لیست کد و غیره را تعریف می کند.
<footer> پانویس را برای یک سند یا بخش مشخص می کند
<header> عنوان یک سند یا بخش را مشخص می کند
<main> محتوای اصلی سند را تعریف می کند
<mark> متن مشخص شده / انتخاب شده را تعریف می کند
<nav> پیوندهای ناوبری را تعریف می کند
<section> بخشی را در یک سند تعریف می کند
<summary> عنوان قابل مشاهده برای المان <details> را مشخص می کند
<time> تاریخ / زمان را مشخص می کند