Categories
Learn HTML

HTML: p tag

HTML: <p> tag

In this series of learning HTML, we will teach you how to use HTML p tag with proper syntax and lots of examples. Let’s start on the HTML p tag.

 

Description of HTML p tag

The HTML p tag is used to define a paragraph of text within an HTML document. The p tag is commonly used to separate blocks of text and create white space between them.

Here’s an example of how to use the p tag in HTML:

<p>This is a paragraph of text. It might contain several sentences and provide information or context for the content that follows.</p>

In this example, the p tag defines a paragraph of text. When rendered in a web browser, it might look something like this:

This is a paragraph of text. It might contain several sentences and provide information or context for the content that follows.

Note that the p tag should be used to separate distinct blocks of text within an HTML document. It is not recommended to use multiple br tags or other methods of creating white space to separate paragraphs. The p tag is also commonly styled with CSS to control the spacing, font, and other visual properties of the text within it.

 

Syntax of HTML p tag

The HTML <p> tag is used to define a paragraph of text. The syntax of the <p> tag is as follows:

<p>Text goes here</p>

Here, the opening tag <p> is used to indicate the start of the paragraph, and the closing tag </p> is used to indicate the end of the paragraph.

Example:

<p>This is a paragraph of text.</p>

In this example, the <p> element is used to define a paragraph of text that contains the sentence “This is a paragraph of text.” When rendered in a web browser, the text will typically be displayed with a blank line above and below it to indicate that it is a separate paragraph.

 

 

Global Attributes

The “p” tag in HTML is used to define a paragraph of text. There are several global attributes that can be used with the “p” tag to modify its behavior:

  1. class – Specifies one or more class names for the element, which can be used to apply CSS styles.
  2. dir – Specifies the direction of the text within the element, either “ltr” (left to right) or “rtl” (right to left).
  3. id – Specifies a unique identifier for the element, which can be used to reference it in JavaScript or CSS.
  4. lang – Specifies the language of the text within the element, using the ISO 639-1 language code.
  5. style – Specifies inline CSS styles to apply to the element.
  6. title – Specifies additional information about the element, which is typically displayed as a tooltip when the user hovers over it.

For example, the following code creates a paragraph with a class of “my-class”, a unique ID of “my-paragraph”, and inline CSS styles:

<p class=”my-class” id=”my-paragraph” style=”color: red;”>This is a paragraph of text.</p>

 

Event Attributes

In HTML, the “p” tag is used to define a paragraph of text. You can add event attributes to the “p” tag to specify what happens when a particular event occurs, such as when the user clicks on the paragraph or hovers over it. Here are some of the event attributes that can be used with the “p” tag:

  1. onclick – Specifies a JavaScript function to be executed when the paragraph is clicked.
  2. ondblclick – Specifies a JavaScript function to be executed when the paragraph is double-clicked.
  3. onmousedown – Specifies a JavaScript function to be executed when the mouse button is pressed down over the paragraph.
  4. onmouseup – Specifies a JavaScript function to be executed when the mouse button is released over the paragraph.
  5. onmouseover – Specifies a JavaScript function to be executed when the mouse pointer moves over the paragraph.
  6. onmouseout – Specifies a JavaScript function to be executed when the mouse pointer moves out of the paragraph.

For example, the following code creates a paragraph with an onclick event that displays an alert box when the user clicks on the paragraph:

<p onclick=”alert(‘You clicked on the paragraph!’)”>This is a paragraph of text.</p>

 

Other Attributes

In addition to global and event attributes, there are some other attributes that can be used with the “p” tag in HTML to modify its behavior. Here are a few examples:

  1. align – Specifies the horizontal alignment of the paragraph within its container, using the values “left”, “center”, or “right”.
  2. data-* – Allows you to add custom data attributes to the paragraph, which can be used to store extra information that can be accessed using JavaScript.
  3. hidden – Specifies that the paragraph should be hidden from view.
  4. tabindex – Specifies the tab order of the paragraph within the document, which determines the order in which it receives focus when the user navigates the page using the keyboard.

For example, the following code creates a centered paragraph with a custom data attribute:

<p align=”center” data-myattribute=”some value”>This is a centered paragraph.</p>

And the following code creates a hidden paragraph that can be accessed using the keyboard:

<p hidden tabindex=”0″>This paragraph is hidden but can be focused using the keyboard.</p>

 

