The paragraph tags are used to define a block of text as a paragraph. This HTML element is one of the basic HTML tags you should learn to use properly.
When a block of text is surrounded by the paragraph tags, the browser automatically adds white space before and after the paragraph.
Using the Paragraph Tag
To define a paragraph, you use the opening and closing paragraph set of tags. Prior to XHTML the closing paragraph tag was not required but it is now. Below is an example of how to code a paragraph.
<p>The contents of the paragraph.</p>
Notice in the example above that the paragraph tag is opened and closed. This is required for XHTML. Lower case is also required for XHTML.
If you are using a HTML editor in design view and hit the enter key to create space below the paragraph like this:
It is ignored by the browser therefore this is only bloating your code with unnecessary coding. Use a style applied to the paragraph if you want extra space after it or if this is what you want as the formatting for all paragraphs, apply some margin or padding to the p tag in your stylesheet.
Another thing some web coders and HTML editors do is a empty paragraph to create space like this:
Again, if you want space after the paragraph use your stylesheet instead of clogging up your coding with extra coding just for formatting.
You may notice that your HTML editor breaks up the content of your paragraph over several lines (known as source formatting).
<p>The paragraph tag has a few basic attributes you should learn
Those line breaks are ignored by the browser. It just makes your coding easier to read.
Also, if you have extra spaces in between your words the browser ignores that also.
The width of your paragraph depends on the contents of the paragraph and if you have applied any specific styling to the paragraph tag. Generally, the contents flow with the width of the browser window. You can try it by grabbing the bottom right corner of your browser window with your mouse and moving it up and to the left. If you tried this you will see that the contents of this page adjusted with the size of the browser window.
Paragraph Tag Attributes
The paragraph tag has a few basic attributes you should learn about to start with.
- id - this has to be unique to the page. An id can be
used on multiple pages but only once on a single page.
An id can be used in the stylesheet to set specific formatting to the paragraphs with this id.
- class - A class is used to apply styling to the paragraph. It can be applied to many paragraphs on the page or across the whole website.
- lang - defines the language used in the paragraph. You would use this if the contents of the paragraph is different from the base language of the web page. e.g. French when the rest of the page is in English.
- style - The style attribute is used when you want to
apply specific styling to a paragraph.
Novice web page coders and some HTML editors do this when using the design view of the HTML editor like a word processing program. This adds unnecessary coding to the web page as this is a typical styling it can be applied using the stylesheet.
Using the style attribute of the paragraph tag makes it hard to manage the editing of the website because in the future if you want to change the styling you have to hunt down every instance of that inline style in all the pages. This can be quite a bit of work if you have a large site.
We would recommend that you try and avoid using this paragraph tag attribute all together but if you absolutely have to use it, use it very few times.
Note: the align attribute for the paragraph tag has been deprecated and you are to use your stylesheet instead to format the alignment of the paragraph tag contents.
Those are the most common paragraph tag attributes you will need to know.
The paragraph tag also has events associated with it.
Paragraph Tag Events
Events for the paragraph tag include:
Paragraph Mouse Events
Paragraph mouse events happen when the visitor moves, presses or releases the mouse button.
- onclick - when the visitor clicks on the paragraph
- ondblclick - when the visitor double clicks on the paragraph
- onmousedown - when the mouse button is pressed down over the paragraph
- onmousemove - when the mouse cursor is moved
- onmouseout - when the mouse cursor is not over the paragraph
- onmouseover - the mouse cursor is hovering over the paragraph
- onmouseup - the mouse button is released when over the paragraph
Paragraph Keypress Events
Paragraph keypress events occur when certain keys are used on the keyboard.
- onkeydown - when a key on the keyboard is pressed down
- onkeypress - a certain key on the keyboard is pressed and released
- onkeyup - when the key on the keyboard is released.
Notice that above all the event names are in lower case above. In previous editions of the HTML standards the case of the event name was mixed but as of HTML 4.01 (which forms part of XHTML) this was changed to all lower case.
We have covered the basics of the paragraph tag in this article.
For more advanced information about the paragraph tag visit: