![HTML Tutorial](/html/images/html-mini-logo.jpg)
- 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 - Paragraphs
HTML Paragraphs are a block-level elements, used to structure and format text content on a webpage. A paragraph is basically a collection of words and punctuations together. It allows us to organize and present textual information in a coherent and readable manner. HTML p tag is used to creat a paragraph element.
Reason to use Paragraphs
Paragraphs typically create space above and below the text, separating it from surrounding content. They can be styled using CSS to control aspects such as font size, colour, alignment, and spacing. In web development, paragraphs play a crucial role in conveying information effectively, enabling clear communication, and enhancing the overall user experience on a website.
Try to click the icon run button to run the following HTML code to see the output.
Examples of HTML Paragraph
In these examples we will see the usage of paragraph. In HTML, we can enhance the appearance of paragraphs by combining them with various other HTML tags and elements. These combinations allow you to control text formatting, spacing, and more.
Paragrapgh using p tag
HTML <p> tag is used to create a paragraph, it does not matter how you kept the text inside the p tag it will always make the text in a simple form.
<!DOCTYPE html> <html> <head> <title>HTML Paragraphs</title> </head> <body> <!-- HTML p Tag used --> <p>This is real time online HTML Editor</p> </body> </html>
Line Breaks with Paragrapgh
HTML <br> tag is used to insert line breaks within a paragraph to control the text layout.
<!DOCTYPE html> <html> <head> <title>Enhancing Paragraphs </title> </head> <body> <p>This is a paragraph with a <br> line break. </p> </body> </html>
Headings with Paragraphs
HTML <h1> to <h6> tags provide a hierarchical structure and can be used alongside paragraphs.
<!DOCTYPE html> <html> <head> <title>Enhancing Paragraphs </title> </head> <body> <h1>Main Heading</h1> <p> This is a paragraph beneath the main heading. </p> </body> </html>
Lists with Paragraphs
HTML <li> tag can be used where a list of element required after a desccription. Lists can be incorporated within paragraphs for content organization.
<!DOCTYPE html> <html> <head> <title>Enhancing Paragraphs </title> </head> <body> <ul> <li>Item 1</li> <li>Item 2</li> </ul> <p> This is a paragraph following an unordered list. </p> </body> </html>
Emphasis within Paragraphs
HTML <em> and <strong> tags allow you to emphasize text within paragraphs.
<!DOCTYPE html> <html> <head> <title>Enhancing Paragraphs </title> </head> <body> <p> This is a <em> paragraph </em> with <strong> emphasized </strong> text. </p> </body> </html>
Links within Paragraphs
HTML <a> tag can insert links within paragraphs.
<html> <head> <title>Enhancing Paragraphs </title> </head> <body> <p>Visit our website <a href="https://www.tutorialspoint.com">here </a>. </p> </body> </html>
Inline Styles within Paragraphs
HTML <span> tag can be used to style any particular text or word.
<html> <head> <title>Enhancing Paragraphs </title> </head> <body> <p>This is a <span style="color: blue;">blue</span> text within a paragraph. </p> </body> </html>
Images within Paragraphs
HTML <img> tag is used to embed images within paragraphs, like we did before each examples code where we wants you to run the code.
<html> <head> <title>Enhancing Paragraphs </title> </head> <body> <p> Here's an image: <img src="\html\images\test.png" alt="Example Image"> </p> </body> </html>
Superscript and Subscript within Paragraphs
HTML <sup> and <sub> tags to create superscript and subscript text.
<html> <head> <title>Enhancing Paragraphs </title> </head> <body> <p> H<sub>2</sub>O is the chemical formula for water. 2<sup>3</sup> equals 8.</p> </body> </html>
Abbreviations within Paragraphs
HTML <abbr> tag helps define abbreviations or acronyms.
<html> <head> <title>Enhancing Paragraphs </title> </head> <body> <p> <abbr title="Hypertext Markup Language">HTML</abbr> is used for web development.</p> </body> </html>
Citations within Paragraphs
HTML <cite> tag specifies citations and references within paragraphs.
<html> <head> <title>Enhancing Paragraphs </title> </head> <body> <p> The book <cite>War and Peace </cite> is a classic novel. </p> </body> </html>
Style paragraph with CSS
You can use CSS to change the appearance of text within <p> tags. Common CSS properties for styling paragraphs include 'font-size', 'color', and line height. For example, to make text larger and change its color.
<!DOCTYPE html> <html> <head> <style> p { font-size: 18px; color: #333; } </style> </head> <body> <p>This is a styled paragraph. </p> </body> </html>
Applying Classes
You can also apply classes to paragraphs for unique styles. Define a class in your CSS and use it in your HTML.
<!DOCTYPE html> <html> <head> <style> .special { font-size: 24px; color: #007bff; } </style> </head> <body> <p class="special">This is a special paragraph.</p> </body> </html>
Inline Styles
Alternatively, you can use inline styles directly in the HTML to style individual paragraphs.
<!DOCTYPE html> <html> <body> <p style="font-size: 20px; color: green;">This paragraph has inline styles.</p> </body> </html>
CSS provides extensive control over paragraph styles, allowing you to create visually appealing and well-formatted text on your web page.
To Continue Learning Please Login