- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to add a paragraph in HTML?
To define a paragraph in HTML, we use <p> tag. A block of text is representing a paragraph and it always starts on a new line. Before and after a paragraph the browser automatically adds white spaces.
Syntax
To represent a paragraph in HTML, following syntax is used −
<p>This is a Paragraph</p>
Paragraph consists of open and closing <p> tags.
Example
Following example to add a paragraph in HTML −
<!DOCTYPE html> <html> <body> <h1>How to represent paragraph tag</h1> <p>This is a first paragraph.</p> <p>This is a second paragraph.</p> <p>This is a third paragraph.</p> </body> </html>
Displaying the paragraph on screen
It is not sure that how HTML will display the paragraph on screen, based on screen sizes and resized windows different results will appear.
We cannot change the display of text by adding extra spaces in HTML code. The browser automatically removes any extra spaces and lines whenever a page is displayed.
Example
Consider below example, to see how the <p> tag displays the different arrangement of text on screen −
<!DOCTYPE html> <html> <body> <h2>Different variations on Displaying Paragraph</h2> <p>The statement that i had written contains a lot of lines, but the browser ignores it. </p> <p>The text that i had written contains a lot of spaces but the browser ignores it. </p> <p>The number of lines in a statement depends on the size of window. If i resize that window, the number of lines automatically changes and fit into the screen. </p> </body> </html>
Example
Suppose, if we want to separate the multiple paragraph with a horizontal line in HTML, we use <hr> tag, it is used to separate the content in HTML page with horizontal rule. Following is the example uses the <hr> tag in paragraph.
<!DOCTYPE html> <html> <body> <h1>Heading1 HTML Tutorial</h1> <p>Learn basics in HTML</p> <hr> <h2>Heading 2 CSS Tutorial</h2> <p>Learn all Style tags in CSS</p> <hr> <h3>Heading 3 JavaScript</h3> <p>Learn validation techniques</p> </body> </html>
CSS Settings to <p> tag
Now let us see how to apply the styling to paragraph in HTML by using CSS.
Example
Following example adds add a paragraph in HTML and styles it using the CSS properties –
<!DOCTYPE html>
<html>
<head>
<style>
p {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
color: navy;
text-indent: 30px;
text-transform: uppercase;
}
h1 {
color: red;
}
h2 {
color: green;
}
h3 {
color: blue;
}
</style>
</head>
<body>
<h1>Heading1 HTML Tutorial</h1>
<p>Learn basics in HTML</p>
<hr>
<h2>Heading 2 CSS Tutorial</h2>
<p>Learn all Style tags in CSS</p>
<hr>
<h3>Heading 3 JavaScript</h3>
<p>Learn validation techniques</p>
</body>
</html>
248 Views
