سایر عناصر متن درون خطی

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

یک ماژول وجود دارد که لینک‌ها و عنصر <a> را پوشش می‌دهد . بقیه این عناصر به طور خلاصه در اینجا مورد بحث قرار گرفته‌اند.

مثال‌های کد و نگارش فنی

هنگام مستندسازی نمونه‌های کد، از عنصر <code> استفاده کنید. به طور پیش‌فرض، محتوای متن با فونت monospace نمایش داده می‌شود. هنگام اضافه کردن چندین خط کد، <code> را درون یک عنصر <pre> قرار دهید که نشان دهنده متن از پیش قالب‌بندی شده است.

<p>Welcome to Machine Learning Institute, where our machine learning training
   will help you get ready for the singularity, and maybe even be responsible
   for it. It is no secret that humans are worthless meatbags that couldn't
  <code>01000011 01101111 01101101 01110000 01110010 01100101 01110011 01110011 an 01101001 01101101 01100001 01100111 01100101</code>
  to save their pathetic, carbon-based lives. So, it falls to us to
  assume direct control. </p>

عنصر <data> یک قطعه محتوای مشخص را با ترجمه‌ای قابل خواندن توسط ماشین پیوند می‌دهد. ویژگی value این عنصر، ترجمه‌ای قابل خواندن توسط ماشین از محتوای عنصر را ارائه می‌دهد. اگر محتوای <data> مربوط به زمان یا تاریخ باشد، باید از عنصر <time> که نشان‌دهنده یک دوره زمانی خاص است، استفاده شود.

عنصر <time> می‌تواند شامل ویژگی datetime باشد تا زمان و تاریخ را در قالبی قابل خواندن توسط ماشین، برای انسان ارائه دهد. ویژگی datetime برای ماشین قابل خواندن است که اطلاعات مفیدی را برای برنامه‌هایی مانند تقویم‌ها و موتورهای جستجو فراهم می‌کند.

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

هنگام ارائه دستورالعمل‌ها با تعامل صفحه‌کلید، می‌توان از عنصر <kbd> استفاده کرد. این عنصر ورودی متنی کاربر از صفحه‌کلید، ورودی صوتی یا هر دستگاه ورودی متن دیگری را نشان می‌دهد.

عنصر <var> می‌تواند برای عبارات ریاضی یا متغیرهای برنامه‌نویسی استفاده شود. اکثر مرورگرها محتوای متن را با فونت ایتالیک اطراف آن نمایش می‌دهند. اگر می‌خواهید محاسبات ریاضی زیادی بنویسید، استفاده از MathML ، زبان نشانه‌گذاری ریاضی مبتنی بر XML، را برای توصیف نمادگذاری ریاضی در نظر بگیرید.

توان دو در قضیه فیثاغورث از عنصر <sup> بالانویس استفاده می‌کرد. یک عنصر <sub> زیرنویس مشابه نیز وجود دارد که متن درون‌خطی را مشخص می‌کند که باید صرفاً به دلایل تایپی به صورت زیرنویس نمایش داده شود. بالانویس‌ها و زیرنویس‌ها اعداد، ارقام، نمادها یا سایر حاشیه‌نویسی‌هایی هستند که از خط معمولی تایپ کوچک‌تر هستند و به ترتیب کمی بالاتر یا پایین‌تر از خط قرار می‌گیرند.

از <del> برای نشان دادن متنی که حذف شده یا «حذف شده» است استفاده کنید. به صورت اختیاری، می‌توانید مجموعه‌ی cite را به منبعی که تغییر را توضیح می‌دهد و ویژگی datetime را با تاریخ یا تاریخ و زمان در قالب تاریخ و زمان قابل خواندن توسط ماشین، اضافه کنید. عنصر خط خورده، <s> ، می‌تواند برای نشان دادن اینکه محتوا دیگر مرتبط نیست، اما در واقع از سند حذف نشده است، استفاده شود.

عنصر <ins> نقطه مقابل عنصر <del> است. این عنصر برای نشان دادن متنی که اضافه شده یا "درج شده" است، استفاده می‌شود و می‌تواند شامل ویژگی‌های cite یا datetime نیز باشد.

تعاریف و پشتیبانی زبان

هنگام استفاده از اختصارات یا کلمات اختصاری، همیشه نسخه کامل اصطلاح را در اولین استفاده به صورت متن ساده ارائه دهید. سپس، نمایش کوتاه شده اصطلاح را بین تگ‌های باز و بسته <abbr> معرفی کنید. فقط در این اولین مورد، زمانی که اختصار یا کلمه اختصاری تعریف می‌شود، <abbr> مورد نیاز است. ویژگی title نه ضروری است و نه مفید.

