Metadata در HTML — راهنمای جامع

۵۶۲ بازدید

آخرین به‌روزرسانی: ۱۳ شهریور ۱۴۰۲

زمان مطالعه: ۳۴ دقیقه

بخش head در سندهای HTML قسمتی است که هنگام بارگذاری صفحه در مرورگرهای وب نمایش نمی‌یابد و این بخش شامل اطلاعاتی مانند عنوان یا <title> صفحه، لینک به فایل‌های CSS، لینک به favicon-های سفارشی، و دیگر فراداده‌ها در ارتباط با HTML مانند نویسنده، کلیدواژه‌های مهم که سند را توصیف می‌کنند و موارد دیگر است. در این مقاله همه موارد فوق و همچنین برخی موارد دیگر را که به عنوان مقدمه‌ای برای کار با markup مورد نیاز هستند ارائه خواهیم کرد.

فهرست مطالب این نوشته

بخش head در HTML چه نقشی دارد؟

افزودن عنوان

یادگیری عملی: بررسی یک مثال ساده

فراداده: عنصر <meta>

یادگیری عملی: آزمایش انکودینگ کاراکتر

افزودن نویسنده و توصیف

یادگیری عملی: استفاده از توصیف صفحه در موتورهای جستجو

انواع دیگری از فراداده‌ها

افزودن آیکون‌های سفارشی به سایت

اعمال CSS و جاوا اسکریپت روی HTML

یادگیری عملی: به‌کارگیری CSS و جاوا اسکریپت روی یک صفحه

تعیین زبان اصلی برای سند HTML

جمع‌بندی

پیش نیاز مطالعه این راهنما، آشنایی اولیه با HTML است که در بخش قبلی این سری مطالب با عنوان «آشنایی مقدماتی با HTML — به زبان ساده» ارائه شده است.

هدف از این مقاله آشنا کردن خوانندگان با مهم‌ترین آیتم‌هایی است که می‌تواند در بخش head فایل HTML وجود داشته باشد و تأثیری که روی این سند می‌گذارد بررسی شده است.

بخش head در HTML چه نقشی دارد؟

در ادامه مثالی از فایل HTML ساده‌ای که در بخش قبلی این مقاله ارائه شده است را مجدداً بررسی می‌کنیم:

1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <title>My test page</title>
6  </head>
7  <body>
8    <p>This is my page</p>
9  </body>
10</html>

بخش head به محتوای عنصر <head> گفته می‌شود و برخلاف بخش <body> که در هنگام بارگذاری صفحه نمایش می‌یابد، محتوای این بخش روی صفحه نمایش نخواهد یافت. به جای آن وظیفه head این است که شامل فراداده یا metadata-یی در مورد سند باشد. در مثال فوق بخش head کاملاً کوچک است:

1<head>
2  <meta charset="utf-8">
3  <title>My test page</title>
4</head>

با این وجود در صفحه‌های بزرگ‌تر، head می‌تواند کاملاً مفصل‌تر باشد. برای نمونه به برخی از وب‌سایت‌های محبوب خود بروید و با استفاده از بخش «ابزارهای توسعه‌دهنده» (Developer tools) در مرورگر، محتوای head را بررسی کنید. هدف اصلی ما در مقاله حاضر این نیست که شیوه استفاده از همه مواردی که می‌توانند در head قرار گیرند را توضیح دهیم؛ بلکه می‌خواهیم روش استفاده از عناصر عمده‌ای که می‌توان در بخش head گنجاند را یاد بگیریم و با آن‌ها آشنایی اندکی بیابیم.

افزودن عنوان

ما عنصر <title> را پیش از این در صفحه‌های وب نمونه‌ای که ارائه شد، مشاهده کرده‌ایم. از این عنصر برای افزودن یک عنوان به صفحه وب استفاده می‌شود. این عنصر در برخی موارد با عنصر <h1> که برای عناوین سطح بالا در بخش body صفحه به کار می‌رود، اشتباه گرفته می‌شود. این عنصر گاهی اوقات به نام عنوان صفحه نیز نامیده می‌شود؛ اما باید توجه کنید که این دو کاملاً متفاوت هستند.

