عناصر متنی در HTML

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

تیترها: از h1 تا h6

شش سطح تیتر داریم که از h1 (مهم‌ترین) تا h6 (جزئی‌ترین) مرتب می‌شوند. تیترها ستون فقرات صفحه‌اند و ساختار آن را برای همهٔ خواننده‌ها ترسیم می‌کنند:

<h1>Coffee Guide</h1>
<p>Coffee is one of the most popular drinks in the world.</p>
<h2>Brewing Methods</h2>
<p>Each brewing method creates a different taste.</p>
<h3>Pour-over Brewing</h3>
<p>This method produces a clear, bright drink.</p>

سه قاعده را همیشه رعایت کنید: در هر صفحه فقط یک h1 داشته باشید که موضوع اصلی صفحه است، بدون پرش سطوح را پشت‌سرهم به کار ببرید (بعد از h2 ناگهان به h4 نروید) و از تیتر فقط برای ساختار استفاده کنید نه برای بزرگ کردن متن؛ اندازه و رنگ تیترها کار CSS است.

پاراگراف، شکست خط و خط جداکننده

عنصر p یک پاراگراف کامل را در بر می‌گیرد. نکته‌ای که در ابتدا همه را غافلگیر می‌کند این است که مرورگر فاصله‌ها را جمع می‌کند: اگر داخل کد چند بار Enter بزنید یا چند فاصله پشت‌سرهم بگذارید، در خروجی فقط یک فاصله دیده می‌شود. این رفتار «فروپاشی فاصله سفید» (Whitespace Collapsing) نام دارد:

<p>This sentence
   is    written with lots of    spaces,
but the output is one tidy line.</p>

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

<address>
  Valiasr Street, Yas Alley, No. 7<br>
  Tehran
</address>
<hr>
<p>The next section of the page starts a new topic.</p>

اهمیت و تأکید: strong و em

دو عنصر پرکاربرد متن، معنا را داخل جمله تغییر می‌دهند. عنصر strong اهمیت جدی و فوری محتوا را نشان می‌دهد؛ مثل هشدارها. عنصر em تأکید (Emphasis) روی یک واژه است؛ همان کاری که در گفتار با تغییر لحن انجام می‌دهیم. جابه‌جا کردن em می‌تواند معنا را عوض کند:

<p><strong>Warning:</strong> Back up the file before deleting it.</p>
<p>I said the file will be ready <em>tonight</em>, not tomorrow.</p>

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

عنصرهای کمکی متن

چهار عنصر دیگر را هم از همین حالا بشناسید؛ در نوشتن محتوای واقعی مدام به آن‌ها نیاز دارید:

• mark متنی را که در لحظه برای کاربر مرتبط و برجسته است نشان می‌کند؛ مثل واژه‌ای که در نتیجه جست‌وجو هایلایت شده است.
• small برای توضیح ریزکنار مثل حق نشر و محدودیت‌های حقوقی است.
• code قطعه کد درون‌خطی را مشخص می‌کند و با فونت هم‌عرض نمایش داده می‌شود.
• span ظرفی خنثی و درون‌خطی است؛ وقتی هیچ عنصر معنایی مناسب نیست و فقط می‌خواهید بخشی از متن را برای استایل‌دادن جدا کنید به کار می‌آید.

<p>Your search for <mark>web design</mark> returned 12 results.</p>
<p><small>© 2026 All rights reserved.</small></p>
<p>The <code>querySelector</code> function finds the element.</p>

تمرین‌ها

<!-- Write your code here -->

<h2>Daily Planning</h2>
<p>For a productive day, <strong>do the hardest task first thing in the morning</strong>. This one habit makes <em>the rest of the day</em> easier and keeps your focus <mark>until the end of the day</mark>.</p>
<p><small>© 2026 Learning Center</small></p>

:::

خلاصه

• شش سطح تیتر از h1 تا h6 ساختار صفحه را می‌سازند؛ در هر صفحه یک h1 و بدون پرش سطح.
• مرورگر فاصله‌های اضافی را جمع می‌کند؛ برای خط جدید br و برای جدایی موضوع‌ها hr.
• strong اهمیت و em تأکید را بیان می‌کنند و هر دو معنا را منتقل می‌کنند، نه فقط ظاهر را.
• mark و small و code و span ابزارهای کمکی متن برای برجسته‌سازی، توضیح ریز، کد و ظرف خنثی هستند.

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