Tag in HTML - Scaler Topics

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.

p-tag

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 $<img>$ or $<link>$ 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 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

align-text-in-a-paragraph

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

style-paragraphs-with-css

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

Poem problems in HTML

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

browser-compatibility-p-tag

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.

I suggest you go through the below tags to enhance your learning of the HTML tags.

<p> Tag in HTML

Overview

Syntax

Attributes

What is the <p> Tag in HTML is used for?