در مقاله‌های قبلی با مفهوم HTML، تگ‌ها، عناصر و ساختار کلی صفحات HTML آشنا شدیم و یاد گرفتیم که چگونه اجزای مختلف یک صفحه وب در کنار یکدیگر قرار می‌گیرند. یکی از مهم‌ترین بخش‌های هر صفحه وب، محتوای متنی آن است؛ از عنوان اصلی و عنوان بخش‌ها گرفته تا پاراگراف‌ها، متن‌های مهم، تأکیدها و حتی قطعه‌های کوتاه کد. HTML برای هرکدام از این موارد تگ‌های مشخصی در اختیار ما قرار می‌دهد تا علاوه بر نمایش محتوا، نقش و ساختار آن نیز برای مرورگر و سایر ابزارها مشخص باشد. در این مقاله با مهم‌ترین تگ‌های متنی HTML مانند h1 تا h6 برای عنوان‌ها، p برای پاراگراف‌ها، br برای شکست خط، strong و em برای اهمیت و تأکید، و همچنین hr، code و pre آشنا می‌شویم و با استفاده از مثال‌های ساده یاد می‌گیریم چگونه محتوای متنی یک صفحه وب را به شکل منظم و اصولی ساختاربندی کنیم.

چرا برای متن از تگ استفاده می‌کنیم؟

فرض کنید این متن را بدون هیچ ساختاری داشته باشیم:

آموزش طراحی وب

HTML یکی از مهم‌ترین فناوری‌های ساخت صفحات وب است.

در این دوره ابتدا HTML را یاد می‌گیریم و سپس وارد CSS می‌شویم.

یک انسان می‌تواند از روی ظاهر متن حدس بزند که:

آموزش طراحی وب

عنوان است.

اما در HTML بهتر است این موضوع را به صورت مشخص به مرورگر اعلام کنیم.

برای مثال:

<h1>آموزش طراحی وب</h1>

<p>
    HTML یکی از مهم‌ترین فناوری‌های ساخت صفحات وب است.
</p>

اینجا HTML به مرورگر می‌گوید که قسمت اول یک عنوان و قسمت دوم یک پاراگراف است.

این موضوع باعث می‌شود ساختار محتوای صفحه مشخص باشد.

عنوان‌ها در HTML

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

HTML برای عنوان‌ها از تگ‌های:

h1
h2
h3
h4
h5
h6

استفاده می‌کند.

این تگ‌ها شش سطح عنوان را مشخص می‌کنند.

h1
↓
مهم‌ترین عنوان

h2
↓
عنوان سطح دوم

h3
↓
عنوان سطح سوم

...

h6
↓
عنوان سطح ششم

تگ h1

h1 معمولاً برای عنوان اصلی صفحه یا مهم‌ترین عنوان یک محتوا استفاده می‌شود.

مثلاً:

<h1>آموزش طراحی وب</h1>

یا:

<h1>فروشگاه اینترنتی من</h1>

مرورگر معمولاً h1 را به صورت بزرگ‌تر و برجسته‌تر از متن معمولی نمایش می‌دهد.

مثلاً:

<h1>آموزش طراحی وب</h1>

<p>
    در این دوره با اصول طراحی وب آشنا می‌شوید.
</p>

تگ‌های h2 تا h6

بعد از h1 می‌توانیم از عنوان‌های سطح پایین‌تر استفاده کنیم.

مثلاً:

<h1>آموزش طراحی وب</h1>

<h2>آموزش HTML</h2>

<h3>مبانی HTML</h3>

در این مثال:

h1
عنوان اصلی

h2
بخش اصلی

h3
زیرمجموعه بخش

این ساختار به ما کمک می‌کند محتوای صفحه را مرتب کنیم.

تفاوت h1، h2 و h3 چیست؟

تفاوت اصلی آن‌ها فقط اندازه متن نیست.

مهم‌تر از اندازه ظاهری، سطح و جایگاه عنوان در ساختار محتوا است.

برای مثال:

<h1>طراحی وب</h1>

<h2>HTML</h2>

<h3>تگ‌های HTML</h3>

<h3>ویژگی‌های HTML</h3>

<h2>CSS</h2>

<h3>Selectorها</h3>

<h3>رنگ‌ها</h3>

در این ساختار:

h1
└── طراحی وب

    h2
    ├── HTML
    │   ├── h3 تگ‌های HTML
    │   └── h3 ویژگی‌های HTML
    │
    └── CSS
        ├── h3 Selectorها
        └── h3 رنگ‌ها

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

آیا می‌توانیم فقط از h1 استفاده کنیم؟

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

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

مثلاً:

<h1>فروشگاه من</h1>

<h2>محصولات جدید</h2>

<h2>محصولات پرفروش</h2>

<h2>درباره فروشگاه</h2>

در اینجا h1 عنوان اصلی صفحه است و h2 بخش‌های اصلی آن را مشخص می‌کنند.

پاراگراف در HTML

برای نمایش یک پاراگراف از تگ:

<p>

استفاده می‌کنیم.

مثلاً:

<p>
    HTML زبان نشانه‌گذاری مورد استفاده برای ساختار صفحات وب است.
</p>

هر چیزی که بین تگ باز و بسته p قرار بگیرد، محتوای آن پاراگراف است.

چند پاراگراف

اگر چند پاراگراف داشته باشیم، بهتر است هرکدام را در یک عنصر p قرار دهیم.

مثلاً:

<p>
    HTML پایه ساختار صفحات وب است.
</p>

<p>
    با HTML می‌توانیم عنوان، متن، تصویر، لینک و عناصر مختلفی ایجاد کنیم.
</p>

<p>
    بعد از یادگیری HTML می‌توانیم سراغ CSS برویم.
</p>

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

تفاوت پاراگراف و عنوان

عنوان و پاراگراف نقش متفاوتی دارند.

مثلاً:

<h1>آموزش HTML</h1>

<p>
    در این مقاله با مبانی HTML آشنا می‌شویم.
</p>

در اینجا:

h1
→ عنوان

p
→ متن توضیحی

بهتر است از h1 فقط برای اینکه متن را بزرگ‌تر کنیم استفاده نکنیم.

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

HTML باید نقش و ساختار محتوا را مشخص کند.

شکستن خط با br

گاهی اوقات می‌خواهیم در داخل یک متن به خط بعد برویم.

برای این کار می‌توانیم از تگ:

<br>

استفاده کنیم.

مثلاً:

<p>
    سلام<br>
    به سایت من خوش آمدید.
</p>

نتیجه تقریباً به این شکل خواهد بود:

سلام
به سایت من خوش آمدید.

br باعث ایجاد یک شکست خط می‌شود.

آیا برای ایجاد فاصله بین پاراگراف‌ها از br استفاده کنیم؟

بهتر است برای ایجاد فاصله‌های ظاهری از br به صورت مداوم استفاده نکنیم.

مثلاً این کار روش مناسبی نیست:

<p>متن اول</p>
<br>
<br>
<br>
<p>متن دوم</p>

بعداً با CSS یاد می‌گیریم چگونه فاصله‌ها را به شکل اصولی کنترل کنیم.

br زمانی کاربرد دارد که واقعاً بخواهیم یک خط شکسته شود.

متن مهم با strong

گاهی در یک متن می‌خواهیم قسمتی را مهم‌تر مشخص کنیم.

برای این کار می‌توانیم از:

<strong>

استفاده کنیم.

مثلاً:

<p>
    یادگیری <strong>HTML</strong> اولین قدم در طراحی وب است.
</p>

مرورگر معمولاً محتوای strong را به صورت برجسته نمایش می‌دهد.

اما نکته مهم این است که strong فقط برای ضخیم کردن نوشته نیست.

این تگ نشان می‌دهد که آن قسمت از متن اهمیت بیشتری دارد.

متن تأکیدی با em

برای تأکید روی یک قسمت از متن می‌توانیم از:

<em>

استفاده کنیم.

مثلاً:

<p>
    یادگیری HTML یک مرحله <em>مهم</em> در مسیر طراحی وب است.
</p>

مرورگر معمولاً متن داخل em را به شکل متمایز، اغلب مایل، نمایش می‌دهد.

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

تفاوت strong و b

ممکن است تگ دیگری به نام:

<b>

را نیز ببینید.

مثلاً:

<p>
    <b>HTML</b> را یاد بگیرید.
</p>

b معمولاً باعث می‌شود متن برجسته‌تر نمایش داده شود.

اما strong برای مشخص کردن اهمیت متن استفاده می‌شود.

