ایجاد متون متمایز

مقدمه

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

تأکید روی متن با عنصر em

هنگام صحبت کردن در مورد یک موضوع مشخص، اگر بخواهیم روی قسمتی از سخن خود تأکید کنیم، آن قسمت را با لحن متفاوتی بیان می‌کنیم و اصطلاحاً از فشار (stress) برای بیان آن قسمت از سخن خود استفاده می‌کنیم. در نوشتار نیز برای تأکید روی متن، معمولاً آن را به صورت مورب یا به هر شکلی متفاوت با متن اصلی می‌نویسند. تأکید روی بخشی از متن، می‌تواند باعث تغییر معنای جمله شود. برای مثال، به جمله‌ی زیر دقت کنید:

گربه‌ها حیوانات بامزه‌ای هستند.

در غیاب تأکید، این یک جمله‌ی عمومی با معنای مشخص است. اما استفاده از فشار یا stress برای بخش‌های مختلف این جمله معنای آن را تغییر می‌دهد و برداشت متفاوتی برای ما به همراه دارد:

• تأکید روی کلمه‌ی “گربه‌ها” این مفهوم را می‌رساند که بحث بر سر نوع حیوانی است که بامزه محسوب می‌شود. به عبارت دیگر، گوینده‌ی این جمله معتقد است که گربه‌ها بامزه هستند و نه (مثلاً)‌ سگ‌ها.
• تأکید روی فعل این جمله این مفهوم را القا می‌کند که بحث بر روی بامزه بودن یا نبودن گربه‌هاست و اینکه گوینده موافق بامزه بودن گربه‌هاست.
• تأکید روی “بامزه” به این معناست که بحث در مورد صفت‌های گربه‌هاست و ممکن است کسی معتقد باشد که گربه‌ها بیشتر باهوش هستند تا بامزه.

در اسناد وب نیز باید روشی برای بیان بخشی از متن به صورت تأکیدی وجود داشته باشد و عنصر em دقیقاً همین نقش را دارد. مرورگرها محتوای این عنصر را به صورت ایتالیک نمایش می‌دهند و صفحه‌خوان‌ها متن درون این عنصر را با لحن تأکیدی می‌خوانند. اما دقت داشته باشید که به هیچ‌وجه نباید از عنصر em صرفاً‌ برای نمایش متن به صورت ایتالیک استفاده کنید. در حقیقت، عنصر em یک عنصر معنایی است که برای تأکید روی متن کاربرد دارد و اگر صرفاً قصد نمایش متن به صورت ایتالیک را دارید و قصد تأکید روی متن را ندارید، باید از CSS استفاده کنید نه از عنصر em.

HTML

<p>
  In HTML 5, what was previously called
  <em>block-level</em> content is now called 
  <em>flow</em> content.
</p>

القای ضرورت یا اهمیت متن با عنصر strong

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

HTML

<p>
  ... the most important rule, the rule you can never forget,
  no matter how much he cries, no matter how much he begs:
  <strong>never feed him after midnight</strong>
</p>

به طور کلی، متن را به یکی از سه دلیل زیر می‌توان به عنوان محتوای strong درون این عنصر قرار داد:

• importance: متن مورد نظر از اهمیت بالاتری نسبت به سایر قسمت‌های متن برخوردار است. به عنوان مثال، در یک عنوان، کپشن یا پاراگراف می‌توانیم با استفاده از عنصر strong بین بخش مهم‌تر و بخشی که دارای جزئیات بیشتر است، تمایز ایجاد کنیم.
• seriousness: متن مورد نظر جدی‌تر از سایر قسمت‌های متن است. به عنوان مثال، هشدارها نسبت به متون عادی جدی‌تر محسوب می‌شوند.
• urgency: متن مورد نظر از ضرورت بالاتری نسبت به سایر قسمت‌های متن برخوردار است و باید زودتر دیده شود.

اجازه دهید برای اینکه منظور ما را از واژه‌های مهم‌تر، جدی‌تر و ضروری‌تر به خوبی درک کنید، مثالی از هر یک ارائه دهیم. ابتدا به کد زیر نگاه کنید و ببینید چطور عامل مهم‌تر بودن (importance) باعث شده از عنصر strong برای متمایز کردن بخش‌های مهم‌تر یک عنوان (در قالب عنصر h1) و یک پاراگراف استفاده کنیم.

HTML

<h1>Chapter 1: <strong>The Praxis</strong></h1>
<p>
  The most important thing to remember is, <strong>stay positive</strong>
  Apart from that you can do anything you like.
