W3-Video WEB Tutorials

w3-video.com is a Free eLearning Website with over 500 video tutorials on HTML5, XAMPP, .htaccess, Firefox, Notepad++

HTML5 Tutorial

Home HTML5 XAMPP .htaccess Firefox Notepad++

p ... ⁄p

Share it

p intro p browser display p parents - children p syntax

HTML5 p element

The p element allows you to mark up paragraphs in your HTML document »video

About p

Display & support p

Firefox iconChrome iconIE iconOpera iconSafari icon

Parents, children p

Attributes p


If a more appropriate element can be used to mark up a content, use that element and not p.

Syntax p

<p> ... </p>
<p> ... »video

Attributes and Values mark (comma separated)

<pattribute="attribute_value(s)"> Video Examples
1. specific attributes
All Specific Attributes
2. global attributes
1.accesskey=keyboard key»img<p accesskey="h"> ... </p>
2.class=class name»html »img<p class="class_name"> ... </p>
3.contenteditable="",  , true, false »html<p contenteditable="true"> ... </p>
4.contextmenu=menu id value»html<p contextmenu="menu_id_value"> ... </p>
5.data-*= value -<p data-http-error="404"> ... </p>
6.dir=ltr, rtl, auto»html<p dir="ltr"> ... </p>
7.draggable= true,  , false»img<p draggable="false"> ... </p>
8.dropzone= copy, move, link, string:, file: -<p dropzone="copy"> ... </p>
9.hidden= "",  , hidden»html »img<p hidden="hidden"> ... </p>
10.id=id name»html »img<p id="unique_id_name"> ... </p>
11.itemid= URL --
12.itemprop= string »link »a-
13.itemref= string --
14.itemscope= "",  , itemscope--
15.itemtype= absolute URL --
16.lang=language code »html »head»title »img<p lang="en"> ... </p>
17.spellcheck="",  , true, false»html<p spellcheck="true"> ... </p>
18.style=CSS property:value»html »img<p style="color:red"> ... </p>
19.tabindex= integer »img<p tabindex="3"> ... </p>
20.title=text»html »link»style »abbr»dfn
»img »meter
<p title="html page"> ... </p>
21.translate="", yes, no»html »img<p translate="yes"> ... </p>
All Global Attributes
3. global event attributes
1.onclick=script» list<element onclick="script" > ...
2.ondblclick=script» list<element ondblclick="script" > ...
All Event Attributes

Video demonstration p element

HTML5 p element: mark up paragraphs

min video details
00:00 video tutorial: p element
00:06 p element allows you to mark up paragraphs
00:10 let's consider the next 4 paragraphs (4 blocks of text separated through blank lines)
00:17 note: these blocks of text are not yet marked up with p element
00:25 the 4 blocks display like 1 at this time (like 1 paragraph)
00:30 the 4 paragraphs are marked up properly using p element
00:58 the 4 paragraphs display properly in browser

For more information about the p element, please see the specs: W3CWHATWG