سایر عناصر مربوط به متن

مقدمه

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

بیان مطالب جانبی در صفحه

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

در کد زیر از یک لیست توصیفی برای نمایش قیمت اتاق‌های تک‌نفره و دونفره‌ی یک هتل استفاده شده است. درون هر عنصر dd از یک عنصر small برای بیان این مطلب جانبی که “در قیمت اعلام شده، پول صبحانه منظور شده اما مالیات بر ارزش افزوده (VAT) خیر” استفاده شده است.

HTML

<dl>
  <dt>Single room</dt>
  <dd>$199 <small>breakfast included, VAT not included</small></dd>
  <dt>Double room</dt>
  <dd>$239 <small>breakfast included, VAT not included</small></dd>
</dl>

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

نمایش متنی که دیگر اعتبار ندارد

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

HTML

<p><s>There will be a few tickets available in the box office tonight</s></p>
<p>SOLD OUT!</p>

نقل عبارتی از یک منبع دیگر

در فصل قبل با عنصر blockquote آشنا شدیم و دیدیم که چطور از این عنصر برای ایجاد یک بلاک شامل یک عبارت نقل‌قول استفاده می‌کنیم. عنصر q نیز برای نمایش نقل‌قول‌ها کاربرد دارد اما بین این دو عنصر یک تفاوت مهم وجود دارد: عنصر blockquote یک عنصر block-level است که برای ایجاد بلاک نقل‌قول به کار می‌رود اما q یک عنصر inline است که برای نمایش نقل‌قول‌های کوتاه و درون‌خطی کاربرد دارد. مثال زیر را ببینید.

HTML

<p>
  The man said:
  <q>Things that are impossible, just take longer</q>
  I disagreed with him.
</p>

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

HTML

<p>
  The W3C page <cite>About W3C</cite>says the W3C's 
  mission is <q cite="https://w3.org/consortium">
    To lead the World Wide Web to its full
    potential by developing protocols and
    guidelines that ensure long-term growth for the Web
</q>
</p>

بد نیست بدانید که این امکان وجود دارد که به جای استفاده از عنصر q مستقیماً از کوتیشن استفاده کنیم و عبارت نقل قول را درون یک جفت کوتیشن “ “ قرار دهیم. این کار با اینکه از عنصر q بدین منظور استفاده کنیم، هم‌ارز است.

استناد به یک اثر خلق‌شده

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

HTML

<p>
  According to the Wikipedia article <cite>HTML</cite>, as it
  stood in mid-February 2008, leaving attribute values unquoted is
  unsafe. This is obviously an over-simplification.
</p>
<!-- do not copy this example, it is an example of bad usage! -->
<p>
  According to <cite>the wikipedia article on HTML</cite>, as it
  stood in mid-February 2008, leaving attribute values unquoted is
  unsafe. This is obviously an over-simplification.
</p>

همانطور که می‌بینید، در پاراگراف دوم عنصر cite حاوی اطلاعاتی بیش از عنوان یک اثر (که در اینجا یک مقاله در ویکی‌پدیاست) است و این امر با فلسفه‌ی عنصر cite منافات دارد. موضوع دیگری که در مورد عنصر cite باید مورد توجه قرار گیرد، این است که هدف این عنصر، نقل‌قول نیست و برای نقل قول یک عبارت باید عناصر blockquote و یا q را به کار گرفت. در کد زیر از یک عناصر blockquote برای نقل اولین جمله‌ی کتاب 1984 اثر جرج اورول استفاده شده و عنصر cite به کار رفته در بخش figcaption شامل عنوان این اثر است که در قالب یک لینک ارائه شده تا کاربر بتواند به صفحه‌ی مربوط به این اثر برود.

HTML

<figure>
  <blockquote>
    <p>It was a bright cold day in April, and the clocks were striking thirteen.</p>
  </blockquote>
  <figcaption>The first sentence in <cite><a href="https://george-orwell.org/1984/0.html">Nineteen Eighty-Four</a></cite>
    By George Orwell</figcaption>
</figure>

نمایش عبارات اختصاری

