htmlطراحی سایت

جلسه ۱۶: فرو رفتن در عناصر Semantics در html

webآگوست 13, 2021
۰

فراتر رفتن از div.

موارد زیر را بیان خواهیم کرد

  • بررسی اجمالی
  • مطالعه موردی
  • عناصر معنایی ساختاری
  • hgroup
  • header
  • nav
  • footer
  • article
  • section
  • time
  • aside

 

بررسی اجمالی

با توجه به dictionary.com ، بیایید به تعریف Semantics نگاهی بیندازیم:

معنایی [si-man-tik]:
صفت

از معانی مختلف کلمات یا سایر نمادها ناشی می شوند

در این درس ، ما به اهمیت در نظر گرفتن Semantic هنگام ساخت صفحات HTML خود خواهیم پرداخت.

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

منظور ما از این دقیقاً چیست؟ با بازگشت به تعریف ، هدف HTML معنایی اون است که معنی هر قسمت از محتوای صفحه وب شما را به وضوح نشان دهد.

 

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

<html>
 <head>
   <title>HTML4 Font Style Elements</title>
 </head>
 <body>
   <p>In the HTML4 standard, several elements were provided to provide font stylization,
     such as <i>italisized text</i> and <b>bold text</b>.</p>
 </body>
</html>
<html>
 <head>
   <title>HTML5 Semantic Tags</title>
 </head>
 <body>
   <p>With HTML5, many elements were introduced to better indicate meaning of the content.</p>
   <p>The <code>em</code> element to <em>indicates emphasized</em> content.</p>
   <p>The <code>strong</code> element <strong>indicates strongly emphasized</strong> content.</p>
 </body>
</html>

محتوای وب خود را به میزان بسیار بیشتری در دسترس خوانندگان معلول قرار می دهد
استفاده از استایل ها با CSS سازگارتر و قابل پیش بینی تر خواهد شد
موتورهای جستجو از اطلاعات معنایی برای درک بهتر صفحات وب شما استفاده خواهند کرد

آزمون:

0
ایجاد شده در

Quiz 47

1 / 2

استایل HTML5 خوب کدام یک از موارد زیر را باید انجام دهد؟

2 / 2

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

امتیاز شما

میانگین امتیازها 0%

LinkedIn Facebook Twitter
0%

عناصر معنایی ساختاری

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

<hgroup>

از عناصر hgroup می توان برای گروه بندی عناصر عنوان استفاده کرد.

<hgroup>
  <h1>My Amazing Website</h1>
  <h2>More information about my website</h2>
</hgroup>

<header>

از عنصر header می تواند برای نشان دادن محتوایی که مشابه عنوان اصلی در یک فایل متنی است استفاده شود.

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

<nav>

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

یک عنصر nav اغلب در داخل عنصر header یافت می شود. اگر می خواهید عناصر پیمایش خود را در جای دیگر صفحه وب قرار دهید ، پیروی از این کنوانسیون ضروری نیست.

<header>
  <hgroup>
    <h1>My Amazing Website</h1>
    <h2>More information about my website</h2>
  </hgroup>
  <nav>
    <!– Navigational anchors elments are often wrapped in an unordered list –>
    <ul>
      <li><a href=”#about”>About Me</a></li>
      <li><a href=”#contact”>Contace</a></li>
    </ul>
  </nav>
</header>

<footer>

همانطور که از نام آن پیداست ، عنصر footer برای قرار دادن محتوایی استفاده می شود که به عنوان زیر صفحه شما در نظر گرفته شود.

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

<footer>
  <h3>&copy; My Company Name, ۲۰۱۷</h3>
</footer>

<article>

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

عناصر article باید عنوان داشته باشند تا نشان دهند محتوای مقاله در چه زمینه ای است.

<article>
  <h1>Cryptocurrency: What is it?</h1>
  <!– Article contents –>
</article>

<section>

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

عناصر section نیز باید دارای عنصری باشند که نشان دهد مطالب بخش مربوط به چیست.

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

از عناصر section می توان برای تجزیه محتوای یک عنصر article به اجزای معنایی گسسته استفاده کرد.

<section>
  <h2>Chapter ۱</h2>
  <!– Chapter contents –>
</section>
<section>
  <h2>Chapter ۲</h2>
  <!– Chapter contents –>
</section>
<section>
  <h2>Chapter ۳</h2>
  <!– Chapter contents –>
</section>
<section>
  <h2>Chapter ۴</h2>
  <!– Chapter contents –>
</section>
<article>
  <h1>How to Make Lasagna</h1>
  <section>
    <h2>Overview</h2>
    <!– section contents –>
  </section>
  <section>
    <h2>Ingredients</h2>
    <!– section contents –>
  </section>
  <section>
    <h2>Instructions</h2>
    <!– section contents –>
  </section>
</article>

<time>

از عنصر time استفاده کنید تا برای قسمت هایی از محتوای خود که زمان یا تاریخ خاصی را نشان می دهد ، یک تایم قابل خواندن توسط ماشین تهیه کنید. عنصر time دارای یک ویژگی datetime است که تاریخ / زمان را در قالب های مختلف به عنوان ورودی می گیرد ، که می توانید در اینجا اطلاعات بیشتری در مورد آن کسب کنید.

time باید برای مواردی مانند زمان یک رویداد یا تاریخ انتشار پست وبلاگ در یک وب سایت استفاده شود. عناصر time با متغیرهای متفاوتی ارائه نمی شوند ، اما راهی برای نشان دادن معنایی به رایانه برای محتوای زمان یا تاریخ در نظر گرفته می شود.

<!– time of an event –>
<p>The party begins at <time datetime=”19:00″>seven o’clock</time>!</p>
<!– date of publication –>
<h1>My Blog Entry</h1>
<h2><time datetime=”2015-05-07″>May ۷, ۲۰۱۵</time></h2>

<aside>

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

از عناصر aside می توان برای مواردی مانند پشتیبانی اطلاعات در مقاله ، یا یک نوار کناری با عناصر پیمایش استفاده کرد.

اکنون که با عناصر معنایی آشنا شدید ، بیایید در درس بعدی اضافه کردن جداول در یک صفحه HTML را بیاموزیم.

webآگوست 13, 2021
۰
تصویر web

web

نوشته های مشابه

جلسه ۴۹: اندازه تصاویر پس زمینه در CSS

سپتامبر 20, 2021

جلسه ۴۰: استایل های پیش فرض مرورگر چگونه بر یک سند تأثیر می گذارند در CSS

آگوست 17, 2021

جلسه ۵۰: اندازه گیری پیش زمینه ها با استفاده از کلمات کلیدی در CSS

سپتامبر 19, 2021

جلسه ۴۸: شروع کار با تصاویر پس زمینه در CSS

آگوست 18, 2021

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا