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

code ... ⁄code

Share it

code intro code browser display code parents - children code syntax

HTML5 code element

The code element allows you to mark up computer code. »video

About code

Display & support code

Firefox iconChrome iconIE iconOpera iconSafari icon

Parents, children code

Attributes code

Observation: class global attribute on code element allows you to specify the language the piece of code belongs to:

e.g. for JavaScript:
<code class="language-javascript"> ... <⁄code>

Syntax code

1<code> ... </code> »video

Attributes and Values code (comma separated)

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

HTML5 code element: mark up computer code

min video details
00:00 video tutorial: code element
00:05 code element allows you to mark computer code
00:11 'reverse()', 'Array' and the fragment of code are part of the JavaScript language, language that can be specified like this, if you want: example on 'reverse()'

<code class="language-javascript"> reverse() <⁄code>

the language is added through class attribute like this:
00:19 since the next: ('reverse()', 'Array' and the fragment of code) are part of the programming language (JavaScript), are considered computer code → we can mark them properly using code element
00:50 you can recognize the computer code from the rest of the content due to its monospace font
00:55 for this fragment of JavaScript code, we can have in browser the exact same display ⁄format as in our Notepad file IF we use the pre element which preformats a block of text

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