برای نمایش یک عبارت اختصاری یا مخفف یک عبارت طولانی‌تر، می‌توانیم از عنصری با نام abbr استفاده کنیم. نام این عنصر از اصطلاح abbreviation به معنای اختصار گرفته شده است. در صورت تمایل، می‌توانیم از صفت title این عنصر برای ارائه‌ی فرم کامل عبارت مختصر شده استفاده کنیم. توجه داشته باشید که اگرچه title یک صفت عمومی است اما هنگامی که برای عنصر abbr به کار رود، نقش و کاربرد خاصی دارد که همان ارائه‌ی فرم کامل عبارت مختصر شده است. مثال زیر را ببینید.

HTML

<p>The <abbr title="World Health Organization">WHO</abbr>was founded in 1948.</p>

اکثر مرورگرها یک خط‌چین را زیر عبارت اختصاری رسم می‌کنند اما برخی دیگر مانند IE به طور پیش‌فرض استایل خاصی را روی عنصر abbr اعمال نمی‌کنند. در هر حال، اگر بخواهیم عبارات اختصاری ما در همه‌ی مرورگرها به یک شکل نشان داده شوند، باید با استفاده از CSS استایل مورد نظر خود را برای عنصر abbr تعیین کنیم.

تعریف یک عبارت یا اصطلاح

اگر بخواهیم تعریفی از یک اصطلاح یا عبارت ارائه دهیم، می‌توانیم از عنصری به نام dfn بدین منظور استفاده کنیم. روش استفاده از این عنصر به این صورت است که عبارتی که قصد تعریف آن را داریم یا به عنوان محتوای متنی درون عنصر dfn و یا به عنوان مقدار صفت title این عنصر (و یا یک عنصر abbr درون عنصر dfn) آورده می‌شود و تعریف ارائه شده برای آن عبارت باید درون نزدیکترین والد عنصر dfn (که می‌تواند یک پاراگراف، یک جفت dt و dd و یا یکی از عناصر بخش‌بندی section، article، aside و nav باشد) آورده شود. عملکرد این عنصر را با ارائه‌ی چند مثال روشن می‌کنیم.

ساده‌ترین حالت ممکن این است که عنصر dfn حاوی عبارت یا اصطلاحی باشد که قصد تعریف آن را داریم و تعریف این عبارت درون نزدیکترین عنصر والد dfn ارائه شود. این سناریو در مثال زیر پیاده‌سازی شده است.

HTML

<p><dfn>HTML</dfn>is the standard markup language for creating webpages.</p>

همانطور که می‌بینید، در این مثال عبارتی که قصد تعریف آن را داریم (یعنی HTML) مستقیماً درون عنصر dfn قرار داده شده و اولین عنصر والد dfn یعنی عنصر p حاوی تعریف عبارت مورد نظر است.

حالت ممکن دیگر این است که عبارتی که قصد تعریف آن را داریم، به عنوان مقدار صفت title عنصر dfn آورده شود و فرم دیگری از این عبارت (مثل مخفف آن) درون عنصر dfn قرار گیرد. این کار در مثال زیر انجام شده است.

HTML

<p><dfn title="Hyper Text Markup Language">HTML</dfn>is the
  standard markup language for creating webpages.</p>

وقتی عبارت متنیِ درون عنصر dfn یک عبارت اختصاری یا مخفف باشد، بهتر است از یک عنصر abbr مانند مثال زیر استفاده کنیم.

HTML

<p><dfn><abbr title="Hyper Text Markup Language">HTML</abbr></dfn>
  is the standard markup language for crating webpages.
</p>

و بالاخره اینکه اگر از یک صفت id برای عنصر dfn استفاده کرده و مقداری را به آن اختصاص دهیم، می‌توانیم از هر جای سند به این عنصر dfn لینک دهیم.

HTML

<p>
  The <dfn id="gdo"><abbr title="Garage Door Opener">GDO</abbr></dfn>
  is a device that allows off-world teams to open the iris.
</p>
<p>
  Teal'c activated his <a href="#gdo"><abbr title="Garage Door Opener">GDO</abbr></a>
  and so Hammond ordered the iris to be opened.
</p>

عنصر a که در درس بعدی بررسی خواهد شد، برای ایجاد لینک در اسناد وب کاربرد دارد.

نمایش حاشیه‌نویسی روبی

