عنوان ها و پاراگراف ها در HTML | درس 6

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

بعد از شناخت تگ ها، عناصر و ویژگی های HTML، حالا می توانیم اولین محتوای متنی منظم را بسازیم. عنوان ها با تگ های h1 تا h6 ساختار صفحه را مشخص می کنند و عنصر p هر پاراگراف را از بخش های دیگر جدا نگه می دارد. استفاده درست از این عناصر فقط ظاهر صفحه را بهتر نمی کند؛ بلکه خوانایی، دسترس پذیری و درک ساختار محتوا را نیز افزایش می دهد.

در این درس یاد می گیرید چگونه یک H1 اصلی انتخاب کنید، زیرعنوان ها را بدون پرش سطح بچینید، متن را داخل پاراگراف های واقعی قرار دهید و از br و hr فقط در جای مناسب استفاده کنید. اگر هنوز تفاوت تگ، عنصر و ویژگی را تمرین نکرده اید، ابتدا درس 5: تگ ها و ویژگی ها در HTML را انجام دهید. زمان پیشنهادی این درس همراه پروژه و تمرین حدود 60 تا 75 دقیقه است.

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

• تفاوت سطح های h1 تا h6 را توضیح می دهید.
• برای یک صفحه، عنوان اصلی و زیرعنوان های منطقی می سازید.
• از پرش نادرست میان سطح عنوان ها جلوگیری می کنید.
• متن های مستقل را داخل عنصر p قرار می دهید.
• رفتار فاصله ها و خط های خالی در HTML را می شناسید.
• کاربرد درست br و hr را تشخیص می دهید.
• ساختار متنی یک صفحه معرفی خدمات را کامل می کنید.

عنوان های HTML چه هستند؟

HTML شش سطح عنوان از h1 تا h6 دارد. h1 بالاترین سطح و h6 پایین ترین سطح عنوان است. شماره کوچک تر به معنی اهمیت ساختاری بیشتر است، نه صرفا اندازه بزرگ تر متن.

<h1>راهنمای طراحی سایت شرکتی</h1>
<h2>مراحل طراحی سایت</h2>
<h3>تحلیل نیازهای کسب و کار</h3>
<h3>طراحی رابط کاربری</h3>
<h2>هزینه و زمان اجرا</h2>

در این نمونه، کل صفحه درباره طراحی سایت شرکتی است و H1 موضوع اصلی را بیان می کند. دو H2 بخش های اصلی صفحه هستند و H3ها زیرمجموعه بخش «مراحل طراحی سایت» محسوب می شوند.

تفاوت h1 تا h6 در ساختار صفحه

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

• h1: عنوان اصلی و موضوع کلی صفحه
• h2: بخش های اصلی زیر عنوان صفحه
• h3: زیرموضوع های هر H2
• h4: جزئیات زیر یک H3
• h5 و h6: سطح های عمیق تر که در بیشتر صفحه های معمولی کمتر استفاده می شوند

در راهنمای رسمی عناصر عنوان HTML در MDN نیز h1 بالاترین سطح و h6 پایین ترین سطح معرفی شده است. ابزارهای کمکی می توانند از این ساختار برای نمایش فهرست عنوان های صفحه استفاده کنند.

آیا هر صفحه باید فقط یک H1 داشته باشد؟

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

در نوشته های وردپرس، قالب معمولا عنوان نوشته را به عنوان H1 نمایش می دهد. به همین دلیل در بدنه همین درس H1 اضافی قرار نداده ایم. H1هایی که در کادرهای کد می بینید فقط نمونه فایل تمرینی هستند و در ساختار واقعی مقاله اجرا نمی شوند.

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

چرا نباید سطح عنوان ها را بی دلیل رد کنیم؟

پس از H1 معمولا باید H2 بیاید. اگر بخشی زیرمجموعه H2 است، برای آن H3 انتخاب می کنیم. رفتن مستقیم از H1 به H4 بدون داشتن H2 و H3، رابطه بخش ها را مبهم می کند.

نمونه نامناسب:

<h1>آموزش طراحی سایت</h1>
<h4>HTML چیست؟</h4>

نمونه منظم:

<h1>آموزش طراحی سایت</h1>
<h2>مبانی طراحی وب</h2>
<h3>HTML چیست؟</h3>

