آموزش HTML – فصل بیست و هشتم: المان های معنایی در 5 HTML

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

یک المان معنایی به صورت واضح معنای خود را هم به مرورگر و هم به توسعه دهنده توضیح می دهد. برای مثال المان های غیر معنایی می توانیم به <div> و <span> اشاره کنیم که با اسم خود هیچ چیز راجع به محتوا نمی گویند. مثال المان های معنایی <form> و <table> و  <article> است که به صورت واضح محتوای خود را توضیح می دهند.

پشتیبانی مرورگر

المان های معنایی اچ تی ام ال 5 در تمام مرورگر های مدرن پشتیبانی می شوند. اضافه بر این شما می توانید به مرورگر های قدیمی تر نیز یاد بدهید که چگونه با المان های ناشناخته کنار بیایند. در این باره بیشتر در فصل پشتیبانی از اچ تی ام ال 5 بخوانید.

المان های معنایی جدید در HTML 5

همان طور که احتمالا می دانید، بسیاری خیلی از ها همچین کد هایی برای نشان دادن منو، هدر و فوتر دارند:

<div id=”nav”>

<div class=”header”>

<div id=”footer”>

در HTML 5 دیگر از این نوع نگارش استفاده نمی شود. اچ تی ام ال 5 المان های معنایی جدیدی را برای تعریف بخش های مختلف از یک سایت ارائه می دهد:

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

المان <section> در HTML 5

المان <section> یک بخش در یک پرونده HTML را تعریف می کند.

به گفته w3c در اچ تی ام ال 5: “یک بخش یا همان section یک گروه بندی موضوعی از محتوا است که معمولا یک سربرگ هم دارد”.

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

مثال:

المان <article> در HTML 5

المان <article> مطالب مستقل را مشخص می کند. یک article یا مقاله باید به خودی خودش معنی بدهد و بتوان آن را جدا از دیگر مطالب وب سایت خواند.

مثال اینکه یک article در کجا میتواند استفاده شود:

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

مثال:

آیا استفاده کردن از article در section یا برعکس ممکن است؟

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

المان <header> در HTML

المان <header> یک سر برگ برای یک پرونده یا بخش را مشخص می کند.

المان header باید به عنوان یک جایگاه برای عنوان ها استفاده شود.

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

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

المان <footer> در HTML 5

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

شما میتوانید چند المان footer را در یک پرونده داشته باشید.

مثال:

المان <nav> در HTML 5

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

مثال:

المان <aside> در اچ تی ام ال

المان <aside> مقداری محتوا را کنار محتوایی که در آن قرار گرفته اند تعریف می کند، مثل یک نوار کناری یا sidebar.

محتوای aside باید با محتوای تگ احاطه کننده مرتبط باشد.

مثال:

المان های <figure> و <figcaption> در اچ تی ام ال 5

هدف figure caption این است که به یک تصویر توضیحات دیداری را اضافه کند. در اچ تی ام ال 5 یک تصویر و عنوان آن میتواند در یک المان figure هم گروه شود.

مثال:

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

چرا از المان های معنایی استفاده کنیم؟

با اچ تی ام ال 4 توسعه دهنده ها id و class خودشان را برای استایل دادن به المان ها استفاده می کردند، مثلا به یک div کلاسی از این موارد می دادند:

header، top، bottom، footer، menu، navigation، main، container، content، article، sidebar، topnav، و…

این کار برای موتور های جستجو شناسایی محتوای صحیح صفحات وب را غیر ممکن می کرد. با المان های جدید اچ تی ام ال پنج مثل header footer nav section article این کار راحت تر می شود.

تگ های معنایی قابل استفاده

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

<aside> محتوایی در کنار محتوای صفحه تعریف می کند.

<details> جزییات اضافه ای را تعریف می کند که کاربر می تواند انها را نمایش داده یا مخفی کند.

<figcaption> یک عنوان برای المان <figure> مشخص می کند.

<figure> محتوا های خود-حاوی مثل طراحی ها نمودار ها و تصاویر و. لیست بندی کد و غیره را مشخص می کند.

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

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

<main> محتوای اصلی یک پرونده را مشخص می کند.

<mark> متن علامت دار یا پررنگ شده را تعریف می کند.

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

<section> یک بخش را در یک پرونده تعریف می کند.

<summary> یک سربرگ قابل نمایش را برای یک المان <details> تعریف میکند.

<time> یک زمان یا تاریخ را تعریف می کند.