توضیحات یا حاشیه‌نویسی‌های روبی (ruby annotations) قطعات کوتاه متنی هستند که بالا، پایین یا کنار متن اصلی نمایش داده می‌شوند و با ارائه‌ی توضیحاتی در مورد متن اصلی، به درک آن کمک می‌کنند. در HTML برای افزودن یک حاشیه‌‌نویسی روبی به متن از عنصری به نام ruby استفاده می‌شود. معمول‌ترین کاربرد این عنصر در نمایش تلفظ کاراکترهای آسیای شرقی است اما به طور کلی، این عنصر می‌تواند برای حاشیه‌نویسی برای هر نوع متنی استفاده شود.

روش استفاده از این عنصر به این شکل است که متنی که بنا داریم توضیح حاشیه‌ای در مورد آن ارائه دهیم، درون عنصر ruby قرار می‌گیرد و توضیحات مورد نظر درون عنصر rt نوشته می‌شود. برای نمونه، در کد زیر برای عبارت اختصاری HTML چهار توضیح حاشیه‌ای در نظر گرفته شده که یکی از آنها برای ارائه‌ی توضیحی در مورد کل این عبارت اختصاری و سه مورد نیز به ترتیب برای هر یک از حروف HT و M و L تدارک دیده شده است.

HTML

<ruby>
  <ruby>HT<rt>HyperText</rt>M<rt>Markup</rt>L<rt>Language</rt></ruby>
  <rt>An abstract language for describing documents and applications.</rt>
</ruby>

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

HTML

<ruby>Base text<rp>(</rp><rt>Annotation</rt><rp>)</rp></ruby>

در اینجا قرار دادن پرانتزهای باز و بسته درون عناصر rp باعث می‌شود که اگر مرورگری از عنصر ruby پشتیبانی نکند، عبارت متنی موجود را به صورت Base text (Annotation) نمایش دهد و مرورگرهایی که از ruby پشتیبانی می‌کنند، عناصر rupy و محتوای آنها (یعنی پرانتز باز و بسته) را نادیده می‌گیرند.

اما اجازه دهید یک نوع دیگر از حاشیه‌نویسی‌های ممکن با استفاده از عنصر ruby را معرفی کنیم. در مثال زیر نام چهار سمبل موجود در یک دسته ورق را به عنوان توضیح حاشیه‌ای برای هر یک از سمبل‌ها ارائه داده‌ایم.

HTML

<p>
  The four simple in th pocker deck are 
  <ruby>♥<rp>(</rp><rt>heart</rt><rp>)</rp></ruby>
  <ruby>♠<rp>(</rp><rt>spade</rt><rp>)</rp></ruby>
  <ruby>♣<rp>(</rp><rt>club</rt><rp>)</rp></ruby>
  <ruby>♦<rp>(</rp><rt>diamond</rt><rp>)</rp></ruby>
</p>

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

ارائه‌ی یک ورژن معادل برای محتوای مرد نظر

گاهی اوقات می‌توانیم با ارائه‌ی یک ورژن معادل برای یک محتوای مفروض به شکلی که اصطلاحاً machine-readable باشد، امکان تعامل با محتوا را برای اسکریپت‌ها تسهیل کنیم. عنصر data به همین منظور در HTML تعریف شده است. در حقیقت، با استفاده از این عنصر، می‌توانیم یک ورژن ماشین‌پسند (machine-friendly) از محتوای یک عنصر را در قالب صفت value به آن عنصر مرتبط کنیم. استفاده از صفت value برای عنصر data اجباری است. در ضمن، محتوای ماشین‌پسند محتوایی است که مخاطب آن کاربران نیستند، بلکه کدها و مفسرها و اسکریپت‌ها می‌توانند از آن استفاده کنند. مثال زیر را ببینید.

HTML

<h2>Details</h2>
<p>
  Product: <data value="21354860684">FULL HD LED TV</data><br>
  Price: <data value="554">$554.00</data><br>
  Warranty: <data value="24">2 Years</data>
</p>

در این مثال، محتوای عناصر data برای کاربران نمایش داده می‌شود و مقادیر معادلی که به صفت value هر یک از این عناصر تخصیص داده شده، از طریق اسکریپت‌ها یا کدهای سمت سرور قابل دسترسی است و می‌توان از آنها برای اهداف مختلفی استفاده کرد.

