بخش های اصلی

آموزش HTML 5

آموزش HTML - عنصر META

عنصر meta برای فرآهم آوردن metadataیِ ساختاریافته برای صفحه وب استفاده می شه.

عنصر Meta

عنصر <meta> معمولاً metadataهای مثل کلمات کلیدیِ سند (keywords)، توصیفات (descriptions) ، آخرین ویرایش نویسنده و دیگر metadataها را فراهم می کنه. هرتعداد عنصر META که بخواید می توانید در بخش head سند HTML یا XHTML بگذارید.

زمانیکه خصیصه ی content، مقداری متشابه بدهد، خصیصه ی name در عنصر META، یک پراپرتیِ name ایجاد می کنه. مقدار خصیصه content ممکنه متن یا موجودیت باشه ولی نمیتواند تگ های HTML باشه. هیچ لیستِ استانداردی برای تنظیمات meta وجود نداره، بنابراین ممکنه هر metadataای که دوست داشته باشید، تولید کنید. مثال زیر را ببینید:

مثال

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="author" content="John Carter">
    <title>Defining Document's Author</title>        
</head>
<body>
    <p>Hello World!</p>
</body>
</html>

تگ <meta> در مثال بالا به سادگی، نویسنده ی سند را تعریف و مشخص می کنه.

نکته: Metadata توی صفحه نمایش داده نمی شه، ولی توسط ماشین ترجمه می شه (machine parsable) و مرورگرها، موتورهای جستجو یا وب سرویس های دیگه ازش استفاده می کنن.

تعیین character Encoding در HTML

معمولا از تگ Meta برای اعلان رمزگذاری کاراکتر ((character encoding در داخل سند HTML استفاده می شه.

مثال

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Declaring Character Encoding</title>        
</head>
<body>
    <p>Hello World!</p>
</body>
</html>

با این حال، برای تعیین رمزگذاری کاراکتر ((character encoding در سند CSS، از قانون #charset استفاده می شه.

نکته: از آنجایی که UTF-8 خیلی متنوع و گسترده ست، توصیه می شه که حتماً رمزگذاری کاراکتر ((character encoding را انتخاب کنین. با این حال اگر هم انتخاب نشه، از رمزگذاری (encoding) پیش فرض پلت فُرم استفاده می شه.

کلمات کلیدی (keywords) و توصیفات (description) برای موتورهای جستجو

بعضی از موتورهای جستجو از metadataها، خصوصاً از کلمات کلیدی و توصیفات برای شاخص گذاری صفحه های وب استفاده می کنن؛ در هر حال ضرورتاً این امر صحیح نیست. کلمات کلیدی ، کلمات کلیدی سند را با ارزش تر می کنن و توصیفات، یک خلاصه ی کوتاه از صفحه را فرآهم می کنن. در مثال زیر تگ های meta، کلمات کلیدی و توصیفات صفحه را تعیین می کنن:

مثال

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="HTML, CSS, References">
    <meta name="description" content="Tutorials on HTML and CSS"> 
    <title>Defining Keywords and Description</title>        
</head>
<body>
    <p>Hello World!</p>
</body>
</html>

نکته: موتورهای جستجو اغلب زمانیکه صفحه ها را در نتایج جستجوی خود نشان میدن، با استفاده از توصیفات metaی آن صفحه ها توضیح خلاصه ای از اون صفحه را نیز در نتایج جستجو نشان میدن.

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

می توانید از تگ meta viewport برای فعال کردن قابلیت زومِ وب سایت هایتان در دستگاه های موبایل استفاده کنین.

مثال

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Enable Zooming in Mobile Devices</title>        
</head>
<body>
    <p>Hello World!</p>
</body>
</html>

نکته: همیشه در صفحه های وب تان از تگ meta viewport استفاده کنین. با این کار وب سایتتان در دستگاه هایی مثل موبایل ها و تبلت ها، دسترس پذیرتر می شه.

مبحث آموزشی

آموزش HTML 5

Learn HTML 5

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

تبلیغات

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد