جستجو برای:
  • دوره‌های آموزشی
    • کسب و کار اینترنتی پولساز
    • تبدیل ایده به محصول
    • خلق استراتژی کسب و کار
    • ایجاد مزیت رقابتی در کسب و کار
  • آموزش رایگان
    • دوره رایگان کسب و کار اینترنتی
    • ویدیوهای آموزشی
    • پادکست‌های آموزشی
  • وبلاگ
    • کسب و کار اینترنتی
      • کارآفرینی اینترنتی
      • کار در منزل
      • ایده های پولساز
      • مدیریت کسب و کار اینترنتی
    • بازاریابی اینترنتی
      • سئو
      • ایمیل مارکتینگ
      • سوشیال مارکتینگ
      • اینستاگرام مارکتینگ
      • همکاری در فروش
    • کارآفرینی
      • ایده های کارآفرینی
      • کسب درآمد
      • استارت آپ
      • برندسازی
      • موفقیت فردی
      • معرفی کارآفرینان برتر
  • کسب درآمد
  • حساب کاربری
تلفن تماس: ۲۳۴۵۶ ۲۸۴ ۰۲۱
بهترین ایده
  • دوره‌های آموزشی
    • کسب و کار اینترنتی پولساز
    • تبدیل ایده به محصول
    • خلق استراتژی کسب و کار
    • ایجاد مزیت رقابتی در کسب و کار
  • آموزش رایگان
    • دوره رایگان کسب و کار اینترنتی
    • ویدیوهای آموزشی
    • پادکست‌های آموزشی
  • وبلاگ
    • کسب و کار اینترنتی
      • کارآفرینی اینترنتی
      • کار در منزل
      • ایده های پولساز
      • مدیریت کسب و کار اینترنتی
    • بازاریابی اینترنتی
      • سئو
      • ایمیل مارکتینگ
      • سوشیال مارکتینگ
      • اینستاگرام مارکتینگ
      • همکاری در فروش
    • کارآفرینی
      • ایده های کارآفرینی
      • کسب درآمد
      • استارت آپ
      • برندسازی
      • موفقیت فردی
      • معرفی کارآفرینان برتر
  • کسب درآمد
  • حساب کاربری
0

ورود و ثبت نام

بلاگ

بهترین ایده / طراحی سایت / عناصر معنایی html5

عناصر معنایی html5

عناصر معنایی  html5  چیست؟ و چه کاربردی دارد؟

آموزش  html5  درس چهارم

عناصر معنایی html5 : سمنتیک (semantic) مطالعه در مورد معنای کلمات و عبارات در یک زبان است.

Semantic elements = elements with a meaning.

عناصر معنایی یعنی عناصری که معنا دارند.

عناصر معنایی html5
عناصر معنایی html5

Semantic Elements چیست؟

یک  semantic element یا همان عنصر معنایی به طور واضح برای مرور گر و توسعه دهنده (developer) معنای خود را توضیح می دهد.

مثال هایی در مورد عناصر non-semantic (بدون معنی ) :

<div> and <span> درباره محتویات آن چیزی نمی گوید.

مثال هایی در مورد عناصر semantic

<form>, <table>, and <article> به وضوح محتوای آن را تعریف می کند.

عناصر معنایی HTML5 در تمام مرورگرهای مدرن پشتیبانی می شوند.به علاوه شما می توانید مرورگر های قدیمی تر را برای دسترسی به عناصر ناشناخته بیاموزید.

 

عناصر معنایی جدید (New Semantic Elements) در  html5

بسیاری از وب سایت ها برای نشان دادن هدر ، فوتر و navigation (ناوبری)  دارای کد  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 : عنصر <section> در  html5

عنصر <section> یک بخش را در یک سند تعریف می کند. بر طبق اسناد  W3C متعلق به  html 5  : ” یک بخش یک گروه بندی موضوعی از محتوا است، معمولاً با عنوان  است.”

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

مثال :

[php]
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is….</p>
</section>
[/php]