دقت داشته باشید که با وجودی که در مورد محتوای قابل استفاده در عنصر data محدودیتی وجود ندارد اما اگر محتوای مورد نظر از نوع مقادیر زمان و تاریخ باشد، بهتر است به جای data از عنصر time استفاده کنیم که عملکرد مشابهی با data دارد منتها با این تفاوت که تنها برای مقادیر از این نوع قابل استفاده است.

نمایش مقادیر زمانی

برای نمایش مقادیری که نشان‌دهنده‌ی یک زمان مشخص یا یک بازه‌ی زمانی هستند، از عنصری به نام time استفاده می‌کنیم. این عنصر دارای صفتی به نام datetime است که می‌توانیم یک ورژن ماشین‌پسند از مقدار زمانی مورد نظر را به آن اختصاص دهیم. موتورهای جستجو نیز از این صفت و مقدار آن برای نمایش بهتر نتایج جستجو بهره می‌برند. البته به‌کارگیری این صفت اجباری نیست و چنانچه از آن برای یک صفت time استفاده نکنیم، آن عنصر نباید دارای هیچ عنصر فرزندی باشد. مقادیری که می‌توان به عنصر datetime اختصاص داد، شامل موارد زیر هستند:

• یک زمان از 24 ساعت شبانه‌روز
• یک تاریخ دقیق بر اساس تقویم میلادی (به همراه اطلاعات اختیاری مربوط به منطقه‌ی زمانی یا time zone)
• یک بازه‌ی زمانی معتبر

در کد زیر می‌توانید مثالی از هر یک از این سه آیتم را ببینید.

HTML

<p>
  The Cure will be celebrating their 40th anniversary
  on <time datetime="2023-07-07">July 7</time>in London's Hyde Park
</p>
<p>
  Th concert starts at <time datetime="20:00">20:00</time>and 
  you'll be able to enjoy the band for at least <time datetime="PT2H30M">2h 30m</time>
</p>

نمایش کدهای کامپیوتری

برای نمایش متون قابل درک توسط کامپیوتر مانند نام یک فایل، نام یک عنصر XML و یا کدها از عنصری به نام code استفاده می‌شود. اکثر مرورگرها محتوای این عنصر را با استفاده از یک فونت monospaced نمایش می‌دهند. مثال زیر را ببینید.

HTML

<p>
  The <code>code</code>element represents computer codes
</p>
<p>
  When you call the <code>activate()</code>method on the 
  <code>robotSnowman</code> object, the eyes glow.
</p>

اگر بخواهیم بیش از یک خط کد را نمایش دهیم، بهتر است از عنصر code به همراه یک عنصر pre استفاده کنیم تا تورفتگی‌ها و شکست خط‌هایی که در کدها به کار رفته نیز حفظ شود و کدها به درستی نمایش داده شوند. این کار در مثال زیر انجام شده است.

HTML

<pre><code class="language-pascal">var i:integer;
begin
  i:=1;
end</code></pre>

روش استانداردی برای تعیین زبان کدهای درون عنصر code وجود ندارد اما می‌توانیم با استفاده از صفت class به روشی که در مثال بالا دیده می‌شود، زبان کدها را اعلام کنیم.

نمایش متغیرها

برای نمایش نام یک متغیر از عنصر var استفاده می‌شود. متغیر مورد نظر می‌تواند متغیری باشد که در یک عبارت ریاضی ظاهر شده و یا یک متغیر برنامه‌نویسی باشد و یا یک نماد نشان‌دهنده‌ی یک ثابت یا یک کمیت فیزیکی باشد. مثال زیر را ببینید.

HTML

<p>
  The volume of a box is <var>l</var> × <var>w</var> × <var>h</var>
  where <var>l</var> represents the length, <var>w</var> is the width and <var>h</var> is the height of the box.
</p>

در مورد عبارات و معادلات ریاضی پیچیده‌تر، استفاده از MathML توصیه می‌شود. MathML اختصاری است برای Mathematics Markup Language و ماهیتاً یک زبان نشانه‌گذاری مبتنی بر XML است که برای ایجاد عبارات و معادلات ریاضی در وب کاربرد دارد. البته در صورت استفاده از MathML نیز همچنان برای ارجاع به متغیرهای مورد استفاده در آن از عنصر var استفاده می‌کنیم.

