تگ p و تگ br

همان طور که در آموزشهای قبل گفته شد زبان html وجود Enter و فاصله خالی ( space ) را در متن تشخیص نمی دهد و مرورگر آنها را نادیده می گیرد و با تغییر عرض پنجره تعداد سطرها تغییر می کند.
یکی از بهترین روش های جلوگیری از این مشکل استفاده از تگ p و تگ br است، ایجاد پاراگراف توسط  ( <p> </p> ) و یا سطر جدید به وسیله ( <br/> ) ، که در زیر به آنها خواهیم پرداخت.

تگ <p>:

متن در html هم می تواند به صورت ساده مورد استفاده قرار گیرد و هم بین تگ های html؛ کدهای زیر متن کوتاهی را بدون استفاده از تگی خاص در صفحه به نمایش در می آورند.
در این حالت شما نمی توانید با دستورات CSS تغییری در ظاهر متن خود ایجاد کنید.

<!DOCTYPE HTML>
<html dir="rtl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ویترین وردپرس | متن بدون فرمت بندی</title>
</head>
<body>
متن بدون فرمت بندی
<!-- http://localhost/vitrinhack -->
</body>
</html>

در htmlتگ p باعث فرمت بندی و ایجاد یک پاراگراف در صفحه مرورگر می شود. در صورت ایجاد یک پاراگراف با تگ P ، پاراگراف بعدی به سطر بعد می رود.
ویژگی های پاراگراف <p> را نیز می توان با کدهای CSS به دلخواه تغییر داد.
مثال زیر متنی در یک پاراگراف است.

<!DOCTYPE HTML>
<html dir="rtl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ویترین وردپرس | متن در یک پاراگراف</title>
</head>
<body>
<p>
متن در یک پاراگراف
</p>
<!-- http://localhost/vitrinhack -->
</body>
</html>

تگ br:

از برچسب br برای ایجاد سطر جدید استفاده می شود. این تگ دقیقا مانند زدن دکمه اینتر در نرم افزار word در ویندوز عمل می کند.
تفاوت این تگ با تگ p در این است که تگ br فقط یک سطر جدید ایجاد می کند ولی تگ p باعث ایجاد یک پاراگراف در سطر جدید می شود.
نمونه زیر مثالی از روش استفاده ی این دو برچسب را نشان می دهد:

<!DOCTYPE HTML>
<html dir="rtl">
 <head> 
 <title> ایجاد سطر جدید</title>
 </head>
 <body>
<p>
متن در یک پاراگراف
</p>
<p>
متن در پاراگراف جدید
</p>
متن در یک سطر بدون تگی خاص <br/> متن در سطر جدید

<!-- http://localhost/vitrinhack -->
</body>
</html>