فیلم آموزش اچ تی ام ال – طراحی وب با HTML – مقدماتی در فرادرس

کلیک کنید

عنصر <h1> هنگام بارگذاری صفحه در آن نمایش می‌یابد و به طور کلی باید یک بار در هر صفحه استفاده شود تا عنوان محتوای صفحه را نمایش دهد. برای مثال برای عنوان داستان، سرخط خبرها یا هر کاربرد مناسب دیگر استفاده می‌شود. عنصر <title> فراداده است و عنوان کلی سند HTML و نه محتوای سند را نمایش می‌دهد.

یادگیری عملی: بررسی یک مثال ساده

برای آغاز این یادگیری عملی ابتدا کد زیر را کپی کنید و در یک فایل متنی جدید چسبانده و سپس در مکان مناسبی ذخیره کنید:

1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <title><title> element</title>
6  </head>
7  <body>
8    <h1><h1> element</h1>
9  </body>
10</html>

این فایل را در مرورگر خود باز کنید تا با چیزی مانند تصویر زیر مواجه شوید:

<title> element

اینک کاملاً مشخص است که محتوای تگ <h1> در کجای صفحه و محتوای <title> در کدام بخش آن ظاهر می‌شود. ضمناً می‌توانید این کد را در یک ویرایشگر کد باز کنید و با دستکاری محتوای تگ‌های مختلف آن را به صورت عملی بررسی کنید.

محتوای <title> به روش‌های دیگر نیز استفاده می‌شود. برای نمونه اگر تلاش کنید صفحه را بوکمارک کنید، خواهید دید که محتوای <title> در نام بوکمارک پیشنهادی ظاهر می‌شود.

<title> contents

محتوای <title> در نتایج جستجو نیز ظاهر می‌شود که در بخش بعدی بیشتر توضیح می‌دهیم.

فراداده: عنصر <meta>

فراداده یا metadata داده‌ای است که به توصیف داده‌ها می‌پردازد. HTML یک روش رسمی برای افزودن فراداده به سند دارد که از طریق عنصر <meta> است. البته موارد دیگری که در این مقاله بررسی می‌کنیم را نیز می‌توان نوعی فراداده در نظر گرفت. انواع بسیار متفاوتی از عناصر <meta> وجود دارند که می‌توان در بخش <head> صفحه گنجاند؛ اما همه آن‌ها را در این مرحله بررسی نخواهیم کرد، چون باعث ایجاد سردرگمی می‌شوند. به جای آن چند مورد را توضیح می‌دهیم که عموماً می‌توانید ببینید و از این رو ایده‌ای کلی از این مفهوم به دست می‌آورید.

توصیف انکودینگ کاراکتری سند HTML

در مثال فوق خطی به صورت زیر وجود دارد:

1<meta charset="utf-8">

این عنصر به سادگی انکودینگ کاراکتری سند را مشخص می‌سازد. یعنی مجموعه کاراکترهایی که سند مجاز به استفاده از آن‌ها است در این بخش معین شده‌اند. برای نمونه utf-8 یک مجموعه کاراکتر جهانی است که تقریباً شامل هر کاراکتری از همه زبان‌ها می‌شود. این بدان معنی است که صفحه وب می‌تواند برای مدیریت نمایش هر زبانی مورد استفاده قرار گیرد. از این رو ایده مناسب این است که این انکودینگ را در همه صفحه‌های وب که ایجاد می‌کنیم تعیین کنیم. برای نمونه با استفاده از انکودینگ utf-8 صفحه وب شما می‌تواند زبان‌های انگلیسی و ژاپنی را به خوبی در کنار هم ارائه کند.

