برنامه نویسی آموزش کامپیوتر و موبایل

معرفی تگ های معناگرای HTML 5

معرفی تگ های معناگرای HTML 5

انتقال معنای بیشتر با تگ های 5 html

برای مشخص شدن این موضوع تگ های div  و header را در نظر بگیرید . تگ div  تنها بلوکی عمومی از اطلاعات را مشخص می کند درحالیکه header به طور خاص شامل اطلاعات راجع به بخش  هدر و حتی اطلاعات مرتبط مربوط به navigation  وب سایت ها می تواند  باشد .

<div id="top">Welcome</div>

<header>Welcome</header>

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

در ادامه برخی از تگ های معناگرای Html  و کاربرد انها در صفحه را بیان می کنیم :

تگ <s>  :

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

 

<h1>Widget for Sale</h1>

<p><s>Reg. Price $19.99</s> Now $9.99</p>

 

<s>Grilled Cheese Sandwich</s> Sold Out

 

<s>Three Bedroom Apartment $1,000 Monthly</s>

 

این تگ نباید برای محتوایی استفاده شود که محتوای اصلی را ویرایش کند مانند متن های پاک شده در وب سایت . تگ <s>  به طور پیش فرض برروی متن مورد خط افقی می کشد. به این معنی که محتوای مورد نظر در این تگ دیگر موضوعیت ندارند .

 

تگ   <ins> و تگ <del>

 

همانطور که از اسم این تگ ها پیداست از این تگ ها برای اضافه کردن و حذف محتویات از صفحه استفاده می شود . خاصیت cite در این تگ ها url ای را ذخیره می کند که در ان لینک مشخصاتی از تغییرات بیان شده است . همچنین خاصیت datetime نیز مشخص کننده زمان ایجاد تغییرات را مشخص می کند .

 به طور پیش فرض محتویات اورده شده در تگ <del > با خط افقی برروی متن مشخص می شود در حالیکه محتویات تگ <ins> با آندرلاین مشخص می شود .

<h1>Widget for Sale</h1>

<p><s>Reg. Price $19.99</s> Now $9.99</p>

 

<s>Grilled Cheese Sandwich</s> Sold Out

 

<s>Three Bedroom Apartment $1,000 Monthly</s>

 

تگ <cite>

این تگ با خاصیت های گفته شده برای تگ های <ins>  و <del> تفاوت دارد. تگ <cite>  مشخص کننده رفرنسی به منابع دیگر  مانند مقاله ، کتاب ، عکس و شعر ، ویدئو و ... است.

محتویات این تگ باید نام رفرنسی باشد که قرار است به آن ارجاع شود . که این نام میتواند نام نویسنده و یا هنرمند مورد نظر و حتی url  مورد نظر برای ارجاع به رفرنس باشد .

 

<p>I really like Armando’s article,

<cite>An Introduction to HTML Imports</cite></p>

 

تگ <q>

 

برای ایجاد نقل قول کوتاه در متن جاری مورد استفاده قرار می گیرد. تفاوت این تگ با تگ <blockquotes> در این است که تگ <blockquotes> بیشتر برای نقل قول های طولانی و مستقل تر مناسب است .

 

<p>I had not been aware, but according to <cite>Richard Kerr</cite>

<q cite="//www.sciencemag.org/content/340/6136/1031">Most robotic

missions to Mars have failed</q></p>

تگ های <abbr> و تگ های <dfn>

 

این تگ ها معمولا برای معرفی اختصاری(<abbr>)و یا مخفف(<dfn>) چیزی به خصوص در متون های پیچیده ، طولانی و فنی مورد استفاده قرار می گیرد.

 

<p>The <dfn><abbr title="Internet Corporation for Assigned Names and Numbers">ICANN</abbr></dfn>

is an international, not-for-profit organization responsible for managing web addresses.</p>

 

 

تگ <code>

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

 

 <p>In jQuery <code>.attr()</code> retrieves the value of an attribute of the

first element in the matching set of elements.</p>

 

برای ایجاد بلوکی از کدها نیز می توان از این تگ به همراه تگ <pre>  مانند زیر استفاده کرد :

<pre><code>

function loadAudio( object, url) {

    var request = new XMLHttpRequest();

    request.open('GET', url, true);

    request.responseType = 'arraybuffer';

 

    request.onload = function() {

        context.decodeAudioData(request.response, function(buffer) {

            object.buffer = buffer;

        });

    }

    request.send();

}

</code></pre>

 

تگ <samp>

 

یک متن که شامل مثال هایی از خروجی کدهای رایانه ایست را ایجاد می کند .

 

<p>If the upload fails, the system will notify the users that

<samp>the file was not uploaded</samp></p>

تگ <kbd>

یک متن که شامل حروف صفحه کلید است را ایجاد می کند . مانند مثال زیر که برای مشخص کردن اینکه کاربر باید کلید هایshift ctrl command 3 را در صفحه کلید برای انجام دستور خاصی اعمال کند از تگ <kbd> استفاده می کنیم :

 

<p>To capture an image of the screen on a Macbook, simultaneously press

<kbd>Shift</kbd> <kbd>Control</kbd> <kbd>Command</kbd> <kbd>3</kbd></p>

 

 

تگ <var>

 از این تگ برای نشان دادن یک متغیر چه در ریاضیات و چه در کد های برنامه نویسی  استفاده می کنیم :

 

<p><var>x</var> = 13</p>

<p>A second variable, <var>pad</var>, is assigned to the pad element object.

jQuery allows for this sort of concatenated selector.</p>

تو پیشگامیت، میتونی سوالات رو بپرسی و هم میتونی مطلب منتشر کنی.

پیشگام پلاس   پرسش و پاسخ



ثبت یک نظر

آدرس ایمیل شما منتشر نخواهد شد. فیلدهای الزامی مشخص شده اند *

  ورود / ثبت نام با حساب گوگل  

 

1 نظر ثبت شده