عناصر معنایی html5 : عنصر <article> در  html5

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

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

  • Forum post
  • Blog post
  • Newspaper article

مثال :

[php]
<article>
<h1>What Does WWF Do?</h1>
<p>WWF’s mission is to stop the degradation of our planet’s natural environment,
and build a future in which humans live in harmony with nature.</p>
</article>
[/php]

عناصر معنایی html5 : قرار دادن <article> در <section> یا برعکس ؟

عنصر <article> محتوای مستقل را مشخص می کند. عنصر <section> بخشی را در سند تعریف می کند.

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

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

 

عناصر معنایی html5 :عنصر <header> در  html 5

عنصر <header> یک هدر را برای یک سند یا بخش تعریف می کند. عنصر <header> باید یک مکان برای معرفی محتوا باشد. شما می توانید چندین عنصر <header> در یک سند داشته باشید. مثال زیر یک هدر برای یک مقاله تعریف می کند:

مثال :

[php]
<article>
<header>
<h1>What Does WWF Do?</h1>
<p>WWF’s mission:</p>
</header>
<p>WWF’s mission is to stop the degradation of our planet’s natural environment,
and build a future in which humans live in harmony with nature.</p>
</article>
[/php]

 

عناصر معنایی html5 : عنصر <footer> در  html5

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

مثال :

[php]
<footer>
<p>Posted by: Hege Refsnes</p>
<p>Contact information: <a href="mailto:[email protected]">
[email protected]</a>.</p>
</footer>
[/php]

عناصر معنایی html5 : عنصر <nav> در  html 5

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

مثال :

[php]
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
[/php]

عناصر معنایی html5 : عنصر <aside> در  html 5

عنصر <aside> محتواهای جدا از محتوا را در جایی قرار می دهد ( مثل ساید بار ). محتوای aside باید با محتوای اطراف مرتبط باشد.

مثال :

[php]
<p>My family and I visited The Epcot center this summer.</p>

<aside>
<h4>Epcot Center</h4>
<p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>
[/php]

 

عناصر معنایی html5 : عناصر <figure> and <figcaption> در  html5

هدف از figure caption اضافه کردن یک توضیح دیداری یا ویژوال برای یک تصویر است. در  html5   یک تصویر و یک عنوان(caption) می توانند با هم در یک عنصر <figure> گروه بندی شوند.

مثال :

[php]
<figure>
<img src="pic_mountain.jpg" alt="The Pulpit Rock" width="304" height="228">
<figcaption>Fig1. – The Pulpit Rock, Norway.</figcaption>
</figure>
[/php]

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

 

عناصر معنایی html5 : چرا  Semantic Elements؟

با  html4  توسعه دهندگان نام های id/class خود را با عناصر style استفاده می کردند. header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav,    و غیره ….

این باعث شد که موتورهای جستجو برای تعیین محتوای صحیح صفحه وب مشکل داشته باشند و این کار برای آنها غیر ممکن باشد. با عناصر جدید  html 5  (<header> <footer> <nav> <section> <article>) این کار ساده تر خواهد شد. بر طبق W3C، یک وب معنایی: به داده ها اجازه می دهد که به اشتراک گذاشته شوند و در برنامه ها، شرکت ها، و جوامع دوباره استفاده شوند. “

 

semantic elements در  html5

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

Tag Description
<article> Defines an article
<aside> Defines content aside from the page content
<details> Defines additional details that the user can view or hide
<figcaption> Defines a caption for a <figure> element
<figure> Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
<footer> Defines a footer for a document or section
<header> Specifies a header for a document or section
<main> Specifies the main content of a document
<mark> Defines marked/highlighted text
<nav> Defines navigation links
<section> Defines a section in a document
<summary> Defines a visible heading for a <details> element
<time> Defines a date/time

درس بعدی : مهاجرت به  html5

 

۱
۲
۳
۴
۵
میانگین امتیازات ۵ از ۵
از مجموع ۱ رای
اشتراک گذاری:
برچسب ها: HTML
در تلگرام
کانال ما را دنبال کنید!
در اینستاگرام
ما را دنبال کنید!

