HTML <dl> Tag
Introduction
A paragraph of text on a web page is defined by the HTML <p> tag, a block-level element. It takes up all the available width of its parent and then leaves a new line before and after this element.
This semantic tag is often used to organize text material on a web page, such as blog items, product descriptions, and articles. Other HTML tags, such as <strong> or <em>, may also be used nestled within the closing p tag to style certain words and phrases in a paragraph.
It is essential to properly structure your text content by using the tag since such a correct structuring can positively influence your website's usability and accessibility. Some tags, such as <p>, are very important for the right interpretation and presentation of content to users with screen readers and other assistive technologies.
Syntax
There are two pairs of <p> tags. The content is written between the opening (<p>) and closing (</p>) tags.
It is written as follows:
<p>Paragraph text here...</p>
If the closing tag is absent, the end of the paragraph is regarded as coincident with the beginning of the next block-level element.
The browser ignores spaces that appear between the opening <p> tag and its content. Use the CSS text-indent property to set an indent.
Block-level elements such as tables are not allowed inside the <p> tag.
Examples of the HTML <p> Tag
Basic tag usage
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>This is a paragraph</p>
</body>
</html>
Inside Other Elements
There may be a <p> tag anywhere because it is classified as "flow content" (or, locally, better known by the more archaic name of palpable content). This is one example demonstrating how to place the<p> tag within a /pr
<blockquote>, which returns this text.
<blockquote>
<p>Hello.</p>
<p>Welcome to our Website.</p>
<footer>-
<cite>My <abbr title="Website name">Webpage</abbr></cite>
</footer>
</blockquote>
List Elements & the <p> Tag
A <p> element cannot have list items as children. As a result, <p> tags cannot include <ul> or <ol> tags.
Here are two approaches to handling lists within a sentence.
Multiple <p> Tags
Closing the first <p> tag prior to the list and opening a new one after the list is one way to achieve this.
<p>As long as you eat your</p>
<ul>
<li>banana,</li>
<li>apple, and</li>
<li>orange,</li>
</ul>
<p> You should be fine.</p>
Use <div> Tags
An alternative would be to enclose the entire text, including the list, in <div> tags. Since <div> elements can accommodate <ul> or <ol>, this is acceptable.
If you need to arrange your paragraphs into logical groups (for stylistic considerations, for example), this is a better option.
<div>As long as you eat your
<ul>
<li>banana,</li>
<li>apple, and</li>
<li>orange,</li>
</ul>
you should be fine.</div>
Using the CSS
The CSS text-align property can be used to align text within a paragraph in place of the obsolete align attribute.
Example of the HTML <p> tag used with the CSS text-align property.
<!DOCTYPE html>
<html>
<head>
<title>Document Title</title>
<style>
div. paragraph {
text-align: center;
}
</style>
</head>
<body>
<h1>Document Title</h1>
<div class="paragraph">
<p>The text alignment to the center is set with CSS property text-align</p>
</div>
</body>
</html>
Example of the HTML <p> tag used with the <br> tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p> Inside the paragraph, we can put the tag <br /> <br> to transfer a part of the text to another line if necessary.</p>
<p>Hello <br/> Welcome to our website.</p>
</body>
</html>
How to Style <p> Tag?
Common properties to change the <p> tag's visual weight, emphasis, or size:
- The style of the font is set via the CSS font-style property. normal | italic | oblique | initial | inherit.
- The CSS font-family attribute specifies an ordered list of one or more family names and generic family names for the element selected.
- The property Font-size CSS is used for setting the size of the font.
- Being a parameter of CSS font weight, we can define the bold or thick letter style.
- Capitalization and outlook of the text case are through CSS letter attribute, that is, "text-transform."
- The CSS text-decoration property, which is shorthand for text-decoration-line, text-decoration-color, and text-decoration-style, describes the decoration that has been added to the text.
Coloring text in <p> tag:
- The CSS color attribute describes the color of both the text decorations and content.
- A CSS background color attribute sets an element's background color.
Text layout styles for <p> tag:
- The first line in a text block is indented based on the value of CSS’s text-indent property.
- The CSS text-overflow property should tell the user, in a certain way, when information topples over and does not show itself.
- White space inside an element is controlled through the CSS white-space attribute.
- The CSS word-break attribute specifies where lines should be broken.
Other properties worth looking at for <p> tag:
- The CSS text-shadow attribute gives text a shadow.
- The CSS text-align-last property can be used to justify the final line of text.
- The CSS line-height attribute can specify a height of one or more lines.
- CSS can specify the amount of space between the characters represented by a text with letter spacing.
- The CSS word-spacing attribute sets the distance between words.
Attributes
In this section, we will discuss the tag-specific attributes that are particular to the p tag in HTML.
- Align attribute: So, the align attribute defines how text in a paragraph will be positioned horizontally. We can still achieve similar effects by using the CSS text-align property, which is another comparable trait compared to float left and right since HTML 5 no longer supports it. The text-align attribute can be set to the following values: justify, left, right, or center. If any of the above values are given, they will align with that direction in the text.
Note: The align attribute is obsolete because HTML5 does not support it. So, we can use the text-align property in CSS instead of it.
The HTML Global and Event attributes are the only ones supported by the p tag <p>. The global characteristics and event attributes will be briefly reviewed.
2. Global attributes: Some characteristics are unique to a given element and cannot be applied to other components. Although global attributes are the public properties shared by all HTML elements, src attributes can only be referenced in the <img> or <link> tag. Every element can use global attributes, yet some elements cannot be affected by them. Draggable, id, autofocus, hidden, and so forth are a few instances of global characteristics.
3. Event attributes: An event is started whenever we click, hover, drag, scroll, or do any other kind of action on a web page. Our JavaScript code handles these kinds of events. With the use of event handler attributes, we may run a script—typically written in JavaScript—from within our HTML. Every time a specific "event" takes place, the script is triggered. Each event handler content attribute addresses a distinct event. Onclick, on drag, on keypress, and so forth are a few instances of event characteristics.
What is the Use of <p> Tag in HTML?
The following information explains the use of the p tag <p> in HTML:
- A document's paragraph of content is contained within the p tag <p> in HTML.
- p tag <p> in HTML is the most widely utilized block-level element and consistently begins on a new line. However, it cannot contain additional block-level elements.
- If the closing p tag </p> is used before any other block-level element, the paragraph will be closed automatically.
- Margins are automatically added by the browsers preceding and following each paragraph.
- In HTML, the p tag represents inline text content. That is, rather than loading from an external file, it is integrated within the web page itself.
- When organizing related items, like form fields or photos, structurally, utilize the HTML p tag <p>.
- The space or line break between words inside the p tag p> is often ignored by the browser.
- Supported HTML versions for the p tag <p> include 2, 3.2, 4, 4.01, and 5.
Accessibility Concerns
We already know that making a page more accessible (readable) involves breaking up its material into appropriate paragraph formats. Screen readers include shortcuts that allow their users to jump to the previous or next paragraph, allowing them to skip any information.
Because the document contains empty <<p> components to add space between paragraphs, it will be difficult for those using screen-reading software to navigate around it. Screen readers may indicate the existence of a paragraph, yet that paragraph has no text at all. The individual employing the screen reader may need clarification and support as a result.
If more space is required, apply CSS properties like margin to achieve the desired result:
p {
margin-bottom: 2em; /* increase white space after a paragraph */
}
Conclusion
In conclusion, the HTML '<p>' tag is one of the simplest tags used for organizing text content on web pages. Hence, it helps in the organization and readability of paragraphs by indention. Viewing information is much more visually appealing, and this tag automatically inserts spacing before and after the text. It contributes to formulating documents that are simple and cross-platform. Additionally, the '<p>' tag is critical to HTML semantic integrity because it contributes to accessibility and search engine optimization. Overall, the '<p>' tag is significant in that it helps ensure within an HTML document; text appears clear.