متن یکی از اصلی‌ترین انواع محتوا در صفحات وب است، اما در HTML قرار نیست فقط کلمات را روی صفحه نمایش دهیم. HTML کمک می‌کند مشخص کنیم کدام بخش عنوان است، کدام قسمت یک پاراگراف را می‌سازد، چه عبارتی اهمیت یا تأکید دارد، کجا نقل‌قول کرده‌ایم و کدام بخش کد یا محتوای تخصصی است.
این ساختار و معنا با عناصر HTML بیان می‌شود. ممکن است مرورگر `strong` را ضخیم، `em` را مایل و Headingها را بزرگ‌تر نمایش دهد، اما ظاهر پیش‌فرض نباید مبنای انتخاب عنصر باشد؛ HTML نقش محتوا را مشخص می‌کند و CSS ظاهر آن را کنترل می‌کند.
در این راهنما، محتوای متنی را از اسکلت اصلی نوشته—عنوان‌ها و پاراگراف‌ها—تا نقش‌های دقیق‌تر مثل اهمیت، تأکید، نقل‌قول، کد، زیرنویس و بالانویس و متن‌های ترکیبی فارسی و انگلیسی بررسی می‌کنیم. هدف این است که برای هر بخش از متن بتوانید عنصر مناسب را بر اساس نقش آن انتخاب کنید.
اگر هدفتان فقط مرور سریع همه عناصر HTML است، صفحه لیست تگ‌های HTML مرجع مناسب‌تری است؛ این مقاله مشخصاً روی ساختاردهی و معنادهی به محتوای متنی تمرکز دارد. منظور از معنادهی، انتخاب عناصر ساختاری کل صفحه مثل header، nav، main و article است، که راهنمای HTML معنایی چیست؟ مسیر مناسب‌تریه.
متن و محتوای متنی در HTML چیست؟
محتوای متنی در HTML فقط نوشته‌ای نیست که داخل صفحه دیده می‌شود؛ HTML به قسمت‌های مختلف نوشته نقش می‌دهد. عنوان، پاراگراف، هشدار مهم، تأکید، نقل‌قول و کد همگی متن هستند، اما یک نقش ندارند و به همین دلیل با عناصر متفاوت نشانه‌گذاری می‌شوند.
فرض کنید این متن را برای یک صفحه آموزشی نوشته‌ایم:
راهنمای نصب وردپرس
قبل از شروع، از سایت نسخه پشتیبان بگیرید
برای مشاهده نسخه وردپرس می‌توانید دستور wp core version را اجرا کنید.
اگر این نوشته را بدون ساختار مناسب داخل سند قرار دهیم، مرورگر می‌تواند متن را نمایش دهد؛ اما از خود Markup به‌روشنی مشخص نیست که «راهنمای نصب وردپرس» عنوان محتواست، جمله دوم یک پاراگراف و هشدار مهم است و بخش پایانی شامل یک دستور فنی می‌شود. HTML اجازه می‌دهد همین نقش‌ها را مشخص کنیم:
<h1>راهنمای نصب وردپرس</h1>
<p>
قبل از شروع، <strong>از سایت نسخه پشتیبان بگیرید.</strong>
</p>
<p>
برای مشاهده نسخه وردپرس می‌توانید دستور
<code>wp core version</code>
را اجرا کنید.
</p>
یک نکته اصطلاحی: در این مقاله «محتوای متنی» یک چارچوب آموزشی گسترده است، نه نام یک دسته رسمی واحد در استاندارد HTML. برای مثال، Headingها، p و blockquote در دسته‌های فنی متفاوتی قرار می‌گیرند، در حالی که strong، em و code در بخش Text-level semantics تعریف می‌شوند. نقطه مشترک آن‌ها Reader Job این صفحه است: ساختاردهی یا معنادهی به نوشته.
ظاهر پیش‌فرض یک تگ، دلیل انتخاب آن نیست. مرورگرها معمولاً h1 را بزرگ‌تر و strong را ضخیم‌تر نمایش می‌دهند، اما این ظاهر را می‌توان با CSS تغییر داد. اگر عنصر را فقط به‌خاطر اندازه، ضخامت یا شکل پیش‌فرضش انتخاب کنیم، نقش HTML و CSS را با هم اشتباه گرفته‌ایم.
اگر هنوز تفاوت «ساختار صفحه» با «ظاهر صفحه» برایتان کاملاً روشن نیست، ابتدا راهنمای HTML چیست را بخوانید؛ در ادامه تمرکز ما روی این است که محتوای متنی را چطور ساختاربندی کنیم و برای هر نقش، عنصر مناسب را انتخاب کنیم.
محتوای متنی را چطور در HTML ساختاربندی کنیم؟
برای ساختاردهی متن، از ظاهر موردنظر شروع نکنید. ابتدا مشخص کنید این بخش در ساختار نوشته چه نقشی دارد، بعد ببینید آیا معنای ویژه‌ای مثل اهمیت، تأکید، نقل‌قول یا کد دارد. اگر هدف فقط تغییر رنگ، اندازه، فونت یا شکل نمایش است، معمولاً مسئله به CSS مربوط می‌شود.
یک روش ساده برای تصمیم‌گیری این است که هر بار این سه سؤال را به‌ترتیب بپرسید:
- این قسمت چه نقشی در ساختار نوشته دارد؟
اگر با عنوان، پاراگراف یا بخش دیگری از ساختار متن روبه‌رو هستید، ابتدا باید عنصر ساختاری مناسب را پیدا کنید. - آیا این عبارت داخل متن معنای مشخصی دارد؟
شاید بخشی از جمله مهم باشد، روی واژه‌ای تأکید شده باشد، عبارتی نقل‌قول باشد یا بخشی از متن کد محسوب شود. در این حالت، عنصر مناسب باید آن معنا را مشخص کند. - یا فقط می‌خواهم ظاهر متن تغییر کند؟
اگر هدف فقط تغییر رنگ، ضخامت، اندازه، فونت یا شکل نمایش است، معمولاً مسئله مربوط به CSS است و نباید صرفاً برای رسیدن به یک ظاهر خاص، معنای نادرستی به متن بدهیم.
این مدل را می‌توان به‌صورت خلاصه در جدول زیر دید:
| چیزی که می‌خواهید مشخص کنید | نوع تصمیم | نمونه عناصر |
|---|---|---|
| عنوان و سلسله‌مراتب نوشته | ساختار متن | h1 تا h6 |
| یک پاراگراف مستقل | ساختار متن | p |
| اهمیت یا فوریت بخشی از متن | معنای عبارت | strong |
| تأکید روی بخشی از جمله | معنای عبارت | em |
| مرتبط‌بودن بخشی از متن در یک زمینه خاص | معنای عبارت | mark |
| یک قطعه کد | نوع محتوا | code |
| نقل‌قول | نوع محتوا | q یا blockquote |
| فقط تغییر رنگ، اندازه یا ضخامت | ظاهر | CSS |
این مدل تصمیم‌گیری قرار نیست جای آموزش جزئی هر عنصر را بگیرد؛ در بخش‌های بعد، همین منطق را روی گروه‌های اصلی محتوای متنی اجرا می‌کنیم.
عنوان‌ها و پاراگراف‌ها؛ اسکلت متن در HTML
قبل از اینکه روی کلمه‌ای تأکید کنیم، نقل‌قول بنویسیم یا بخشی از متن را به‌عنوان کد مشخص کنیم، خود نوشته باید ساختار قابل‌فهمی داشته باشد. در یک محتوای معمولی، این ساختار عمدتاً با عنوان‌ها و پاراگراف‌ها شکل می‌گیرد: عنوان‌ها رابطه بخش‌های مختلف مطلب را مشخص می‌کنند و پاراگراف‌ها جمله‌هایی را که یک واحد فکری را تشکیل می‌دهند کنار هم قرار می‌دهند.
عنوان‌های h1 تا h6 چه نقشی دارند؟
HTML شش سطح Heading از h1 تا h6 دارد. عدد این عناصر فقط اندازه ظاهری متن را مشخص نمی‌کند؛ سطح آن‌ها جایگاه عنوان را در سلسله‌مراتب محتوا نشان می‌دهد. h1 برای عنوان سطح بالاتر، h2 برای زیربخش آن، h3 برای زیربخش سطح بعد و همین روند تا h6 استفاده می‌شود.
مثلاً ساختار یک مقاله آموزشی می‌تواند به این شکل باشد:
<h1>آموزش طراحی سایت</h1>
<h2>HTML چیست؟</h2>
<p>...</p>
<h2>CSS چیست؟</h2>
<p>...</p>
<h3>روش اتصال CSS به HTML</h3>
<p>...</p>
در این مثال، «روش اتصال CSS به HTML» از نظر موضوعی زیرمجموعه بخش «CSS چیست؟» است؛ بنابراین h3 انتخاب معناداری برای آن محسوب می‌شود.
اگر فقط به ظاهر مرورگر نگاه کنیم، ممکن است وسوسه شویم برای کوچک‌تر یا بزرگ‌تر شدن نوشته سطح Heading را تغییر دهیم. این روش ساختار محتوا را به طراحی ظاهری وابسته می‌کند. سطح Heading باید از رابطه عنوان‌ها با یکدیگر به دست بیاید؛ ظاهر آن‌ها را بعداً می‌توان با CSS کنترل کرد.
پاراگراف با p
عنصر p نماینده یک پاراگراف است. به زبان ساده، وقتی چند جمله با هم یک فکر، توضیح یا پیام مستقل را می‌سازند، می‌توان آن‌ها را داخل یک پاراگراف قرار داد:
<p>
HTML برای مشخص کردن ساختار و معنای محتوای صفحه استفاده می‌شود.
مرورگر این ساختار را می‌خواند و عناصر صفحه را تفسیر می‌کند.
</p>
<p>
ظاهر این محتوا را می‌توان با CSS تغییر داد.
</p>
دو بخش بالا فقط به این دلیل در دو p جدا قرار نگرفته‌اند که می‌خواهیم بین آن‌ها فاصله دیده شود؛ موضوع آن‌ها به دو واحد فکری جدا تقسیم شده است. فاصله ظاهری بین پاراگراف‌ها مسئله طراحی است و می‌توان آن را با CSS کم یا زیاد کرد.
به همین دلیل، شکستن یک متن بلند به چند p باید از منطق خود نوشته پیروی کند. اگر موضوع یا جهت توضیح عوض می‌شود، احتمالاً پاراگراف جدیدی لازم داریم؛ اما اگر فقط می‌خواهیم وسط همان جمله یا همان واحد متنی به خط بعد برویم، با مسئله دیگری روبه‌رو هستیم.
br چه زمانی واقعاً لازم است؟
عنصر br یک شکست خط ایجاد می‌کند، اما جایگزین پاراگراف نیست. از آن زمانی استفاده کنید که رفتن به خط بعد واقعاً بخشی از خود محتواست؛ برای مثال در نشانی پستی یا شعری که محل شکست سطرها اهمیت دارد. برای جداکردن پاراگراف‌ها یا ایجاد فاصله ظاهری، چند br پشت‌سرهم انتخاب مناسبی نیست.
برای نمونه، در یک نشانی می‌توان نوشت:
<p>
تهران، میدان ونک<br>
خیابان ملاصدرا<br>
پلاک ۱۲
</p>
اما برای دو پاراگراف مستقل، این ساختار مناسب نیست:
<p>
HTML ساختار محتوا را مشخص می‌کند.
<br><br>
CSS ظاهر صفحه را کنترل می‌کند.
</p>
در چنین حالتی دو فکر مستقل داریم و بهتر است آن‌ها را به دو پاراگراف تبدیل کنیم:
<p>HTML ساختار محتوا را مشخص می‌کند.</p>
<p>CSS ظاهر صفحه را کنترل می‌کند.</p>
اگر می‌خواهید تفاوت این دو حالت و کاربردهای صحیح شکست خط را با جزئیات بیشتری بررسی کنید، مقاله تگ br در HTML این موضوع را به‌صورت اختصاصی پوشش می‌دهد.
با همین سه تصمیم می‌توان اسکلت بخش بزرگی از یک نوشته را ساخت: Headingها سلسله‌مراتب را مشخص می‌کنند، p مرز پاراگراف‌ها را می‌سازد و br فقط جایی استفاده می‌شود که شکستن خط جزئی از خود محتوا باشد.
اهمیت، تأکید و برجسته‌کردن متن چه فرقی دارند؟
یکی از جاهایی که انتخاب تگ بر اساس ظاهر خیلی زود ما را به اشتباه می‌اندازد، عناصری مثل strong، b، em، i و mark هستند. ممکن است مرورگر دو عنصر را تقریباً یکسان نمایش دهد، اما معنایی که در HTML به محتوا می‌دهند یکسان نیست.
برای انتخاب درست، به‌جای این سؤال که «می‌خواهم متن Bold باشد یا Italic؟»، بهتر است بپرسیم:
چرا می‌خواهم این قسمت از متن از نوشته اطرافش متمایز شود؟
تفاوت strong و b؛ اهمیت یا فقط جلب توجه؟
عنصر strong زمانی استفاده می‌شود که بخشی از محتوا اهمیت، جدیت یا فوریت بیشتری نسبت به متن اطراف دارد؛ برای نمونه، یک هشدار یا اطلاعاتی که نادیده‌گرفتن آن می‌تواند تصمیم کاربر را تغییر دهد.
مثلاً در یک آموزش وردپرس:
<p>
<strong>قبل از حذف افزونه، از سایت نسخه پشتیبان تهیه کنید.</strong>
</p>
دلیل استفاده از strong این نیست که مرورگر معمولاً این جمله را ضخیم نمایش می‌دهد؛ دلیلش این است که نادیده‌گرفتن این پیام می‌تواند برای کاربر مهم باشد.
اما b معنای دیگری دارد. این عنصر برای جلب توجه به قسمتی از متن به دلایل کاربردی استفاده می‌شود، بدون اینکه آن قسمت اهمیت بیشتری پیدا کند؛ مثلاً یک کلمه کلیدی در خلاصه یا نام محصول در یک بررسی. WHATWG حتی توصیه می‌کند وقتی عنصر دقیق‌تری مثل strong، em یا mark مناسب است، سراغ b نرویم.
بنابراین این دو را می‌توان این‌طور از هم جدا کرد:
| عنصر | سؤال تصمیم‌گیری |
|---|---|
| strong | آیا این محتوا مهم‌تر، جدی‌تر یا فوری‌تر است؟ |
| b | آیا فقط لازم است توجه خواننده به این عبارت جلب شود، بدون معنای دقیق‌تر دیگری؟ |
نکته مهم این است که b در HTML امروزی یک تگ منسوخ یا صرفاً دستور «Bold کن» نیست. برای Bold کردن تزئینی متن، CSS و ویژگی font-weight انتخاب مناسب‌تری است. اگر می‌خواهید این دو عنصر را عمیق‌تر مقایسه کنید، مقاله تفاوت تگ b و strong در HTML این موضوع را به‌صورت اختصاصی پوشش می‌دهد.
تفاوت em و i؛ تأکید در جمله یا متن با لحن متفاوت؟
عنصر em برای Stress Emphasis است؛ یعنی زمانی که تأکید روی یک کلمه یا عبارت در نحوه خواندن یا برداشت از جمله اثر دارد.
مثلاً تفاوت این دو جمله را در نظر بگیرید:
<p>من گفتم فایل را <em>امروز</em> ارسال کنید.</p>
<p><em>من</em> گفتم فایل را امروز ارسال کنید.</p>
در جمله اول، تأکید روی «امروز» است؛ یعنی زمان انجام کار مهم است. در جمله دوم، تأکید روی «من» قرار گرفته و برداشت جمله تغییر می‌کند. این همان نوع تأکیدی است که em برای بیان آن طراحی شده است.
اما i زمانی کاربرد دارد که بخشی از متن نسبت به نوشته عادی لحن، حالت یا نوع متفاوتی داشته باشد؛ برای مثال بعضی اصطلاحات فنی، عبارت‌های زبان دیگر یا نام‌های علمی. استاندارد امروزی HTML دیگر i را صرفاً معادل «متن Italic» تعریف نمی‌کند.
برای مثال:
<p>
اصطلاح <i lang="en">responsive design</i>
در طراحی وب به طراحی واکنش‌گرا اشاره می‌کند.
</p>
اگر تنها هدفتان کج‌کردن ظاهر نوشته است، هیچ‌کدام از em یا i را صرفاً به‌خاطر ظاهر پیش‌فرضشان انتخاب نکنید؛ این کار را می‌توان با CSS و font-style انجام داد.
mark؛ وقتی یک بخش در زمینه فعلی مرتبط است
mark نه معادل strong است و نه یک ماژیک زرد عمومی برای زیباترکردن صفحه. این عنصر بخشی از متن را مشخص می‌کند که در زمینه فعلی برای خواننده مرتبط یا قابل‌توجه شده است. یکی از مثال‌های روشن آن نمایش عبارت جست‌وجوشده داخل نتایج است.
مثلاً اگر کاربر در یک متن به‌دنبال عبارت «HTML» جست‌وجو کرده باشد:
<p>
برای ساخت ساختار صفحه از <mark>HTML</mark> استفاده می‌کنیم.
</p>
اینجا HTML لزوماً مهم‌ترین قسمت جمله نیست؛ دلیل علامت‌گذاری آن این است که در زمینه جست‌وجوی فعلی کاربر مرتبط شده است.
این تفاوت را می‌توان خیلی خلاصه به خاطر سپرد:
| عنصر | معنای اصلی |
|---|---|
| strong | اهمیت، جدیت یا فوریت |
| em | تأکید در بیان |
| b | جلب توجه بدون اهمیت بیشتر |
| i | متن با لحن، حالت یا نوع متمایز |
| mark | ارتباط و برجستگی در زمینه فعلی |
پس اگر دو تگ در مرورگر ظاهری شبیه به هم دارند، این شباهت نباید مبنای انتخاب باشد. معنایی که می‌خواهید درباره آن بخش از متن بیان کنید، عنصر مناسب را تعیین می‌کند؛ ظاهر را می‌توان جداگانه با CSS کنترل کرد.
نقل‌قول و ارجاع در متن HTML
وقتی بخشی از نوشته را از منبع یا گوینده دیگری نقل می‌کنیم، HTML عناصری دارد که کمک می‌کنند خود نقل‌قول، نوع آن و ارجاع به اثر از متن عادی قابل تشخیص باشد. سه عنصر مهم در این زمینه blockquote، q و cite هستند؛ اما هرکدام کار متفاوتی انجام می‌دهند.
نقل‌قول مستقل با blockquote
عنصر blockquote برای بخشی از محتواست که واقعاً از منبع دیگری نقل شده و به‌صورت یک بخش مستقل در جریان محتوا قرار می‌گیرد. معیار اصلی، مستقل بودن نقل‌قول در ساختار صفحه است؛ نه صرفاً تعداد کلمات آن.
برای نمونه، فرض کنید متن زیر واقعاً از یک منبع مشخص نقل شده و URL آن را هم می‌دانیم:
<blockquote cite="https://example.com/article">
<p>
یادگیری HTML با حفظ کردن فهرست تگ‌ها شروع نمی‌شود.
مهم‌تر این است که بدانیم هر بخش از محتوا چه نقشی دارد.
</p>
</blockquote>
اینکه مرورگر معمولاً blockquote را با تورفتگی نمایش می‌دهد، دلیل استفاده از آن نیست. اگر فقط می‌خواهیم یک پاراگراف از نظر ظاهری داخل یک کادر یا با فاصله بیشتر نمایش داده شود، نباید به همین دلیل آن را blockquote کنیم؛ ظاهر را می‌توان با CSS ساخت.
اگر اتریبیوت cite وجود داشته باشد، مقدار آن باید یک URL معتبر باشد که به منبع نقل‌قول یا اطلاعات مربوط به آن اشاره کند. این URL معمولاً به‌صورت لینک قابل‌مشاهده برای خواننده نمایش داده نمی‌شود؛ اگر مفهوم Attribute و Value برایتان تازه است، راهنمای اتریبیوت HTML چیست؟ توضیح کامل‌تری می‌دهد.
برای جزئیات بیشتر درباره ساختار و کاربرد این عنصر، مقاله تگ blockquote در HTML را ببینید.
نقل‌قول درون‌خطی با q
اگر نقل‌قول داخل جریان همان جمله یا پاراگراف قرار می‌گیرد، معمولاً q انتخاب مناسب‌تری است. تفاوت q و blockquote بیشتر به نقش آن‌ها در جریان محتوا مربوط است تا یک مرز ثابت بر اساس تعداد کلمات.
برای مثال:
<p>
در یک مثال فرضی، مدرس گفت:
<q>قبل از نوشتن CSS، ساختار HTML را بررسی کنید.</q>
</p>
پس به‌طور خلاصه، q برای نقل‌قول درون‌خطی است و blockquote برای نقل‌قولی که به‌صورت یک بخش مستقل در محتوا قرار می‌گیرد.
در بسیاری از مرورگرها اطراف محتوای q علامت نقل‌قول نمایش داده می‌شود؛ بنابراین معمولاً نباید برای بازسازی همان علامت‌ها داخل q گیومه اضافه کنید. نشانه‌های نقل‌قول مربوط به q توسط User Agent در خروجی ایجاد می‌شوند.
نکته دیگر اینکه q برای هر متنی که داخل گیومه قرار می‌دهیم مناسب نیست. مثلاً اگر گیومه صرفاً برای کنایه یا نام‌گذاری غیررسمی استفاده شده و واقعاً چیزی از منبع دیگری نقل نشده است، q معنای درستی به محتوا نمی‌دهد.
cite برای نام اثر است، نه خود نقل‌قول
یکی از اشتباهات رایج این است که cite را تگ عمومی «منبع» یا «نقل‌قول» در نظر بگیریم. در HTML، عنصر cite برای مشخص کردن عنوان یک اثر استفاده می‌شود؛ مانند نام کتاب، مقاله، فیلم، وب‌سایت یا اثر هنری. خود نقل‌قول و عنوان اثری که به آن ارجاع می‌دهیم دو نقش متفاوت‌اند.
برای بررسی جزئی‌تر کاربرد این عنصر و تفاوت آن با اتریبیوت cite، راهنمای تگ cite در HTML را ببینید.
برای مثال:
<p>
در کتاب <cite>راهنمای طراحی وب</cite>
درباره ساختار اسناد HTML توضیح داده شده است.
</p>
در این مثال cite عنوان اثر را مشخص می‌کند، نه نام نویسنده یا گوینده. این عنصر را هم با اتریبیوت cite که روی q و blockquote URL منبع را نگه می‌دارد، اشتباه نگیرید.
| مورد | کاربرد |
|---|---|
| <cite>…</cite> | مشخص کردن عنوان یک اثر |
| cite=”URL” | معرفی URL منبع روی عناصری مانند blockquote و q |
| blockquote | نقل‌قول مستقل و بلوکی |
| q | نقل‌قول درون‌خطی داخل جریان متن |
برای انتخاب بین این عناصر، ابتدا ببینید چه چیزی را نشانه‌گذاری می‌کنید: خود نقل‌قول، نوع قرارگیری آن در متن، یا عنوان اثری که به آن ارجاع می‌دهید. وقتی این سه مفهوم از هم جدا شوند، انتخاب بین blockquote، q و cite نیز روشن می‌شود.
کد و متن‌های فنی را چگونه نشانه‌گذاری کنیم؟
در یک مقاله فنی ممکن است چند نوع نوشته ظاهری شبیه هم داشته باشند: نام یک دستور، بلوکی از کد، کلیدی که کاربر باید فشار دهد، خروجی ترمینال یا نام یک متغیر. مرورگرها بسیاری از این عناصر را به‌طور پیش‌فرض با فونت Monospace نمایش می‌دهند، اما یکسان بودن ظاهر به معنی یکسان بودن نقش آن‌ها نیست. HTML برای هرکدام عنصر معنایی جداگانه‌ای دارد.
code برای قطعه‌ای از کد
وقتی بخشی از متن نماینده کد کامپیوتری است، از عنصر code استفاده می‌کنیم. این کد می‌تواند نام یک دستور، یک تابع، قطعه‌ای از HTML یا هر نمونه کدنویسی دیگری باشد.
اگر می‌خواهید قواعد، کاربردها و مثال‌های بیشتری از این عنصر ببینید، راهنمای تگ code در HTML را مطالعه کنید.
مثلاً برای اشاره به یک دستور در میان جمله:
<p>
برای نمایش نسخه PHP دستور
<code>php -v</code>
را اجرا کنید.
</p>
اینجا code به مرورگر و ساختار سند می‌گوید که php -v بخشی از کد یا دستور کامپیوتری است. دلیل استفاده از این عنصر Monospace شدن متن نیست؛ اگر فقط چنین ظاهری می‌خواستیم، می‌توانستیم آن را با CSS ایجاد کنیم.
اما وقتی با یک بلوک چندخطی کد سروکار داریم، معمولاً code به‌تنهایی کافی نیست.
pre چه تفاوتی با code دارد؟
عنصر pre برای متن ازپیش‌قالب‌بندی‌شده است؛ یعنی فاصله‌ها و شکست خطوط موجود در محتوای آن اهمیت دارند و باید حفظ شوند. برای بلوک‌های چندخطی کد معمولاً ترکیب pre و code را می‌بینیم: pre قالب و شکست خطوط را حفظ می‌کند و code مشخص می‌کند که محتوا کد است.
<pre><code><h1>آموزش HTML</h1>
<p>اولین پاراگراف صفحه</p></code></pre> در این مثال، هر دو عنصر وظیفه مستقلی دارند:
- code ← محتوای داخل آن کد کامپیوتری است.
- pre ← فاصله‌ها و شکست خطوط این محتوا باید حفظ شوند.
بنابراین این دو مترادف نیستند. pre حتی می‌تواند برای محتوایی غیر از کد استفاده شود، اگر حفظ دقیق فاصله‌ها و سطرها بخشی از خود محتوا باشد.
یک نکته عملی دیگر در نمایش HTML داخل نمونه کد وجود دارد: اگر بخواهید خود تگ‌هایی مثل <h1> را به‌صورت متن نشان دهید، نباید آن‌ها را به شکلی بنویسید که مرورگر به‌عنوان Markup واقعی تفسیرشان کند. در نمونه بالا به همین دلیل کاراکترهای < و > به‌صورت Character Reference نوشته شده‌اند.
kbd برای ورودی کاربر
عنصر kbd چیزی را مشخص می‌کند که کاربر باید وارد کند. رایج‌ترین مثال آن کلیدهای صفحه‌کلید است، اما تعریف آن فقط به کیبورد محدود نمی‌شود و می‌تواند انواع دیگر ورودی کاربر را نیز نمایش دهد.
مثلاً:
<p>
برای بازخوانی صفحه
<kbd>Ctrl</kbd> + <kbd>R</kbd>
را فشار دهید.
</p>
samp برای خروجی برنامه یا سیستم
در جهت مقابل kbd، عنصر samp برای نمونه خروجی یک برنامه یا سیستم کامپیوتری است.
مثلاً:
<p>
اگر عملیات موفق باشد، پیام
<samp>Installation complete</samp>
نمایش داده می‌شود.
</p>
var برای متغیر
عنصر var زمانی استفاده می‌شود که بخشی از متن نماینده یک متغیر باشد؛ مثلاً متغیر در یک عبارت برنامه‌نویسی یا ریاضی.
اگر بخواهیم این خانواده را در یک مثال قابل‌بررسی کنار هم ببینیم، فرض کنید فایل app.js این کد را دارد:
<pre><code>const projectName = "bitamooz-demo";
console.log(`Project: ${projectName}`);</code></pre> در الگوی زیر، file-name یک مقدار جایگزین‌شدنی است:
<p><code>node <var>file-name</var></code></p>
در محیطی که Node.js نصب است، اگر نام فایل app.js باشد، ورودی کاربر و خروجی حاصل از کد بالا چنین خواهد بود:
<pre><kbd>node app.js</kbd>
<samp>Project: bitamooz-demo</samp></pre> در این مثال هر عنصر یک سؤال متفاوت را پاسخ می‌دهد:
| عنصر | چه چیزی را مشخص می‌کند؟ |
|---|---|
| code | این محتوا کد کامپیوتری است |
| pre | فاصله‌ها و شکست خطوط باید حفظ شوند |
| kbd | این ورودی را کاربر وارد می‌کند |
| samp | این متن نمونه خروجی سیستم است |
| var | این قسمت یک مقدار متغیر یا جایگزین‌شدنی است |
پس برای متن‌های فنی هم بهتر است از ظاهر شروع نکنیم. به‌جای اینکه همه چیز را فقط به دلیل Monospace بودن داخل یک عنصر قرار دهیم، ابتدا مشخص می‌کنیم با کد، ورودی کاربر، خروجی سیستم، متغیر یا متنی با قالب‌بندی ثابت سروکار داریم و سپس عنصر متناسب با همان نقش را انتخاب می‌کنیم.
زیرنویس، بالانویس و عناصر متنی تخصصی
بعضی بخش‌های متن نه عنوان هستند، نه تأکید و نه کد؛ اما شیوه قرارگیری یا نوع آن‌ها بخشی از معنای محتواست. فرمول‌های شیمیایی، توان‌های ریاضی، مخفف‌ها، اصطلاحی که برای اولین بار تعریف می‌شود و تاریخ‌های قابل‌پردازش نمونه‌هایی از این حالت‌اند. HTML برای چنین محتواهایی عناصر تخصصی‌تری مانند sub، sup، abbr، dfn و time دارد.
sub و sup؛ وقتی پایین یا بالای خط بودن معنا دارد
عنصر sub برای Subscript و sup برای Superscript استفاده می‌شود. این عناصر زمانی مناسب‌اند که پایین یا بالا قرارگرفتن نوشته بخشی از یک قرارداد تایپوگرافیک معنادار باشد؛ نه صرفاً روشی برای کوچک‌کردن یا جابه‌جایی ظاهری متن.
یک نمونه ساده، فرمول شیمیایی آب است:
<p>فرمول شیمیایی آب H<sub>2</sub>O است.</p>
عدد ۲ صرفاً برای زیباتر شدن پایین‌تر قرار نگرفته است؛ جایگاه آن بخشی از شیوه استاندارد نوشتن فرمول شیمیایی است.
برای توان نیز می‌توان از sup استفاده کرد:
<p>مساحت مربع از رابطه x<sup>2</sup> به دست می‌آید.</p>
اگر فقط بخواهیم بخشی از نام یک برند، لوگو یا نوشته تزئینی را کمی بالاتر یا پایین‌تر ببریم، sub و sup انتخاب مناسبی نیستند؛ چنین تغییری به ظاهر مربوط است و باید با CSS کنترل شود.
برای عبارت‌های ریاضی پیچیده‌تر نیز نباید انتظار داشته باشیم sub و sup جای یک زبان کامل نشانه‌گذاری ریاضی را بگیرند. در ساختارهایی که روابط ریاضی پیچیده، کسرها یا ترکیب هم‌زمان زیرنویس و بالانویس اهمیت دارند، MathML می‌تواند گزینه مناسب‌تری باشد.
abbr برای مخفف‌ها و سرواژه‌ها
وقتی در متن از یک مخفف یا سرواژه استفاده می‌کنیم، عنصر abbr می‌تواند آن را به‌عنوان Abbreviation مشخص کند.
برای مثال:
<p>
زبان <abbr title="HyperText Markup Language">HTML</abbr>
برای ساختاردهی محتوای صفحات وب استفاده می‌شود.
</p>
در اینجا مقدار title شکل کامل مخفف را در اختیار User Agent قرار می‌دهد. اگر title روی abbr استفاده شود، مقدار آن باید بسط کامل همان مخفف باشد. استفاده از abbr برای همه مخفف‌های یک صفحه اجباری نیست؛ این عنصر زمانی ارزش بیشتری دارد که بخواهیم مخفف را از نظر معنایی مشخص کنیم یا توضیح کامل آن را همراهش قرار دهیم.
یک نکته عملی هم وجود دارد: نباید اطلاعات ضروری را فقط داخل title پنهان کنیم و فرض کنیم همه کاربران حتماً آن را خواهند دید. برای اصطلاحی که احتمالاً برای مخاطب ناآشناست، نوشتن شکل کامل آن در خود متن ــ به‌ویژه در اولین استفاده ــ معمولاً روشن‌تر است.
برای جزئیات بیشتر درباره این عنصر، مقاله تگ abbr در HTML در بیت‌آموز به‌صورت اختصاصی همین موضوع را پوشش می‌دهد.
dfn وقتی یک اصطلاح را تعریف می‌کنیم
عنصر dfn برای هر واژه تخصصی به‌کار نمی‌رود؛ نقش آن مشخص کردن نمونه‌ای از اصطلاح است که همان‌جا در حال تعریف شدن است. تعریف اصطلاح نیز باید در همان پاراگراف یا بخش مرتبط در دسترس باشد.
مثلاً:
<p>
<dfn>عنصر HTML</dfn>
بخشی از سند است که می‌تواند با یک تگ آغازین،
محتوا و در بعضی موارد یک تگ پایانی ساخته شود.
</p>
اگر چند پاراگراف بعد دوباره عبارت «عنصر HTML» را به کار ببریم، لازم نیست هر بار آن را داخل dfn قرار دهیم؛ این عنصر برای محل تعریف اصطلاح است، نه تمام تکرارهای آن.
time برای تاریخ و زمان قابل‌تشخیص
گاهی خود متن برای انسان قابل‌فهم است، اما می‌خواهیم شکل استاندارد و قابل‌پردازش آن نیز در Markup وجود داشته باشد. عنصر time برای تاریخ، زمان، بازه زمانی و برخی مقادیر مرتبط طراحی شده و اتریبیوت datetime می‌تواند مقدار Machine-readable را نگه دارد.
مثلاً:
<p>
جلسه بعدی در
<time datetime="2026-09-15">۲۴ شهریور ۱۴۰۵</time>
برگزار می‌شود.
</p>
کاربر تاریخ فارسی را می‌بیند، اما مقدار datetime یک نمایش استاندارد و قابل‌پردازش از همان تاریخ را در Markup نگه می‌دارد.
این عناصر کاربردهای متفاوتی دارند، اما منطق انتخاب همه آن‌ها یکی است: ابتدا ببینید در متن چه معنایی وجود دارد که باید مشخص شود، سپس عنصری را انتخاب کنید که دقیقاً همان معنا را بیان می‌کند. اگر هدف فقط تغییر اندازه، موقعیت یا ظاهر نوشته است، معمولاً به عنصر معنایی تازه‌ای نیاز ندارید و CSS ابزار مناسب‌تری است.
متن فارسی و ترکیب فارسی و انگلیسی در HTML
در محتوای فارسی معمولاً فقط با متن راست‌به‌چپ سروکار نداریم. نام کاربری، آدرس وب، دستور، عدد، نام محصول یا عبارت انگلیسی می‌تواند وسط یک جمله فارسی قرار بگیرد. مرورگر برای نمایش چنین محتوایی از الگوریتم دوجهته Unicode یا BiDi استفاده می‌کند و در بیشتر حالت‌ها ترتیب متن را بدون دخالت ما درست تشخیص می‌دهد. مشکل بیشتر زمانی دیده می‌شود که یک قطعه با جهت متفاوت کنار عددها، دونقطه، خط تیره یا سایر کاراکترهای خنثی قرار بگیرد.
مثلاً تصور کنید نام کاربران از پایگاه داده وارد یک صفحه فارسی می‌شود:
<p dir="rtl">
کاربر ali_2026 مبلغ 450,000 تومان پرداخت کرد.
</p>
در نمونه‌ای ساده ممکن است همه‌چیز درست دیده شود؛ اما اگر مقدار واردشده از قبل برای ما قابل پیش‌بینی نباشد و بعضی کاربران نام فارسی و بعضی نام انگلیسی داشته باشند، جهت آن مقدار می‌تواند روی نشانه‌ها و متن اطرافش اثر بگذارد. اینجا یکی از کاربردهای مهم bdi مشخص می‌شود.
bdi؛ جدا کردن جهت یک قطعه متن از محیط اطراف
نام bdi از Bidirectional Isolation می‌آید. این عنصر به مرورگر می‌گوید محتوای داخل آن را از نظر محاسبات جهت متن، مستقل از محیط اطراف در نظر بگیرد. WHATWG نیز bdi را مشخصاً برای ایزوله‌کردن یک بخش از متن دوجهته تعریف می‌کند و یکی از کاربردهای اصلی آن را محتوای تولیدشده توسط کاربر با جهت نامشخص می‌داند.
فرض کنید همین قالب برای کاربران مختلف استفاده می‌شود:
<ul dir="rtl">
<li><bdi>علی</bdi>: 12 دیدگاه</li>
<li><bdi>reza_82</bdi>: 8 دیدگاه</li>
<li><bdi>SarahDev</bdi>: 5 دیدگاه</li>
</ul>
وقتی برای bdi مقدار dir مشخص نکنیم، جهت آن به‌صورت خودکار از محتوایش تشخیص داده می‌شود؛ رفتار پیش‌فرض این عنصر مانند dir=”auto” است.
پس bdi برای هر واژه انگلیسی داخل متن فارسی ضروری نیست. اگر یک عبارت ثابت و جهت آن از قبل معلوم است، معمولاً می‌توان جهت را روی همان عنصر معنایی موجود مشخص کرد. ارزش اصلی bdi جایی بیشتر می‌شود که محتوای واردشده جهت نامعلوم داشته باشد یا احتمال اثرگذاری آن بر متن اطراف وجود داشته باشد.
برای بررسی دقیق‌تر این مسئله، مقاله تگ bdi در HTML در بیت‌آموز به‌طور اختصاصی کاربرد آن در متن‌های دوجهته را پوشش می‌دهد.
bdo؛ وقتی عمداً می‌خواهیم جهت متن را Override کنیم
bdo کار متفاوت و بسیار صریح‌تری انجام می‌دهد. نام آن از Bidirectional Override گرفته شده است و برای زمانی است که می‌خواهیم الگوریتم عادی دوجهته مرورگر را کنار بزنیم و جهت نمایش محتوای داخل عنصر را به‌اجبار تعیین کنیم.
برای bdo باید dir را مشخص کنیم:
<bdo dir="rtl">Some text</bdo>
یا:
<bdo dir="ltr">متن نمونه</bdo>
در bdo مقادیر rtl و ltr جهت Override را تعیین می‌کنند و مقدار dir=”auto” برای این عنصر مجاز نیست.
این عنصر را نباید با راه معمول ساخت یک صفحه فارسی اشتباه بگیریم. اگر هدف فقط این است که سند یا یک بخش فارسی جهت راست‌به‌چپ داشته باشد، معمولاً از dir=”rtl” روی عنصر مناسب استفاده می‌کنیم؛ bdo زمانی معنا دارد که عمداً بخواهیم رفتار معمول الگوریتم BiDi را Override کنیم.
به همین دلیل تفاوت اصلی این دو عنصر چنین است:
| عنصر | کاری که انجام می‌دهد | نمونه موقعیت |
|---|---|---|
| bdi | جهت یک قطعه را از محیط اطراف ایزوله می‌کند | نام کاربری یا داده پویا با جهت نامعلوم |
| bdo | جهت نمایش را به‌صورت صریح Override می‌کند | مورد خاصی که عمداً باید ترتیب جهت متن تحمیل شود |
| dir | جهت پایه یک عنصر را مشخص می‌کند | بخش فارسی rtl یا عبارت انگلیسی ltr |
اگر به جزئیات Override کردن جهت نیاز دارید، صفحه تگ bdo در HTML عمق این موضوع را جداگانه پوشش می‌دهد.
آیا برای هر عبارت انگلیسی وسط متن فارسی به bdi نیاز داریم؟
خیر. وجود یک واژه انگلیسی در یک پاراگراف فارسی به‌تنهایی دلیل استفاده از bdi نیست. مرورگرها الگوریتم Unicode BiDi را برای همین ترکیب‌های راست‌به‌چپ و چپ‌به‌راست پیاده‌سازی می‌کنند و معمولاً از پس حالت‌های عادی برمی‌آیند.
قبل از اضافه‌کردن Markup جهت متن، بهتر است مشخص کنیم مشکل واقعی چیست:
- اگر جهت کل بخش مشخص است، dir=”rtl” یا dir=”ltr” روی عنصر مناسب مطرح می‌شود.
- اگر جهت محتوا از قبل معلوم نیست، dir=”auto” می‌تواند جهت پایه را از محتوا تشخیص دهد.
- اگر یک مقدار پویا باید از متن اطراف ایزوله شود، bdi گزینه مناسبی است.
- اگر عمداً لازم است جهت معمول متن Override شود، bdo برای همین کار وجود دارد.
برای محتوای فارسی این تفاوت کاربردی است؛ چون اعداد، نام‌های انگلیسی، نام کاربری و داده‌های پویا مرتب با متن RTL ترکیب می‌شوند. هدف این نیست که به هر متن انگلیسی یک تگ جهت اضافه کنیم؛ هدف این است که فقط وقتی جهت محتوا بخشی از مسئله است، Markup مناسب همان مسئله را انتخاب کنیم.
یک متن واقعی را قدم‌به‌قدم در HTML ساختاربندی کنیم
تا اینجا عناصر متنی را جداگانه بررسی کردیم؛ اما در یک صفحه واقعی معمولاً چند نوع محتوا کنار هم قرار می‌گیرند. برای انتخاب درست تگ‌ها، بهتر است ابتدا نقش هر قسمت از نوشته را مشخص کنیم و بعد سراغ Markup برویم.
فرض کنید متن خام زیر را برای یک صفحه آموزشی داریم:
راهنمای شروع HTML
HTML زبان نشانه‌گذاری صفحات وب است. قبل از شروع، ساختار سند را درست بسازید.
اولین عنوان صفحه
برای ساخت عنوان اصلی از h1 استفاده می‌کنیم. انتخاب h1 فقط برای بزرگ شدن متن نیست.
در این مثال فرضی، مدرس گفت: اول ساختار محتوا را مشخص کنید، بعد به ظاهر فکر کنید.
برای نمایش عبارت console.log("Hello") در متن، آن را به‌عنوان کد مشخص می‌کنیم.
در عبارت H2O عدد 2 زیرنویس است و در x2 عدد 2 به‌صورت توان نوشته می‌شود.
اگر کاربر عبارت HTML را جست‌وجو کرده باشد، ممکن است همان عبارت در نتیجه برجسته شود.
قبل از نوشتن HTML می‌توان نقش بخش‌ها را این‌طور تشخیص داد:
- «راهنمای شروع HTML» ← عنوان اصلی؛
- جمله معرفی ← پاراگراف؛
- هشدار «قبل از شروع…» ← محتوای دارای اهمیت؛
- «اولین عنوان صفحه» ← عنوان یک زیربخش؛
- h1 و console.log(“Hello”) ← کد؛
- «فقط» ← تأکید در جمله؛
- نقل‌قول فرضی مدرس ← نقل‌قول درون‌خطی؛
- عددهای فرمول ← زیرنویس و بالانویس؛
- عبارت پیدا‌شده در جست‌وجو ← محتوای مرتبط در زمینه فعلی.
حالا می‌توان همان نوشته را بر اساس این نقش‌ها Markup کرد:
<article>
<h1>راهنمای شروع HTML</h1>
<p>
HTML زبان نشانه‌گذاری صفحات وب است.
<strong>قبل از شروع، ساختار سند را درست بسازید.</strong>
</p>
<h2>اولین عنوان صفحه</h2>
<p>
برای ساخت عنوان اصلی از <code>h1</code> استفاده می‌کنیم.
انتخاب <code>h1</code> <em>فقط</em> برای بزرگ شدن متن نیست.
</p>
<p>
در این مثال فرضی، مدرس گفت:
<q>اول ساختار محتوا را مشخص کنید، بعد به ظاهر فکر کنید.</q>
</p>
<p>
برای نمایش عبارت
<code>console.log("Hello")</code>
در متن، آن را به‌عنوان کد مشخص می‌کنیم.
</p>
<p>
در عبارت H<sub>2</sub>O عدد 2 زیرنویس است
و در x<sup>2</sup> عدد 2 به‌صورت توان نوشته می‌شود.
</p>
<p>
اگر کاربر عبارت <mark>HTML</mark> را جست‌وجو کرده باشد،
ممکن است همان عبارت در نتیجه برجسته شود.
</p>
</article>
نکته اصلی این مثال تعداد تگ‌ها نیست؛ دلیل انتخاب هرکدام است.
h1 و h2 رابطه عنوان‌ها را مشخص می‌کنند. p جمله‌هایی را که یک واحد فکری می‌سازند داخل پاراگراف قرار می‌دهد. strong به هشدار اهمیت می‌دهد و em تأکید جمله را روی «فقط» قرار می‌دهد. q نشان می‌دهد جمله واقعاً نقل‌قول است، code قطعه کد را مشخص می‌کند و sub و sup زمانی استفاده شده‌اند که پایین یا بالا قرار گرفتن عدد بخشی از معنای نوشته است. mark نیز به این دلیل انتخاب شده که عبارت HTML در زمینه فرضی جست‌وجوی کاربر مرتبط شده است؛ نه فقط برای اینکه رنگ پس‌زمینه داشته باشد.
حالا تصور کنید بخواهیم همین خروجی را از نظر ظاهری تغییر دهیم؛ مثلاً عنوان را کوچک‌تر، هشدار را قرمز یا کد را داخل کادر نمایش دهیم. برای این تغییرها لازم نیست عناصر HTML را عوض کنیم. Markup باید همچنان نقش محتوا را بیان کند و CSS ظاهر آن را کنترل کند.
این یک آزمون ساده برای بررسی Markup خودتان است: اگر تمام CSS صفحه حذف شود، آیا از روی HTML هنوز می‌توان فهمید کدام بخش عنوان، پاراگراف، هشدار، تأکید، نقل‌قول و کد است؟ اگر پاسخ مثبت باشد، احتمالاً ساختار متنی صفحه بر اساس معنا طراحی شده است، نه صرفاً ظاهر.
اشتباهات رایج در کار با متن HTML
بیشتر خطاهای این حوزه از یک الگو می‌آیند: انتخاب عنصر بر اساس ظاهر پیش‌فرض، نه نقش محتوا. جدول زیر مهم‌ترین خطاهایی را که در بخش‌های قبل دیدیم یک‌جا جمع می‌کند تا هنگام کدنویسی سریع‌تر بررسی‌شان کنید.
| اشتباه | چرا مشکل‌ساز است؟ | راه درست |
|---|---|---|
| استفاده از چند br برای فاصله یا ساخت پاراگراف | br فقط شکست خط ایجاد می‌کند و مرز یک پاراگراف تازه را نشان نمی‌دهد. | برای واحد فکری جدید از p و برای فاصله ظاهری از CSS استفاده کنید. |
| انتخاب h1 تا h6 بر اساس اندازه فونت | سطح Heading باید سلسله‌مراتب عنوان‌ها را بیان کند، نه اندازه ظاهری آن‌ها را. | رتبه عنوان را از ساختار محتوا انتخاب کنید و اندازه را با CSS تغییر دهید. |
| استفاده از strong یا em فقط برای Bold و Italic | strong اهمیت و em تأکید در بیان اضافه می‌کند؛ انتخاب صرفاً ظاهری معنای نادرست می‌سازد. | اگر فقط ظاهر مهم است از CSS استفاده کنید؛ strong و em را برای معنای واقعی‌شان نگه دارید. |
| استفاده از sub و sup برای جابه‌جایی تزئینی متن | این عناصر برای قراردادهای معناداری مثل فرمول و توان هستند. | برای جابه‌جایی صرفاً بصری از CSS استفاده کنید. |
| استفاده از span وقتی عنصر دقیق‌تری وجود دارد | span به‌خودی‌خود معنای خاصی ندارد. | اگر نقش مشخصی مثل اهمیت، تأکید یا کد دارید، عنصر معنایی متناسب را انتخاب کنید. |
| حل رنگ، فونت، اندازه یا چیدمان با HTML | این تصمیم‌ها به Presentation مربوط‌اند و مسئولیت اصلی HTML نیستند. | ساختار و معنا را با HTML و ظاهر را با CSS کنترل کنید. |
جمع‌بندی؛ متن را بر اساس نقش محتوا ساختاربندی کنید
ساختاردهی درست متن در HTML با این سؤال شروع نمی‌شود که «کدام تگ ظاهر موردنظر من را ایجاد می‌کند؟». سؤال بهتر این است که هر قسمت از محتوا چه نقشی دارد و چه معنایی باید از Markup آن قابل تشخیص باشد.
عنوان‌ها سلسله‌مراتب نوشته را می‌سازند، پاراگراف‌ها واحدهای فکری را جدا می‌کنند و عناصری مثل strong، em، q، code، abbr و sub/sup نقش‌های دقیق‌تری را داخل متن بیان می‌کنند. وقتی نقش هر قسمت روشن باشد، انتخاب عنصر مناسب ساده‌تر می‌شود و ظاهر نیز می‌تواند مستقل از آن با CSS کنترل شود.
این صفحه نقشه تصمیم‌گیری برای محتوای متنی است؛ آموزش عمیق هر عنصر در صفحه اختصاصی خودش ادامه پیدا می‌کند. برای ادامه یادگیری ساختاریافته HTML نیز می‌توانید مسیر دوره مستر HTML بیت‌آموز را دنبال کنید.
سوالات متداول
خیر. همه عناصری که برای ساختاردهی یا معنادهی به متن استفاده می‌شوند درون‌خطی نیستند. برای مثال، عنوان‌های h1 تا h6، پاراگراف p و blockquote معمولاً بخش‌های مستقلی از محتوا می‌سازند، در حالی که عناصری مانند strong، em و code می‌توانند داخل جریان یک جمله قرار بگیرند. بنابراین بهتر است عناصر متنی را فقط با تقسیم‌بندی «Inline و Block» یاد نگیریم و بیشتر به نقش و قواعد محتوایی هر عنصر توجه کنیم.
خیر. p فقط زمانی مناسب است که محتوا واقعاً یک پاراگراف باشد. عنوان‌ها باید با Heading مناسب، نقل‌قول مستقل با blockquote و بخش‌های دارای نقش مشخص با عنصر مربوط به خودشان نشانه‌گذاری شوند. حتی بعضی متن‌ها می‌توانند مستقیماً بخشی از عناصر دیگر باشند. پس نباید صرفاً چون چیزی «متن» است، آن را داخل p قرار دهیم.
بله، اما فقط وقتی ساختار حاصل با قواعد آن عناصر سازگار باشد. برای مثال، قرار دادن strong، em یا code داخل یک پاراگراف معمولاً طبیعی است:
<p>
قبل از اجرا <strong>نسخه پشتیبان تهیه کنید</strong>
و دستور <code>npm install</code> را وارد کنید.
</p>
اما نمی‌توان هر عنصری را به دلخواه داخل عنصر دیگری قرار داد. وقتی درباره یک ترکیب مطمئن نیستید، Content Model عناصر را بررسی کنید و Markup نهایی را با یک HTML Validator معتبر بسنجید.
اگر آن بخش معنای مستقلی ندارد، لازم نیست حتماً برای آن یک تگ معنایی پیدا کنید. متن ساده می‌تواند همان‌طور داخل عنصر والد باقی بماند. اگر فقط برای CSS، JavaScript، تعیین زبان یا جهت متن به یک Wrapper نیاز دارید و عنصر دقیق‌تری وجود ندارد، span می‌تواند گزینه مناسبی باشد. مهم این است که صرفاً برای داشتن یک تگ بیشتر، معنای ساختگی به محتوا اضافه نکنیم.
استفاده درست از HTML معنایی به ساختار روشن‌تر محتوا کمک می‌کند، اما نباید آن را یک ترفند مستقیم برای افزایش رتبه در نظر گرفت. انتخاب strong، em، Heading یا سایر عناصر باید ابتدا بر اساس معنای واقعی محتوا و نیاز کاربر انجام شود، نه برای تکرار کلمه کلیدی یا گرفتن امتیاز سئو. Markup دقیق می‌تواند فهم ساختار صفحه را برای کاربران، ابزارهای کمکی و سیستم‌های پردازش محتوا آسان‌تر کند؛ اما هیچ تگ متنی به‌تنهایی تضمین‌کننده رتبه بهتر نیست.
هنوز دیدگاهی ثبت نشده است.