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

فصل چهارم: عناصر متنی بلاکی

در توسعه وب مدرن، ساختاردهی صحیح محتوا یکی از اصلی‌ترین اصول برای دسترسی‌پذیری، خوانایی، سئو و مدیریت محتوای معنایی است. این فصل به بررسی جامع و تخصصی عناصر متنی بلاکی (Block-level Text Elements) در HTML5 می‌پردازد که به طور خاص برای نمایش پاراگراف، نقل‌قول، کدهای برنامه‌نویسی، فهرست‌های ترتیبی و توضیحی طراحی شده‌اند. این عناصر نقش محوری در ایجاد ساختار محتوایی معنایی، تمایز بین نوع محتوا و بهبود تجربه کاربری دارند.

4.1 پاراگراف‌ها و عناصر جداکننده: بنیان محتوای نوشتاری

4.1.1 <p>: عنصر پاراگراف

این عنصر پایه‌ای برای نمایش محتوای نوشتاری در صفحات وب است.
هر <p> باید به صورت منطقی و معنادار بین بخش‌های مختلف قرار گیرد.
از استفاده از <p> برای فاصله‌گذاری (مثلاً با margin در CSS) خودداری کنید، این کار به "استایل‌دهی غیرمعنایی" منجر می‌شود.

<p>در این متن، به معرفی اولین مفاهیم HTML پرداخته می‌شود. این پاراگراف به صورت منطقی و با ساختار معنایی نوشته شده است.</p>

مرورگرها و ابزارهای دسترسی (مانند Screen Readers) از <p> برای تشخیص شروع و پایان محتوا استفاده می‌کنند. عدم استفاده از <p> در متن‌های نوشتاری به معنای از دست دادن ساختار معنایی است.

4.1.2 <hr>: خط جداکننده (Horizontal Rule)

این عنصر یک خط افقی بین بخش‌های محتوایی ایجاد می‌کند.
بدون معنا non-semantic، اما از نظر انتزاعی برای تقسیم محتوا استفاده می‌شود.
از آنجا که <hr> فقط یک تفکیک بصری است، باید با CSS (مثلاً border, box-shadow) یا با استفاده از <section> یا <div> با کلاس‌های مرتبط به جای استفاده از <hr> برای تقسیم محتوا، بهبود داده شود.

<section>
 <h2>مقدمه</h2>
 <p>در این بخش مفاهیم اولیه معرفی می‌شوند.</p>
</section>
  
<hr>
  
<section>
 <h2>بخش دوم</h2>
 <p>این بخش بعد از خط جداکننده قرار گرفته است.</p>
</section>

اگر از <hr> برای تقسیم بخش‌های محتوایی استفاده می‌شود، باید از aria-hidden="true" یا role="presentation" استفاده شود مگر اینکه قصد داشته باشید این خط را به عنوان جزء معنایی (مثلاً تغییر موضوع) تفسیر کنید.
بهتر است از <section> با role="region" یا <div class="divider"> + CSS استفاده کنید تا ساختار معنایی حفظ شود.

4.2 نمایش نقل‌قول‌ها: ارجاع معنایی به منابع

4.2.1 <blockquote cite="">: نقل‌قول بلند Blockquote

برای نمایش نقل‌قول‌های طولانی (معمولاً بیش از یک پاراگراف) استفاده می‌شود.
ویژگی cite امکان ذکر منبع نقل‌قول (آدرس URL) را فراهم می‌کند.
این عنصر به صورت پیش‌فرض در مرورگر به صورت ایندنت (فرعی) نمایش داده می‌شود.

<blockquote cite="https://example.com/article">
 <p>«HTML5 یک گام بزرگ به سمت ساختارهای معنایی در وب است.»</p>
 <footer>- محمد احمدی، وب‌نویسنده</footer>
</blockquote>

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

4.2.2 <q>: نقل‌قول کوتاه Inline Quotation

برای نمایش نقل‌قول‌های کوتاه داخل یک پاراگراف استفاده می‌شود.
مرورگر به صورت خودکار علامت گفتار quotation marks را اضافه می‌کند (مثلاً « »).
از ویژگی cite برای مشخص کردن منبع استفاده می‌شود.

<p>در مقاله‌ای آمده است: <q cite="https://example.com/quote">استفاده از عناصر معنایی، کلیدی برای دسترسی‌پذیری است.</q></p>

<blockquote> برای نقل‌قول‌های طولانی، بلوکی، قابل تفکیک. <q> برای نقل‌قول‌های کوتاه، خطی، درون متن.

4.3 نمایش متون فرم‌دار و کدنویسی: انتقال دقیق محتوای فنی

4.3.1 <pre>: متن پیش‌فرم‌بندی‌شده

این عنصر فضای خالی، فاصله‌ها و اعشار را حفظ می‌کند.
به طور معمول برای نمایش کدهای برنامه‌نویسی، خروجی سیستم، فایل‌های متنی استفاده می‌شود.
اگر کد نمایش داده شود، بهتر است درون <code> قرار گیرد تا معنای فنی حفظ شود.

<pre><code>
function hello() {
 console.log("سلام دنیا!");
 }
</code></pre>

استفاده از <pre> با <code> برای نمایش کدهای برنامه‌نویسی، بهترین عملکرد را دارد.