برای مثال:

<p>
    <strong>توجه:</strong>
    قبل از ادامه دوره تمرین‌های این بخش را انجام دهید.
</p>

در اینجا strong انتخاب مناسبی است، چون کلمه «توجه» اهمیت بیشتری دارد.

فعلاً همین تفاوت ساده را به خاطر بسپارید:

b
→ برجسته کردن ظاهری متن

strong
→ مشخص کردن اهمیت متن

تفاوت em و i

تگ دیگری به نام:

<i>

وجود دارد.

برای مثال:

<p>
    این یک <i>کلمه</i> متفاوت است.
</p>

i می‌تواند برای نمایش متمایز متن استفاده شود.

در مقابل:

<em>

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

بنابراین:

i
→ نمایش متمایز متن

em
→ تأکید معنایی

در این مرحله لازم نیست وارد جزئیات پیشرفته این تفاوت شویم. مهم این است که بدانید این تگ‌ها فقط ابزارهای ظاهری نیستند و HTML می‌تواند درباره نقش و معنی محتوا نیز اطلاعات ارائه کند.

خط افقی با hr

گاهی می‌خواهیم بین دو بخش محتوا یک جداکننده قرار دهیم.

برای این کار می‌توانیم از:

<hr>

استفاده کنیم.

مثلاً:

<h2>بخش اول</h2>

<p>
    این متن مربوط به بخش اول است.
</p>

<hr>

<h2>بخش دوم</h2>

<p>
    این متن مربوط به بخش دوم است.
</p>

مرورگر معمولاً یک خط افقی بین دو بخش نمایش می‌دهد.

نمایش متن به صورت کد

گاهی در مقالات آموزشی می‌خواهیم بخشی از متن را به عنوان کد نمایش دهیم.

برای یک قطعه کوتاه از کد می‌توانیم از:

<code>

استفاده کنیم.

مثلاً:

<p>
    برای ساخت عنوان از تگ <code>h1</code> استفاده می‌کنیم.
</p>

در اینجا h1 به عنوان یک قطعه کد نمایش داده می‌شود.

نمایش یک قطعه کد چندخطی

برای نمایش کدهای چندخطی معمولاً از pre استفاده می‌شود.

مثلاً:

<pre>
<h1>سلام</h1>
<p>به سایت من خوش آمدید.</p>
</pre>

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

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

یک مثال کامل از تگ‌های متنی

حالا چند موردی را که یاد گرفتیم در یک مثال کنار هم قرار دهیم:

<h1>آموزش طراحی وب</h1>

<p>
    در این دوره با <strong>HTML</strong> و اصول طراحی صفحات وب آشنا می‌شویم.
</p>

<h2>HTML چیست؟</h2>

<p>
    HTML برای ساختار صفحات وب استفاده می‌شود.
</p>

<h2>چرا HTML مهم است؟</h2>

<p>
    یادگیری HTML یکی از <em>مراحل مهم</em> شروع طراحی وب است.
</p>

<hr>

<p>
    برای ساخت یک عنوان اصلی می‌توانیم از <code>h1</code> استفاده کنیم.
</p>

در این مثال از چند تگ مختلف استفاده کردیم:

h1
→ عنوان اصلی

h2
→ عنوان‌های بخش‌ها

p
→ پاراگراف

strong
→ متن مهم

em
→ متن تأکیدی

hr
→ جداکننده

code
→ نمایش کد

اشتباه رایج: استفاده از تگ عنوان فقط برای بزرگ کردن متن

یکی از اشتباهات رایج افراد تازه‌کار این است که برای بزرگ کردن متن از h1، h2 یا h3 استفاده کنند.

مثلاً:

<h1>این فقط یک متن بزرگ است</h1>

اگر این متن واقعاً عنوان صفحه نیست، بهتر است برای بزرگ کردن آن از CSS استفاده کنیم.

HTML باید ساختار محتوا را مشخص کند و CSS ظاهر آن را کنترل کند.

مثلاً در آینده می‌توانیم با CSS مشخص کنیم:

اندازه متن = بزرگ
رنگ = نارنجی
فونت = ...

پس:

HTML
→ این متن چه نقشی دارد؟

CSS
→ این متن چگونه دیده شود؟

این تفاوت بسیار مهم است.

یک صفحه ساده با ساختار مناسب

