<p> Tag in HTML
![JavaScript Course With Certification: Unlocking the Power of JavaScript](https://www.scaler.com/topics/images/mrinal_bhattacharya.webp)
Overview
In this article, we are going to learn about the tag in HTML. So before getting started, let's get a brief overview of what a tag in HTML is.
Paragraphs in HTML are block-level elements, i.e., they are the elements that occupy the entire horizontal space of their parent element, and the vertical space is equal to the height of their contents, thereby creating a block.
Paragraph is a container tag, and it has both opening and closing tag, although the closing tag is not mandatory.
We have got a brief idea of what is the p tag in HTML. Now let us see the syntax of the p tag in HTML.
Syntax
Below given is the syntax for the p tag in HTML.
The p tag in HTML begins with a pair of opening angular brackets (). And the end of the tag is denoted by a pair of closing angular brackets (), which is optional, and it is only needed when we want to end the paragraph and immediately follow it with something that is allowed inside a paragraph (such as text or an inline element).
Attributes
Let us discuss about the tag-specific attributes that are specific to the p tag in HTML.
Align attribute: Basically, the align attribute specifies the horizontal adjustment of the text within a paragraph. But, since it is no more supported in HTML 5, we can use another similar attribute - known as the CSS text-align property to achieve similar results. The value of the text-align attribute can range from left, right, center, or to justify. Specifying any of the above values will result in the alignment of the text in that particular direction.
Note: The align attribute is Obsolete and not supported in HTML5. So we can use the CSS text-align property instead.
The p tag only supports the Global Attributes andEvent Attributesin HTML. Let us get a short overview of the global attributes and event attributes.
-
Global attributes - There are some attributes that are used for any specific element, and we can't use them in all other elements. For src attributes can only be mentioned in or tag and no other elements, but Global attributes are the public attributes that are common to all the HTML elements. Global attributes can be used on all elements, though they may have no effect on some elements. Some examples of global attributes are autofocus, hidden, id, draggable, etc.
-
Event attributes - Whenever we perform any action on a web page, such as click, hover, drag, scroll, etc., it triggers an event. Such events are handled by javascript code written by us. Event handler attributes enable us to invoke a script (which is usually written in javascript) from within our HTML. The script is invoked whenever a certain "event" occurs. Each event handler content attribute deals with a different event. Some examples of event attributes are onclick, ondrag, onkeypress, etc.
What is the <p> Tag in HTML is used for?
Below are some points regarding the usage or how we can use p tag in HTML:
- p tag in HTML is used to contain a paragraph of text in a document.
- p tag in HTML is the most commonly used block-level element and always starts on a new line. Although, other block-level elements can't be contained inside it.
- In case another block-level element is used before the closing p tag , then the paragraph is automatically closed.
- The browsers add margins automatically before and after each paragraph.
- p tag in HTML is inline and text content. i.e., it is built into the web page instead of being loaded from an external file.
- The start tag in the p tag is required but the end tag is optional.
- p tag in HTML can be used for structural grouping of related content, such as images or form fields.
- Usually, the browser ignores the line break or space between the text inside the p tag .
- HTML Version: 2, 3.2, 4, 4.01, 5 supports p tag
Examples
After having a brief discussion on the p tag, let us look at some examples to clearly understand the usage of the p tag in HTML.
Align text in a paragraph
Code:
Output
Explanation: In the above example, we have seen how we are using a p tag in our HTML document. Above, in the head section, there is a style sheet where we are calling the class attribute of the p tag in the body with the value of paragraph with .paragraph notation. Now the content inside the p tags will be styled equally according to the .paragraph style definition in the head section. Inside the .paragraph in the style sheet, we are using CSS text-align property to align the p tag text in the center of the page.
Style paragraphs with CSS
Code:
Output
Explanation: In the above example, we have seen how with the help of CSS, we are able to style our paragraphs inside the p tags. This time without having any class attributes, we are directly calling the p tags with their tag name inside the style sheet of the head tag. We have done some CSS styling for our p tags, which includes changing their color from black to red, transforming the text to uppercase, indentations, aligness, etc. We have also used the hover selector by which when the mouse cursor is over the paragraph content, it will change some styling like changing the color from red to blue and then making the cursor from arrow to pointer.
Poem problems in HTML
Code
Output
Explanation: In the above example, we have seen the famous poem problem in HTML. We have written the poem using our p tag. Please note we have added line breaks, proper formatting, and required whitespaces in our poem. But while displaying, our browser simply ignores all the line breaks and whitespaces made in the poem, and it is simply displayed like any other plain text in the browser.
So, by this, we may infer that the browser ignores the line break or space between the text inside the p tag.
Accessibility concerns
As we already know, dividing any content of a page into relevant paragraph formats makes the page more accessible (readable). Shortcuts are provided by the screen-readers to let their users skip to the next or previous paragraph, letting them skip any content.
It will be problematic for people who navigate with screen-reading technology to navigate around the document, which has empty elements to add space between paragraphs. As the Screen readers may announce the paragraph's presence, but there is no content contained within it — because there is none. This can confuse and frustrate the person using the screen reader.
If extra space is needed, use CSS properties like margin to create the effect:
Browser Support
Almost all modern browsers support the p tag in HTML since it is a very widely used tag. Below given is the list of some popular browsers that support the p tag in HTML --
Desktop browsers
- Chrome
- Edge
- Firefox
- Opera
- Safari
- Internet Explorer
Android browsers
- WebView Android
- Chrome Android
- Firefox for Android
- Opera Android
- Safari on iOS
- Samsung Internet
Conclusion
In this article, we learned about the p tag in HTML. Let us recap the points we discussed throughout the article:
- The p tag defines a paragraph.
- Paragraphs in HTML are block-level elements, i.e., it is the element that occupies the entire horizontal space of its parent element, and the vertical space is equal to the height of its contents, thereby creating a block.
- p tag is a container tag and it has both opening and closing tag, however the closing tag is not mandatory.
- p tag is inline and text content.
- p tag in HTML supports both the Globalattributes and the Event attributes.
- We have also seen some examples of how we can add styling in the p tag with CSS and how the browser simply ignores the line breaks in the source code inside the p tag.
Related tags
I suggest you go through the below tags to enhance your learning of the HTML tags.