نمایش خروجی یک برنامه

برای نمایش متنی که خروجی یک برنامه‌ی کامپیوتری محسوب می‌شود، از عنصری با نام samp استفاده می‌شود. محتوای این عنصر توسط اکثر مرورگرها با یک فونت monospaced نمایش داده می‌شود و البته که این استایل پیش‌فرض را می‌توان با استفاده از CSS تغییر داد.

HTML

<p>I was trying to boot my computer, but I got this hilarious message:</p>
<p><samp>Keyboard not found.</samp>press F1 to continue</p>

یک مثال دیگر نیز در قالب کد زیر ارائه شده که استفاده‌ی همزمان از عناصر code و samp را درون یک عنصر pre نشان می‌دهد.

HTML

<pre>
  <code class="language-javascript">console.log(2 + 3)</code>
  <samp>5</samp>
</pre>

نمایش ورودی کاربر

برای نمایش متن وارد شده توسط کاربر با استفاده از صفحه‌کلید، فرمان‌های صوتی (voice commands) و هر ورودی دیگر از عنصری با نام kbd استفاده می‌شود. اکثر مرورگرها محتوای این عنصر را با استفاده از یک فونت monospaced نمایش می‌دهند.

HTML

<p>
  Press <kbd>Ctrl</kbd> + <kbd>X</kbd> to exit from nano editor.
</p>

در مثال بعدی، به خاطر رخ دادن یک خطای گرامری فرضی، دستور ابتدایی که توسط کاربر وارد شده، توسط سیستم برای وی نمایش داده می‌شود. در چنین سناریوهایی باید از عنصر kbd درون یک عنصر samp استفاده کنیم.

HTML

<p>
  If a syntax error occurs, the tool will output the initial
  command you typed for your review:
</p>
<blockquote>
<samp><kbd>custom-git ad my-new-file.cpp</kbd></samp>
</blockquote>

همچنین، برای نمایش یک ورودی مبتنی بر متنی که توسط سیستم نمایش داده می‌شود (مثل نام منوها و آیتم‌های منوها یا نام دکمه‌هایی که در صفحه نمایش داده می‌شود) باید عنصر samp را درون kbd قرار دهیم. برای مثال، فرض کنید بخواهیم شرح دهیم که چطور از منوی File گزینه‌ی New Document را انتخاب می‌کنیم. این کار را می‌توانیم به طریق زیر انجام دهیم.

HTML

<p>
  To create the new file, choose the menu option 
  <kbd><samp>File</samp></kbd> ⇒ <kbd><samp>New Document</samp></kbd> 
</p>

<p>
  Don't forget to click the <kbd><samp>Ok</samp></kbd> button 
  to confirm once you've entered the name of the new file. 
</p>

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

HTML

<p>
  You can also create a new document using the keyboard shortcut 
  <kbd><kbd>Ctrl</kbd>+<kbd>N</kbd></kbd>
</p>

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

در HTML برای نمایش متن به صورت بالانویس (superscript) از عنصری با نام sup استفاده می‌شود. به عنوان مثال، برای نمایش توان‌ها در ریاضیات می‌توانیم از این عنصر استفاده کنیم. در کد زیر از این عنصر برای نمایش معادله‌ی یک دایره به شعاع r و مرکز مبدأ استفاده شده است.

HTML

<p>
  The cirvle equation form is: x<sup>2</sup> + y<sup>2</sup> = r<sup>2</sup>
</p>

در مورد عنصر sup باید توجه داشته باشید که برای اهداف ظاهری صِرف، نباید از این عنصر استفاده کرد. برای مثال، برای نمایش یک logotype باید به جای sup از پراپرتی‌های CSS استفاده شود. یک logotype لوگو یا نام برندی است که با استفاده از کاراکترهای متنی ایجاد شده است. کوکاکولا، CNN و IBM و FedEx نمونه‌هایی از کمپانی‌هایی هستند که لوگوی آنها از نوع logotype است.