iman.ghasedian

بهت کمک می‌کنم توجهت رو بذاری روی خودت و عمیق‌تر زندگی‌‌‌وحالت رو تغییر بدی

این بازی یک‌ بازی معمولی نی این بازی یک‌ بازی معمولی نیست بلکه فلسفه زندگی توه 🎲❤️

صفحه بازی، صفحه زندگی توه
‌و تو بازیگری 🎲❤️
همه اون فرصت‌هایی که تو زندگی سر راهت قرار می‌گیره، نردبان‌های بازی هستن و تمام مسائل، مشکلات، شکست‌ها، درد ‌‌و رنج‌ها، نیش مارهای این بازی 🎲❤️

تو این بازی من ۷ درس مهم یاد گرفتم که به توهم گفتم 🎲❤️

حتما ازت میخوام دوتا استیکر 🎲❤️ پایین پست برام بذاری 🎲❤️

منتظرم رفیق 🎲❤️

#بازی #زندگی #فلسفه #ماروپله #شانس #خوشحالی #ناراحتی #روانشناسی #فرزند #صبر #ایمان_قاصدیان #ایران
توضیحات سفر رو حتما بخون 😍 توضیحات سفر رو حتما بخون 😍
۲۸ اردیبهشت ۱۴۰۱

به همراه یک گروه‌باحال زدیم به دل طبیعت

🚌 صبح ساعت ۵ صبح از تهران راه افتادیم 
به سمت جاده چالوس

یک توقف تونل کندوان داشتیم و صبحانه خوردیم  و به سمت مقصد از یکی از خروجی‌های جاده چالوس خارج شدیم و‌ جاده کاملا شیبدار بود و در عرض ۲۰ دقیقه چیزی حدود ۱۵۰۰ متر ارتفاع از سطح دریا گرفتیم

طبیعت فوق العاده بی‌نظیری بود…

😍 به مقصد رسیدیم و در یک خانه روستایی بسیار باصفا وسایل رو گذاشتیم و با نون محلی و پنیر تازه و چایی شیرین از ما استقبال شد…

بعد از اینکه توی روستا دوری زدیم ‌‌کنار رودخونه پایی به آب زدیم برگشتیم و نهار خوردیم و بعد از یک استراحت کوتاه سوار تراکتور شدیم و تا دامنه کوه رفتیم و از اونجا که از تراکتور پیاده شدیم ۱۲ کیلومتر در مسیری که توی ویدیو می‌بینید هایکینگ داشتیم تا رسیدیم به یک چشمه و بعد ۱۵ دقیقه‌ از چشمه که بالاتر رفتیم رسیدیم به یک یخچال طبیعی…

واقعا طبیعت بکر و بی‌نظیری بود 😍
خدارو هزار مرتبه شکر کردم بخاطر این همه زیبایی…و این همه نعمت و از همه مهم‌تر سلامتی 

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

@safaryab.us 

بعد از این پیاده روی نسبتا سنگین، تا خود روستا پیاده برگشتیم و واقعا خسته شدیم اما سرشار از انرژی 

بعد یه آتیش باحال درست کردیم و با چند تا از دوستان نشستیم دورش 

یک‌شام‌سبک خوردیم و خوابیدیم 😴

🌞 صبح طبق عادت ساعت ۵:۳۰ صبح بیدار شدم

ادامه در کامنت…

______________________
خیلی خوشحال میشم احساست رو از دیدن این ویدیو برام بنویس ❤️ یا با یه استیکر 😎✌️👏😍🤩✋ منتظرم …
______________________

🎬: @iman.ghasedian 

🎵: @amiralibahadori 
______________________

#نگرانی #آینده #خوشبختی #سفر #طبیعت #طبیعت_ایران #حال_خوب #انرژی_مثبت #فیلم #موزیک #طبیعت_بکر #ایمان_قاصدیان #سفریاب
چرا انقدر شروع بی‌پایان داریم تو زندگی‌مون؟
چرا هی شروع کردیم و وسط راه ولش کردیم؟

