- HTML Tutorial
- HTML - Home
- HTML - History and Evolution
- HTML - Overview
- HTML - Editors
- HTML - Basic Tags
- HTML - Elements
- HTML - Attributes
- HTML - Formatting
- HTML - Headings
- HTML - Paragraphs
- HTML - Quotations
- HTML - Comments
- HTML - Phrase Tags
- HTML - Meta Tags
- HTML - Style Sheet
- HTML - CSS Classes
- HTML - CSS IDs
- HTML - Images
- HTML - Image Map
- HTML Tables
- HTML - Tables
- HTML - Headers & Caption
- HTML - Table Styling
- HTML - Table Colgroup
- HTML - Nested Tables
- HTML Lists
- HTML - Lists
- HTML - Unordered Lists
- HTML - Ordered Lists
- HTML - Definition Lists
- HTML Links
- HTML - Text Links
- HTML - Image Links
- HTML - Email Links
- HTML - Iframes
- HTML - Blocks
- HTML Backgrounds
- HTML - Backgrounds
- HTML Colors
- HTML - Colors
- HTML - RGB
- HTML - HEX
- HTML - HSL
- HTML Forms
- HTML - Forms
- HTML - Form Attributes
- HTML - Form Control
- HTML - Input Attributes
- HTML Media
- HTML - Video Element
- HTML - Audio Element
- HTML - Embed Multimedia
- HTML Header
- HTML - Head Element
- HTML - Adding Favicon
- HTML - Javascript
- HTML Layouts
- HTML - Layouts
- HTML - Layout Elements
- HTML - Layout using CSS
- HTML - Responsiveness
- HTML - Symbols
- HTML - Emojis
- HTML - Style Guide
- HTML Graphics
- HTML - SVG
- HTML - Canvas
- HTML APIs
- HTML - Geolocation API
- HTML - Drag & Drop API
- HTML - Web Workers API
- HTML - WebSocket
- HTML - Web Storage
- HTML - Server Sent Events
- HTML Miscellaneous
- HTML - MathML
- HTML - Microdata
- HTML - IndexedDB
- HTML - Web Messaging
- HTML - Web CORS
- HTML - Web RTC
- HTML Demo
- HTML - Audio Player
- HTML - Video Player
- HTML - Web slide Desk
- HTML Tools
- HTML - Velocity Draw
- HTML - QR Code
- HTML - Modernizer
- HTML - Validation
- HTML - Color Code Builder
- HTML References
- HTML - Tags Reference
- HTML - Attributes Reference
- HTML - Events Reference
- HTML - Fonts Reference
- HTML - ASCII Codes
- ASCII Table Lookup
- HTML - Color Names
- HTML - Entities
- MIME Media Types
- HTML - URL Encoding
- Language ISO Codes
- HTML - Character Encodings
- HTML - Deprecated Tags
- HTML Resources
- HTML - Quick Guide
- HTML - Useful Resources
- HTML - Color Code Builder
- HTML - Online Editor
HTML - <p> Tag
HTML <p> tag is used to create paragrapgh context. The p tag generate a blank line before and after the p element. The <p> element block-level element, means it will automatically close if another block-level element is parsed before the closing </p> tag.
Technically, closing is optional, but it’s good practice to include the closing tag to ensure your document validates.<p> tag supports both global attributes and event attributes as well.
Syntax
<p>…content</p>
Attribute
HTML p tag supports Global and Event attributes of HTML.
Examples of HTML p Tag
Here we will see multiple examples of p tag. For example, if we wants to arite an introduction or features for anything in paragrapgh form, then we can use the <p> tag.
Defining a paragraph element
In the following example, we are creating an HTML document that demonstrates the workings of the <p> tag.
<!DOCTYPE html> <html> <body> <p> Geckos are a group of usually small, usually nocturnal lizards. They are found on every continent except Antarctica. </p> <p> Some species live in houses where they hunt insects attracted by artificial light. </p> </body> </html>
Applying Styles on Paragrapgh Element
Considering the following example, where we are going to add the CSS properties to the paragraph text.
<!DOCTYPE html> <html> <head> <style> p { color: red; Border: 1px solid red; } </style> </head> <body> <p> Geckos are a group of usually small, usually nocturnal lizards. They are found on every continent except Antarctica. </p> <p> Some species live in houses where they hunt insects attracted by artificial light. </p> </body> </html>
Adding background-color on Paragrapgh Element
Let's look at the another scenario, where we are going to apply the background color to the paragraph text.
<!DOCTYPE html> <html> <head> <style> p { color: green; Border: 1px solid red; background-color: gray; } </style> </head> <body> <p> Geckos are a group of usually small, usually nocturnal lizards. They are found on every continent except Antarctica. </p> <p> Some species live in houses where they hunt insects attracted by artificial light. </p> </body> </html>
Align Paragrapgh Element
Here, we are going to use the align attribute to align the paragraph text.
<!DOCTYPE html> <html> <body> <p align="center"> Geckos are a group of usually small, usually nocturnal lizards. They are found on every continent except Antarctica. </p> <p align="right"> Some species live in houses where they hunt insects attracted by artificial light. </p> <p align="left"> Some species live in houses where they hunt insects attracted by artificial light. </p> </body> </html>
Browser’s Default CSS on Paragraph Element
All elements carried some inbuild styling, in this example you will see the default CSS of p tag.
<!DOCTYPE html> <html> <head> <style> p { display: block; margin-block-start: 1em; margin-block-end: 1em; margin-inline-start: 0px; margin-inline-end: 0px; } <style> </head> <body> <p> Geckos are a group of usually small, usually nocturnal lizards. They are found on every continent except Antarctica. </p> <p> Some species live in houses where they hunt insects attracted by artificial light. </p> </body> </html>
Supported Browsers
Tag | |||||
---|---|---|---|---|---|
p | Yes | Yes | Yes | Yes | Yes |
To Continue Learning Please Login
Login with Google