نمایش متن به صورت زیرنویس

در HTML برای نمایش متن به صورت زیرنویس (subscript) از عنصری به نام sub استقاده می‌شود. بیشترین استفاده از این عنصر برای نمایش اندیس در معادلات ریاضی و شیمیایی است. در مثال زیر از عنصر sub برای نمایش نماد شیمیایی یک مولکول استفاده شده است.

HTML

<p>
  Almost every developer's favorite molecule is 
  C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>
</p>

در مورد عنصر sub نیز همانند sup باید توجه شود که از این عنصر تنها برای تغییر موقعیت کاراکترهای متنی به منظور مطابقت با استانداردهای تایپوگرافیک استفاده می‌شود و اگر تنها قصد ما تغییر ظاهر متن باشد، باید از CSS استفاده کنیم.

نمایش متن به‌صورت برجسته‌شده

در HTML برای ارائه‌ی متنی که با هدف ارجاع یا جلب توجه، برجسته (highlight) شده، از عنصری به نام mark استفاده می‌شود. در کد زیر از این عنصر برای نمایش نتایج جستجوی یک عبارت در سند استفاده شده است.

HTML

<p>Search results for 'salamander':</p>
<p>
  several species of <mark>salamander</mark> inhabit the temprate 
  rainforest of the Pacific Northwest.
</p>
<p>
  Most <mark>salamander</mark>s are nocturnal, and hunt for 
  insects, worms and other small creatures.
</p>

مثال بالا کارکرد اصلی عنصر mark را نشان می‌دهد: برجسته‌سازی بخشی از متن که به فعالیت جاری (current activity) کاربر مربوط می‌شود. اما وقتی از عنصر mark درون یک عنصر نقل‌قول مثل q یا blockquote استفاده شود، مشخص‌کننده‌ی متنی است که در منبع اصلی برجسته نشده اما نیاز به توجه خاص دارد. به عبارت دیگر، گوینده‌ی اصلی عبارت متنی مورد نظر اهمیت خاصی برای آن عبارت متصور نبوده اما ما به هر دلیلی قصد داریم آن را برجسته کرده و مورد توجه قرار دهیم. برای درک این سناریو، تصور کنید در حال مطالعه‌ی یک کتاب هستید و یک ماژیک هایلایتر در دست گرفته‌اید و بخش‌هایی از کتاب را که برایتان جالب است، هایلایت می‌کنید. انگیزه‌ی شما از این کار به فعالیت جاری شما یا همان current activity بستگی دارد. برای مثال، اگر کتاب مورد نظر درسی است، انگیزه‌ی شما از هایلایت کردن برخی بخش‌هایی از کتاب، می‌تواند ارتباط آن بخش‌ها با امتحان باشد. به مثال زیر دقت کنید.

HTML

<p lang="en-US">Consider the following quote: </p>
<blockquote lang="en-GB">
  <p>
    Look around and you will find, no-one's really 
    <mark>colour</mark> blind.
  </p>
</blockquote>
<p lang="en-US">
  As we can tell from the <em>spelling</em> of the world,
  the person writing this quote is clearly not American.
</p>

در این مثال، عبارتی از یک منبع دیگر نقل شده و کلمه‌ی colour برجسته شده است. در واقع، گوینده‌ی این جمله در منبع اصلی دلیلی برای برجسته کردن این کلمه نداشته ولی ما این کلمه را به این دلیل برجسته کرده‌ایم که با جلب توجه کاربر به املای این کلمه به او نشان دهیم که گوینده‌ی این جمله یک فرد آمریکایی نیست (واژه‌ی color در انگلیسی آمریکایی و colour در انگلیسی بریتانیایی مصطلح هستند).

گروه‌بندی محتوای Inline

عنصر span حکم یک ظرف یا کانتینر برای محتوای درون‌خطی (inline) مانند بخشی از یک متن را دارد. در واقع، این عنصر کارکردی مشابه با عنصر div دارد، با این تفاوت که div یک عنصر block-level است که یک بلاک شامل محتوای گروه‌بندی‌شده ایجاد می‌کند اما span یک عنصر از نوع inline است که می‌تواند حاوی بخشی از یک محتوای متنی باشد.