4.3.2 <code>: متن کد برنامه‌نویسی

برای نمایش کدهای برنامه‌نویسی، دستورات سیستم، فایل‌های تنظیمات استفاده می‌شود.
این عنصر فقط برای کدهای فنی است نه برای متن‌های معمولی.
از class برای تعیین نوع زبان (مثلاً language-js) استفاده می‌شود.

<p>دستور زیر در JavaScript نوشته شده است:</p>
<code>console.log("Hello World");</code>

برای بهبود خوانایی، از کتابخانه‌هایی مانند Prism.js یا Highlight.js استفاده کنید تا کد به صورت هایلایت شده نمایش داده شود.

4.3.3 <samp>: خروجی نمونه Sample Output

برای نمایش خروجی نمونه از برنامه‌های کامپیوتری استفاده می‌شود.
مثلاً خروجی یک دستور ls، echo یا npm run build.

<samp>$ npm install react</samp>

<p>خروجی دستور زیر به صورت زیر است:</p>
<samp>node app.js
Server running on port 3000</samp>

4.3.4 <kbd>: ورودی کیبورد Keyboard Input

برای نمایش دستورات کیبورد (مثلاً Ctrl+C، Alt+Tab) استفاده می‌شود.
معمولاً با فونت متمایز (مثلاً monospace) نمایش داده می‌شود.

<p>برای ذخیره فایل، کلید <kbd>Ctrl</kbd>+<kbd>S</kbd> را فشار دهید.</p>

این عنصر به Screen Readers کمک می‌کند تا کاربران نابینا بتوانند ورودی کیبورد را تشخیص دهند.

4.3.5 <var>: متغیر Variable

برای نمایش متغیرهای برنامه‌نویسی یا متغیرهای ریاضی استفاده می‌شود.
معمولاً با فونت ایتالیک نمایش داده می‌شود.

<p>در فرمول زیر، <var>x</var> نشان‌دهنده متغیر است:</p>
<math>
 <mi>x</mi>
 <mo>=</mo>
 <mn>5</mn>
</math>

در متن‌های علمی و ریاضی <var> با <math> می‌تواند به صورت مکمل استفاده شود.

4.4 فهرست‌های ترتیبی و توضیحی: سازمان‌دهی محتوا با سلسله‌مراتب

4.4.1 فهرست‌های ترتیبی (<ol>) و توضیحی (<ul>)

این عناصر برای نمایش لیست‌های متوالی (ترتیبی) یا لیست‌های غیرمتوالی (توضیحی) طراحی شده‌اند.
هر لیست شامل یک یا چند <li> است.

start	شروع عدد فهرست ترتیبی از عدد مشخص (مثلاً start="3")
reversed	معکوس کردن ترتیب فهرست (reversed="reversed")
type	تعیین نوع علامت (در <ol>): 1 - A - a - I - i

<ol start="5" reversed>
 <!-- لیست با شروع از عدد ۵ و به صورت نزولی (معکوس) -->
 <li>مراحل اجرای پروژه</li>
</ol>
   
<ul type="square">
 <!-- لیست با علامت‌های مربع (•) -->
 <li>موارد مورد نیاز</li>
</ul>
   
<ol type="1">  <!-- اعداد: 1, 2, 3, ... -->
<ol type="A">  <!-- حروف بزرگ: A, B, C, ... -->
<ol type="a">  <!-- حروف کوچک: a, b, c, ... -->
<ol type="I">  <!-- عدد رومی بزرگ: I, II, III, ... -->
<ol type="i">  <!-- عدد رومی کوچک: i, ii, iii, ... -->

استفاده از reversed برای فهرست‌های معکوس (مثلاً فهرست اقدامات قبلی) می‌تواند به ساختار محتوایی کمک کند.

4.4.2 فهرست توضیحی (<dl> - <dt> - <dd>)

این ساختار برای نمایش زوج‌های واژه و تعریف (Definition List) استفاده می‌شود.

<dl> تعریف لیست
<dt> عنوان واژه
<dd> تعریف یا توضیح

<dl>
 <dt>HTML</dt>
 <dd>زبان مارک‌آپ برای ساخت صفحات وب.</dd>
  
 <dt>CSS</dt>
 <dd>زبان استایل‌دهی برای نمایش محتوا.</dd>
  
 <dt>JavaScript</dt>
 <dd>زبان برنامه‌نویسی برای تعامل با صفحه.</dd>
</dl>

این ساختار به موتورهای جستجو و ابزارهای دسترسی کمک می‌کند تا مفهوم واژه‌ها و تعاریفشان را به درستی درک کنند. فهرست توضیحی به خوبی با Semantic Web و OWL (Web Ontology Language) هم‌خوانی دارد و برای محتوای آموزشی، دانشگاهی و فنی بسیار مناسب است.
یک صفحه وب با محتوای معنایی، فقط با زیبایی ظاهری نیست بلکه با ساختار صحیح، استفاده از عناصر معنایی، و تمایز بین نوع محتوا ساخته می‌شود. این فصل پایه‌ای برای نوشتن محتوای معتبر، دسترسی‌پذیر و متناسب با استانداردهای جهانی است.

بعدی قبلی