هنگام پایان یک زیرموضوع می توانید به سطح بالاتر برگردید. برای مثال بعد از چند H3 زیر یک H2، ساخت H2 بعدی کاملا درست است.

پاراگراف در HTML چیست؟

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

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

<p>
  CSS ظاهر، رنگ، فاصله و چیدمان صفحه را کنترل می کند.
</p>

برای ساخت فاصله میان متن ها چند بار Enter نزنید و مجموعه ای از brها نسازید. هر پاراگراف واقعی را با p مشخص کنید و فاصله ظاهری را بعدا با CSS تنظیم کنید.

مرورگر با فاصله ها و خط های خالی چه می کند؟

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

<p>
  این متن       چند فاصله
  و چند خط در فایل دارد.
</p>

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

تگ br چه کاربردی دارد؟

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

<p>
  ارومیه، خیابان نمونه<br>
  ساختمان آفتاب، طبقه 2<br>
  واحد طراحی وب
</p>

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

تگ hr چه معنایی دارد؟

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

<p>در بخش اول، اصول HTML را یاد گرفتیم.</p>

<hr>

<p>از این بخش وارد تمرین پروژه می شویم.</p>

اگر فقط به یک خط تزئینی نیاز دارید، بهتر است آن را با border در CSS بسازید. در محتوای مقالات این سایت نیز از جداکننده های بی دلیل استفاده نمی کنیم.

نمونه کامل ساختار عنوان و پاراگراف

کد زیر یک صفحه ساده معرفی خدمات را با ساختار درست عنوان ها و پاراگراف ها می سازد:

<!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>
      ما سایت های سریع و سازگار با موبایل طراحی می کنیم.
    </p>

    <h2>خدمات ما</h2>

    <h3>طراحی سایت شرکتی</h3>
    <p>
      یک سایت منظم برای معرفی شرکت، خدمات و راه های ارتباطی.
    </p>

    <h3>طراحی فروشگاه اینترنتی</h3>
    <p>
      فروشگاه آنلاین با دسته بندی محصول و مسیر خرید روشن.
    </p>

    <h2>شروع همکاری</h2>
    <p>
      ابتدا نیازهای پروژه را بررسی و سپس مسیر اجرا را مشخص می کنیم.
    </p>
  </main>
</body>
</html>

در این نمونه فقط یک H1 وجود دارد. هر خدمت با H3 زیر بخش H2 خدمات ما قرار گرفته و توضیح آن داخل یک پاراگراف مستقل نوشته شده است.

عنوان ها چه تاثیری بر خوانایی و دسترس پذیری دارند؟

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

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

ارتباط عنوان ها با سئو

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

برای نمونه، صفحه طراحی سایت در ارومیه باید یک موضوع اصلی روشن داشته باشد و بخش هایی مانند خدمات، امکانات، نمونه کار و روند سفارش را با H2 و H3 مرتب کند. در راهنمای جامع طراحی سایت در ارومیه می توانید نمونه کاربرد ساختار محتوایی در یک مقاله کامل را ببینید.

پروژه عملی درس 6: صفحه خدمات استودیو

1. پوشه lesson-05 را کپی کنید و نام نسخه جدید را lesson-06 بگذارید.
2. ساختار کامل سند HTML را حفظ کنید.
3. یک H1 برای موضوع اصلی صفحه بنویسید.
4. دو بخش اصلی با H2 ایجاد کنید.
5. زیر یکی از H2ها دو خدمت با H3 بسازید.
6. زیر هر عنوان، یک پاراگراف واقعی بنویسید.
7. در بخش تماس، آدرس چند خطی را با br نمایش دهید.
8. فایل را ذخیره و ترتیب عنوان ها را در Inspect بررسی کنید.

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

اشتباه های رایج عنوان ها و پاراگراف ها

• چند H1 بدون دلیل ساخته شده است: برای پروژه این دوره یک H1 اصلی نگه دارید.
• سطح عنوان ها فقط بر اساس اندازه انتخاب شده است: ابتدا رابطه موضوعی را مشخص کنید.
• از H1 مستقیم به H4 رفته اید: سطح های میانی لازم را ایجاد کنید.
• پاراگراف ها با br از هم جدا شده اند: برای هر ایده مستقل یک p بسازید.
• برای فاصله، Enterهای متعدد نوشته شده است: فاصله بصری را با CSS کنترل کنید.
• متن طولانی در یک پاراگراف مانده است: آن را بر اساس تغییر ایده تقسیم کنید.
• از hr فقط برای تزئین استفاده شده است: برای خط تزئینی از CSS کمک بگیرید.
• تگ پایانی عنوان یا پاراگراف فراموش شده است: نام تگ آغازین و پایانی را مقایسه کنید.
• عنوان مبهم است: عنوان باید موضوع بخش بعدی را قابل پیش بینی کند.