</p>

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

HTML

<p>
  <strong>Warning</strong>: >: Investing in our company could seriously affect your wealth!
</p>

و سرانجام، در مثال پایانی می‌توانید ببینید که چطور عامل ضرورت (urgency) باعث شده متنی را که باید زودتر دیده شود، درون عنصر strong قرار دهیم.

HTML

<h4>Things to remember</h4>
<ul>
  <li><strong>Call Mum</strong></li>
  <li>Check mail</li>
  <li>Get groceries</li>
</ul>

جلب توجه کاربران به متن با عنصر b

اگر بخواهیم توجه کاربران را به بخشی از متن جلب کنیم اما در عین حال، متن مورد نظر واجد شرایط قرار گرفتن درون عنصر strong نباشد (یعنی اهمیت بالاتری نسبت به سایر بخش‌های متن نداشته باشد) باید متن مورد نظر را درون عنصری به نام b قرار دهیم. توجه داشته باشید که مرورگرها محتوای این عنصر را به صورت bold نمایش می‌دهند اما کارکرد این عنصر، همانطور که گفته شد، جلب توجه کاربر است. باز هم تأکید می‌کنم که چنانچه صرفاً به دنبال نمایش متن به صورت bold هستید و هیچ دلیلی برای استفاده از عناصر strong و b ندارید، باید از CSS استفاده کنید.

HTML

<article>
  <p>
    The two most popular science courses offered by the 
    school are <b>chemistry</b> (the study of chemicals and the composition of substances)
    and <b>physics</b> (the study of the nature and properties of matter and energy).
  </p>
  <p>
    <b>Advances in physics often enable advances in new technologies.</b>
    For example, advances in the understanding of
    electromagnetism, solid-state physics, and nuclear physics
    led directly to the development of new products that have
    dramatically transformed modern-day society, such as television,
    computers, domestic appliances, and nuclear weapon
  </p>
</article>

کد بالا دو نمونه از مهمترین کاربردهای عنصر b را نشان می‌دهد. در این مثال، توضیح مختصری راجع به علوم مدرسه‌ای فیزیک و شیمی داده شده و هر یک از کلمات فیزیک (physics) و شیمی (chemistry) درون عنصر b قرار گرفته‌اند. به طور کلی، نمایش کلمات کلیدی یکی از کاربردهای عنصر b است. علاوه بر این، اولین جمله از پاراگراف دوم نیز درون عنصر b قرار دارد و این یکی دیگر از موارد کاربرد این عنصر است.

در مثال بالا، برای هر عنصر b از یک صفت عمومی class استفاده شده و مقداری بر اساس عملکرد معنایی عنصر b به آن صفت داده شده است. این کار ضمن اینکه هدف استفاده از هر عنصر b را نشان می‌دهد، برای اهداف مربوط به استایل دهی نیز مفید است. برای نمونه، اگر تصمیم بگیرید تغییری در ظاهر کلمات کلیدی صفحه به وجود آورید، با استفاده از یک انتخابگر کلاس در CSS می‌توانید این کار را به سادگی انجام دهید.

ایجاد متن متفاوت با عنصر i

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

HTML

<p>
  I looked at it and thought <i>this can't be real</i>
</p>
<p>
  <i class="latin">Musa</i> is one of two or three genera 
  in the family <i class="latin">Musaceae</i>. it 
  includes bananas and plantains.
</p>
<p>
  The term <i>bandwidth</i> desribes the measure of how 
  much information can pass through a data connection
  in a given amount of time.
</p>

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

درک تفاوت بین عناصر em و strong با عناصر i و b نیازمند کمی دقت است. عناصر i و em از نظر ظاهری هر دو باعث نمایش متن به صورت ایتالیک می‌شوند اما از نظر معنایی با هم تفاوت دارند. عنصر em برای تأکید روی متن و عنصر i برای بیان تمایز متن کاربرد دارند. مثلاً برای بیان اصطلاحات فنی، اصطلاحات به زبان‌های دیگر و بیان افکار و نظایر اینها باید از عنصر i استفاده کرد. در مورد عناصر b و strong نیز باید دقت داشت که اولی برای جلب توجه کاربر به قسمتی از متن و دومی برای بیان اهمیت قسمتی از متن کاربرد دارند.

ایجاد متن حاشیه‌ای با عنصر u

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

HTML

<p>
  You could use this element to 
  highlight <u>speling</u> mistakes. 
  so the writer can <u>corect</u> them.
</p>