اگر انکودینگ کاراکتری صفحه وب خود را به صورت ISO-8859-1 که مختص الفبای لاتین است، تعیین کنید، صفحه وب فوق به صورت زیرنمایش خواهد یافت:

دقت کنید که برخی مرورگرها (مانند کروم) به طور خودکار انکودینگ‌های نادرست را اصلاح می‌کنند و از این رو بسته به این که از چه مرورگری استفاده می‌کنید، ممکن است این مشکل را در عمل متوجه نشوید. در هر حال بهتر است انکودینگ صفحه‌های خود را همواره به صورت utf-8 تنظیم کنید تا از هر گونه مشکل احتمالی در مرورگرهای دیگر جلوگیری نمایید.

یادگیری عملی: آزمایش انکودینگ کاراکتر

برای بررسی این مورد باید قالب HTML ساده‌ای را که در بخش قبلی ایجاد کردیم مجدداً باز کنید. سپس مقدار فراداده charset را به صورت ISO-8859-1 تعیین کنید و زبان ژاپنی به صفحه خود اضافه کنید. ما از کد زیر استفاده کرده‌ایم:

1<p>Japanese example: ご飯が熱い。</p>

افزودن نویسنده و توصیف

بسیاری از عناصر <meta> شامل خصوصیت‌های <name> و <content> نیز هستند.

خصوصیت name نوع عنصر meta مورد استفاده را تعیین می‌کند و این که چه نوع اطلاعاتی را شامل می‌شود.
Content محتوای واقعی meta را نمایش می‌دهد.

دو مورد از این عناصر meta که در اغلب صفحه‌ها گنجانده می‌شوند، یکی نویسنده صفحه و دیگری توصیفی کوتاه از صفحه است. به مثال زیر توجه کنید:

1<meta name="author" content="Chris Mills">
2<meta name="description" content="The MDN Web Docs Learning Area aims to provide
3complete beginners to the Web with all they need to know to get
4started with developing web sites and applications.">

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

تعیین توصیف نیز از طریق وارد کردن کلیدواژه‌هایی در رابطه با محتوای صفحه صورت می‌گیرد که آن نیز مفید است زیرا موجب می‌شود که صفحه وب شما در هنگام نمایش در موتورهای جستجو با کلیدواژه‌های تعریف شده در رتبه‌های بالاتری ظاهر شود. به این نوع بهینه‌سازی‌ها، «بهینه‌سازی موتور جستجو» یا به اختصار SEO گفته می‌شود.

یادگیری عملی: استفاده از توصیف صفحه در موتورهای جستجو

توصیف صفحه (description) در صفحه نتایج موتور جستجو نیز ظاهر می‌شود. در تمرین زیر این مفهوم را بررسی می‌کنیم.

به صفحه اصلی شبکه توسعه‌دهندگان Mozilla بروید.
با راست-کلیک کردن روی صفحه و انتخاب گزینه View Page Source از منوی نمایش یافته، کد منبع صفحه را مشاهده کنید.
تگ متای توصیف را پیدا کنید. این تگ معمولاً چیزی مانند زیر است:

1<meta name="description" content="The MDN Web Docs site 
2  provides information about Open Web technologies 
3  including HTML, CSS, and APIs for both Web sites and 
4  progressive web apps.">

سپس به دنبال عبارت «MDN Web Docs» در موتور جستجوی مورد علاقه خود (برای نمونه Google) بگردید. بدین ترتیب مشاهده می‌کنید که عنصر <meta> و <title> در نتیجه جستجو استفاده می‌شوند.