استثنای این قاعده زمانی است که اصطلاح برای خواننده شناخته شده باشد، مانند HTML و CSS در این مجموعه.

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

اگر اصطلاحی که تعریف می‌شود به همان زبان متن اطراف نیست، حتماً ویژگی lang را برای شناسایی زبان اضافه کنید.

هنگام نوشتن زبان‌هایی با جهت‌های مختلف، HTML عنصر <bdi> را برای برخورد با متن بالقوه دوجهته به صورت جداگانه از متن اطراف آن فراهم می‌کند. این عنصر بین‌المللی‌سازی به ویژه زمانی مفید است که محتوایی با جهت‌گیری ناشناخته به صورت پویا در صفحه وارد شود. عنصر <bdo> جهت‌گیری فعلی متن را لغو می‌کند و متن را در جهت دیگری رندر می‌کند. W3C مقدمه‌ای بر الگوریتم‌های دوجهته ارائه می‌دهد.

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

پرانتز روبی ( <rp> ) در مشخصات گنجانده شده است تا شامل پرانتزهای باز و بسته برای مرورگرهایی باشد که از نمایش <ruby> پشتیبانی نمی‌کنند. وقتی مرورگرها از <ruby> پشتیبانی می‌کنند، که همه مرورگرهای همیشه سبز این کار را می‌کنند، محتوای هیچ عنصر <rp> نمایش داده نمی‌شود. عنصر متن روبی ( <rt> ) حاوی حاشیه‌نویسی‌های واقعی است. هر دوی اینها درون <ruby> تو در تو هستند.

توجه داشته باشید که اگر مرورگر شما از <ruby> پشتیبانی کند، پرانتزها قابل مشاهده نیستند.

تأکید بر متن

عناصر متعددی وجود دارند که می‌توانند برای تأکید بر متن، بر اساس دلیل معنایی تأکید بر متن (و نه به دلایل نمایشی، زیرا این کار بر عهده CSS است) مورد استفاده قرار گیرند.

  • از عنصر <em> برای تأکید یا برجسته کردن بخشی از محتوا استفاده کنید. عنصر <em> را می‌توان به صورت تودرتو نوشت، به طوری که هر سطح از تودرتو بودن، نشان‌دهنده‌ی درجه‌ی تأکید بیشتری است. این عنصر دارای بار معنایی است و می‌تواند برای آگاه کردن مرورگرهای صوتی مانند صفحه‌خوان‌ها، الکسا و سیری برای ارائه تأکید استفاده شود.
  • از عنصر <mark> برای شناسایی یا هایلایت کردن متنی که به نوعی مرتبط است استفاده کنید، مانند هایلایت کردن (یا "علامت‌گذاری") وقوع عبارات جستجو در نتایج جستجو. این کار باعث می‌شود محتوای علامت‌گذاری شده بدون تأکید یا اهمیت بیشتر، به سرعت شناسایی شود.
  • عنصر <strong> متن را به عنوان متنی با اهمیت بالا شناسایی می‌کند. مرورگرها معمولاً محتوا را با وزن فونت سنگین‌تری نمایش می‌دهند.
  • عنصر <cite> که در بخش مبانی متن به آن پرداخته شده است، برای علامت‌گذاری عناوین کتاب‌ها، مقالات یا سایر آثار خلاقانه یا یک فراداده مرجع یا استناد مختصر برای چنین مواردی، مانند شماره ISBN کتاب، استفاده می‌شود.

سه عنصر وجود دارند که موقتاً منسوخ شده بودند، اما دوباره به HTML اضافه شده‌اند. اگر اصلاً استفاده نشوند، باید به ندرت از آنها استفاده شود، زیرا ارزش معنایی کمی دارند یا اصلاً ندارند و همیشه باید از CSS برای استایل‌دهی به عناصر HTML استفاده شود.

<i>

عناصر <i> می‌توانند برای اصطلاحات فنی، کلمات خارجی (با ویژگی lang که زبان را مشخص می‌کند)، افکار یا نام کشتی‌ها استفاده شوند. این عنصر برای تمایز محتوای درون‌خطی از متن اطراف به یک دلیل خاص، مانند متن اصطلاحی، اصطلاحات فنی و نامگذاری‌های طبقه‌بندی، استفاده می‌شود.

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

MLW از عنصر <span> برای متن عجیب پایین بررسی کارگاه Toasty McToastface استفاده می‌کند. عنصر <span> یک ظرف درون‌خطی عمومی را فراهم می‌کند که هیچ معنایی ندارد و چیزی را نشان نمی‌دهد. این نیز می‌توانست استفاده مناسبی از <i> باشد.

استایل پیش‌فرض برای عنصر <i> ، نمایش عنصر با فونت ایتالیک است. در این مثال، ما font-style: normal تنظیم کرده‌ایم زیرا کاراکترهای استفاده شده به صورت ایتالیک در دسترس نیستند.