Notes on HTML p tag

    Here are some important notes to keep in mind when working with the HTML “p” tag:

    1. The “p” tag is used to define a paragraph of text. It should only contain text and cannot contain other HTML elements.
    2. By default, a browser will add some space before and after a paragraph. You can use CSS to modify this space using the “margin” and “padding” properties.
    3. When using the “p” tag, it’s important to use it for its intended purpose, which is to mark up paragraphs of text. If you need to add headings, lists, or other types of content, use the appropriate HTML elements (such as “h1” for headings and “ul” or “ol” for lists).
    4. While it is possible to add styling and event attributes to the “p” tag, it’s generally considered better practice to use CSS and JavaScript separately to keep the content and presentation of your web pages separate.
    5. When adding multiple paragraphs to a web page, it’s a good idea to group them using HTML elements like “div” or “section” to help organize your content and apply styling to specific groups of paragraphs.

    Overall, the “p” tag is a simple but important part of HTML markup that is used to define paragraphs of text. By following best practices and using it appropriately, you can create well-structured and readable web pages.

     

    Browser Compatibility

    The HTML p tag has essential support with the following browsers:

    1. Chrome
    2. Internet Explorer (IE)
    3. Opera
    4. Safari (WebKit)
    5. Firefox (Gecko)
    6. Android
    7. Firefox Mobile (Gecko)
    8. Edge Mobile
    9. Opera Mobile
    10. Safari Mobile

    Examples of HTML p tag

    We will discuss the HTML p tag below, with some examples of how to use the p tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Strict, XHTML 1.0 Transitional, and XHTML 1.1.

    1. HTML5
    2. HTML4
    3. XHTML

     

    HTML5 Document

    Here is a detailed example of an HTML5 document that uses the “p” tag to create paragraphs of text:

    <!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Welcome to my web page</h1>
</header>
<main>
<section>
<h2>About Me</h2>
<p>Hi, my name is John and I'm a web developer. I've been coding websites for over 10 years and I love it! My favorite programming languages are HTML, CSS, and JavaScript.</p>
<p>In my free time, I enjoy hiking, playing guitar, and spending time with my family.</p>
</section>
<section>
<h2>My Skills</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>PHP</li>
</ul>
<p>I'm also familiar with a variety of web development frameworks, including Bootstrap, React, and Laravel.</p>
</section>
<section>
<h2>Contact Me</h2>
<p>If you're interested in working together, please feel free to <a href="mailto:john@example.com">send me an email</a> or connect with me on <a href="https://www.linkedin.com/in/john-doe/">LinkedIn</a>.</p>
</section>
</main>
<footer>
<p>© 2023 John Doe</p>
</footer>
</body>
</html>

    In this example, the “p” tag is used to create paragraphs of text within each of the “section” elements. The first section contains two paragraphs that describe the author, the second section contains a bulleted list and another paragraph, and the third section contains a single paragraph with links to the author’s email address and LinkedIn profile. The “p” tag is also used in the footer to create a copyright notice.

    By using the “p” tag appropriately and structuring the web page with HTML elements like “section” and “header”, this web page is easy to read and understand.

     

    HTML 4.01 Transitional Document

    Here’s an example of an HTML 4.01 Transitional document that uses the “p” tag to create paragraphs of text:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My Web Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="styles.css" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Welcome to my web page</h1>
</div>
<div id="content">
<div class="section">
<h2>About Me</h2>
<p>Hi, my name is John and I'm a web developer. I've been coding websites for over 10 years and I love it! My favorite programming languages are HTML, CSS, and JavaScript.</p>
<p>In my free time, I enjoy hiking, playing guitar, and spending time with my family.</p>
</div>
<div class="section">
<h2>My Skills</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>PHP</li>
</ul>
<p>I'm also familiar with a variety of web development frameworks, including Bootstrap, React, and Laravel.</p>
</div>
<div class="section">
<h2>Contact Me</h2>
<p>If you're interested in working together, please feel free to <a href="mailto:john@example.com">send me an email</a> or connect with me on <a href="https://www.linkedin.com/in/john-doe/">LinkedIn</a>.</p>
</div>
</div>
<div id="footer">
<p>© 2023 John Doe</p>
</div>
</div>
</body>
</html>

    In this example, the “p” tag is used to create paragraphs of text within each of the “section” div elements. The first section contains two paragraphs that describe the author, the second section contains a bulleted list and another paragraph, and the third section contains a single paragraph with links to the author’s email address and LinkedIn profile. The “p” tag is also used in the footer to create a copyright notice.

    By using the “p” tag appropriately and structuring the web page with div elements and CSS, this web page is easy to read and understand. However, it’s important to note that HTML 4.01 Transitional is an older version of HTML and has been largely superseded by HTML5.

    XHTML 1.0 Transitional Document

    Here’s an example of an XHTML 1.0 Transitional document that uses the “p” tag to create paragraphs of text:

    <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My Web Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="styles.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Welcome to my web page</h1>