تمرین درس 6: ساختار مقاله کوتاه

یک مقاله کوتاه با موضوع «چرا کسب و کار به وب سایت نیاز دارد؟» بسازید. یک H1، دو H2، حداقل یک H3 و چهار پاراگراف داشته باشد. سطح ها را رد نکنید و برای فاصله میان پاراگراف ها از br استفاده نکنید. ابتدا بدون دیدن پاسخ تمرین کنید.

<article>
  <h1>چرا کسب و کار به وب سایت نیاز دارد؟</h1>
  <p>
    وب سایت یک پایگاه رسمی برای معرفی خدمات و ارتباط با مشتری است.
  </p>

  <h2>اعتماد و دسترسی بهتر</h2>
  <p>
    مشتری می تواند اطلاعات اصلی کسب و کار را در هر ساعت بررسی کند.
  </p>

  <h3>نمایش اطلاعات تماس</h3>
  <p>
    نشانی، تلفن و روش های ارتباطی باید روشن و به روز باشند.
  </p>

  <h2>آمادگی برای بازاریابی آنلاین</h2>
  <p>
    سایت بستری برای تولید محتوا، تبلیغات و جذب مخاطب هدف فراهم می کند.
  </p>
</article>

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

پروژه نهایی دوره یک سایت شرکتی چند صفحه ای است. صفحه اصلی، خدمات، درباره ما و تماس هر کدام به عنوان اصلی، بخش های مشخص و پاراگراف های کوتاه نیاز دارند. ساختار درست اکنون باعث می شود هنگام اضافه کردن CSS، JavaScript و PHP مجبور به بازسازی محتوای پایه نباشید.

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

پرسش های متداول عنوان و پاراگراف در HTML

آیا h1 فقط برای بزرگ کردن متن است؟

خیر. h1 عنوان اصلی و بالاترین سطح ساختاری صفحه است. اندازه آن را می توان با CSS تغییر داد.

آیا می توانیم چند H2 در صفحه داشته باشیم؟

بله. هر بخش اصلی زیر H1 می تواند یک H2 داشته باشد. تعداد آن به ساختار واقعی محتوا بستگی دارد.

بعد از H2 حتما باید H3 بنویسیم؟

خیر. فقط زمانی H3 می نویسیم که بخش H2 به زیرموضوع نیاز داشته باشد. می توانید پس از متن یک H2، مستقیما H2 بعدی را شروع کنید.

آیا برای هر جمله باید p جدا بسازیم؟

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

چرا Enter در کد، خط جدید در مرورگر نمی سازد؟

مرورگر فاصله ها و خط های خالی معمولی را فشرده می کند. برای پاراگراف مستقل از p و برای شکست خط معنایی داخل همان پاراگراف از br استفاده کنید.

تفاوت hr با border چیست؟

hr جدایی معنایی یا تغییر موضوع را نشان می دهد، اما border یک ویژگی ظاهری CSS است. برای خط صرفا تزئینی از CSS استفاده کنید.

چک لیست پایان درس

• یک H1 روشن برای موضوع اصلی صفحه دارم.
• بخش های اصلی را با H2 مشخص کرده ام.
• زیرموضوع ها در صورت نیاز H3 دارند.
• سطح عنوان ها را بی دلیل رد نکرده ام.
• هر ایده مستقل داخل یک p قرار گرفته است.
• برای فاصله ظاهری از brهای متعدد استفاده نکرده ام.
• br فقط برای شکست خط معنایی استفاده شده است.
• hr فقط هنگام تغییر موضوع به کار رفته است.
• کد را در مرورگر و Inspect بررسی کرده ام.

درس قبلی: تگ ها و ویژگی ها در HTML

درس بعد: قالب بندی معنایی متن در HTML

برای مرور اسکلت سند نیز درس 4: ساختار سند HTML و برای آماده سازی ابزارها درس 2: نصب ویرایشگر کد را ببینید.