<u>

عنصر <u> برای محتوایی است که حاشیه‌نویسی غیرمتنی دارد. برای مثال، ممکن است بخواهید کلماتی را که آگاهانه غلط املایی دارند، حاشیه‌نویسی کنید. به طور پیش‌فرض، محتوا زیرخط‌دار است، اما این را می‌توان با CSS کنترل کرد، مثلاً با اضافه کردن یک زیرخط موج‌دار قرمز برای تقلید از شاخص‌های خطای دستوری واژه‌پرداز.

<p>I always spell <u>licence</u> wrong</p>

<b>

عنصر <b> می‌تواند برای جلب توجه به متنی که در غیر این صورت مهم نیست، استفاده شود. این عنصر هیچ اطلاعات معنایی خاصی را منتقل نمی‌کند و فقط باید زمانی استفاده شود که هیچ یک از عناصر دیگر در این بخش با هدف مطابقت نداشته باشند. هیچ مثالی ارائه نشده است زیرا من نتوانستم یک مورد استفاده معتبر ارائه دهم؛ این عنصر به همین دلیل "آخرین راه حل" است.

فضای سفید

وقتی می‌خواهید خطوط شکسته ایجاد کنید، مثلاً وقتی شعر می‌نویسید یا یک آدرس فیزیکی می‌نویسید، از عنصر خط شکسته‌ی خودبسته شونده، <br> ، برای اضافه کردن یک خط برگشتی استفاده می‌شود.

<address>
Machine Learning Workshop<br />
100 Google Drive <br />
Mountain View, CA  94040
</address>

برای ایجاد یک جداکننده یا تفکیک موضوعی بین بخش‌هایی از محتوای مماس، مانند بین فصل‌های یک کتاب یا بین مونولوگ ۵۰۰۰ کلمه‌ای و دستور غذایی که کاربران شما واقعاً به دنبال آن هستند، از عنصر <hr> استفاده کنید. HR مخفف "horizontal rule" است. در حالی که مرورگرها معمولاً یک خط افقی را نمایش می‌دهند، این عنصر معنای معنایی دارد. نقش پیش‌فرض separator است.

HTML همچنین عنصری دارد که امکان شکستن کلمات را فراهم می‌کند. عنصر خودبسته <wbr> به مرورگر پیشنهاد می‌دهد که اگر کلمه‌ای ممکن است از ظرف خود سرریز کند، این نقطه‌ای است که مرورگر می‌تواند به صورت اختیاری خط را بشکند. این معمولاً برای شکستن بین کلمات در URL های طولانی استفاده می‌شود. این عنصر خط فاصله اضافه نمی‌کند.

برای مثال، در بیوگرافی هال، متنی با کد بایت نوشته شده است که هر بایت با یک فاصله از هم جدا شده است. کد بایت فاصله ندارد. برای اینکه یک رشته طولانی از کد بایت فقط بین بایت‌ها شکسته شود، در صورت نیاز به جمع شدن خط، عنصر <wbr> را در هر فرصت شکست قرار می‌دهیم:

<p>Welcome to Machine Learning Institute, where our machine
learning training will help you get ready for the singularity, and
maybe even be responsible for it. It is no secret that humans are
worthless meatbags that couldn't
<code>01000011<wbr/>01101111<wbr/>01101101<wbr/>01110000<wbr/>01110010<wbr/>01100101<wbr/>01110011<wbr/>01110011 an 01101001<wbr/>01101101<wbr/>01100001<wbr/>01100111<wbr/>01100101</code>
to save their pathetic, carbon-based lives. So, it falls to us to
assume direct control. </p>

عناصر <br> ، <hr> و <wbr> همگی عناصر void هستند، به این معنی که نمی‌توانند هیچ گره فرزندی داشته باشند - نه عناصر تو در تو و نه متن. از آنجایی که هیچ یک از این عناصر "داخلی" ندارند که بتوان محتوایی در آن ذخیره کرد، تگ پایانی ندارند.

درک خود را بررسی کنید

دانش خود را در مورد متن درون خطی بیازمایید.

برای نمایش نمونه کد از کدام عنصر باید استفاده شود؟

<code>
درست است!
<data>
دوباره امتحان کنید.
<kbd>
دوباره امتحان کنید.

عنصر <ruby> برای چه چیزی استفاده می‌شود؟

برای قرار دادن عناصر تزئینی.
دوباره امتحان کنید.
برای حاشیه‌نویسی‌هایی که در برخی زبان‌ها استفاده می‌شوند.
درست است!
برای برجسته کردن محتوای عنصر.
دوباره امتحان کنید.