نکته: در وب‌سایت گوگل برخی صفحه‌های فرعی وب‌سایت MDN WEB Docs را مشاهده می‌کنید که در زیر لینک صفحه اصلی ظاهر می‌شوند. این موارد لینک‌های سایت (sitelinks) نام دارند که در بخش «ابزارهای وبمستر گوگل» (Google's webmaster tools) قابل پیکربندی هستند. این یکی از روش‌ها برای بهتر ساختن نتایج جستجو در موتور جستجوی گوگل است.

description: بسیاری از ویژگی‌های <meta> دیگر استفاده نمی‌شوند. برای نمونه عنصر <meta> به نام keyword که در ابتدا برای تعیین کلیدواژه‌های صفحه برای موتورهای جستجو طراحی شده بود، در حال حاضر از سوی موتورهای جستجو نادیده گرفته می‌شود، زیرا اسپم کنندگان این فهرست کلیدواژه‌ها را با انبوهی از کلیدواژه‌ها پر می‌کردند تا نتایج جستجو را به نفع خود تغییر دهند.

انواع دیگری از فراداده‌ها

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

فیلم آموزش طراحی وب با HTML اچ تی ام ال – تکمیلی در فرادرس

کلیک کنید

برای نمونه Open Graph Data یک پروتکل فراداده است که فیسبوک برای ارائه فراداده‌های غنی‌تر برای وب‌سایت‌ها طراحی کرده است. در سورس کد MDN WEB Docs می‌توانید این فراداده‌ها را مشاهده کنید:

1<meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png">
2<meta property="og:description" content="The Mozilla Developer Network (MDN) provides
3information about Open Web technologies including HTML, CSS, and APIs for both Web sites
4and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
5<meta property="og:title" content="Mozilla Developer Network">

یکی از تأثیرهای این وضعیت آن است که وقتی در فیسبوک لینکی به MDN WEB Docs ایجاد می‌کنید، این لینک همراه با یک تصویر و یک توصیف ارائه می‌شود که تجربه بهتری به کاربران عرضه می‌کند.

توییتر نیز از فراداده اختصاصی مشابهی استفاده می‌کند که هنگام نمایش URL وب‌سایت در twitter.com تأثیر مشابهی را ایجاد می‌کند. برای نمونه:

1<meta name="twitter:title" content="Mozilla Developer Network">

افزودن آیکون‌های سفارشی به سایت

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

به روش زیر می‌توان favicon را به صفحه اضافه کرد:

favicon در همان دایرکتوری که صفحه index وب‌سایت قرار دارد و با قالب ico. ذخیره می‌شود. البته بسیاری از مرورگرها favicon-ها را در قالب‌های رایج‌تری مانند gif یا png نیز قبول می‌کنند، اما اگر از فرمت ICO استفاده کنید می‌توانید از پشتیبانی مرورگرهای قدیمی‌تر مانند Internet Explorer 6 نیز مطمئن باشید.
کد زیر را به بلوک <head> سند HTML اضافه کنید تا به آن ارجاعی بدهیم:

1<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

در ادامه مثالی از یک favicon را در پنل بوکمارک مشاهده می‌کنید:

انواع بسیار زیاد دیگری از آیکون‌ها نیز وجود دارند که امروزه مورد استفاده قرار می‌گیرند. برای نمونه کد زیر را می‌توانید در سورس صفحه اصلی وب‌سایت MDN WEB Docs مشاهده کنید:

1<!-- third-generation iPad with high-resolution Retina display: -->
2<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png">
3<!-- iPhone with high-resolution Retina display: -->
4<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png">
5<!-- first- and second-generation iPad: -->
6<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png">
7<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
8<link rel="apple-touch-icon-precomposed" href="https://developer.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png">
9<!-- basic favicon -->
10<link rel="shortcut icon" href="https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.png">

این کامنت‌ها، زمینه استفاده هر کدام از آیکون‌ها را توضیح می‌دهند. این عناصر چیزهایی مانند یک آیکون با وضوح بالا برای استفاده هنگام ذخیره‌سازی وب‌سایت در صفحه اصلی IPad را شامل می‌شوند.

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

نکته: اگر سایت شما از یک «سیاست امنیت محتوا» (Content Security Policy) یا به اختصار CSP برای بهبود امنیت، استفاده می‌کند، این سیاست در مورد favicon نیز به کار گرفته می‌شود. اگر با مشکلاتی مانند عدم بارگذاری favicon مواجه شدید، اطمینان پیدا کنید که دایرکتیو img-src در بخش heder در سیاست امنیت محتوا از دسترسی به آن جلوگیری نمی‌کند.

اعمال CSS و جاوا اسکریپت روی HTML

امروزه تقریباً همه وب‌سایت‌های مدرن از CSS برای بهبود ظاهر وب‌سایت و از جاوا اسکریپت برای ایجاد کارکردهای تعاملی مانند پخش‌کننده‌های ویدیو، نقشه، بازی و موارد دیگر استفاده می‌کنند. این موارد به طور عمده به ترتیب با استفاده از عنصر <link> و عنصر <script> روی صفحه استفاده می‌شوند.

فیلم آموزش طراحی صفحات ریسپانسیو یا واکنشگرا با HTML و CSS در فرادرس

کلیک کنید

عنصر <link> همواره درون بخش head سند قرار دارد. این عنصر دو خصوصیت می‌پذیرد که یکی به صورت "rel="stylesheet به این معنی است که یک سند stylesheet است و دیگری به صورت href شامل مسیر فایل stylesheet است:

1<link rel="stylesheet" href="my-css-file.css">

عنصر <script> لزومی ندارد حتماً در بخش head قرار داشته باشد. در واقع در اغلب موارد بهتر است که در انتهای سند HTML و درست قبل از تگ پایانی <body/> جای داشته باشد تا این اطمینان حاصل شود که همه محتوای HTML پیش از استفاده از جاوا اسکریپت از سوی مرورگر خوانده شده است. در غیر این صورت ممکن است جاوا اسکریپت تلاش کند به عنصری دسترسی پیدا کند که هنوز وجود ندارد. در این موارد مرورگر خطایی صادر می‌کند.

1<script src="my-js-file.js"></script>

نکته: عنصر <script> شاید مانند یک عنصر خالی به نظر آید؛ اما چنین نیست و از این رو به یک تگ پایانی نیاز دارد به جای اشاره به یک فایل اسکریپت بیرونی می‌توان اسکریپت را درون عنصر <script> نیز قرار دارد.

یادگیری عملی: به‌کارگیری CSS و جاوا اسکریپت روی یک صفحه

برای آغاز این یادگیری عملی، ابتدا کدهای زیر را در فایل‌های مربوطه در سیستم محلی خود کپی کنید همه آن‌ها را در یک دایرکتوری واحد قرار دهید.

فایل meta-example.html:

1<!DOCTYPE html>
2<html lang="en-US">
3  <head>
4    <meta charset="utf-8">
5    <title>Meta examples</title>
6    
7    <meta name="author" content="Chris Mills">
8    <meta name="description" content="This is an example page to demonstrate usage of metadata on web pages.">
9
10    <meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png">
11    <meta property="og:description" content="This is an example page to demonstrate usage of metadata on web pages.">
12    <meta property="og:title" content="Metadata; The HTML <head>, on MDN">
13
14    <link rel="Shortcut Icon" href="favicon.ico" type="image/x-icon">
15  </head>
16  <body>
17    <h1>Meta examples</h1>
18
19    <p>Japanese example: ご飯が熱い。</p>
20  </body>
21</html>

فایل script.js:

1var list = document.createElement('ul');
2var info = document.createElement('p');
3var html = document.querySelector('html');
4
5info.textContent = 'Below is a dynamic list. Click anywhere outside the list to add a new list item. Click an existing list item to change its text to something else.';
6
7document.body.appendChild(info);
8document.body.appendChild(list);
9
10html.onclick = function() {
11  var listItem = document.createElement('li');
12  var listContent = prompt('What content do you want the list item to have?');
13  listItem.textContent = listContent;
14  list.appendChild(listItem);
15
16  listItem.onclick = function(e) {
17    e.stopPropagation();
18    var listContent = prompt('Enter new content for your list item');
19    this.textContent = listContent;
20  }
21}

فایل style.css:

1html {
2  background-color: green;
3  font-size: 20px;
4}
5
6ul {
7  background: red;
8  padding: 10px;
9  border: 1px solid black;
10}
11
12li {
13  margin-left: 20px;
14}

فایل HTML را هم در یک مرورگر و هم در یک ویرایشگر متنی باز کنید. با استفاده از اطلاعاتی که در بخش‌های قبلی ارائه کردیم اینک می‌توانید عناصر <link> و <script> را به صفحه HTML خود اضافه کنید و بدین ترتیب CSS و جاوا اسکریپت را روی سند HTML اعمال کنید.

اگر این کارها به درستی انجام شود، زمانی که سند HTML را ذخیره کنید و مرورگر را رفرش نمایید، می‌بینید که همه چیز تغییر یافته است.

جاوا اسکریپت یک فهرست خالی به صفحه اضافه می‌کند. اینک زمانی که در هر کجای فهرست کلیک کنید، یک کادر محاوره باز می‌شود که از شما می‌خواهد متنی برای آیتم جدید لیست وارد نمایید زمانی که دکمه OK را بزنید، یک آیتم جدید به فهرست اضافه می‌شود که حاوی متنی است. هنگامی که روی یک آیتم موجود در فهرست کلیک کنید، یک کادر محاوره باز می‌شود که امکان تغیر دادن متن آیتم را به شما می‌دهد.
کد CSS موجب می‌شود که پس‌زمینه صفحه به رنگ سبز درآید و متن بزرگ‌تر شود. همچنین سبک‌بندی برخی از بخش‌های محتوا را که جاوا اسکریپت به صفحه اضافه کرده است تغییر می‌دهد. برای نمونه نوار قرمز با حاشیه سیاه همان سبک‌بندی CSS است که به لیست ایجاد شده از سوی جاوا اسکریپت اضافه شده است.

دقت کنید که اگر در هر کجای این تمرین ناموفق بودید و نتوانستید CSS یا جاوا اسکریپت را روی صفحه اعمال کنید، می‌توانید از کد زیر استفاده کنید:

1<!DOCTYPE html>
2<html lang="en-US">
3  <head>
4    <meta charset="utf-8">
5    <title>Meta examples</title>
6
7    <meta name="author" content="Chris Mills">
8    <meta name="description" content="This is an example page to demonstrate usage of metadata on web pages.">
9
10    <meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png">
11    <meta property="og:description" content="This is an example page to demonstrate usage of metadata on web pages.">
12    <meta property="og:title" content="Metadata; The HTML <head>, on MDN">
13
14    <link rel="Shortcut Icon" href="favicon.ico" type="image/x-icon">
15
16    <link rel="stylesheet" href="style.css">
17  </head>
18  <body>
19    <h1>Meta examples</h1>
20
21    <p>Japanese example: ご飯が熱い。</p>
22
23    <script src="script.js"></script>
24  </body>
25</html>

تعیین زبان اصلی برای سند HTML

در نهایت باید اشاره کنیم که شما می‌توانید و در واقع بهتر است که یک زبان برای صفحه وب خود تعیین کنید. این کار از طریق افزودن خصوصیت lang به تگ آغازین HTML به صورت زیر ممکن است:

1<html lang="en-US">

این کار به چند دلیل مفید است. نخست این که در صورت تعیین زبان، سند HTML از سوی موتورهای جستجو به روش مؤثرتری ایندکس می‌شود و برای مثال باعث می‌شود در جستجوهای مرتبط با یک زبان خاص در رتبه‌های بالاتری ظاهر شود. همچنین برای افرادی که دارای ناتوانی‌هایی بینایی هستند و از نرم‌افزارهای قرائت صفحه استفاده می‌کنند نیز مناسب است. برای نمونه کلمه six در هر دو زبان انگلیسی و فرانسه به کار می‌رود؛ اما طرز تلفظ آن متفاوت است.

البته می‌توان در یک صفحه زبان‌های مختلفی برای بخش‌های متفاوت تعریف کرد. برای نمونه می‌توان یک بخش را که با زبان ژاپنی نوشته شده است به صورت مجزا مانند زیر به زبان ژاپنی اختصاص داد:

1<p>Japanese example: <span lang="ja">ご飯が熱い。</span>.</p>

جمع‌بندی

بدین ترتیب به پایان این مقاله راهنما در مورد بخش head در سندهای HTML می‌رسیم. البته هنوز موارد زیادی وجود دارند که باید در این خصوص یاد بگیرید؛ اما توضیح یک باره همه این مفاهیم کاری ملال‌آور و خسته‌کننده خواهد بود.

فیلم مجموعه آموزش طراحی سایت با HTML و CSS – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

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

برای مطالعه قسمت بعدی این مجموعه آموزش روی لینک زیر کلیک کنید:

مبانی کار با متن در HTML — راهنمای کاربردی

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

بر اساس رای ۳ نفر

آیا این مطلب برای شما مفید بود؟

اگر بازخوردی درباره این مطلب دارید یا پرسشی دارید که بدون پاسخ مانده است، آن را از طریق بخش نظرات مطرح کنید.

ثبت نظر

منابع:

mozilla

میثم لطفی (+)

«میثم لطفی» در رشته‌های ریاضیات کاربردی و مهندسی کامپیوتر به تحصیل پرداخته و شیفته فناوری است. وی در حال حاضر علاوه بر پیگیری علاقه‌مندی‌هایش در رشته‌های برنامه‌نویسی، کپی‌رایتینگ و محتوای چندرسانه‌ای، در زمینه نگارش مقالاتی با محوریت نرم‌افزار با مجله فرادرس همکاری دارد.

نظر شما چیست؟

برچسب‌ها

Metadata در HTML — راهنمای جامع

بخش head در HTML چه نقشی دارد؟

افزودن عنوان

یادگیری عملی: بررسی یک مثال ساده

فراداده: عنصر <meta>

توصیف انکودینگ کاراکتری سند HTML

یادگیری عملی: آزمایش انکودینگ کاراکتر

افزودن نویسنده و توصیف

یادگیری عملی: استفاده از توصیف صفحه در موتورهای جستجو

انواع دیگری از فراداده‌ها

افزودن آیکون‌های سفارشی به سایت

اعمال CSS و جاوا اسکریپت روی HTML

یادگیری عملی: به‌کارگیری CSS و جاوا اسکریپت روی یک صفحه

تعیین زبان اصلی برای سند HTML

جمع‌بندی

انواع الگوریتم ها و کاربرد آن ها – به زبان ساده و با مثال

معرفی بهترین زبان های برنامه نویسی طراحی سایت در سال ۱۴۰۳

Boolean چیست؟ – نوع داده بولی به زبان ساده

کتابخانه OS در پایتون چیست؟ – معرفی و آموزش نحوه استفاده

معرفی کتابخانه های گرافیکی پایتون – هشت کتابخانه کاربردی

بهترین IDE برای PHP در سال ۲۰۲۴ – معرفی، مقایسه و انتخاب

نقشه راه برنامه نویسی بک اند برای ۲۰۲۴ از شروع تا بازار کار

طراحی الگوریتم چیست؟ – از کاربرد تا یادگیری به زبان ساده

بازار کار PHP چگونه است؟ – از شرایط فعلی تا دورنمای آینده

آموزش ساخت کتابخانه در پایتون – از صفر تا صد