جستجو برای:
  • خانه
  • دوره‌ها
    • کسب و کار اینترنتی پولساز
    • تبدیل ایده به محصول
    • خلق استراتژی کسب و کار
    • ایجاد مزیت رقابتی در کسب و کار
  • وبلاگ
    • کسب و کار اینترنتی
      • کارآفرینی اینترنتی
      • کار در منزل
      • ایده های پولساز
      • مدیریت کسب و کار اینترنتی
    • بازاریابی اینترنتی
      • سئو
      • ایمیل مارکتینگ
      • سوشیال مارکتینگ
      • اینستاگرام مارکتینگ
      • همکاری در فروش
    • کارآفرینی
      • ایده های کارآفرینی
      • کسب درآمد
      • استارت آپ
      • برندسازی
      • موفقیت فردی
      • معرفی کارآفرینان برتر
  • ویدیوها
  • پادکست‌ها
  • از من بپرس
  • حساب کاربری
 
بهترین ایده
  • خانه
  • دوره‌ها
    • کسب و کار اینترنتی پولساز
    • تبدیل ایده به محصول
    • خلق استراتژی کسب و کار
    • ایجاد مزیت رقابتی در کسب و کار
  • وبلاگ
    • کسب و کار اینترنتی
      • کارآفرینی اینترنتی
      • کار در منزل
      • ایده های پولساز
      • مدیریت کسب و کار اینترنتی
    • بازاریابی اینترنتی
      • سئو
      • ایمیل مارکتینگ
      • سوشیال مارکتینگ
      • اینستاگرام مارکتینگ
      • همکاری در فروش
    • کارآفرینی
      • ایده های کارآفرینی
      • کسب درآمد
      • استارت آپ
      • برندسازی
      • موفقیت فردی
      • معرفی کارآفرینان برتر
  • ویدیوها
  • پادکست‌ها
  • از من بپرس
  • حساب کاربری
0
ورود / عضویت

وبلاگ

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

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

11 آبان 1396
اسماعیلی
طراحی سایت
13 بازدید
عناصر معنایی 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
در تلگرام
کانال ما را دنبال کنید!
در اینستاگرام
ما را دنبال کنید!
مطالب زیر را حتما بخوانید
  • طراحی واکنش گرا
    چرا طراحی سایت واکنش گرا مهم است؟

    13 بازدید

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

    58 بازدید

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

    17 بازدید

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

    12 بازدید

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

    13 بازدید

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

    13 بازدید

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

جستجو برای:
جدیدترین مطالب
  • ۷۰ ایده کسب و کار با سرمایه کم
  • پولسازی با اینستاگرام
  • ۱۲ روش افزایش فالوور اینستاگرام
  • کسب درآمد از اینستاگرام و معرفی ۳ روش کسب درآمد
  • ۳ ایده کار در منزل پولساز با سرمایه کم
آموزش رایگان
  • کسب و کار اینترنتی
  • اصول مقدماتی سئو
  • بازاریابی اینترنتی
  • ایمیل مارکتینگ
  • افزایش فالوور اینستاگرام
  • کسب درآمد از اینستاگرام
  • افزایش ترافیک سایت
  • افزایش سرعت سایت
پربازدید
  • درباره ما
  • تماس با ما
  • همکاری در فروش
  • هفته نامه
بهترین ایده
کسب و کار شما می‌تواند رشد کند. درآمد شما می‌تواند چند برابر شود. فقط کافی است مسیر درست را بشناسید. کافی است یاد بگیرید تا مشتریان خود را در زمان درست، مکان درست و به روش درست هدف قرار دهید. ما در این مسیر همراه شما هستیم.
بهترین ایده : کسب و کار اینترنتی برای همه
ورود ×
کد تایید
لطفاً کد تأیید ارسال شده را تایپ کنید
ثبت
رمز عبور را فراموش کرده اید؟
ورود با کد یکبارمصرف
ارسال مجدد کد یکبار مصرف(00:30)
آیا حساب کاربری ندارید؟
ثبت نام
ارسال مجدد کد یکبار مصرف(00:30)
برگشت به ورود

