قالب بندی معنایی متن | درس 7 - طراحی سایت در ارومیه

قالب بندی معنایی متن در HTML در دوره ارومیا دیزاین

درس 7 از دوره 60 قسمتی آموزش HTML و CSS ارومیا دیزاین

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

در این درس با عناصر strong، em، mark، small، del و ins کار می کنیم و تفاوت معنی آن ها را یاد می گیریم. اگر هنوز ساختار عنوان و پاراگراف را تمرین نکرده اید، ابتدا درس 6: عنوان ها و پاراگراف ها در HTML را مرور کنید.

در پایان این درس چه چیزی یاد می گیرید؟

تفاوت ظاهر متن و معنی متن را تشخیص می دهید.
برای بخش مهم از strong استفاده می کنید.
تاکید معنایی را با em مشخص می کنید.
متن علامت گذاری شده را با mark می سازید.
متن فرعی و توضیح تکمیلی را با small مشخص می کنید.
متن حذف شده و اضافه شده را با del و ins نمایش می دهید.
از عناصر معنایی فقط برای ظاهر استفاده نمی کنید.

قالب بندی معنایی متن یعنی چه؟

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

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

نمونه تگ های معنایی متن در html — در قالب بندی معنایی، انتخاب عنصر بر اساس نقش و معنی متن انجام می شود.

عنصر strong برای متن مهم

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

<p>
  قبل از حذف فایل ها، <strong>حتما نسخه پشتیبان بگیرید</strong>.
</p>

در این مثال جمله داخل strong فقط برای زیبایی ضخیم نشده؛ این بخش واقعا مهم است و کاربر باید به آن توجه بیشتری داشته باشد.

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

عنصر em برای تاکید روی بخشی از جمله استفاده می شود. مرورگرها معمولا آن را ایتالیک نمایش می دهند، اما باز هم ظاهر هدف اصلی نیست. تاکید می تواند معنی جمله را تغییر دهد.

<p>
  من گفتم <em>امروز</em> فایل را ارسال کنید.
</p>

تاکید روی «امروز» نشان می دهد زمان انجام کار مهم است. در پروژه های واقعی باید strong و em را با توجه به معنی جمله انتخاب کنید.

تفاوت strong و em چیست؟

strong برای اهمیت بیشتر محتوا است، در حالی که em روی تاکید در بیان جمله تمرکز دارد. ممکن است یک جمله هم بخش مهم داشته باشد و هم بخشی که نیاز به تاکید گفتاری دارد.

<p>
  <strong>هشدار:</strong>
  این تغییر را <em>قبل از انتشار</em> بررسی کنید.
</p>

عنصر mark برای علامت گذاری متن

عنصر mark بخشی از متن را به عنوان قسمت مرتبط یا مورد توجه علامت گذاری می کند. مرورگر معمولا پس زمینه آن را زرد نشان می دهد. نمونه رایج آن برجسته کردن عبارت جستجو شده در یک متن است.

<p>
  در این درس درباره <mark>قالب بندی معنایی</mark> در HTML صحبت می کنیم.
</p>

برای رنگی کردن تصادفی چند کلمه از mark استفاده نکنید. اگر فقط رنگ پس زمینه می خواهید، CSS انتخاب مناسب تری است.

عنصر small برای متن فرعی

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

<p>
  ثبت سفارش طراحی سایت
  <small>زمان نهایی اجرا پس از بررسی پروژه مشخص می شود.</small>
</p>

برای کوچک کردن هر متن دلخواه از small استفاده نکنید. اندازه ظاهری را بعدا با CSS کنترل می کنیم.

نمایش متن حذف شده با del

وقتی بخشی از محتوا قبلا وجود داشته و بعد حذف شده، می توانید از del استفاده کنید. مرورگر معمولا یک خط روی متن می کشد.

<p>
  قیمت قبلی:
  <del>1200000 تومان</del>
</p>

این عنصر برای نمایش تغییر واقعی محتوا مناسب است؛ نه برای اینکه صرفا یک خط تزئینی روی متن بکشید.

نمایش متن اضافه شده با ins

ins نشان می دهد بخشی از متن به محتوا اضافه شده است. مرورگرها معمولا آن را زیرخط دار نمایش می دهند.

<p>
  قیمت جدید:
  <ins>990000 تومان</ins>
</p>

del و ins در کنار هم می توانند تاریخچه یک تغییر را واضح تر نشان دهند.

نمونه کامل قابل کپی

کد زیر همه عناصر اصلی این درس را در یک صفحه واقعی کنار هم قرار می دهد. این نمونه قبل از انتشار از نظر ساختار عناصر HTML بررسی شده است.

<!doctype html>
<html lang="fa" dir="rtl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>نمونه قالب بندی معنایی متن</title>
</head>
<body>
  <main>
    <h1>اطلاعیه به روزرسانی خدمات</h1>

    <p>
      <strong>مهم:</strong>
      قبل از ثبت سفارش، شرایط پروژه را بررسی کنید.
    </p>

    <p>
      نسخه جدید صفحه <em>امروز</em> منتشر شده است.
    </p>

    <p>
      عبارت <mark>طراحی سایت</mark> موضوع اصلی این بخش است.
    </p>

    <p>
      قیمت قبلی: <del>1200000 تومان</del>
      قیمت جدید: <ins>990000 تومان</ins>
    </p>

    <p>
      <small>مبلغ نهایی پس از بررسی نیازهای پروژه مشخص می شود.</small>
    </p>
  </main>
</body>
</html>

نتیجه مورد انتظار نمونه

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

اشتباه های رایج

استفاده از strong فقط برای ضخیم کردن: اگر اهمیت معنایی وجود ندارد، ظاهر را با CSS تغییر دهید.
استفاده از em برای هر متن کج: em باید تاکید واقعی در جمله داشته باشد.
استفاده از mark برای رنگی کردن: mark باید دلیل معنایی داشته باشد.
استفاده از small برای کوچک کردن عنوان: small برای متن فرعی است.
استفاده از del برای خط تزئینی: del باید حذف شدن واقعی محتوا را نشان دهد.
استفاده از ins فقط برای زیرخط: ins برای محتوای اضافه شده است.
بستن اشتباه تگ ها: نام تگ باز و بسته باید یکسان باشد.

این عناصر چه ارتباطی با CSS دارند؟

HTML معنی را مشخص می کند و CSS ظاهر را. برای مثال می توانید در HTML از strong استفاده کنید و بعدا با CSS رنگ یا ضخامت آن را تغییر دهید. این همان تفکیک ساختار و ظاهر است که از درس 1: وب چگونه کار می کند؟ درباره آن صحبت کردیم.

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

تمرین درس 7

یک فایل HTML بسازید و یک اطلاعیه تخفیف بنویسید. در آن یک هشدار مهم با strong، یک تاکید با em، یک عبارت با mark، قیمت قبلی با del، قیمت جدید با ins و یک توضیح فرعی با small قرار دهید.

نمایش پاسخ تمرین

<p>
  <strong>تخفیف محدود:</strong>
  این پیشنهاد فقط <em>امروز</em> فعال است.
</p>

<p>
  محصول <mark>پلن حرفه ای</mark>
  از <del>1500000 تومان</del>
  به <ins>1100000 تومان</ins> تغییر کرده است.
</p>

<p>
  <small>شرایط استفاده قبل از ثبت سفارش بررسی شود.</small>
</p>

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

ارتباط این درس با پروژه نهایی

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

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