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++


pre ... ⁄pre


Share it

pre intro pre browser display pre parents - children pre syntax

HTML5 pre element

The pre element allows you to mark up preformatted text. »video

About pre

Display & support pre

Firefox iconChrome iconIE iconOpera iconSafari icon

Parents, children pre

Attributes pre

Syntax pre

1<pre> ... </pre> »video

Attributes and Values pre (comma separated)

<preattribute="attribute_value(s)"> Video Examples
1. specific attributes
All Specific Attributes
2. global attributes
1.accesskey=keyboard key»img<pre accesskey="h"> ... </pre>
2.class=class name»html »img<pre class="class_name"> ... </pre>
3.contenteditable="",  , true, false »html<pre contenteditable="true"> ... </pre>
4.contextmenu=menu id value»html<pre contextmenu="menu_id_value"> ... </pre>
5.data-*= value -<pre data-http-error="404"> ... </pre>
6.dir=ltr, rtl, auto»html<pre dir="ltr"> ... </pre>
7.draggable= true,  , false»img<pre draggable="false"> ... </pre>
8.dropzone= copy, move, link, string:, file: -<pre dropzone="copy"> ... </pre>
9.hidden= "",  , hidden»html »img<pre hidden="hidden"> ... </pre>
10.id=id name»html »img<pre id="unique_id_name"> ... </pre>
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<pre lang="en"> ... </pre>
17.spellcheck="",  , true, false»html<pre spellcheck="true"> ... </pre>
18.style=CSS property:value»html »img<pre style="color:red"> ... </pre>
19.tabindex= integer »img<pre tabindex="3"> ... </pre>
20.title=text»html »link»style »abbr»dfn
»img »meter
<pre title="html page"> ... </pre>
21.translate="", yes, no»html »img<pre translate="yes"> ... </pre>
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 pre element

HTML5 pre element: mark up preformatted text

min video details
00:00 video tutorial: pre element
00:05 pre element allows you to mark preformatted text
00:13 in order to keep the exact same format in browser of this code, we will use the pre tag
00:17 note how the code displays on 4 lines in source code and on 1 line only in browser
00:32 → the exact same format in browser as in the source code for that fragment of JavaScript code: the white spaces and the line breaks are maintained due to pre element

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