ارسال مجدد کد یکبار مصرف (00:30)
برگشت به ورود
  • (+93) افغانستان
  • (+355) آلبانى
  • (+213) الجزيره
  • (+1) آمریکن ساموا
  • (+376) آندورا
  • (+244) آنگولا
  • (+1) آنگویلا
  • (+1) Antigua
  • (+54) آرژانتين
  • (+374) ارمنستان
  • (+297) آروبا
  • (+61) استرالیا
  • (+43) اتریش
  • (+994) آذربایجان
  • (+973) بحرين
  • (+880) بنگلادش
  • (+1) باربادوس
  • (+375) بلاروس
  • (+32) بلژيك
  • (+501) بلیز
  • (+229) بنین
  • (+1) برمودا
  • (+975) بوتان
  • (+591) بوليوي
  • (+599) Bonaire, Sint Eustatius and Saba
  • (+387) بوسني و هرزگوين
  • (+267) بوتسوانا
  • (+55) برزيل
  • (+246) محدوده اقیانوس هند تحت سیطره بریتانیا
  • (+1) British Virgin Islands
  • (+673) برونئی
  • (+359) بلغارستان
  • (+226) بورکینافاسو
  • (+257) بوروندی
  • (+855) کامبوج
  • (+237) كامرون
  • (+1) كانادا
  • (+238) کیپ ورد
  • (+1) جزابر کیمن
  • (+236) جمهوری آفریقای مرکزی
  • (+235) چاد
  • (+56) شيلي
  • (+86) چين
  • (+57) كلمبيا
  • (+269) کومور
  • (+682) جزایر کوک
  • (+225) Côte d'Ivoire
  • (+506) كاستا ريكا
  • (+385) كرواسي
  • (+53) كوبا
  • (+599) Curaçao
  • (+357) قبرس
  • (+420) جمهوري چك
  • (+243) Democratic Republic of the Congo
  • (+45) دانمارك
  • (+253) جیبوتی
  • (+1) دومنيكا
  • (+1) جمهوري دومنيكا
  • (+593) اكوادر
  • (+20) مصر
  • (+503) الساوادر
  • (+240) گینه استوایی
  • (+291) اریتره
  • (+372) استوني
  • (+251) اتيوپي
  • (+500) جزایر فالکلند
  • (+298) جزایر فارو
  • (+691) Federated States of Micronesia
  • (+679) فیجی
  • (+358) فنلاند
  • (+33) فرانسه
  • (+594) گویان فرانسه
  • (+689) پلی نزی فرانسه
  • (+241) گابون
  • (+995) Georgia
  • (+49) آلمان
  • (+233) غنا
  • (+350) جبل الطارق
  • (+30) يونان
  • (+299) گرینلند
  • (+1) گرانادا
  • (+590) گوادولوپ
  • (+1) گوام
  • (+502) گواتمالا
  • (+44) گرنزی
  • (+224) گينه
  • (+245) گينه بي سائو
  • (+592) گویان
  • (+509) هائيتي
  • (+504) هندوراس
  • (+852) هنگ كنگ
  • (+36) مجارستان
  • (+354) ایسلند
  • (+91) هند
  • (+62) اندونزي
  • (+98) ایران
  • (+964) عراق
  • (+353) Ireland
  • (+44) Isle Of Man
  • (+972) رژيم صهيونيستي
  • (+39) ايتاليا
  • (+1) جامائيكا
  • (+81) ژاپن
  • (+44) جرسي
  • (+962) اردن
  • (+7) قزاقستان
  • (+254) كنيا
  • (+686) كيريبيتي
  • (+965) كويت
  • (+996) قرقیزستان
  • (+856) لائوس
  • (+371) لتونی
  • (+961) لبنان
  • (+266) لسوتو
  • (+231) لیبریا
  • (+218) ليبي
  • (+423) لیختن اشتاین
  • (+370) ليتواني
  • (+352) لوكسامبورگ
  • (+853) Macau
  • (+389) Macedonia
  • (+261) ماداگاسكار
  • (+265) مالاوی
  • (+60) مالزي
  • (+960) مالديو
  • (+223) مالي
  • (+356) مالتا
  • (+692) جزایر مارشال
  • (+596) مارتینیک
  • (+222) موریتانی
  • (+230) موریس
  • (+262) مایوت
  • (+52) مكزيك
  • (+373) مالديو
  • (+377) موناکو
  • (+976) مغولستان
  • (+382) مونته نگرو
  • (+1) مونتسرات
  • (+212) مراكش
  • (+258) موزامبيك
  • (+95) ميانمار
  • (+264) نامیبیا
  • (+674) نائورو
  • (+977) نپال
  • (+31) هلند
  • (+687) کالدونیای جدید
  • (+64) نيوزلند
  • (+505) نیکاراگوئه
  • (+227) نیجر
  • (+234) نيجريه
  • (+683) نیوئه
  • (+672) جزیره نورفولک
  • (+850) كره ي شمالي
  • (+1) جزایر ماریانای شمالی
  • (+47) نروژ
  • (+968) عمان
  • (+92) پاكستان
  • (+680) Palau
  • (+970) فلسطین
  • (+507) پاناما
  • (+675) پاپوا گينه ي نو
  • (+595) پاراگوئه
  • (+51) پرو
  • (+63) فيليپين
  • (+48) لهستان
  • (+351) پرتغال
  • (+1) پورتوریکو
  • (+974) قطر
  • (+242) کنگو
  • (+40) روماني
  • (+262) Runion
  • (+7) روسيه
  • (+250) رواندا
  • (+290) سنت هلن
  • (+1) سنت کیتس و نویس
  • (+508) سنت پیر و میکلون
  • (+1) سنت وینسنت و گرنادین
  • (+685) ساموا
  • (+378) سن مارینو
  • (+239) Sao Tome and Principe
  • (+966) عربستان سعودی
  • (+221) سنگال
  • (+381) صربستان
  • (+248) سیشل
  • (+232) سیرالئون
  • (+65) سنگاپور
  • (+1) Sint Maarten
  • (+421) اسلواکی
  • (+386) اسلونی
  • (+677) جزاير سليمان
  • (+252) سومالی
  • (+27) آفريقای جنوبي
  • (+82) كره ی جنوبي
  • (+211) سودان جنوبی
  • (+34) اسپانيا
  • (+94) سريلانكا
  • (+1) St. Lucia
  • (+249) سودان
  • (+597) سورینام
  • (+268) سوازیلند
  • (+46) سوئد
  • (+41) سوييس
  • (+963) سوريه
  • (+886) تايوان
  • (+992) تاجيكستان
  • (+255) تانزانيا
  • (+66) تايلند
  • (+1) The Bahamas
  • (+220) گامبیا
  • (+670) تیمور
  • (+228) توگو
  • (+690) توکلائو
  • (+676) تونگا
  • (+1) ترینیداد و توباگو
  • (+216) تونس
  • (+90) تركيه
  • (+993) تركمنستان
  • (+1) جزایر تورکس و کایکوس
  • (+688) تووالو
  • (+1) U.S. Virgin Islands
  • (+256) اوگاندا
  • (+380) اوكراين
  • (+971) امارات متحده ي عربي
  • (+44) انگلیس
  • (+1) امریکا
  • (+598) اوروگوئه
  • (+998) ازبكستان
  • (+678) وانواتو
  • (+58) ونزوئلا
  • (+84) ويتنام
  • (+681) والیس و فوتونا
  • (+212) صحرای غربی
  • (+967) يمن
  • (+260) زامبیا
  • (+263) زیمباوه

ورود

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

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