معمول‌ترین کاربرد عنصر span، گروه‌بندی محتوا با هدف استایل‌دهی و یا با هدف تخصیص یک مقدار مشترک به صفت‌هایی مانند dir و lang است. به عنوان مثال، در کد زیر که حاوی بخشی از یک دستورالعمل آشپزی است، ترکیبات یا مواد اولیه‌ی مورد استفاده در این دستورالعمل درون عنصر span قرار داده شده و مقدار یکسان ingredient به صفت class این عناصر اختصاص داده شده است. حالا می‌توان با استفاده از یک استایل CSS ترتیبی داد تا محتوای این عناصر با ظاهر متفاوتی نسبت به متن اصلی (مثلاً به صورت bold یا با رنگی دیگر) نمایش داده شوند.

HTML

<p>
  Add the <span class="ingredient">basil</span>,
  <span class="ingredient">pine nuts</span> and 
  <span class="ingredient">garlic</span> to a 
  blender and blend into a paste.
</p>
<p>
  Gradually add the <span class="ingredient">olive oil</span> 
  while running the blender slowly.
</p>

و یا در مثال زیر از یک عنصر span برای تعیین زبان گروهی از کلمات استفاده شده است.

HTML

<p>
  The best football stars in Iranian football history are: 
  <span lang="fa">پرویز قلیچ‌خانی - علی پروین - علی دایی - علی کریمی</span>
</p>
<p lang="fa" dir="rtl">
  البته که ده‌ها نمونه‌ی دیگر شبیه این ستاره‌ها
  در تاریخ فوتبال ما وجود داشته که متأسفانه هیچ‌یک
  از آنها به حق واقعی خود نرسید.
  برای نمونه، علی کریمی فوتبالیستی بود که به کمتر از ده‌درصد
  موفقیت‌هایی که پتانسیل کسب آنها را داشت، رسید.
  این که استحقاق توپ طلای دنیا را داشته باشی اما
  به ورژن آسیایی آن اکتفا کنی، نه فقط برای خودت
  که برای همه‌ی هم‌وطنانت طعم یک حسرت بزرگ را دارد.
</p>

یک سوال بی‌ربط به بحث جاری: آیا لزومی داشت برای پاراگراف دوم مثال بالا از صفت dir با مقدار rtl استفاده کنیم؟

پاسخ: بله. ظاهراً بدون نیاز به این صفت نیز محتوای پاراگراف به درستی نمایش داده می‌شود چون کاراکترهای فارسی دارای جهت‌گیری پیش‌فرض rtl هستند. اما اگر خوب دقت کنید، متوجه یک مشکل کوچک می‌شوید که به کاراکتر نقطه (dot) مربوط می‌شود که در پایان متن پاراگراف قرار داده شده است. این کاراکتر جهت‌گیری مبنای ltr را دارد و لذا در جای مناسب خود نمایش داده نمی‌شود. البته دو کاراکتر نقطه‌ی دیگر و سه کاراکتر کاما نیز در این متن وجود دارند که حنثی هستند اما چون طرفین آنها کاراکترهای هم‌جهت قرار دارد، آنها نیز همان چهت یعنی rtl را دریافت می‌کنند و به درستی نمایش داده می‌شوند. خلاصه اینکه مقدار rtl برای صفت dir در این پاراگراف تنها کارکردش اعطای جهت‌گیری rtl به کاراکتر نقطه‌ی پایانی است.

ایجاد شکست خط در متن

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

به عنوان مثال، در کد زیر که حاوی بخشی از شعر “برای خون و ماتیک” از زنده‌یاد احمد شاملو است، از شکست‌خط‌ها به نحوی استفاده شده که مفهوم اصلی شعر حفظ شود.

HTML

<p dir="rtl">
  بگذار عشق این سان <br>
  مرداروار در دل تابوت شعر تو <br>
  تقلیدکار دلقک قاآنی <br>
  گندد هنوز و <br>
  باز <br>
  خود را <br>
  تو لاف‌زن <br>
  بی‌شرم‌تر خدای همه شاعران بدان
</p>

بدیهی است که عناصری مانند br که فاقد محتوا هستند، تهی (empty) هستند و لذا br نیازی به تگ بسته ندارد.