حالا می‌توانیم یک صفحه کوچک‌تر و واقعی‌تر ایجاد کنیم:

<!DOCTYPE html>
<html>

<head>
    <title>آموزش HTML</title>
</head>

<body>

    <h1>آموزش HTML</h1>

    <p>
        به دوره آموزش طراحی وب خوش آمدید.
    </p>

    <h2>HTML چیست؟</h2>

    <p>
        HTML برای ساختار و محتوای صفحات وب استفاده می‌شود.
    </p>

    <h2>در این دوره چه یاد می‌گیریم؟</h2>

    <p>
        در این دوره با تگ‌ها، عناصر و ساختار صفحات وب آشنا می‌شویم.
    </p>

</body>

</html>

پس از نوشتن کدها یا ایجاد تغییرات، آنها را ذخیره کرده و سپس اجرا کنید.

اگر این فایل را در مرورگر باز کنید، می‌توانید ساختار عنوان‌ها و پاراگراف‌ها را مشاهده کنید.

تمرین عملی

حالا نوبت شماست.

یک فایل به نام:

index.html

ایجاد کنید و یک صفحه درباره خودتان بسازید.

صفحه شما حداقل باید شامل موارد زیر باشد:

یک عنوان اصلی
دو عنوان فرعی
سه پاراگراف
یک کلمه مهم
یک کلمه تأکیدی

برای مثال می‌توانید ساختاری شبیه این داشته باشید:

<h1>درباره من</h1>

<p>
    من در حال یادگیری طراحی وب هستم.
</p>

<h2>مهارت‌های من</h2>

<p>
    در حال یادگیری <strong>HTML</strong> هستم.
</p>

<h2>هدف من</h2>

<p>
    هدف من تبدیل شدن به یک <em>طراح وب حرفه‌ای</em> است.
</p>

البته بهتر است متن‌ها را با اطلاعات و نوشته‌های خودتان جایگزین کنید.

تمرین چالشی

حالا یک صفحه آموزشی کوچک ایجاد کنید.

موضوع را خودتان انتخاب کنید.

مثلاً:

آموزش کامپیوتر
معرفی یک کتاب
معرفی یک محصول
معرفی خودتان
آموزش یک مهارت

صفحه باید حداقل این ساختار را داشته باشد:

h1
│
├── p
│
├── h2
│   └── p
│
├── h2
│   └── p
│
└── h2
    └── p

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

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

نکات مهم این مقاله

قبل از رفتن به درس بعدی، این موارد را به خاطر بسپارید:

h1 تا h6

برای ایجاد عنوان‌ها با سطوح مختلف استفاده می‌شوند.

p

برای پاراگراف استفاده می‌شود.

br

برای ایجاد شکست خط استفاده می‌شود.

strong

برای مشخص کردن اهمیت یک بخش از متن استفاده می‌شود.

em

برای تأکید روی یک بخش از متن استفاده می‌شود.

hr

برای ایجاد یک جداکننده بین بخش‌های محتوا استفاده می‌شود.

code

برای نمایش قطعه کوتاه کد استفاده می‌شود.

pre

برای نمایش متن یا کد با حفظ فاصله‌ها و شکست خطوط کاربرد دارد.

جمع‌بندی

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

با مهم‌ترین تگ‌های متنی آشنا شدیم:

<h1>عنوان اصلی</h1>

<h2>عنوان بخش</h2>

<p>یک پاراگراف</p>

<strong>متن مهم</strong>

<em>متن تأکیدی</em>

<br>

<hr>

<code>h1</code>

همچنین یاد گرفتیم که نباید از تگ‌های عنوان فقط برای بزرگ‌تر کردن متن استفاده کنیم. اگر هدف تغییر ظاهر است، در ادامه با CSS این کار را انجام خواهیم داد.

اکنون می‌توانیم یک صفحه HTML ساده ایجاد کنیم و محتوای آن را با عنوان‌ها و پاراگراف‌های مختلف سازمان‌دهی کنیم.

در مقاله بعدی سراغ یکی از کاربردی‌ترین بخش‌های HTML می‌رویم:

لینک‌ها و مسیرها

یاد می‌گیریم چگونه یک صفحه را به صفحه دیگر متصل کنیم، لینک به سایت‌های دیگر بسازیم و با مسیر فایل‌ها در HTML آشنا شویم.