In HTML, paragraphs are defined with the HTML tag <p>. A paragraph element in an HTML document is made up of content — text, images, or other content like form fields — that appears between an opening <p>tag and closing </p>tag. Paragraphs belong to the class of elements called block-level elements. A block-level element starts on a fresh line and may take up the entire width of either the page or its container, depending on its width and what’s defined in the CSS. In this post, we’ll explain how to use the tag in HTML, including when you need to use it, when you can omit it, and how you can style it to your liking. But first, let’s start with an example to get us warmed up. To separate paragraphs, most browsers apply some whitespace by default, helping the reader easily distinguish one paragraph from another. However, there are other ways of separating paragraphs with CSS. Here’s a basic example of using the <p>tag in HTML. As you can see, after the <p>tag is closed, whitespace is added and the following line of text appears as a new paragraph. Now that we've provided an example, let's break down how to use this tag in HTML. <p> is the HTML tag for a paragraph. Adding the <p> to an HTML doc, followed by text, will create a paragraph on your page. Adding the </p> tag will end the paragraph.
Paragraph Tag in HTML Example
How to Use the <p> Tag in HTML
What does <p> mean in HTML?
HTML Category
HTML elements are grouped into content categories based on their purpose.
The <p>element belongs to the flow contentcategory. The flow content category contains all elements permitted to be a direct child of the body element. These elements also accommodate plain text or embedded content like images and videos.
Flow content is a very broad category that includes most HTML elements. One of the few elements not under flow content is the HTML form element.
The flow content category has multiple subcategories:
- Heading elements, such as <h1>, <h2>down to <h6>
- Sectioning elements, such as <section>, <article>and<nav>
- Phrasing elements, such as <strong>,<em>and <span>
- Embedding elements, such as <iframe>
- Interactive elements, such as <button>and <a>
Allowed Content
The <p>element can only contain phrasing content. Phrasing content refers to plain text and the elements used to structure the text. Some examples of text-structuring elements are emphasis elements (<em>) and text-grouping elements (<span>).
The general rule is that if an element can be inside a sentence, it’s most likely phrasing content. Likewise, an image is considered phrasing content because you can include it in a sentence if the image is related to that sentence.
Additionally, elements that become plain text if the associated resource is unavailable also fall under the category of phrasing content. For example, if you try to retrieve an image or audio resource, but the resource doesn’t exist, both elements can become text (they’ll render the alt text).
Allowed Parents
The <p>element can be contained in any element that accepts flow content. This means it can go into most HTML block-level and sectioning elements.
Can you omit the <p> tag?
While the start tag <p>is required, the end tag </p>may be omitted under the following conditions:
- If the <p>element is directly followed by another <p>element or an <address>, <article>, <aside>, <blockquote>, <div>, <dl>, <fieldset>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hr>, <menu>, <nav>, <ol>, <pre>, <section>, <table>or <ul>.
- If no other elements exist in the parent. This also requires the parent not be an anchor link element (<a>).
<p> Tag Attributes
The<p>element only supports:
- Global HTML attributes:These attributes are supported by all HTML elements. An example is the styleattribute, which you’ll see in the next section when it’s used to style a paragraph.
- Event attributes:These attributes respond to user events, like window resize. To do so, a functioncontaining the script must be passed as the attribute’s value.
If a non-supported attribute is used within a <p>element, that attribute will simply be ignored by the browser.
Styling Paragraphs in HTML
Paragraphs are styled using CSS, which can be added to HTML in three ways:
- Inline: Using thestyleattribute within the <p>HTML elements.
- Internal: Using the <style>element in the HTML document’s <head>section. Within the opening and closing <style> tags, you then select the<p>element and define the style attributes to apply them.
- External: Using a <link>element to link to an external CSS file. Within this file, you can select the<p>element and define the style attributes you wish to apply to it.
Let's go over these three methods in more detail.
1. Using the Style Attribute on the <p>Tag
The following paragraph is styled using the inline style property.
See the Pen Untitled by HubSpot (@hubspot) on CodePen.
This method will override any other CSS targeting the same elements because the browser considers inline declarations to be the most relevant, due to their proximity to HTML. For this reason, inline CSS is recommended for targeting a single element with unique style properties, but it should be avoided when you can use internal or external CSS.
2. Using the <style> Element in the Document Head
The following paragraph is styled from within the <style> tags placed in the document <head> section.
See the Pen Untitled by HubSpot (@hubspot) on CodePen.
Internal CSS allows you to apply the same CSS to two or more elements at the same time — instead of needing to use the same style rules repeatedly. However, because this method distinguishes the CSS section and HTML section but keeps both sections within the same file, it is impossible to share the same style attributes across multiple HTML pages.
For this reason, internal CSS works well for websites with a single HTML page. To share CSS across different pages, use an external stylesheet.
3. Using an External .cssFile
To use an external stylesheet, create the following folders and files:
Open my-website/css/style.css with a text editor and include the following styles:
Then, open my-website/index.html with a text editor and include the following markup:
See the Pen Styling <p> Tags by HubSpot (@hubspot) on CodePen.
Open my-website using a web browser. You’ll get the same result as the previous one. The biggest benefit of using an external stylesheet is that it allows you to style multiple HTML pages with the same CSS style attributes.
Ways to Enhance Web Accessibility
It’s crucial that your website content is as accessible as possible to all users. One important way to do this is to break down your content into paragraphs. This helps users seamlessly navigate content with the help of screen readers and other assistive technologies.
The paragraphs must also be appropriately spaced. Note: spacing should not be achieved by adding an empty <p> tag — empty paragraphs make it difficult for screen readers to interpret the content. Instead, use CSS to apply some margin between the paragraphs — something like this:
The <p> Tag: An HTML Building Block
The <p>element represents a paragraph in HTML. Paragraphs belong to a class of elements called block-level elements. These elements start on a fresh line and may take up the entire width of the page or its container.
Paragraphs are styled with CSS. The CSS can be defined inline, internally, or externally. While each method has pros and cons, external stylesheets provide the most flexible approach because they allow you to share CSS attributes across different pages.
Finally, to make a web page more accessible, you should always break page content into paragraphs, which you can style with CSS.
Topics: HTML
