Paragraph Tag 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. The contents of the paragraph. 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: nbsp; 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). The paragraph tag has a few basic attributes you should learn about to start with. 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 Paragraph tag events are things that happen when the mouse does something or a key on the keyboard is pressed. The event is applied using a script. The most basic script associated with paragraph tag events is Javascript. 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: HTML Tag - w3schools Paragraphs: the P element - HTML 4.01 Specification If you found this web page a useful resource for your own website please link as follows: Paragraph Tag 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. URL: htmlbasictutor.ca / paragraph-tag.htm
Posted on: Thu, 20 Jun 2013 08:53:57 +0000
Trending Topics
Recently Viewed Topics
© 2015