اچ تی ام ال (HTML)برنامه نویسی طراحی سایت فرانت اند (Front-end)

تگ p در HTML | بررسی تگ p و تگ br

۰ 44 زمان مطالعه یک دقیقه

فهرست مطالب

معرفی تگ p

به جرات می توان گفت که بیشترین عاملی که سبب جذب مخاطب اینترنتی و افزایش بازدید سایت می شود، محتوای درون آن است. در این پست از بلاگ ویتکس به معرفی تگ p (تگ پاراگراف) به عنوان یک تگ بسیار کاربردی جهت قراردادن محتوا که همان متن ها و پاراگراف های گوناگون در سند HTML هستند، می پردازیم. پس تا انتهای این آموزش همراه ما باشید …

تگ p چیست؟

تگ p یک تگ Block-Level است که جهت قراردادن متن ها و پاراگراف های گوناگون از آن استفاده می شود. این تگ با تگِ بازِ <p> شروع و با تگِ بستهِ ی </p> پایان می یابد. بنابراین ساختار دستوری تگ پاراگراف به صورت زیر است:

مثال: استفاده از تگ p در برنامه نویسی HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML p tag</title>
 </head>
 <body>
    <h1>About VeeTechs</h1>
    <p>
        VeeTechs is a Web application development and Mobile app development
        company in Islamic Republic of Iran offering professional services
        all over the world.
    </p>
    <p>For learning HTML5 and CSS3 visit our blog!</p>
 </body>
</html>

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

<!DOCTYPE html>

<head>

</head>

<body>

<h1>About VeeTechs</h1>

<p>

VeeTechs is a Web application development and Mobile app development

company in Islamic Republic of Iran offering professional services

all over the world.

</p>

<p>For learning HTML5 and CSS3 visit our blog!</p>

</body>

</html>

نمایش خروجی!

تنظیمات پیشفرض CSS

بیشتر مرورگرهای وب به صورت پیشفرض مقداری فضا از بالا (margin-top) و پایین (margin-bottom) به تگ p اضافه می کنند و آن را به صورت زیر نمایش می دهند:

p {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
}

p {

display: block;

margin-top: ۱em;

margin-bottom: ۱em;

margin-left: ۰;

margin-right: ۰;

}

این تنظیمات پیشفرض با اِعمال CSS از سوی برنامه نویس وب قابل تغییر هستند.

از این تگ برای قراردادن فاصله میان دو پاراگراف استفاده نکنید؛ چون در غیر این صورت این تگ هیچ محتوایی نخواهد داشت و ممکن است تکنولوژی های screen-reading هنگام درک محتوای صفحه دچار مشکلات خاصی شوند.

خط شکستگی (line break) در متن HTML

می توانید از تگ br برای ایجاد شکستگی یا فضای خالی میان جملات یک پاراگراف استفاده کنید. به نوعی می توان نقش تگ br را به نقش دکمه Enter (خط بعدی) در سند HTML تشبیه نمود.

مثال: استفاده از خط شکستگی (line break) در متن HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>br tag in paragraph HTML</title>
 </head>
 <body>
    <p>
        Hypertext Markup Language is the standard markup language for documents designed to be displayed in a web
        browser.
        <br>
        It can be assisted by technologies such as Cascading Style Sheets and scripting languages such as
        JavaScript.
    </p>
 </body>
</html>

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

<!DOCTYPE html>

<head>

<title>br tag in paragraph HTML</title>

</head>

<body>

<p>

Hypertext Markup Language is the standard markup language for documents designed to be displayed in a web

browser.

<br>

It can be assisted by technologies such as Cascading Style Sheets and scripting languages such as

JavaScript.

</p>

</body>

</html>

نمایش خروجی!

صفت align

از این صفت برای چیدمان یک متن (راستچین ، وسطچین و چپ چین) استفاده می شود.

استفاده از صفت align در HTML5 غیرمجاز بوده و پشتیبانی نمی شود.

مثال: صفت align در HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>HTML 4.01 tag p with align attribute</title>
 </head>
 <body>
    <p align="center">This is paragraph.</p>
 </body>
</html>

۱۰

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>HTML 4.01 tag p with align attribute</title>

</head>

<body>

<p align="center">This is paragraph.</p>

</body>

</html>

برای چیدمان یک متن در HTML5، از دستور text-align و یکی از سه مقدار رایج left، center، right در CSS استفاده نمایید :

مثال: چیدمان (align) صحیح یک متن در HTML5

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 tag p with align attribute</title>
    <style>
        .paragraph {
            text-align: center;
        }
    </style>
</head>
<body>
    <p class="paragraph">This is paragraph.</p>
</body>
</html>

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

<!DOCTYPE html>

<head>

<title>HTML5 tag p with align attribute</title>

<style>

.paragraph {

text-align: center;

}

</style>

</head>

<body>

<p class="paragraph">This is paragraph.</p>

</body>

</html>

نمایش خروجی!

مرورگرهای سازگار با تگ p

در جدول زیر، لیست مرورگرها و نسخه های سازگار آن ها با این تگ را مشاهده می کنید:

مرورگرهای دسکتاپ سازگار با تگ p

گوگل کروم	موزیلا فایرفاکس	اینترنت اکسپلورر	مایکروسافت اج	اپرا	سافاری
همه ی نسخه ها	نسخه ۱ و بالاتر	همه ی نسخه ها	همه ی نسخه ها	همه ی نسخه ها	همه ی نسخه ها

مرورگرهای موبایل

گوگل کروم	موزیلا فایرفاکس	اپرا	سافاری
همه نسخه ها	نسخه ۴ و بالاتر	همه نسخه ها	همه نسخه ها

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

محمد جاودانی۱۳۹۹-۱۲-۱۹

۰ 44 زمان مطالعه یک دقیقه