</div>
<div id="content">
<div class="section">
<h2>About Me</h2>
<p>Hi, my name is John and I'm a web developer. I've been coding websites for over 10 years and I love it! My favorite programming languages are HTML, CSS, and JavaScript.</p>
<p>In my free time, I enjoy hiking, playing guitar, and spending time with my family.</p>
</div>
<div class="section">
<h2>My Skills</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>PHP</li>
</ul>
<p>I'm also familiar with a variety of web development frameworks, including Bootstrap, React, and Laravel.</p>
</div>
<div class="section">
<h2>Contact Me</h2>
<p>If you're interested in working together, please feel free to <a href="mailto:john@example.com">send me an email</a> or connect with me on <a href="https://www.linkedin.com/in/john-doe/">LinkedIn</a>.</p>
</div>
</div>
<div id="footer">
<p>© 2023 John Doe</p>
</div>
</div>
</body>
</html>

    In this example, the “p” tag is used to create paragraphs of text within each of the “section” div elements, just like in the previous examples. However, there are a few key differences between XHTML and HTML:

    • The XHTML document is written in XML syntax, which means that all tags must be properly closed and all attributes must be quoted. For example, the “meta” tag in the head section must be written as <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> with a closing slash at the end to indicate that it is a self-closing tag.
    • The XHTML document includes a DOCTYPE declaration that specifies the version of XHTML being used and the location of the DTD (Document Type Definition) file. In this case, the DTD file is located at “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“.
    • The XHTML document uses XML namespaces to specify the default namespace for the document. In this case, the default namespace is “http://www.w3.org/1999/xhtml“, which means that all elements in the document are part of the XHTML namespace.

    Overall, the use of the “p” tag in this XHTML document is very similar to its use in HTML, but the syntax and structure of the document are different due to the XML syntax and stricter rules of XHTML.

    XHTML 1.0 Strict Document

    Here’s an example of an XHTML 1.0 Strict document that uses the “p” tag to create paragraphs of text:

    <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My Web Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="styles.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Welcome to my web page</h1>
</div>
<div id="content">
<div class="section">
<h2>About Me</h2>
<p>Hi, my name is John and I'm a web developer. I've been coding websites for over 10 years and I love it! My favorite programming languages are HTML, CSS, and JavaScript.</p>
<p>In my free time, I enjoy hiking, playing guitar, and spending time with my family.</p>
</div>
<div class="section">
<h2>My Skills</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>PHP</li>
</ul>
<p>I'm also familiar with a variety of web development frameworks, including Bootstrap, React, and Laravel.</p>
</div>
<div class="section">
<h2>Contact Me</h2>
<p>If you're interested in working together, please feel free to <a href="mailto:john@example.com">send me an email</a> or connect with me on <a href="https://www.linkedin.com/in/john-doe/">LinkedIn</a>.</p>
</div>
</div>
<div id="footer">
<p>© 2023 John Doe</p>
</div>
</div>
</body>
</html>

    In this example, the “p” tag is used to create paragraphs of text within each of the “section” div elements, just like in the previous examples. However, there are a few key differences between XHTML Strict and Transitional:

    • The XHTML Strict document is more restrictive in terms of which elements and attributes are allowed. For example, it does not allow the “target” attribute on links, or the “align” attribute on images.
    • The XHTML Strict document does not include any presentational or deprecated elements or attributes, such as the “font” or “bgcolor” attributes.
    • The XHTML Strict document uses a different DTD file than the Transitional version, which specifies the stricter rules for the document.

    Overall, the use of the “p” tag in this XHTML Strict document is very similar to its use in HTML and XHTML Transitional, but the document itself is more strictly defined and does not allow certain elements and attributes that are allowed in Transitional.

    XHTML 1.1 Document

    Here’s an example of an XHTML 1.1 document that uses the “p” tag to create paragraphs of text:

    <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My Web Page</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<link rel="stylesheet" href="styles.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Welcome to my web page</h1>
</div>
<div id="content">
<div class="section">
<h2>About Me</h2>
<p>Hi, my name is John and I'm a web developer. I've been coding websites for over 10 years and I love it! My favorite programming languages are HTML, CSS, and JavaScript.</p>
<p>In my free time, I enjoy hiking, playing guitar, and spending time with my family.</p>
</div>
<div class="section">
<h2>My Skills</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>PHP</li>
</ul>
<p>I'm also familiar with a variety of web development frameworks, including Bootstrap, React, and Laravel.</p>
</div>
<div class="section">
<h2>Contact Me</h2>
<p>If you're interested in working together, please feel free to <a href="mailto:john@example.com">send me an email</a> or connect with me on <a href="https://www.linkedin.com/in/john-doe/">LinkedIn</a>.</p>
</div>
</div>
<div id="footer">
<p>© 2023 John Doe</p>
</div>
</div>
</body>
</html>

     

    In this example, the “p” tag is used to create paragraphs of text within each of the “section” div elements, just like in the previous examples. However, there are a few key differences between XHTML 1.1 and previous versions of XHTML:

    • The XHTML 1.1 document uses a different DTD file than previous versions of XHTML, which specifies even stricter rules for the document.
    • The XHTML 1.1 document includes a “meta” tag that specifies the content type as “application/xhtml+xml”, which indicates that the document is an XHTML file and should be parsed as such.
    • The XHTML 1.1 document does not include any presentational or deprecated elements or attributes, such as the “font” or “bgcolor” attributes.

    Overall, the use of the “p” tag in this XHTML 1.1 document is very similar to its use in previous versions of XHTML, but the document itself is even more strictly defined and does not allow certain elements and attributes that were allowed in earlier versions.