تو این پادکست توضیح دادم…

توی کامنت از تجربه شروع بی پایان خودت برام بنویس

#شروع #تصمیم #تصمیم_گیری #احساسی #احساس #اطلاعات #فقر #ثروت #ایران #گرانی #تورم #ایمان_قاصدیان #تحول #تحول_بزرگ
❤️بخش دوم لایو شماره ۱ سفر ❤️بخش دوم لایو شماره ۱ سفر تحول بزرگ

_______________

دوره 👇رایگان تحول بزرگ
@iman.ghasedian 
_______________

توی این ویدیو می تونی کل مطالب آموزشی ۲۳ روز اول تحول بزرگ + یکسری محتوای مکمل در لایو ارائه شد که به دلیل دایرکت‌ها و درخوا‌ست شما که موفق به حضور در لایو نشدید تصمیم گرفتم بلافاصله بعد از لایو این ‌ویدیو رو که حتی از لایو اصلی هم کامل‌تره 

ویدیو بدلیل تایم بالا به دو بخش قسمت شد که بخش اولش رو دیشب گذاشتم 

#سفر #تحول #تحول_درون #خودشناسی #آرامش #ایمان_قاصدیان #تغییر #زندگی #اکسپلور #اینستاگرام
❤️بخش اول لایو شماره ۱ سفر ❤️بخش اول لایو شماره ۱ سفر تحول بزرگ

_______________

دوره 👇رایگان تحول بزرگ
@iman.ghasedian 
_______________

توی این ویدیو می تونی کل مطالب آموزشی ۲۳ روز اول تحول بزرگ + یکسری محتوای مکمل در لایو ارائه شد که به دلیل دایرکت‌ها و درخوا‌ست شما که موفق به حضور در لایو نشدید تصمیم گرفتم بلافاصله بعد از لایو این ‌ویدیو رو که حتی از لایو اصلی هم کامل‌تره 

ویدیو بدلیل تایم بالا به دو بخش قسمت شد که فردا بخش دو گذاشته میشه در پیج

#سفر #تحول #تحول_درون #خودشناسی #آرامش #ایمان_قاصدیان #تغییر #زندگی #اکسپلور #اینستاگرام
دوره رایگان تحول بزرگ در اینستاگرام
مطالب زیر را حتما بخوانید
  • طراحی واکنش گرا
    چرا طراحی سایت واکنش گرا مهم است؟

    1.32k بازدید

  • طراحی سایت
    طراحی سایت و رازهای فروش بیشتر

    2.23k بازدید

  • پوسته فرزند
    پوسته فرزند چیست و چگونه پوسته فرزند ایجاد کنیم؟

    1.27k بازدید

  • شروع کار css
    شروع کار css

    1.51k بازدید

  • سینتکس و انتخابگرهای css
    سینتکس و انتخابگرهای css

    1.26k بازدید

  • معرفی css
    معرفی css

    1.34k بازدید

دیدگاهتان را بنویسید لغو پاسخ

آکادمی
  • کسب و کار اینترنتی
  • بازاریابی اینترنتی
  • ایده های پولساز
  • ایمیل مارکتینگ
  • مهارت های پولساز
  • افزایش فالوور اینستاگرام
  • کسب درآمد از اینستاگرام
  • افزایش ترافیک سایت
پربازدید
  • دوره رایگان
  • درباره ما
  • همکاری در فروش
  • تماس با ما
جستجو برای:
بهترین ایده
با آموزش کسب و کار اینترنتی از ایده‌های پولساز تا یادگیری مهارت‌های پولساز در کنار شما هستیم. کمک می‌کنیم یک کسب و کار خانگی در منزل راه‌اندازی کنید. ما به شما آموزش می‌دهیم با کار در منزل و فقط با موبایل و بدون سرمایه پولسازی از اینترنت را شروع کنید.
بهترین ایده : کسب و کار اینترنتی برای همه | © Copyright 2021 behtarinideh

ورود

رمز عبور را فراموش کرده اید؟

هنوز عضو نشده اید؟ عضویت در سایت