CSS Animatable Properties

CSS Keywords (inherit and initial)

CSS Pseudo-Properties (content, counter-increment and counter-reset)
CSS Rules (@font-face, @keyframes, @media)
CSS Selectors
CSS Units: Times, Lengths, Angles and Colours
Miscellaneous CSS Property Values (Border Styles and Edge Multi-Value Formats)
Default CSS Styles Applied to HTML Elements
HTML Special Characters
Markup languages
JavaScript Statements: Reserved Words
JavaScript String Variables
JavaScript Regular Expressions
JavaScript Numbers and Mathematical Functions
JavaScript Dates
JavaScript Booleans
JavaScript Arrays
JavaScript Objects
JavaScript Error Objects
JavaScript Operators
The JavaScript Document Object Model (DOM)
Further JavaScript Properties and Methods

To access HTML, CSS or JavaScript examples please go to the webpage on www.nematrian.com that
covers the specific feature you are seeking help with. More detailed examples (such as how to draw
spinning3d shapes) are provided here.
Disclaimer: Whilst we have made efforts to check the accuracy of the material in these pages, you should
note that HTML, CSS and JavaScript are evolving languages. Information contained in this document may
therefore be inaccurate or out-of-date. You should not rely on the accuracy or fitness for purpose of any
material that you obtain from the Nematrian website (or from its associated web services). If you need
these results to be accurate or fit for purpose then you should seek independent corroboration of
whatever you extract from the Nematrian website.
Whilst using the site, users may be directed to the websites of other organisations, over which Nematrian
may have no control and for which it takes no responsibility. A copy of the current Nematrian Web
Services License Agreement can be viewed here.

1
HTML Tutorial
Introduction
[HTMLTutorialIntroduction]
Hypertext Markup Language (HTML) is one of the three main components of modern webpages, along
with Cascading Style Sheets (CSS) and JavaScript. HTML indicates to the browser what elements should be
included in the webpage (and in what order). CSS indicates how each element should be styled. JavaScript
provides a means for webpage authors to manipulate these elements programmatically and in response
to actions by the end user. Tutorials and reference material covering all three components are available
here.

In these pages, we describe HTML further. Text used within HTML, CSS or JavaScript files is generally
shown in courier new (i.e. a fixed space) font. The pages contain links to an extensive body of reference
material explaining HTML, CSS and JavaScript in detail. We also provide a wide range of examples, which
can help you understand better how HTML, CSS and JavaScript work. See below for further details on how
to access these examples.
The concept of a markup language is explained further here. A document written in a markup language
like HTML has parts that get rendered in the eventual output, but also parts that inform the rendering
software how to interpret the remaining text. ‘Rendering’ here refers to the process of transforming the
text document containing the HTML text into e.g. its visual representation on a screen.
The markup used by HTML includes tags, like <p>…</p>, to demarcate different HTML elements within
the same webpage. In this case the <p> tag opens the relevant element and the </p> closes it. <p>
elements are typically used to delimit paragraphs in HTML. HTML elements can be nested within other
elements. Most elements can also be qualified by a range of attributes. For example, if we want to make
the text within a <p> element appear red we can ascribe it a CSS style, along the lines of <p
style="color:red;">.

Over time HTML has been refined. At the time of writing the latest version is HTML 5. Some aspects of
earlier versions of HTML are no longer recognised in HTML 5 and some of these are noted where
relevant.

Tutorial contents:

Introduction (i.e. this page)

Getting started
Carriage returns and thematic break lines
Commenting
Special characters
Hyperlinks
HTML elements (and their attributes)
Browser feature detection

To access HTML, CSS or JavaScript examples please go to the webpage on www.nematrian.com

that covers the specific feature you are seeking help with.
Disclaimer: Whilst we have made efforts to check the accuracy of the material in these pages, you should
note that HTML, CSS and JavaScript are evolving languages. Information contained in this

2
document may therefore be inaccurate or out-of-date. You should not rely on the accuracy or fitness for
purpose of any material that you obtain from the Nematrian website (or from its associated web
services). If you need these results to be accurate or fit for purpose then you should seek independent
corroboration of whatever you extract from the Nematrian website. Whilst using the site, users may be
directed to the websites of other organisations, over which Nematrian may have no control and for which
it takes no responsibility. A copy of the current Nematrian Web Services License Agreement can be
viewed here.

Getting started with HTML

[HTMLTutorialGettingStarted]

As explained in HTML and other markup languages, there are various ‘dialects’ of HTML. This means that
some examples of HTML may be understood by some browsers but rejected by others. The following
text, when put into a text editor and saved with a .htm file extension, will usually successfully render a
web page that says “Hello World (using HTML)” if the file is viewed in Microsoft Edge. Note that HTML
largely ignores page breaks; if you want to include a page break in the text shown to the user then you
need to add a <br> element (or a <br /> element if you are using XHTML, which is a modern variant of
HTML that involves a cross between classic HTML and XML).

<html>
<body>
Hello World (using HTML)
</body>
</html>

However, strictly speaking an HTML document is supposed to start with a document type declaration,
along the lines of e.g. <!DOCTYPE html> and a header along the lines of e.g.
<head><title>Document title</title></head>. So, a better way to create the page shown
above is as follows. We’ve added a comment into the document, using HTML comment tags.
Comments are not displayed by the browser but can help to document the HTML source text.

<!DOCTYPE html>
<html>
<head>
<title>My Document</title>
</head>
<!-- Only the text in the body will appear in the browser -->
<body>
Hello World (Using HTML)
</body>
</html>

Often, the <html> element also includes a lang attribute, as this can be important for accessibility
applications (such as screen readers) and for search engines. With the lang attribute, the first two letters
specify the language. If the language comes in various dialects then two more letters specify the dialect,
e.g.:

3
 <html lang="en-US">

Carriage returns and thematic break lines

[HTMLTutorialLineBreaks]

HTML markup largely ignores carriage returns (i.e. line breaks) within marked up files. Instead, if you
want to insert a carriage return you need to insert a <br> tag.
By ‘largely ignores’ we mean that browsers do not render carriage returns as line breaks as such (except if
certain styles apply to the element within which they appear, see e.g. the default formatting of the <pre>
element). However, carriage returns do affect how HTML handles spaces at the end of the line and at the
start of the following line. Leading spaces (i.e. ones on a line before any non-space characters) are
typically ignored, as are trailing spaces (i.e. ones on a line after the last non-space character). However,
browsers typically insert a 'breaking space' at the end of each line, which often then shows up as a single
space. Multiple spaces one after the other are interpreted as a single space. To include more than one
space in such instances you need to include a ‘non-breaking space’ as a special character, see here.

For example the following markup:

Hello (followed by two carriage returns)<br><br />

Hello
again and again

creates the following output:

Hello (followed by two carriage returns) Hello again and again

Webpage authors typically put a lot of effort into creating visually appealing material. One way of
breaking up text is to insert a thematic break line or horizontal rule, i.e. a <hr> tag, which places a line
across the window like:

Commenting
[HTMLTutorialCommenting]

It can be helpful to include comments in HTML documents that are not displayed but help readers of the
underlying markup text you to understand what the HTML is trying to do. Comments in HTML take the
form <!-- comment --> and ignore line breaks within the opening and closing tags of the comment
element.

For example, markup as follows:

<!-- material explaining how commenting in HTML

4
works-->

creates the following output (i.e. nothing):

Special characters
[HTMLTutorialSpecialCharacters]
The underlying markup of a webpage typically contains many more ampersand characters (i.e. &) than
appear in the rendered output. This is because the & character is part of the way in which HTML marks up
'special' characters, i.e. ones that would otherwise be understood by HTML to relate to markup. In HTML,
each special character is preceded by an ampersand, followed by the HTML markup name for that
character followed by a semicolon. Perhaps the most common special characters are:

Special character Meaning HTML code

ampersand & &amp;
space (technically a ‘non- (e.g. as in Hello again) &nbsp; (e.g. as in
breaking’ space) Hello&nbsp;&nbsp;&nbsp;again)
less than sign < &lt;
greater than sign > &gt;
quotation mark " &quot;
apostrophe ' &apos;

A fuller list of HTML special characters is available here.

Hyperlinks
[HTMLTutorialHyperlinks]

Many people associate web pages with hyperlinks, i.e. the ability to navigate from one page to another
page. In HTML, hyperlinks (also called ‘anchors’) typically have the following sort of structure:
<a href="Pages/AboutNematrian.pdf";>text</a>

The text is what the user sees, the value of href is where the link points to. Points to note include:

The ‘text’ material seen by the user can contain HTML, so can include e.g. images and formatted text
The href value used here, i.e. “Pages/AboutNematrian.pdf” means that the link points to a webpage (or
other resource) called “AboutNematrian.pdf” in the directory “Pages” (strictly speaking a subdirectory of
the directory in which the source webpage
resides, unless it e.g. starts with http:// or https:// or unless the document’s <base> element, if any,
defines a different base address to be used by relative uniform resource locators, i.e. ‘URLs’).

The above link renders as:

5
text

Groups of hyperlinks can be included in a <nav> element. For example, markup as follows:
<nav>
<a href="Introduction.aspx">Introduction</a> |
<a href="IntroductionSoftware.aspx">Software</a>
</nav>

creates the following output, involving 2 individual hyperlinks: Introduction | Software

HTML elements and their attributes
[HTMLTutorialHTMLElements]
The basic building blocks of HTML are elements (also called tags). A list of recognised elements is shown
here. Some HTML elements, like the hyperlinks in HTMLTutorialHyperlinks, are by default differentiated
from the text around them. The most general way of formatting text (capable of altering any of the
default formatting of any visible HTML element) involves use of Cascading Style Sheets (CSS) or in-file or
in-line equivalents, see Nematrian's CSS Tutorial. In-line CSS involves assigning a specific style attribute to
a given element. Other sorts of attributes can also be assigned to different sorts of elements. A list of
recognised attributes is shown here. The exact range of attributes valid for a specific element type does
vary; see individual elements or attributes for further details.

Many other elements are also by default differentiated from the text around them or exist primarily to
facilitate this sort of differentiation. Examples include:

HTML element Normally used for e.g. example

<address> Contact information for the author or owner of a Mr. Smith, 1, George
document Street, Georgetown
<b> Bold text 1, George Street,
Georgetown
<blockquote> Section that is quoted from another source 1, George Street,
Georgetown
<cite> Title of a work Systemic Risk
<code> A piece of computer code var x = 2.0;
<del> Indicates text deleted from a document abc
<dfn> Defining instance of a term HTML, a markup
language
Emphasised text (often used to italicise text, but HTML, a markup
<em> ideally this should be done using CSS, as emphasis language
does not need to involve italics)
<footer> Footer for a document or section HTML

6
 Header 1
Header 2
Header 3
Header 4
Header 5
<h1>, <h2>, <h3>,
<h4>, <h5>, <h6> HTML headings Header 6

<header> Header for a document or section HTML

<i> A part of text in an alternate voice or mood HTML, a markup
language
<ins> Indicates text added to a document def
<kbd> Keyboard input text representing
keyboard input
<mark> Marked/highlighted text text to highlight
preformatted text (in
fixed
<pre> Preformatted text -width
font that also preserves
spaces and line breaks

<q> Short quotation Mary had a little lamb

<s> Text that is no longer correct abc
<samp> Sample output from a computer program output
<small> Smaller text 1, George Street,
Georgetown
<strong> Defines more important text, commonly used as Mary had a little lamb
another way of highlighting text or making it bold
<sub> Subscripted text A1
<summary> Heading for a <details> element Heading
<sup> Superscripted text A1
<time> Date / time (N.B. isn't normally differentiated from 10:00
standard text in most modern browsers)
<u> Text that should be stylistically different from normal abc
text, commonly used for underlining
<var> Variable Param1
Posible line-break, the Word Break Opportunity tag
<wbr> specifies where in a text it would be ok to add a line-
break

7
Some HTML elements are no longer supported in HTML5. Although they often work in browsers you
should ideally use CSS instead. These include:

HTML element Normally used for e.g. example

<big> Big text 1, George Street,
Georgetown
<center> Centred text abc
<font> as in e.g. <font Green text green text
color="green">
<strike> Strikethrough text, not supported in abc
HTML 5 (instead use <del> or <s>)
<tt> Teletype text abc
Some HTML tags differentiate content, but primarily to assist the browser's understanding of that
content, e.g.:

HTML element Normally used for e.g. example

<abbr> as in e.g. <abbr Abbreviation or acronym Mr.
title="Mister">
<data> as in e.g. <data Links content with a machine-readable translation Apple
value="1011">
Some HTML tags demarcate content so that the material can be segmented up more effectively, or
assigned different formatting styles, e.g.:

HTML element Normally used for e.g. example

<article> Article Title
Material
<aside> Content aside from the page content Title
Material
<details> Additional details that a user can view or hide Title
Material
<div> Section in a document a single piece of
content
<main> Main content of a document main text
<p> Paragraph (by default has space added above and below a paragraph
the text)
<section> Section in a document a section
<span> Section in a document a section (span)
A summary of the default styles applied to each HTML element is set out here.

8
Browser feature detection
[HTMLTutorialFeatureDetection]

Hypertext Markup Language (HTML), Cascading Style Sheets (CSS) and JavaScript form the main elements
of modern webpages. However, different browsers do not always interpret these webpage components
in entirely consistent ways.

There are two main ways in which this occurs:

HTML, CSS and JavaScript are evolving through time, particularly as new ways of interacting with
webpages are developed. Most of their core components are understood by essentially all browsers.
However, some newer features may only work on some browsers. Some may be released in ‘beta’ or
‘test’ form, but may eventually be dropped in any finalised updates.
Webpages are nowadays accessed across a wide range of formats. These formats can take different
physical forms. Even when they involve a ‘traditional’ screen-based format, the screens can come in many
different sizes and resolutions (e.g. a PC-based screen is typically larger, and easier to resize, than a
mobile phone-based screen). This makes it desirable to alter the way in which material is displayed
depending on the format involved.
Historically, webpage developers solved this problem using ‘browser detection’. In this approach, the
developer would include in the webpage (or on the server delivering the webpage to the user) some
means of detecting which browser was being used to access the webpage. This had two main
weaknesses. First, there are now many different browser providers most of whom also have many
versions of their browsers available. This made it very difficult for developers to keep up with the
changing browser scene. Second, a ‘browser detection’ approach fails to address (b) above. The same
browser can run on multiple devices; if the devices themselves have different characteristics then these
won’t be captured merely by identifying the browser being used.

Nowadays, the trend is to use ‘feature detection’. In this approach, the developer includes elements or
other components in the webpage that identify if the browser and device being used to access the
webpage supports a specific feature. The output is then optimised bearing in mind whether the feature is
available.
Sometimes this type of functionality is explicitly built into HTML. For example, the media file formats
recognised by HTML <audio> and <video> elements vary by browser. These HTML elements specifically
allow developers to refer to more than one media source, depending on the format involved. The
browser being used can then select whichever source it recognises. If it doesn’t recognise any (or if it is
not new enough to recognise <audio> or <video> elements), fallback text will be displayed. The CSS
@media rule can also be used in a way that allows the developer to alter the style used by an element to
reflect the media in which the page is being viewed (e.g. the width or height of the device).

At other times, feature detection needs to be coded using JavaScript. The typical approach is to identify
whether a feature is supported by the browser and then to adjust output formatting accordingly.
However, it is not always easy to identify whether a specific feature is supported by the browser. Possible
methods include:

Use the hasFeature method to determine whether the JavaScript Document Object Model (DOM)
implementation supports the relevant feature
Search for DOM objects, properties or methods associated with the feature

9
Attempt to create an object that should have the feature and if creation is successful then test whether it
does support the feature

Unfortunately, the hasFeature method is not well supported by several browsers and its use is often not
recommended. The Nematrian website includes functions for many JavaScript features that can assist in
checking whether the feature is being supported by the browser being used at the time. See pages on
individual features for further details.

10
CSS Tutorial
Introduction
[CSSTutorialIntroduction]
Cascading Style Sheets (CSS) is one of the three main components of modern webpages, along with
Hypertext Markup Language (HTML) and JavaScript. HTML indicates to the browser what elements should
be included on the page (and in what order). CSS indicates how each should be styled.
JavaScript provides a means for webpage authors to manipulate these elements programmatically and in
response to actions by the end user. Tutorials and reference material covering all three components are
available here.

In these pages, we describe CSS further. Text used within HTML, CSS or JavaScript files is generally shown
in courier new (i.e. a fixed space) font. The pages contain links to an extensive body of reference material
explaining HTML, CSS and JavaScript in detail. We also provide a wide range of examples, which can help
you understand better how HTML, CSS and JavaScript work. See below for further details on how to
access these examples.
CSS instructions can be:

included within an individual HTML element (as part of the mark-up relating to that element), i.e. as ‘in-
line’ CSS
included in the HTML file where the relevant element(s) are located, but not directly within
the elements concerned, i.e. as ‘in-file’ CSS
included in external CSS files, i.e. as ‘external’ CSS, with a HTML <link> element used to indicate where
any such CSS files applicable to a given HTML file are located.

The style attributes of an HTML element can also be altered by JavaScript ‘on the fly’, e.g. after the page
has initially loaded or in response to specific user actions such as clicking a button.

CSS styles typically operate according to a hierarchy, with any JavaScript overrides taking precedence
over any CSS styles present when the page is initially loaded but otherwise in-line CSS taking precedence
over in-file CSS and in-file CSS taking precedence over external CSS (unless the
‘important’ characteristic is included in the style statement). In-file CSS is contained in a <style> element.
If there is more than one such element then later ones take precedence over earlier ones.

Older versions of HTML (e.g. HTML 4) require <style> elements to be in the <head> of the HTML file,
although most browsers currently seem to accept them even if they appear in the <body>. In theory, the
latest HTML version at the time of writing (HTML 5) has the concept of a ‘scoped’ attribute (e.g. <style
scoped>) which should allow you to apply different <style> elements to different parts of the webpage
(which could then legitimately appear in the <body> element), but not all browsers currently seem to
cater for this aspect of HTML 5.

External style sheets are referenced using a <link> element, which goes inside the <head> section. This
type of link element has a form such as:

<link rel="stylesheet" type="text/css" href="mystyle.css">.

External style sheets can be created in any text editor, should not contain any HTML tags (elements) and
should be saved with a .css extension.

11
In-file and external CSS are typically set out in the form of ‘rule-sets’. A rule set involves a selector and a
declaration block. The selector points to the type of HTML element to which the style applies, whilst the
declaration block contains one or more style declarations separated by semicolons. Each declaration
involves a CSS property name, followed by a colon, followed by the value assigned to the property.
For example, the style rule

h3 {color: blue; text-align: center;}

has a selector which is h3 and a declaration block which is {color: blue; text-align: center;}. It tells the
browser that any <h3> element (to which the rule applies) should be centre- aligned and appear in blue.
As with HTML, line breaks and multiple spaces are ignored.

Other types of selectors are introduced here and covered in more detail here.

In-line CSS rule-sets involve the style attribute (and do not include a selector or the curly brackets /
braces included in in-file or external CSS), e.g. they involve setting the element’s style attribute along the
lines of: style = "color: red";.
Comments in CSS start with /* and end with */ and can span multiple lines.

Over time CSS has been refined. At the time of writing the latest version is CSS3. Features in CSS1 and
CSS2 can typically still be used in CSS3.

Tutorial content

Introduction (i.e. this page)

Selectors
Hints and further information
To access HTML, CSS or JavaScript examples please go to the webpage on www.nematrian.com
that covers the specific feature you are seeking help with.

Disclaimer: Whilst we have made efforts to check the accuracy of the material in these pages, you should
note that HTML, CSS and JavaScript are evolving languages. Information contained in this document may
therefore be inaccurate or out-of-date. You should not rely on the accuracy or fitness for purpose of any
material that you obtain from the Nematrian website (or from its associated web services). If you need
these results to be accurate or fit for purpose then you should seek independent corroboration of
whatever you extract from the Nematrian website.
Whilst using the site, users may be directed to the websites of other organisations, over which Nematrian
may have no control and for which it takes no responsibility. A copy of the current Nematrian Web
Services License Agreement can be viewed here.

Selectors
[CSSTutorialSelectors]

CSS is typically set out in the form of ‘rule-sets’, which involve a selector and a declaration block. Usually
CSS is applied to types of elements. For example, the style rule

12
h3 {color: blue; text-align: center;}

has a selector which is h3 and a declaration block which is {color: blue; text-align: center;}. It tells the
browser that any <h3> element (to which the rule applies) should be centre- aligned and appear in blue.
As with HTML, line breaks and multiple spaces are ignored.
However, within HTML you can also define classes of elements with common formatting styles using
the element’s class attribute. For example, the style rule

.center {color: red; text-align: center}

would indicate that any element with a class attribute equal to center should be centre-aligned and
appear in red.

You can also apply CSS to elements of a specific type and class. For example, the style rule

h3.center {color: green;}

would indicate that <h3> elements that have their class attribute equal to center should be green.
In-file CSS can also be applied to individual elements, if the id attribute of the HTML element has been set
(the id attribute should be unique within any given page). If you want to use this type of CSS then precede
the id value by a hash (#) character.

For example, the style rule

#para1 {color: yellow}

would be applied to the HTML element with id equal to para1 (provided there is such an element) and it
would appear yellow (unless overridden by a later style rule).

You can also group together rules for elements with the same style definitions, separating each selector
with a comma. For example,
h1 {color: red;} h2 {color: red;} h3 {color: red;}

can be grouped together as follows to minimise code and make it easier to follow:

h1, h2, h3 {color: red;}

More general ways of identifying CSS selectors are set out here.

Hints and further information

[CSSTutorialHints]
CSS Values

13
In CSS, if you are using values that have units, e.g. applying values that are to be interpreted as CSS
lengths (e.g. setting the size of an element’s left margin using e.g. margin-left: 20px) then you should not
include a space between the value (here 20) and the unit (here px) as otherwise the style may be ignored.
There are several ways of defining lengths in CSS. There are also specific conventions used when defining
CSS times, CSS angles and CSS colours.

Hierarchy in CSS style rules

If you have two or more style rules that would otherwise apply to a specific attribute of a specific element
then the hierarchy rules are that:
More specific rules override more general ones. Specificity is defined based on how many IDs, classes and
element names are involved as well as by whether there is an !important declaration.
When even these do not differentiate between styles then whichever one appears last is the one that is
applied.

For example, without the !important flag, <h3> elements using the following styles would appear green
(as the green style rule is after the red one), but with the !important flag it is the red one that applies in
this instance:
h3 {color: red !important} h3 {color: green}

Setting the CSS style of the whole page

The style of the whole page can be set by a style rule such as:

body {background-color: lightblue;}

Multi-valued CSS properties

Some CSS properties take several values. For example, many HTML elements are deemed to have 4 sides
(top, right, bottom and left) and there are conventions on how to define properties that encompass all
four sides simultaneously, see here.
More generally, some CSS properties are shorthand properties that set several other more granular
properties at the same time.

Animation and other more sophisticated features

CSS has developed over the years and it is now possible to create relatively sophisticated animation
effects using the CSS @keyframes rule, without needing to implement these animations using JavaScript.
It is also possible to apply different styles depending on the device being used to render the material,
using the CSS @media rule. Material can be automatically added before or after HTML elements using
CSS ‘pseudo-properties’, such as the content pseudo-property.
Styling of hyperlinks

Links can be styled differently depending on what state they are:

14
 Link state Description
a:link Normal, unvisited link
a:visited Link that user has visited
a:hover Link when the user moves a mouse over it
a:active Link at the moment it is clicked

Advanced table formatting

Zebra-striped tables can be implemented using the nth-child selector, e.g.:

tr:nth-child(even) {back-ground-color: #f2f2f2;}

To make a table responsive (i.e. to display a horizontal scroll bar if the screen is too small to display in full)
you can add a container element with overflow-x:auto, e.g.:

<div style=”overflow-x:auto;”><table> … </table></div>

15
JavaScript Tutorial
Introduction
[JavaScriptTutorialIntroduction]
JavaScript is one of the three main components of modern webpages, along with Hypertext Markup
Language (HTML) and Cascading Style Sheets (CSS). HTML indicates to the browser what elements should
be included on the page (and in what order). CSS indicates how each should be styled.
JavaScript provides a means for webpage authors to manipulate these elements programmatically and in
response to actions by the end user. Tutorials and reference material covering all three components are
available here.

In these pages, we describe JavaScript further. Text used within HTML, CSS or JavaScript files is generally
shown in courier new (i.e. a fixed space) font. The pages contain links to an extensive body of reference
material explaining HTML, CSS and JavaScript in detail. We also provide a wide range of examples, which
can help you understand better how HTML, CSS and JavaScript work. See below for further details on how
to access these examples.
JavaScript can be added to a webpage in one of three ways (somewhat akin to how CSS can be added to a
webpage):

By including it within an individual HTML event attribute. This typically involves only very small JavaScript
statements.
Within separate <script> elements in the HTML
In external script files (these involve including in the HTML a <script> element with its src attribute set to
the relevant script file name).

A simple example of JavaScript involves the use of the document.write method. For example, the
following HTML text would return a web page the first line of which says “Hello World (using HTML)”
followed by a line break and a second line saying “Hello World (using HTML)”. Script elements are
typically executed in the order in which they appear when the page is first loaded. In this case the script
cause the browser to add some more text to the web page.

<html>
<body>
Hello World (using HTML)<br>
<script>
<!--
document.write("<br>Hello World (using Javascript)")
//-->
</script>
</body>
</html>

More sophisticated approaches can alter individual HTML elements rather than merely adding to the end
of the document or can react to events such as the clicking of a button. For example, the following HTML
text returns a web page with two lines, the first being “Hello World (using HTML)” and the second line
being “and using JavaScript”.
<!DOCTYPE html>

16
<html>
<head></head>
<body>
Hello World (using HTML)<br>
<em id="Added"></em>

<script>
document.getElementById("Added").innerHTML="and using JavaScript"
// Adds text to the element with id="Added"
</script>

</body>
</html>

Note: we are here taking advantage of the execution of script commands when the page first loads. A
more complicated (but more general way) of achieving the same result would be to add an ‘event
listener’ that is triggered when the page loads and to have a function associated with this event listener
that alters (here adds) the text in the desired manner when the event happens. By attaching the function
to a different event, e.g. one triggered when the user clicks on an element then the a more responsive
webpage can be created.

JavaScript comments

When writing computer software, it often helps to add explanatory comments. In JavaScript, a single line
comment is indicated by “code // text” where the code is still executed, but the text is ignored by the
Browser.
Any text between “/*” and “*/” (not in quotes) including line breaks is also ignored, allowing authors to
create multi-line comments. These tend to be used for formal documentation, e.g. material at the start of
each function that describes what the function does.

Tutorial contents:

Introduction (i.e. this page)

Variables
Statements
Functions
Event handling
The Document Object Model (DOM)
Miscellaneous

To access HTML, CSS or JavaScript examples please go to the webpage on www.nematrian.com

that covers the specific feature you are seeking help with.

Disclaimer: Whilst we have made efforts to check the accuracy of the material in these pages, you should
note that HTML, CSS and JavaScript are evolving languages. Information contained in this document may
therefore be inaccurate or out-of-date. You should not rely on the accuracy or fitness for purpose of any
material that you obtain from the Nematrian website (or from its associated web services). If you need
these results to be accurate or fit for purpose then you should seek independent corroboration of
whatever you extract from the Nematrian website.
Whilst using the site, users may be directed to the websites of other organisations, over which

17
Nematrian may have no control and for which it takes no responsibility. A copy of the current Nematrian
Web Services License Agreement can be viewed here.

Variables
[JavaScriptTutorialVariables]

A variable in JavaScript is defined by a command such as:

var x;

If you want to set a variable to a value when it is first defined then you generally use the assignment
operator within this definition, e.g.:

var x = 10;

JavaScript recognises the following types of ‘primitive’ variables:

String variables
Number variables
Date variables
Boolean variables

Variables can also be objects and arrays (and for some string manipulation purposes, regular
expressions). In JavaScript, an array is a special type of object that is indexed along the lines of a[0], a[1]
…. Arrays can consist of other objects, including other arrays.
Several variables can be defined in the same statement, with each one separated by a comma, e.g.:

var x = 10, y = 15, z = 20;

Variables that have not yet been defined a value have their value as undefined.

If you redefine a variable, it retains its previous value. For example, after the statements
var x = 10; var x;

the variable x still has the value 10.

Variables are manipulated using operators and functions. For example, numbers can be added together
using the addition operator or functions can be applied to them, e.g.:
var x = 0.1 + 0.2; function sinsquared(x) {
var a;
a = Math.pow(Math.sin(x),2); return a;
}
var y = sinsquared(0.3);

JavaScript variable names (i.e. identifiers) follow certain rules:

18
They can contain only letters, digits, underscores and dollar signs
They must typically begin with a letter (in some cases they can also begin with a $ or an _ character)
The names are case sensitive (i.e. a and A are different names)
They cannot be reserved words, such as those used in JavaScript statement construction)

An important concept in programming is the scope of a variable (or more precisely of its name). This is
the part of the code within which the relevant variable is accessible via its name. If code is segmented
into blocks then it is often desirable to use a similar variable name in different blocks but for the names to
then be associated with different variables depending on the block in question. The scope of a JavaScript
can be local or global. Variables defined inside functions are local to that function, whilst those defined
outside functions are global in scope. Local variables are deleted when the function completes, while
global variables remain available until the user closes the browser window or tab within which the page
has been loaded. This means that they are available to new pages loaded into the same browser window.
Function arguments work in the same manner as local variables inside a function.

String variables

Strings consist of a series of consecutive characters, e.g.

var x = "Cat";

A string technically consists of a series (an ‘array’, except that a JavaScript array is a specific type of
variable) of characters, which is zero-indexed. So, if we assigned x the value of "Cat" then x[0] would be
"C", x[1] would be "a", etc.

Further details on the methods and properties supported by string variables are set out in JavaScript
Tutorial: Strings.
Regular expressions

Some string methods and properties involve ‘regular expressions’. These take the form:

/pattern/modifiers

e.g.:

var x = /nematrian/i;

Further details on the methods and properties supported by regular expressions variables are set out in
JavaScript Tutorial: Regular Expressions.

Numbers (and mathematical manipulations)

JavaScript has only one type of number (in contrast to, e.g. Visual Basic, which differentiates between e.g.
integers, floating point numbers and double precision numbers). Numbers can be written with or without
decimal points and/or with or without (scientific) exponents), e.g.
var x = 4.1; // With a decimal point var y = 4; // Without a decimal point

19
var p = 135e6 // Means 135000000 var q = 13.5e-3 // Means 0.0135

Further details on the methods and properties supported by numbers and by the Math object (which can
be used to carry out mathematical manipulations) are set out in JavaScript Tutorial: Number variables and
mathematical functions.

Dates

Date variables are objects and contain dates and times. They can be instantiated in 4 ways:

var d1 = new Date(); // An as yet undefined date var d2 = new Date(milliseconds); // See below
var d3 = new Date(dateString); // See below
var d4 = new Date(year, month, day, hours, minutes, seconds, milliseconds);

Here milliseconds refers to the number of milliseconds since 1 January 1970 00:00:00. A dateString is a
piece of text that the browser can recognise as representing a date.

Further details on the methods and properties supported by numbers and by the Math object (which can
be used to carry out mathematical manipulations) are set out in JavaScript Tutorial: Dates.

Booleans

Boolean variables take one of two values, true or false. They are instantiated by a statement such as:

var b = true;

You can use the Boolean() function to identify whether an expression is true or false, although it is
simpler just to use operators that return Boolean outputs, e.g. Boolean(2 > 1), (2 > 1) or even 2 > 1 all
return true.

Further details on the methods and properties supported by Boolean variables are shown in JavaScript
Tutorial: Booleans.
Arrays

Arrays contain multiple (indexed) values in a single variable. Array indices are zero-based, i.e. the first
element of the array has as its index 0, the second 1 etc. They are instantiated by statements such as:

var a = ["France", "Germany"];

var b = [1, 2, 5, 4];

It is worth noting that elements of arrays can themselves be arrays since technically an array is a specific
type of object.

Further details on the methods and properties supported by arrays (and some of the subtleties that arise
if you want to copy them) are set out in JavaScript Tutorial: Arrays.

Objects

20
JavaScript objects are containers that contain properties and methods. For example, a statement such as:
var person = {title:"Mr", surname:"Smith", age:30}

creates an object that has three properties, i.e. name-value, pairs that in this instance characterise (some
of the features of) a person.

Object properties can be accessed in two ways, either here e.g. person.title or person["title"] (both of
which in this instance would return a value of "Mr"). An array is a specific type of object with the property
names indexed from 0 up to the length of the array less 1 (and hence elements of arrays can themselves
be arrays or other sorts of objects).

Object methods are functions that can be applied to objects. They are technically also property-like in
nature, i.e. again come in name-value pairs, but with the ‘name’ being a function name (with
parameter definitions if necessary) and the ‘value’ being the JavaScript function script associated with
that function, see JavaScript Tutorial: Objects.

A special type of object is the Error object, which is used for error handling.

Statements
[JavaScriptTutorialStatements]

JavaScript statements identify instructions that are executed by the web browser. For example, the
following statement tells the browser to write “Hello World” inside an HTML statement with the id
attribute = "element":
document.getElementById("element").innerHTML = "Hello World"

The same result can be achieved using several separate statements, e.g.:

var d = document.getElementById("element"); var x = "Hello";

var y = " World"; var z = x + y; d.innerHTML = z;

Statements are separated by semicolons and multiple statements are allowed on one line. JavaScript
ignores multiple spaces (except in strings, i.e. within quotation marks). A common good practice is to put
spaces around operators (e.g. =, + , …). Very long lines of code are also often frowned upon, and are
usually broken after an operator.
Statements can (and often are) grouped together in code blocks, inside curly brackets, i.e. { … }. A
particularly important example of the use of code blocks involves functions, which provide a means of
executing on demand one or more statements, e.g.:

function func() {
document.getElementById("element").innerHTML = "Hello";
}

21
Statements often start with a statement identifier. These are reserved words which cannot be used as
variable names or for other purposes. A list of statement reserved words recognised by JavaScript is
shown here. They include: break, continue, do, for, if, return, switch, throw, try, catch, var and while.
Most JavaScript programs contain many statements, which are executed one by one in the order in which
they are written except when statement flow control is adjusted using statements such as for, if or while.

Functions
[JavaScriptTutorialFunctions]

A JavaScript function is a block of JavaScript code that can be executed as a discrete unit. It involves a
function statement along the lines of e.g.:
function func() {
document.getElementById("element").innerHTML = "Hello";
}

Function definitions can include parameters (separated by a comma if more than one parameter),
e.g. the following (if passed a string variable) would allow any text to be inserted in the relevant
element’s innerHTML.
function func2(x) { document.getElementById("element").innerHTML = x;
}

Such a function would be invoked by JavaScript such as func2("Hello World").

Functions are much like procedures or subroutines in other programming languages. The code inside the
curly brackets executes when the function is invoked. This can happen when an event occurs, when the
function is called from JavaScript code or sometimes when it is self-invoked. If a function includes a
return statement then the function will stop executing and will return the value identified by the
function’s return statement. The function (technically, a special type of object) can be distinguished from
the act of invoking it. The () operator invokes the function, e.g. in the above func refers to the function
object, but func() will invoke the function itself.

The function parameters are the names listed in the function definition (i.e. the x in the definition of
func2). Function arguments are the values received by the function (i.e. assigned to the function
parameters) when it is invoked.
Function names can contain letters, digits, underscores and dollar signs (the same rules as apply to
variable naming applies to function naming). Wherever a variable can be used, a valid function call
evaluating to the same value can also be used.

Event handling
[JavaScriptTutorialEventHandling]

22
A responsive website needs to respond to users when the users act in specific ways, e.g. loading a page,
clicking on a button, moving a mouse around a document window etc. JavaScript, like many other
modern more sophisticated general-purpose programming languages, includes the concept of events.
These assign specific functions to specific events, with the functions being invoked if/when the event
occurs.
Event handling linked to individual elements, such as what happens when someone clicks on an element,
is often implemented by assigning a specific function to the event attribute of that element, see here.

Global events (not linked to specific HTML elements), such as those triggered by loading the page, are
typically implemented by using e.g. the document.addEventListener method, e.g.:

document.addEventListener('load', addtext());

The Document Object Model (DOM)

[JavaScriptTutorialDOM]
The JavaScript HTML Document Object Model (‘DOM’) provides a way for JavaScript to access all
elements of an HTML webpage. Fuller details of the DOM are given here. There is an associated Browser
Object Model (BOM), details of which are given here.

The browser creates a DOM (i.e. a document object) for a page when the page is first loaded. This has a
tree structure, with the root element (or ‘node’) being the page’s <html> element. The root element then
has two sub-elements (or ‘nodes’), i.e. the <head> element and the <body> element.

The <head> element will in turn often include as one of its ‘child’ nodes a <title> element. The
<body> element contains the main body of the webpage and will typically contain many different
elements, some nested within others. JavaScript can change all the elements (including all their
attributes), can add new elements or remove existing ones, can react to all existing events and create
new ones.

Formally, the DOM is a W3C (World Wide Web Consortium) standard. It has the following aim, according
to W3C: “The W3C Document Object Model (DOM) is a platform and language-neutral interface that
allows programs and scripts to dynamically access and update the content, structure and style of a
document.” It is formally subdivided into three parts: (a) the Core DOM for all document types, (b) the
XML DOM for XML documents, and (c) the HTML DOM for HTML documents. It adopts an object-
orientated programming approach, with the HTML elements being objects which have properties and to
which can be applied methods. The elements can also trigger events.

A common way of accessing an element is to assign it an id (i.e. set its id attribute object to a prespecified
value). The element can then be identified in Javascript by applying the getElementById method to the
document object, returning an object corresponding to the element. Its properties (e.g. its innerHTML
property, which is the text within an element) can be set by assigning values to the relevant property of
the element object. For example, the following example returns a web page that says “hello”.

<html>
<body>

23
<div id="example"></div>
<script>document.getElementById("example").innerHTML = "hello"</script>
</body>
</html>

Common ways of accessing the DOM include:

Aim Example JavaScript Description

Finding / document.getElementById(id) Returns object
accessing corresponding to element
elements with this id attribute
document.getElementsByTagName(name) Returns collection of
elements by tag name
(i.e. by type of element)
document.getElementsByClassName(name) Returns collection of
elements by class name
document.querySelectorAll(CSSSelector) Returns collection of
elements by CSSSelector
Changing element.innerHTML = HTMLcontent Change inner HTML of
elements element
element.attribute = value Change attribute value of
element (value needs to
be valid for that attribute)
element.setAttribute(attribute, value) Change attribute value
for a given element
Adding and document.createElement(element) Creates HTML element
deleting document.appendChildElement(element) Add HTML element
elements document.removeChildElement(element) Remove HTML element
document.replaceChildElement(element) Remove HTML element
document.write(element) Write directly to HTML
output

Other points to note about the DOM include:

The DOM uses the idea of nodes and a node tree. This involves a tree structure where each branching
point is a separate node. So, nodes belong to (are children of) just one other node (their parent) back to
the root node (which in the DOM is the document object)
HTML elements are ‘element’ nodes, the attributes of these elements are ‘attribute’ nodes, the text
within HTML elements are ‘text’ nodes and comments are ‘comment’ nodes
A NodeList object represents a set of nodes, e.g. an HTML element’s collection of child nodes. These will
be indexed and each node within the NodeList can then be associated with another NodeList (its children)
The HTML document, once it has been loaded into the web browser, is formally part of the corresponding
Window object and can therefore be accessed via window.document
The DOM supports a range of (own) methods and properties, see here.
HTML elements (‘nodes’) within the DOM also support a range of more generic methods and properties,
see here. These also apply to the document object itself but do not always make much sense when
applied in this manner.

24
HTML element attributes are represented by an Attr object. These are always children of a specific HTML
element. The properties and methods that apply to Attr objects are shown here.
A NamedNodeMap object represents an unordered collection of nodes, e.g. the set of attributes assigned
to a given HTML element. Properties and methods that apply to NamedNodeMap objects are shown
here.
The DOM object and its components can be thought of as an example of an XML document. XML
documents have several methods and properties not otherwise covered in the above (such as
XMLHTTPRequest, which can be used to send, request and receive data from the server once a webpage
has loaded), see here.
Further details are set out in the following pages and in links within them:

DOM own properties and methods

HTML Element objects: Properties and Methods
HTML Attribute objects: Properties and Methods
NamedNodeMap objects: Properties and Methods
Event objects: Properties and Methods
MouseEvent objects: Properties and Methods
KeyboardEvent objects: Properties and Methods
HashChangeEvent objects: Properties and Methods
PageTransitionEvent objects: Properties and Methods
FocusEvent objects: Properties and Methods
AnimationEvent objects: Properties and Methods
TransitionEvent objects: Properties and Methods
WheelEvent objects: Properties and Methods
TouchEvent objects: Properties and Methods

Style objects: Properties and Methods

Creating and Accessing HTML Elements in JavaScript
Standard HTML DOM properties and methods
The JavaScript BOM (Browser Object Model)
The JavaScript XML DOM

Miscellaneous
[JavaScriptTutorialMiscellaneous]

We set out below some further comments on JavaScript that may help developers.
JavaScript syntax:

Statements are separated by semicolons, e.g. var x, y, z; x = 3;

The language consists of values, operators, expressions, keywords and comments
Values can be literals (fixed values) or variables.
Number literals are written with or without decimal points, e.g. 100 or 10.1 (commas should not be used
as the decimal separator)
String literals are text, written within double or single quotes, e.g. x = "35"; y = 'a';
Variables are declared using the var keyword, e.g. var x; var y = 10;
The equal sign is used to assign a value to a variable, e.g. x = 3;, i.e. it is the assignment operator

25
An expression is a combination of values, variables and operators
String concatenation is achieved by +, e.g. "a" + " " + "b" evaluates to "a b"
Comments are noted by text after double slashes “//” or between /* and */
Identifiers are used to name variables. The first character must be a letter, an underscore
character (“_”) or a dollar sign (“$”)
JavaScript is case sensitive, e.g. firstName, FirstName and firstname will be three different variables
JavaScript typically uses ‘lower camel case’ when joining multiple words together, i.e. first letter of first
word is lower case, first letter of each subsequent word is upper case, e.g. “firstName”. Some methods
and properties specifically use this convention, and because JavaScript is case sensitive it means that
using a different convention will result in an incorrect (or failed) evaluation. Developers often adopt the
same convention when naming variables.
JavaScript uses the Unicode character set

Displaying (text / numerical) data using JavaScript:

Text and values can be inserted into an HTML element, using e.g. the innerHTML property
We can write to the browser output stream, using e.g. document.write() (this is useful for testing
purposes)
We can write to an alert box, using e.g. window.alert()
We can write into the browser console, using e.g. console.log()

Location of any JavaScript within HTML webpages:

HTML in-file JavaScript needs to be inserted in script elements.

Any number of scripts can be included in an HTML document and can be placed in either the
<body> or the <head> section

Global methods and properties:

JavaScript has some global properties and functions that can be used with all built-in JavaScript objects.
These include:

Global properties:

Property Description More

Infinity A number that is positive infinity (-Infinity Here
refers to a number that is negative infinity)
NaN Not-a-Number result of a numeric calculation Here
undefined Indicates variable has not been assigned a value Here

Global methods:
These are perhaps best referred to as global ‘functions’ since they are called globally.

Method / Function Description More

Boolean() Converts an object’s value to a Boolean (i.e. true Here
or false)
decodeURI() Decodes URI Here
decodeURIComponent() Decodes URI component Here
encodeURI() Encodes URI Here
encodeURIComponent() Encodes URI component Here

26
 escape() Depreciated. Use encodeURI() or Here
encodeURIComponent() instead
eval() Evaluates a string as if it were script code Here
isFinite() Returns true if finite, otherwise false Here
isNaN() Returns true if NaN, otherwise false Here
Number() Converts an object’s value to a number Here
parseFloat() Parses a string and returns a floating-point number Here
parseInt() Parses a string and returns an integer Here
String() Converts an object’s value to a string Here
unescape() Depreciated. Use decodeURI() or Here
decodeURIComponent() instead

Properties shared by multiple JavaScript objects:

JavaScript includes some properties that can be applied to any object and can allow the user to alter the
methods and properties applicable to the object. These include:

Property Description More

constructor Returns object’s constructor function Here
length Returns the length of the object Here
prototype Allows author to add properties and methods to an Here
object

Conversions between variable types:

An area of JavaScript that can be confusing (and hence can lead to errors) is the handling of conversions
between different variable types. JavaScript is ‘weakly typed’, i.e. variables can change type in some
circumstances. Examples of what happens when variables are explicitly converted using global type
conversion functions are set out below. It is important to bear in mind that type conversion can also
happen implicitly, e.g. if we try to concatenate a number with a string then the number will be converted
to a string beforehand.

Original value (x) Result of conversion to a Result of conversion to a Result of conversion to a

string, using number, using Boolean, using
String(x) Number(x) Boolean(x)
false "false" 0 false
true "true" 1 True
0 "0" 0 false
1 "1" 1 True
"0" "0" 0 false
"1" "1" 1 True
NaN "NaN" NaN false
Infinity "Infinity" Infinity True
-Infinity "-Infinity" -Infinity True
"" "" 0 false
"10" "10" 10 True
"ten" "ten" NaN True
[] "" 0 True
[10] "10" 10 True

[5,10] "5,10" NaN True

27
 ["ten"] "ten" NaN True
["five","ten"] "five","ten" NaN True
function(){} "function(){}" NaN True
{} "[object NaN True
Object]"
null "null" 0 False
undefined "undefined" NaN False

It is worth noting that some of the global type conversion functions are mimicked by type conversion
functions attached to specific object types. The behaviours of the two apparently similar functions are not
always identical, as the ones attached to specific object types will include a conversion into the relevant
type before there is an attempt to convert the variable into its eventual output type.
Recent developments:

In recent years, the capabilities and therefore sophistication of the JavaScript language has grown
considerably. Browser developers have put a considerable amount of effort into arranging for JavaScript
code to run as quickly as possible within browsers. For example, they have developed ‘just in time’
compilation techniques to supplant older purely interpreted ways of executing the JavaScript statements.
JavaScript as a language has been standardised and object-orientated programming tools such as error
trapping have been added. Event handling (which is particularly important for browser based programs)
has been further refined. Its DOM has continued to evolve and become more sophisticated as website
usage has expanded and evolved.

28
Appendix A: HTML Elements
[HTMLElements]

Conventionally in HTML, everything between the start of a start tag and the end of its corresponding end
tag is called an element. The element content is the material between the start and end tag. In HTML,
some tags are automatically empty, such as <br> and hence don’t have any element content or end tag.
For example:

HTML Element Start tag Element content End tag

<h1>My heading</h1> <h1> My heading </h1>
<p>My paragraph</p> <p> My paragraph </p
<br> <br>

The following is a list of HTML elements / tags. HTML 5 is the latest available version of HTML as at the
time of writing. Some elements allowable in previous HTML versions have been discontinued in it and it is
advisable not to use these elements anymore. Conventions used to open and close elements in XHTML
are not quite the same as those used in HTML.

Tag Description More Further comments

<!-- … --> A (potentially multiline) comment Here
<!DOCTYPE> Document type Here
<a> Hyperlink Here
<abbr> Abbreviation or acronym Here
<acronym> Acronym Here Not supported in HTML 5
<address> Contact information for the author or Here
owner of a document
<applet> Embedded applet Here Not supported in HTML 5
(instead use <embed> or
<object>)
<area> An area inside an image map Here
<article> Article Here New in HTML 5
<aside> Content aside from the page content Here New in HTML 5
<audio> Sound content Here New in HTML 5
<b> Bold text Here
<base> The base URL/target for all relative Here
URLs in a document
<basefont> Default font, colour and size of all text Here Not supported in HTML 5
in a document (instead use CSS)
<bdi> Isolates a part of text that might be Here New in HTML 5
formatted in a different direction to
other text outside that part
<bdo> Overrides the current text direction Here
<big> Big text Here Not supported in HTML 5
(instead use CSS)
<blockquote> Section that is quoted from another Here
source
<body> The body of the document Here
<br> A single line break (c.f. a carriage Here
return)
<button> A clickable button Here

29
<canvas> Used to draw graphics via scripting Here New in HTML 5
(usually via JavaScript)
<caption> Table caption Here
<center> Centred text Here Not supported in HTML 5
(instead use CSS)
<cite> Title of a work Here
<code> A piece of computer code Here
<col> Indicates column properties assigned to Here
each column within a <colgroup>
element
<colgroup> Specifies a group of one or more Here
columns in a table
<data> Links content with a machine-readable Here New in HTML 5
translation
<datalist> A list of pre-defined options for an Here New in HTML 5
<input> control
<dd> Description or value of an entry in a Here
description list
<del> Indicates text deleted from a Here
document
<details> Additional details that a user can view Here New in HTML 5
or hide
<dfn> Defining instance of a term Here
<dialog> Dialog box or window Here
<dir> Directory list Here Not supported in HTML 5
(instead use <ul>)
<div> Section in a document Here Usually assigned its own
style
<dl> Description list Here
<dt> Term or name in a description list Here
<em> Emphasised text Here Often used to italicise text,
but ideally this
should be done using CSS
<embed> A container for an external (non- Here New in HTML 5
HTML) application
<fieldset> Groups related elements in a form Here
<figcaption> A caption for a <figure> element Here New in HTML 5
<figure> Self-contained content Here New in HTML 5
<font> Font, colour and size of text Here Not supported in HTML 5
(instead use CSS)
<footer> Footer for a document or section Here New in HTML 5
<form> An HTML form for user input Here
<frame> A window (frame) within a frameset Here Not supported in HTML 5
<frameset> A set of <frame> elements Here Not supported in HTML 5
<h1>, <h2>, HTML headings Here Provides a hierarchy of
<h3>, <h4>, headings
<h5>, <h6>
<head> Provides information about the Here
document
<header> Header for a document or section Here New in HTML 5

30
<hr> Indicates a thematic change in the Here Often rendered as a line
content across the window
<html> Is the root node of an HTML document Here Only <!DOCTYPE>
elements should appear
outside the <html> element

<i> A part of text in an alternate voice or Here

mood
<iframe> An inline frame Here
<img> An image Here
<input> A (single-line) input control Here
<ins> Indicates text added to a document Here
<kbd> Keyboard input Here
<keygen> A key-pair generator field (for forms) Here New in HTML 5
<label> A label for an <input> element Here
<legend> Caption for a <fieldset> element Here
<li> A list item Here
<link> Defines the relationship between a Here Most commonly used to
document and an external resource link to style sheets
<main> Main content of a document Here New in HTML 5
<map> A client-side image-map Here
<mark> Marked/highlighted text Here New in HTML 5
<menu> Menu or list of commands Here
<menuitem> A menu item/command that a user Here New in HTML 5
can invoke from a popup menu
<meta> Metadata about an HTML document Here
<meter> A scalar measurement within a specific Here New in HTML 5
range (a gauge)
<nav> Navigation links Here New in HTML 5
<noframes> Alternate content for users whose Here Not supported in HTML 5
browsers do not support frames
<noscript> Alternate content for users whose Here
browsers do not support client-side
scripts
<object> Embedded object Here
<ol> Ordered list Here
<optgroup> Group of related options in a drop- Here
down list
<option> An option in a drop-down list Here
<output> The result of a calculation Here New in HTML 5
<p> Paragraph Here
<param> Parameter for an object Here
<picture> A container for multiple image Here New in HTML 5
resources
<pre> Preformatted text Here
<progress> Represents the progress of a task Here New in HTML 5
<q> Short quotation Here
<rp> Indicates what to show in browsers Here New in HTML 5
that do not support ruby annotations

31
 <rt> Explanation / pronunciation of Here New in HTML 5. For East

characters Asian typography

<ruby> Ruby annotation Here New in HTML 5. For East
Asian typography
<s> Text that is no longer correct Here
<samp> Sample output from a computer Here
program
<script> Client-side script Here Usually written in
JavaScript
<section> Section in a document Here New in HTML 5
<select> A drop-down list Here
<small> Smaller text Here
<source> Allows multiple media resources for Here New in HTML 5. Links
media elements together associated
<video> and <audio>
<span> Section in a document Here Usually defined with its
own style
<strike> Strikethrough text Here Not supported in HTML 5
(instead use <del> or <s>)
<strong> Defines more important text Here Commonly used as a way of
highlighting text or
making it bold
<style> Style information for a document Here
<sub> Subscripted text Here
<summary> Heading for a <details> element Here New in HTML 5
<sup> Superscripted text Here
<table> Table Here
<tbody> Body of a table Here
<td> Table cell (within a table row) Here
<textarea> Multiline input control Here
<tfoot> Footer content of a table Here
<th> Table header cell Here
<thead> Header content of a table Here
<time> Date / time Here New in HTML 5
<title> Title for document Here Appears in <head>
<tr> Table row (within a table) Here
<track> Text track for a media element Here New in HTML 5 for
<video> and <audio>
<tt> Teletype text Here Not supported in HTML 5
(instead use CSS)
<u> Text that should be stylistically Here Commonly used for
different from normal text underlining
<ul> Unordered list Here
<var> Variable Here
<video> Video or movie Here New in HTML 5
<wbr> Possible line-break Here New in HTML 5

In practice, we can group HTML elements into a smaller number of categories:

32
Basic elements (and tags that don’t contain anything)
Audio / video

33
Formatting
Forms and inputs
Frames
Images
Links
Lists
Metadata
Programming (i.e. scripting)
Tables
Styles (and other miscellaneous elements)

Some of the formatting elements are called phrase elements, as they are typically used primarily to
delineate specific types of text.

Basic elements (and elements that don’t contain anything)

[HTMLElementsBasic]

The following is a list of HTML basic elements that every HTML page is supposed to contain (although if a
<!DOCTYPE> element is not present then essentially all modern browsers will assume that the page is an
HTML page, and, as explained in HTML Getting Started, you can often also dispense with the <title>
element (and potentially also the <html>, <head> and <body> elements).

Tag Description More Further comments

<!DOCTYPE> Document type Here
<body> The body of the document Here
<head> Provides information about the Here
document
<html> Is the root node of an HTML document Here Only <!DOCTYPE>
elements should appear
outside the <html> element

<title> Title for document Here Appears in <head>

The <head> element can also be deemed a metadata element, as it forms part of the way in which
metadata is included in such a document.
Three other elements are also typically considered ‘basic’, either because they don’t contain
anything or because they comment out other material:

Tag Description More Further comments

<!-- … --> A (potentially multiline) comment Here
<br> A single line break (c.f. a carriage Here
return)
<hr> Indicates a thematic change in the Here Often rendered as a line
content across the window

The default styles applicable to these elements are shown here.

34
Audio / video elements
[HTMLElementsAudioVideo]

The following is a list of HTML audio / video elements:

Tag Description More Further comments

<audio> Sound content Here New in HTML 5
<source> Allows multiple media resources for Here Links together associated
media elements <video> and <audio>
<video> Video or movie Here New in HTML 5

The default styles applicable to these elements are shown here.

Formatting elements
[HTMLElementsFormatting]

The following is a list of HTML formatting elements:

Tag Description More Further comments

<abbr> Abbreviation or acronym Here
<acronym> Acronym Here Not supported in HTML 5
<address> Contact information for the author or Here
owner of a document
<b> Bold text Here
<basefont> Default font, colour and size of all text Here Not supported in HTML 5
in a document (instead use CSS)
<bdi> Isolates a part of text that might be Here New in HTML 5
formatted in a different direction to
other text outside that part
<bdo> Overrides the current text direction Here
<big> Big text Here Not supported in HTML 5
(instead use CSS)
<blockquote> Section that is quoted from another Here
source
<center> Centred text Here Not supported in HTML 5
(instead use CSS)
<cite> Title of a work Here
<code> A piece of computer code Here
<del> Indicates text deleted from Here
a
document
<dfn> Defining instance of a term Here
<em> Emphasised text Here Often used to italicise
text, but ideally this
should be done using CSS
<font> Font, colour and size of text Here Not supported in HTML 5
(instead use CSS)
<h1>, <h2>, HTML headings Here Provides a hierarchy of
<h3>, <h4>, headings
<h5>, <h6>
<i> A part of text in an alternate voice or Here

35
 mood
<ins> Indicates text added to a document Here
<kbd> Keyboard input Here
<mark> Marked/highlighted text Here New in HTML 5
<meter> A scalar measurement within Here New in HTML 5
a
specific range (a gauge)
<p> Paragraph Here
<pre> Preformatted text Here
<progress> Represents the progress of a task Here New in HTML 5
<q> Short quotation Here
<rp> Indicates what to show in browsers Here New in HTML 5
that do not support ruby annotations
<rt> Explanation / pronunciation Here New in HTML 5. For East
of Asian typography
characters
<ruby> Ruby annotation Here New in HTML 5. For East
Asian typography
<s> Text that is no longer correct Here
<samp> Sample output from a computer Here
program
<small> Smaller text Here
<strike> Strikethrough text Here Not supported in HTML 5
(instead use <del> or <s>)
<strong> Defines more important text Here Commonly
used as another
way of
highlighting text or
making it bold
<sub> Subscripted text Here
<sup> Superscripted text Here
<time> Date / time Here New in HTML 5
<tt> Teletype text Here Not supported in HTML 5
(instead use CSS)
<u> Text that should be Here Commonly used for
stylistically underlining
different from normal text
<var> Variable Here
<wbr> Posible line-break Here New in HTML 5

The default styles applicable to these elements are shown here. The behaviour of most formatting
elements can be replicated using CSS.

Forms and inputs elements

[HTMLElementsFormsAndInputs]

The following is a list of HTML forms and inputs elements:

Tag Description More Further comments

<datalist> A list of pre-defined options for input Here New in HTML 5
controls

36
 <fieldset> Groups related elements in a form Here

<form> An HTML form for user input Here

<input> A (single-line) input control Here
<keygen> A key-pair generator field (for forms) Here New in HTML 5
<label> A label for an <input> element Here
<legend> Caption for a <fieldset> element Here
<optgroup> Group of related options in a drop- Here
down list
<option> An option in a drop-down list Here
<output> The result of a calculation Here New in HTML 5
<select> A drop-down list Here
<textarea> Multiline input control Here

The default styles applicable to these elements are shown here.

Frame elements
[HTMLElementsFrames]
The following is a list of HTML frame elements:

Tag Description More Further comments

<frame> A window (frame) within a frameset Here Not supported in HTML 5
<frameset> A set of <frame> elements Here Not supported in HTML 5
<iframe> An inline frame Here
<noframes> Alternate content for users whose Here Not supported in HTML 5
browsers do not support frames
The default styles applicable to these elements are shown here.

Image elements
[HTMLElementsImages]
The following is a list of HTML image elements:

Tag Description More Further comments

<area> An area inside an image map Here
<canvas> Used to draw graphics via scripting Here New in HTML 5
(usually via JavaScript)
<figcaption> A caption for a <figure> element Here New in HTML 5
<figure> Self-contained content Here New in HTML 5
<img> An image Here
<map> A client-side image-map Here
<picture> A container for multiple Here New in HTML 5
image
resources

The default styles applicable to these elements are shown here.

Link elements

37
[HTMLElementsLinks]

The following is a list of HTML link elements:

Tag Description More Further comments

<a> Hyperlink Here
<link> Defines the relationship between a Here Most commonly used to
document and an external resource link to style sheets
<nav> Navigation links Here New in HTML 5

The default styles applicable to these elements are shown here.

List elements
[HTMLElementsLists]

The following is a list of HTML list elements:

Tag Description More Further comments

<dd> Description or value of an entry in a Here
description list
<dir> Directory list Here Not supported in HTML 5
(instead use <ul>)
<dl> Description list Here
<dt> Term or name in a description list Here
<li> A list item Here
<menu> Menu or list of commands Here
<menuitem> A menu item/command that a user Here New in HTML 5
can invoke from a popup menu
<ol> Ordered list Here
<ul> Unordered list Here

The default styles applicable to these elements are shown here.

Metadata elements
[HTMLElementsMetadata]

The following is a list of HTML metadata elements:

Tag Description More Further comments

<base> The base URL/target for all relative Here
URLs in a document
<head> Provides information about the Here
document
<meta> Metadata about an HTML document Here

The default styles applicable to these elements are shown here.

38
Programming elements
[HTMLElementsProgramming]

The following is a list of HTML programming elements:

Tag Description More Further comments

<applet> Embedded applet Here Not supported in HTML 5
(instead use <embed> or
<object>)
<embed> A container for an external (non- Here New in HTML 5
HTML) application
<noscript> Alternate content for users whose Here
browsers do not client-side scripts
<object> Embedded object Here
<param> Parameter for an object Here
<script> Client-side script Here Usually written in
JavaScript

The default styles applicable to these elements are shown here.

Table elements
[HTMLElementsTables]

The following is a list of HTML table elements:

Tag Description More Further comments

<caption> Table caption Here
<col> Indicates column properties assigned to Here
each column within a <colgroup>
element
<colgroup> Specifies a group of one or more Here
columns in a table
<table> Table Here
<tbody> Body of a table Here
<td> Table cell (within a Table row) Here
<tfoot> Footer content in a table Here
<th> Table header cell Here
<thead> Header content in a table Here
<tr> Table row (within a Table) Here

The default styles applicable to these elements are shown here.

Style (and other miscellaneous) elements

[HTMLElementsStyles]

The following is a list of HTML style (and other miscellaneous) elements:

Tag Description More Further comments

<article> Article Here New in HTML 5
<aside> Content aside from the page content Here New in HTML 5
<data> Links content with a machine-readable Here New in HTML 5

39
 translation
<details> Additional details that a user can view Here New in HTML 5
or hide
<dialog> Dialog box or window Here
<div> Section in a document Here Usually assigned its own
style
<footer> Footer for a document or section Here New in HTML 5
<header> Header for a document or section Here New in HTML 5
<main> Main content of a document Here New in HTML 5
<section> Section in a document Here New in HTML 5
<span> Section in a document Here Usually defined its own
style
<style> Style information for a document Here
<summary> Heading for a <details> element Here New in HTML 5

The default styles applicable to these elements are shown here.

Phrase elements
[HTMLPhraseElements]
Some HTML formatting elements are typically used to delineate text of specific types. These HTML
elements are called ‘phrase’ elements:

Tag Description More Further comments

<code> A piece of computer code Here
<em> Emphasised text Here Often used to italicise text,
but ideally this
should be done using CSS
<kbd> Keyboard input Here
<samp> Sample output from a computer Here
program
<strong> Defines more important text Here Commonly used as a way
of highlighting text or
making it bold
<var> Variable Here

The default styles applicable to these elements are shown here.

XHTML
[HTMLTutorialXHTML]

XHTML stands for eXtensible Hypertext Markup Langauge. It is designed to be very like HTML but
structured in a fashion that also adheres to the rules of XML.

40
Typically, most browsers accept some types of ‘badly formed’ HTML, e.g. HTML in which a document’s
<head> element is not properly closed before its <body> element is opened. This is despite such markup
text failing to adhere to the rules that HTML is supposed to follow. However, such pages may not work
well or consistently on some devices. A processing overhead is incurred when a browser tries to interpret
badly-formed HTML, which may not be practical for some smaller devices. There may also be several
possible ways of interpreting badly-formed HTML. XML is more rigidly structured than HTML (and it is
easier to test that its rules are being adhered to), making it an easier vehicle through which to introduce
disciplines that aim to ensure all markup text is ‘well- formed’.

The main differences between HTML and XHTML are:

The XHTML DOCTYPE element (which takes the form <!DOCTYPE attributes>) must be present at the start
of the document.
<html>, <head>, <title> and <body> elements must also be present, and the xmlns
attribute of the <html> element must be defined appropriately.
All XHTML elements must be properly closed (and properly nested), e.g. using </p> to close a paragraph
(<p>) element and not just starting a new one with a new <p>. Note, usually browsers would interpret
<p> text1 <p> text2 </p> as two consecutive paragraphs even though this involves badly-formed HTML.
A corollary of 3. is that HTML empty elements such as the <br>, <hr> and <img> element must also be
properly closed in XHTML, i.e. they should be written as <br />, <hr /> and
<img src="filename" /> respectively.
XHTML element and attribute names must use lower case, e.g. the XHTML <p> element must be written
as <p> text </p> rather than <P> text </P>.
All XHTML attribute values must be included in quotes. So, HTML such as <p width=100px> is wrong in
XHTML and should be replaced by <p width="100px">.
Attribute minimisation is forbidden. Attribute minimisation in HTML involves including just the attribute
name rather than both the name and its value if its value is the same as its name. For example, HTML of
the form <input type="checkbox" name="fruit" value="apple" checked /> should be replaced in HTML by
<input type="checkbox" name="fruit" value="apple" checked="checked"
/>.
In practice, it is usually quite easy (if possibly laborious) to convert HTML to XHTML by:

Adding a suitable XHTML <!DOCTYPE> statement to the first line of the page and adding an xmlns
attribute to the html element of the page
Changing all element names and attribute names to lower case
Closing all empty elements
Putting all attribute values in quotes (and eliminating any attribute minimisation that is present)

An example of a minimal XHTML page is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

41
 <title>Title</title>
</head>
<body>
Content
</body>
</html>

Individual HTML Elements:

<a>
[HTMLElementA]

The HTML <a> or anchor element represents a hyperlink. It typically takes the form:
<a href="url">text</a>

or

<a href="url" target="x">text</a>

Here:

text is what the user sees

the href attribute contains the destination address of the link (i.e. where the browser goes to when the
hyperlink is clicked). This could be a web address, e.g. http://www.nematrian.com/Introduction.aspx, a
local link (to the same website as the page, e.g. introduction.aspx) or a bookmark within a resource
the target attribute indicates where to open the linked document

The attributes it can take (other than HTML global attributes and HTML event attributes) include:

Attribute Description More

download Target will be downloaded when user clicks on hyperlink Here
href URL of page the link goes to Here
hreflang Language of linked document Here
media Specifies media / device linked document is optimised for Here
rel Relationship between current document and linked Here
document
target Specifies where / how to open the linked document (or Here
where to submit the form)
type Type of element Here

To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods, and additional properties with the same name and
meaning as the attributes of the underlying HTML element referred to above (except perhaps the media
attribute). It also has a text property which sets or returns the text content of the object. It also supports
the hash, host, hostname, origin, password, pathname, port, protocol, search and username variants of
the href attribute, see here for more details.

42
By default, an unvisited link is underlined and is usually blue, a visited link is underlined and purple and an
active link is underlined and is usually purple, see here. However, it is possible to change these defaults
by setting relevant CSS attributes.

<abbr>
[HTMLElementAbbr]
The HTML <abbr> element indicates an abbreviation or acronym. The full text which is being
abbreviated can be included in the element’s title attribute and it will then typically appear as tooltip text
if the mouse is moved over the element.

The attributes it can take are HTML global attributes and HTML event attributes.

To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods. The default style applicable to this element is shown
here.

<acronym>
[HTMLElementAcronym]
The HTML <acronym> element was used to indicate an acronym. It is not supported in HTML 5. Instead,
use the <del> or <s> element.

<address>
[HTMLElementAddress]

The HTML <address> element is usually used to define contact information for the author or owner of a
document or file. If it is inside an <article> element then it typically represents contact information for
that article. If it is outside an article element but inside a <body> element then it typically represents
contact information for the document or page.

The attributes it can take are HTML global attributes and HTML event attributes.
To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods. The default style applicable to this element is shown
here.

<applet>
[HTMLElementApplet]

The HTML <applet> element was used to indicate an embedded applet. It is not supported in HTML 5.
Instead, use the <embed> or <object> element.

<area>

43
[HTMLElementArea]

The HTML <area> element identifies an area inside an image-map.

The attributes it can take (other than HTML global attributes and HTML event attributes) include:

Attribute Description More

alt Specifies alternative text to show when original content Here
fails to display
coords Specifies the coordinates of an <area> Here
download Target will be downloaded when user clicks on hyperlink Here
href URL of page the link goes to Here
hreflang Language of linked document Here
media Specifies media / device linked document is optimised for Here
rel Relationship between current document and linked Here
document
shape Specifies shape of an <area> element Here
target Specifies where / how to open the linked document (or Here
where to submit the form)
type Type of element Here

To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods, and additional properties with the same name and
meaning as the attributes of the underlying HTML element referred to above (except the download,
hreflang, media, rel and type attribute). The corresponding HTML DOM object also typically supports the
hash, host, hostname, origin, password, pathname, port, protocol, search and username variants of the
href attribute, see here for more details. The default style applicable to this element is shown here.

<article>
[HTMLElementArticle]

The HTML <article> element indicates a self-contained piece of content, such as a blog or forum post, a
specific news story or some self-contained comment on a specific piece of text. It is new in HTML 5.
The attributes it can take are HTML global attributes and HTML event attributes.

To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods. The default style applicable to this element is shown
here.

<aside>
[HTMLElementAside]

The HTML <aside> element indicates some content separate from but related to surrounding context. It is
new in HTML 5.

44
The attributes it can take are HTML global attributes and HTML event attributes.

To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods. The default style applicable to this element is shown
here.

<audio>
[HTMLElementAudio]
The HTML <audio> element is used to define and play sound, such as music or other audio streams.
Supported file formats include MP3 (nearly all browsers), Wav (not Internet Explorer) and Ogg (some
browsers). It is new in HTML 5.

If the browser does not support <audio> elements then any text between the <audio> and
</audio> tags will be displayed.
The attributes it can take (in addition to HTML global attributes and HTML event attributes) include:

Attribute Description More

autoplay Specifies whether media should start playing as soon as Here
ready
controls Whether controls (such as play and pause buttons) Here
should be displayed
loop Media to start over again when it finishes Here
muted Audio output should be muted Here
preload If / how author thinks media should be loaded when page Here
loads
src URL of media Here
To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods, and additional properties with the same name and
meaning as the attributes of the underlying HTML element referred to above. It also supports DOM
generic media properties and methods and the following additional properties and methods.

Additional methods:

Method Description More

fastSeek() Seeks to a specified time in audio Here
getStartDate() Returns Date object representing current timeline Here
offset

The default style applicable to this element is shown here.

<b>
[HTMLElementB]

45
The HTML <b> element indicates bold text. According to the HTML 5 specification it should be used as a
last resort when no other elements such as <strong>, <h1>, <h2>, <h3>, <h4>, <h5> or <h6> are
appropriate.
The attributes it can take are HTML global attributes and HTML event attributes.

To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods. The default style applicable to this element is shown
here.

<base>
[HTMLElementBase]

The HTML <base> element specifies the base URL for all relative URLs in a document. There can be at
most one <base> element in any specific document (and it should be inside the relevant <head>
element).
The attributes it can take (other than HTML global attributes and HTML event attributes) include:

Attribute Description More

href URL of page the link goes to Here
target Specifies where / how to open the linked document (or Here
where to submit the form)

To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods, and additional properties with the same name and
meaning as the attributes of the underlying HTML element referred to above. It also typically supports
the hash, host, hostname, origin, password, pathname, port, protocol, search and username variants of
the href attribute, see here for more details. The default style applicable to this element is shown here.

<basefont>
[HTMLElementBasefont]
The HTML <basefont> element was used to indicate the default font, colour and size of all text in a
document. It is not supported in HTML 5. Instead, use CSS.

<bdi>
[HTMLElementBdi]

The HTML <bdi> element indicates material that might be formatted in a different direction from
other material surrounding the element. ‘bdi’ stands for ‘bi-directional isolation’. It is new in HTML
5. A similar effect can usually be achieved using the unicode-bidi style applied to e.g. a span element, but
the semantic meaning is only conveyed by the <bdi> element and in some cases browsers may ignore
CSS, but not a <bdi> element.

46
To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods. The default style applicable to this element is shown
here.

<bdo>
[HTMLElementBdo]

The HTML <bdo> element makes it possible to override the current text direction.
The attributes it can take (other than HTML global attributes and HTML event attributes) include:

Attribute Description More

dir Text direction for element content Here

To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods, and additional properties with the same name and
meaning as the attributes of the underlying HTML element referred to above. The default style applicable
to this element is shown here.

<big>
[HTMLElementBig]

The HTML <big> element was used to indicate big text. It is not supported in HTML 5. Instead, use CSS.

<blockquote>
[HTMLElementBlockquote]

The HTML <blockquote> element indicates a section that is quoted from another source. Browsers often
indent text in such elements (typically a <q> element is used for an in-line quotation and isn’t indented).
The attributes it can take (other than HTML global attributes and HTML event attributes) include:

Attribute Description More

cite URL which explains the quote / deleted / inserted text Here
To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods, and additional properties with the same name and
meaning as the attributes of the underlying HTML element referred to above. The default style applicable
to this element is shown here.

<body>
[HTMLElementBody]

47
The HTML <body> element identifies the body of the document and contains all the visible contents of
the document, such as text, hyperlinks, tables and images etc.

The attributes it can take are HTML global attributes and HTML event attributes.
It used to support the alink, background, bgcolor, link, text and vlink attributes, but these are no longer
supported in HTML 5.

To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods. The default style applicable to this element is shown
here.

<br>
[HTMLElementBr]

The HTML <br> element indicates a single line break (c.f. a carriage return). In XHTML, it needs to
be ‘properly’ closed as per <br />.

The attributes it can take are HTML global attributes and HTML event attributes.

To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods. The default style applicable to this element is shown
here.

<button>
[HTMLElementButton]

The HTML <button> element indicates a clickable button. Inside a <button> element (unlike an
<input> element) you can put content such as text or images. You should typically specify the type
attribute for <button> element as different browsers do not necessarily default to the same type. Within
a <form> element you should also bear in mind that different browsers may submit different values.

The attributes it can take (other than HTML global attributes and HTML event attributes) include:

Attribute Description More

autofocus Specifies whether element should automatically get focus Here
when page loads
disabled Specified element(s) to be disabled Here
form Name of the form that element belongs to Here
formaction Where to send form-data to when form submitted Here. Only for
type =
submit
formenctype How form-data should be encoded before sending it to a Here. Only for
server type =
submit
formmethod How to send form-data (i.e. which HTTP method to use) Here. Only for
type =
submit
formnovalidate Specifies that form-data should not be validated on Here. Only for
submission type =
submit
formtarget Specifies where to display the response that is received Here. Only for
after submitting form type =
48
 submit
name Name of element Here
type Type of element Here
value Value of element Here

To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods, and additional properties with the same name and
meaning as the attributes of the underlying HTML element referred to above. However, the DOM
versions of formaction, formenctype, formmethod, formnovalidate and formtarget need to adopt the
JavaScript name capitalisation convention, i.e. need to be: formAction, formEnctype, formMethod,
formNoValidate and formTarget respectively. The default style applicable to this element is shown here.

<canvas>
[HTMLElementCanvas]

The HTML <canvas> element is used to draw graphics via scripting (usually via JavaScript). It is new in
HTML 5. Such an element isn’t directly endowed with its own drawing abilities. Instead it is necessary to
apply the getContext() method to the corresponding DOM object to return another object that does have
drawing abilities.
The attributes it can take (other than HTML global attributes and HTML event attributes) include:

Attribute Description More

height Height of element Here
width Width of element Here

To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods, as well as the following additional methods:

Method Description More

getContext() Returns an object that can be used to elaborate Here
(populate) the canvas
restore() Returns previously saved path state and attributes Here
save() Saves path state and attributes Here

Older versions of getContext focus on getContext("2d") which allows drawing of many types of two-
dimensional material (e.g. text, lines, boxes, circles etc.). Newer versions support drawing of hardware-
supported three-dimensional objects via getContext("WebGL") or getContext("WebGL2").
The object returned by the getContext("2d") method provides the following properties and methods:

Additional getContext(“2d”) properties:

49
 Property Description More
Styles etc.
fillStyle Sets / returns style (colour, gradient, pattern Here
etc.) used to fill element
strokeStyle Sets / returns style used for strokes Here
shadowBlur Sets / returns shadow blur level, see CSS text- Here
shadow property
shadowColor Sets / returns shadow colour, see CSS text- Here
shadow property
shadowOffsetX Sets / returns shadow horizontal offset, see Here
CSS text-shadow property
shadowOffsetY Sets / returns shadow vertical offset, see CSS Here
text-shadow property
Line styles
lineCap Sets / returns style used for line ends Here
lineJoin Sets / returns type of corner between two Here
lines where they join
lineWidth Sets / returns line width Here
miterLimit Sets / returns maximum mitre limit Here
Text
font Sets / returns CSS font property for current Here
text
textAlign Sets / returns CSS text-align property for Here
current text
textBaseline Sets / returns text baseline for current text Here
Sizing and manipulation of
individual pixels
data Returns object containing image data for Here
specific ImageData object
height Returns height of an ImageData object Here
width Returns width of an ImageData object Here
Other
globalAlpha Sets / returns current alpha, i.e. transparency Here
value, of drawing
globalCompositeOperation Sets / returns how new images are drawn onto Here
existing images

Additional getContext(“2d”) methods:

Method Description More

Styles etc.
addColorStop() Specifies colours and stop positions for a Here
gradient object
createLinearGradient() Creates a linear gradient Here
createPattern() Repeats a specific element in a specific direction Here
createRadialGradient() Creates a radial (i.e. circular) gradient Here
Rectangles
clearRect() Clears specified pixels within a rectangle Here
fillRect() Draws a ‘filled’ rectangle Here

50
 rect() Creates a rectangle Here
strokeRect() Draws a rectangle that is not ‘filled’ Here
Paths
arc() Creates a circular arc Here
arcTo() Creates a circular arc between two tangents Here
beginPath() Begins / resets a path Here
bezierCurveTo() Creates cubic Bézier curve Here
clip() Clips region from canvas Here
closePath() Completes path back to its original starting point Here
fill() Fills current path Here
isPointInPath() Returns true if point is in current path, otherwise Here
false
lineTo() Moves path to a specified point in the canvas, Here
creating a line from the previous point
moveTo() Moves path to a specified point in the canvas Here
without creating a line
quadraticCurveTo() Creates quadratic Bézier curve Here
stroke() Draws path in the canvas Here
Transformations
rotate() Rotates current drawing Here
scale() Scales current drawing Here
setTransform() Defines a transform matrix and then applies Here
transform() method
transform() Applies a transformation to current drawing Here
translate() Applies a translation to current drawing (i.e. Here
adjusts the position of its origin)
Text
fillText() Draws ‘filled’ text Here
measureText() Returns object indicating width of specified text Here
strokeText() Draws text that is not ‘filled’ Here
Drawing images
drawImage() Draws an image, canvas or video onto canvas Here
Sizing and manipulation of
individual pixels
createImageData() Creates a new blank ImageData object Here
getImageData() Returns ImageData object characterised by pixel Here
data for specific rectangle in canvas
putImageData() Puts image data included in an ImageData object Here
onto canvas

The objects returned by the getContext("WebGL") and the getContext("WebGL2") methods provide
equivalent 3D and other more sophisticated graphical capabilities. They are not currently explored
further in these pages.

The default style applicable to this element is shown here.

<caption>
[HTMLElementCaption]

51
52
The HTML <caption> element indicates a table caption. It should be inserted immediately after opening
<table> tag of the <table> element.
The attributes it can take are HTML global attributes and HTML event attributes. It used to support the
align attribute, but this is no longer supported in HTML 5.

To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods. The default style applicable to this element is shown
here.

<center>
[HTMLElementCenter]

The HTML <center> element was used to indicate centred text. It is not supported in HTML 5. Instead, use
CSS.

<cite>
[HTMLElementCite]
The HTML <cite> element indicates the title of a work (e.g. a book or movie). It is not typically used for
the author of the work.

The attributes it can take are HTML global attributes and HTML event attributes.

To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods. The default style applicable to this element is shown
here.

<code>
[HTMLElementCode]
The HTML <code> element is a phrase element indicating a piece of computer code. It is not depreciated,
but typically a richer effect can be achieved using CSS.

The attributes it can take are HTML global attributes and HTML event attributes.

To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods. The default style applicable to this element is shown
here.

<col>
[HTMLElementCol]

The HTML <col> element indicates the column properties assigned to each column within a
<colgroup> element. It can be used to apply styles to entire columns in a table.

53
The attributes it can take (other than HTML global attributes and HTML event attributes) include:

Attribute Description More

span Number of columns to span Here
It also used to support the align, char, charoff, valign and width attributes, but these are no longer
supported in HTML 5.
To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods, and additional properties with the same name and
meaning as the attributes of the underlying HTML element referred to above. The default style applicable
to this element is shown here.

<colgroup>
[HTMLElementColgroup]

The HTML <colgroup> element specifies a group of one or more columns in a table. It can be used to
apply styles to entire columns in a table. It must be a child of a <table> element, positioned after any
<caption> elements and before any <tbody>, <tfoot>, <thead> and <tr> elements. If you want to define
different styles to column within the column group then use the <col> element.
The attributes it can take (other than HTML global attributes and HTML event attributes) include:

Attribute Description More

span Number of columns to span Here
To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods, and additional properties with the same name and
meaning as the attributes of the underlying HTML element referred to above. The default style applicable
to this element is shown here.

comment
[HTMLElementComment]

The HTML comment element takes the form:

<!-- … -->

It can be potentially multiline. All text within the comment is ignored.

HTML comment elements do not in effect support any meaningful attributes.

<data>
[HTMLElementData]
The HTML <data> element links content with a machine-readable translation. It is new in HTML 5. If the
content is date or time based then an alternative is to use a <time> element.

54
The attributes it can take (other than HTML global attributes and HTML event attributes) include:

Attribute Description More

value Value of element Here
To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods, and additional properties with the same name and
meaning as the attributes of the underlying HTML element referred to above. The default style applicable
to this element is shown here.

<datalist>
[HTMLElementDatalist]
The HTML <datalist> element identifies a list of pre-defined options for an <input> element. It is new in
HTML 5. The <input> element’s list attribute should be set to the id of the <datalist> in order to bind the
two together and within the <datalist> should be some <option> elements.
Users will then see a dropdown list of choices (defined by the <option> elements) that they can select for
the <input> element, e.g.:
<input list="fruit">
<datalist id="fruit">
<option value="apple">
<option value="banana">
<option value="orange">
</datalist>

The attributes it can take are HTML global attributes and HTML event attributes.

To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods. It also supports the following additional property:

Property Description More

options Returns a collection of all options included in Here
datalist element

The default style applicable to this element is shown here.

<dd>
[HTMLElementDd]

The HTML <dd> element indicates a description or value of an entry in a description list, i.e. a <dl>
element, typically with each <dd> element linked to an associated <dt> element, that defines the term
which the <dd> element describes, e.g.:
<dl>
<dt>UK</dt><dd>United Kingdom</dd>
<dt>USA</dt><dd>United States of America</dd>
</dl>

55
Text, paragraphs, images etc. can be placed inside <dd> and <dt> elements.

The attributes it can take are HTML global attributes and HTML event attributes.
To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods. The default style applicable to this element is shown
here.

<del>
[HTMLElementDel]

The HTML <del> element indicates text deleted from a document. It is often used in association with the
<ins> element to highlight modifications to text.

The attributes it can take (other than HTML global attributes and HTML event attributes) include:

Attribute Description More

cite URL which explains the quote / deleted / inserted text Here
datetime Date and time of element Here

To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods, and additional properties with the same name and
meaning as the attributes of the underlying HTML element referred to above (with the datetime property
of the underlying element corresponding to the dateTime property of the DOM object). The default style
applicable to this element is shown here.

<details>
[HTMLElementDetails]

The HTML <details> element indicates additional details that a user can view or hide. It is new in HTML 5.

The attributes it can take (other than HTML global attributes and HTML event attributes) include:

Attribute Description More

open Whether details should be visible (i.e. open) to user Here

To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods, and additional properties with the same name and
meaning as the attributes of the underlying HTML element referred to above. The default style applicable
to this element is shown here.

<dfn>
[HTMLElementDfn]

56
The HTML <dfn> element indicates the defining instance of a term, usually its first use. In research
papers, books and other documents such instances may be italicised. The nearest parent of a <dfn>
element should typically contain a short definition or explanation for the term included in the
<dfn> element.

The attributes it can take are HTML global attributes and HTML event attributes.

To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods. The default style applicable to this element is shown
here.

<dialog>
[HTMLElementDialog]

The HTML <dialog> element indicates a dialog box or window. It simplifies the creation of popup dialogs,
but is not currently supported by all major browsers.
The attributes it can take (other than HTML global attributes and HTML event attributes) include:

Attribute Description More

open Whether details should be visible (i.e. open) to user Here
To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods. The default style applicable to this element is shown
here.

<dir>
[HTMLElementDir]

The HTML <dir> element was used to indicate a directory list. It is not supported in HTML 5. Instead, use
the <ul> element or CSS style lists.

<div>
[HTMLElementDiv]

The HTML <div> element indicates a section (i.e. division) in a document. It is usually assigned its own
style, differentiating it from other elements next to it in the document.
The attributes it can take are HTML global attributes and HTML event attributes. It used to support the
align attribute but this is no longer supported in HTML 5.

To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods. The default style applicable to this element is shown
here.

<dl>

57
[HTMLElementDl]

The HTML <dl> element indicates a description list. It is used in conjunction with <dd> and <dt> elements.
A <dt> element identifies a term and the associated <dd> element provides the description for that term,
e.g.:
<dl>
<dt>UK</dt><dd>United Kingdom</dd>
<dt>USA</dt><dd>United States of America</dd>
</dl>

Text, paragraphs, images etc. can be placed inside <dd> and <dt> elements.

The attributes it can take are HTML global attributes and HTML event attributes.

To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods. The default style applicable to this element is shown
here.

document type
[HTMLElementDocumentType]

The HTML document type element takes the form:

<!DOCTYPE>

Or:

<!DOCTYPE attributes>

Common declarations include:

Declaration Meaning
<!DOCTYPE html> HTML 5
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" HTML 4.01 Strict (excludes
"http://www.w3.org/TR/html4/strict.dtd"> depreciated elements)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 HTML 4.01 Transitional

Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> (includes depreciated
elements but not framesets)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" HTML 4.01 Frameset (as per
"http://www.w3.org/TR/html4/frameset.dtd"> Transitional, but also allows
use of framesets)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" XHTML 1.0 Strict (excludes
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> depreciated elements)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" XHTML 1.0 Transitional
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> (includes depreciated elements
but not framesets)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" XHTML 1.0 Frameset (as per
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> Transitional, but also allows
use of framesets)

58
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" XHTML 1.1, as XHTML 1.0
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> but allows additional modules,
e.g. to provide ruby support for
East Asian languages

<dt>
[HTMLElementDt]

The HTML <dt> element indicates a term or name in a description list, i.e. a <dl> element, typically with
each <dd> element linked to an associated <dt> element, that defines the term which the
<dd> element describes, e.g.:

<dl>
<dt>UK</dt><dd>United Kingdom</dd>
<dt>USA</dt><dd>United States of America</dd>
</dl>

Text, paragraphs, images etc. can be placed inside <dd> and <dt> elements.

The attributes it can take are HTML global attributes and HTML event attributes.

To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods. The default style applicable to this element is shown
here.

<em>
[HTMLElementEm]

The HTML <em> element is a phrase element indicating emphasised text. Often it is used to italicise text,
but ideally this should be done using CSS.
The attributes it can take are HTML global attributes and HTML event attributes.

To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods. The default style applicable to this element is shown
here.

<embed>
[HTMLElementEmbed]

The HTML <embed> element indicates a container for an external (non-HTML) application, e.g. a plug-in.
It is new in HTML 5.
The attributes it can take (other than HTML global attributes and HTML event attributes) include:

Attribute Description More

height Height of element Here

src URL of resource Here
type Type of element Here
width Width of element Here

59
To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods, and additional properties with the same name and
meaning as the attributes of the underlying HTML element referred to above. The default style applicable
to this element is shown here.

<fieldset>
[HTMLElementFieldset]

The HTML <fieldset> element groups related elements in a form, and typically draws a box around them.
The attributes it can take (other than HTML global attributes and HTML event attributes) include:

Attribute Description More

disabled Specified element(s) to be disabled Here
form Name of the form that element belongs to Here
name Name of element Here

To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods, and additional properties with the same name and
meaning as the attributes of the underlying HTML element referred to above.
It also supports the following additional property:

Property Description More

type Returns the type of the form element that the Here
fieldset element belongs to
The default style applicable to this element is shown here.

<figcaption>
[HTMLElementFigcaption]

The HTML <figcaption> element indicates a caption for a <figure> element. It is new in HTML 5. It can be
the first or the last child element of the <figure> element.
To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods. The default style applicable to this element is shown
here.

<figure>
[HTMLElementFigure]

60
The HTML <figure> element indicates a piece of self-contained content, like an illustration, diagram or
piece of computer code. It is new in HTML 5. Ideally, the content of a <figure> element should not
specifically link to its exact position within the text (e.g. in a research paper figures will be referred to in
the text, but can be positioned in a variety of places without altering the meaning of the text). A
<figcaption> element is used to add a caption to a <figure> element
To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods. The default style applicable to this element is shown
here.

<font>
[HTMLElementFont]

The HTML <font> element was used to indicate the font, colour and size of text. It is not supported in
HTML 5. Instead, use CSS.

<footer>
[HTMLElementFooter]
The HTML <footer> element indicates a footer for a document or section. It is new in HTML 5. Typically, a
<footer> element might contain authorship or copyright information. A document can contain several
<footer> elements.

The attributes it can take are HTML global attributes and HTML event attributes.
To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods. The default style applicable to this element is shown
here.

<form>
[HTMLElementForm]

The HTML <form> element indicates an HTML form for user input. Typically, a <form> element will
contain one or more of the following form elements:

<button>
<fieldset>
<input>
<label>
<optgroup>
<option>
<select>
<textarea>

The attributes it can take (other than HTML global attributes and HTML event attributes) include:

61
 Attribute Description More
accept-charset Specifies character encodings used for form submission Here
action Where to send form-data when form submitted Here
autocomplete Specifies whether element has autocomplete enabled Here
enctype How form-data to be encoded when submitted to server Here. Only
for method
= post
method Specifies HTTP method used when sending form-data Here
name Name of element Here
novalidate Form should not be validated when submitted Here
target Specifies where / how to open the linked document (or Here
where to submit the form)

It also used to take the accept attribute, but this is no longer supported in HTML 5.

To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods, and additional properties with the same name and
meaning as the attributes of the underlying HTML element referred to above (with the novalidate
property of the underlying element corresponding to the noValidate property of the DOM object). It also
supports the following additional properties and methods:
Additional properties:

Property Description More

encoding An alias for enctype Here
length Returns number of elements in form Here
Additional properties:

Method Description More

reset() Resets form Here
submit() Submits form Here

The default style applicable to this element is shown here.

<frame>
[HTMLElementFrame]

The HTML <frame> element was used to indicate a window (frame) within a frameset. It is not supported
in HTML 5.

<frameset>
[HTMLElementFrameset]

The HTML <frameset> element was used to indicate a set of <frame> elements. It is not supported in
HTML 5.

62
<h1>
[HTMLElementH1]

The HTML <h1> element indicates a level 1 HTML heading.

The attributes it can take are HTML global attributes and HTML event attributes.

It used to support the align attribute, but this is no longer supported in HTML 5.
To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods. The default style applicable to this element is shown
here.

<h2>
[HTMLElementH2]

The HTML <h2> element indicates a level 2 HTML heading.

The attributes it can take are HTML global attributes and HTML event attributes.
It used to support the align attribute, but this is no longer supported in HTML 5.

To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods. The default style applicable to this element is shown
here.

<h3>
[HTMLElementH3]

The HTML <h3> element indicates a level 3 HTML heading.

The attributes it can take are HTML global attributes and HTML event attributes.
It used to support the align attribute, but this is no longer supported in HTML 5.

To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods. The default style applicable to this element is shown
here.

<h4>
[HTMLElementH4]

The HTML <h4> element indicates a level 4 HTML heading.

The attributes it can take are HTML global attributes and HTML event attributes.
It used to support the align attribute, but this is no longer supported in HTML 5.

63
To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods. The default style applicable to this element is shown
here.

<h5>
[HTMLElementH5]
The HTML <h5> element indicates a level 5 HTML heading.

The attributes it can take are HTML global attributes and HTML event attributes.

It used to support the align attribute, but this is no longer supported in HTML 5.

To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods. The default style applicable to this element is shown
here.

<h6>
[HTMLElementH6]
The HTML <h6> element indicates a level 6 HTML heading.

The attributes it can take are HTML global attributes and HTML event attributes.

It used to support the align attribute, but this is no longer supported in HTML 5.

To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods. The default style applicable to this element is shown
here.

<head>
[HTMLElementHead]
The HTML <head> element provides information about the document. The <head> element can contain
the following sorts of elements (it is always supposed to include a <title> element, but HTML that does
not do so may not be rejected by browsers):

<base>
<link>
<meta>
<noscript>
<script>
<style>
<title>

The attributes it can take are HTML global attributes and HTML event attributes.

64
It used to support the profile attribute, but this is no longer supported in HTML 5.

To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods. The default style applicable to this element is shown
here.

<header>
[HTMLElementHeader]
The HTML <header> element indicates a header for a document or section. It is new in HTML 5. Typically,
a <header> element might contain introductory content, navigational links, one or more heading
elements (i.e. <h1>, <h2>, <h3>, <h4>, <h5> or <h6>), a logo and perhaps also some authorship
information. A document can contain several <header> elements.

The attributes it can take are HTML global attributes and HTML event attributes.
To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods. The default style applicable to this element is shown
here.

headings
[HTMLElementHeadings]

The HTML <h1>, <h2>, <h3>, <h4>, <h5> and <h6> elements provide a hierarchy of headings (with the
<h1> element by default having the largest size and the <h6> element the smallest size).

<hr>
[HTMLElementHr]

The HTML <hr> element indicates a thematic change in the content. Often it is rendered as a line across
the window.
The attributes it can take are HTML global attributes and HTML event attributes.

It used to support the align, noshade, size and width attributes, but these are no longer supported in
HTML 5.

To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods. The default style applicable to this element is shown
here.

<html>
[HTMLElementHtml]
The HTML <html> element is the root node of an HTML document. Only <!DOCTYPE> elements should
appear outside it. It tells the browser that the document is an HTML document.

65
The attributes it can take (other than HTML global attributes and HTML event attributes) include:

Attribute Description More

manifest Specifies address of document’s cache manifest (for Here
offline browsing)
xmlns Indicates the XML namespace attribute (if the content Here
needs to conform to XHTML); is not an HTML attribute as
such and is added by default if needed

To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods. The default style applicable to this element is shown
here.

<i>
[HTMLElementI]

The HTML <i> element indicates a part of text in an alternate voice or mood. Typically it is rendered as
italicised text. Convention recommends using the <i> element only when there isn’t a more appropriate
element, such as <cite>, <dfn>, <em>, <mark> or <strong>.

The attributes it can take are HTML global attributes and HTML event attributes.
To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods. The default style applicable to this element is shown
here.

<iframe>
[HTMLElementIframe]

The HTML <iframe> element indicates an inline frame. It can also be used to embed another document
within the current HTML document.

The attributes it can take (other than HTML global attributes and HTML event attributes) include:

Attribute Description More

height Height of element Here
name Name of element Here
sandbox Allows an extra set of restrictions for the content of an Here
<iframe> element
src URL of resource Here
srcdoc HTML content of page to show in an <iframe> Here
width Width of element Here

It used to support the align, frameborder, longdesc, marginheight, marginwidth and

scrolling attributes, but these are no longer supported by HTML 5.

66
To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods, and additional properties with the same name and
meaning as the attributes of the underlying HTML element referred to above. It also supports the
following additional properties:

Property Description More

contentDocument Returns document object generated by the iframe Here
contentWindow Returns window object generated by the iframe Here

The default style applicable to this element is shown here.

<img>
[HTMLElementImg]
The HTML <img> element indicates an image. It technically has two required attributes, namely src (the
source of the image) and alt (the alternative text displayed if the image cannot be found or cannot be
displayed by the browser), although the alt attribute can typically be dispensed with. Images are not
technically inserted into an HTML page but instead are linked to the page. The
<img> element therefore creates a placeholder that will include the image once the page is rendered (and
the image retrieved by the rendering process from its source location).
The attributes it can take (other than HTML global attributes and HTML event attributes) include:

Attribute Description More

alt Specifies alternative text to show when original content Here
fails to display
crossorigin Specifies how element handles cross-origin requests Here
height Height of element Here
ismap Image is a server-side image-map Here
sizes Specifies size of linked resource Here
src URL of resource Here
srcset URL of image to use in different situations Here
usemap Specifies an image as a client-side image-map Here
width Width of element Here

It used to support the align, border, hspace, longDesc and vspace attributes, but these are no longer
supported in HTML 5.
To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods, and additional properties with the same name and
meaning as the attributes of the underlying HTML element referred to above (with the crossorigin, ismap
and usemap properties of the underlying element corresponding to the crossOrigin, isMap and useMap
properties of the DOM object). It also supports the following additional properties:

Property Description More

complete Returns whether the browser has finished loading Here
the image
naturalHeight Returns original height of image Here
naturalWidth Returns original width of image Here

The default style applicable to this element is shown here.

<input>

67
[HTMLElementInput]

The HTML <input> element indicates a (single-line) input control into which the user can enter data. It is
used within a <form> element. There are many different types of <input> element that vary depending on
the type attribute of the element, including:

- button, checkbox, color, date, datetime, datetime-local, email, file, hidden, image, month,
number, password, radio, range, reset, search, submit, tel, text, time, url, week

In HTML markup <input> elements are empty (they only involve attributes). Labels for input elements can
be defined using the <label> element.

The attributes it can take (other than HTML global attributes and HTML event attributes) include:

Attribute Description More

accept Specifies types of file accepted by server Here. Only for type
= file
alt Specifies alternative text to show when original Here
content fails to display
autocomplete Specifies whether element has autocomplete Here
enabled
autofocus Specifies whether element should automatically Here
get focus when page loads
checked Specifies that the element should be pre-selected Here. For type=
checkbox or type
= radio
dirname Specifies text direction will be submitted Here
disabled Specified element(s) to be disabled Here
form Name of the form that element belongs to Here
formaction Where to send form-data to when form submitted Here. Only for type
= image and type =
submit
formenctype How form-data should be encoded before sending Here. Only for type
it to a server = image and type =
submit
formmethod How to send form-data (i.e. which HTTP method to Here. Only for type
use) = image and type =
submit
formnovalidate Specifies that form-data should not be validated on Here. Only for type
submission = image and type =
submit
formtarget Specifies where to display the response that is Here. Only for type
received after submitting form = image and type =
submit
height Height of element Here

list Refers to <datalist> that contains pre-defined Here

options
max Maximum value Here
maxlength Maximum number of characters allowed in an Here

68
 element
min Minimum value Here
multiple Indicates that a user can enter more than one Here
value
name Name of element Here
pattern Regular expression that value of element is Here
checked against
placeholder Short hint describing expected value of element Here
readonly Whether element is read-only Here
required Whether the element must be filled out before Here
submitting form
size Specifies width in characters of element Here
src URL of resource Here
step Accepted number intervals Here
type Type of element Here
value Value of element Here
width Width of element Here

Some of these attributes are valid for only some <input> element types:

type Valid attributes

all autofocus (except for hidden type), disabled (except for
hidden type), form, name, type, value
button -
checkbox checked, required
color autocomplete, list
date autocomplete, max, min, readonly, required, step
datetime autocomplete, list, max, min, readonly, required, step
datetime-local autocomplete, list, max, min, readonly, required, step
email autocomplete, list, maxlength, multiple, pattern,
placeholder, readonly, required, size
file accept, multiple, required
hidden -
image alt, formAction, formEnctype, formMethod,
formNoValidate, formTarget, height, src, width
month autocomplete, list, max, min, readonly, required, step
number autocomplete, list, max, min, placeholder, readonly,
required, step
password autocomplete, maxlength, pattern, placeholder,
readonly, required, size
radio checked, required
range autocomplete, list, max, min, step
reset -
search autocomplete, list, maxlength, pattern, placeholder,
readonly, required, size
submit formAction, formEnctype, formMethod, formNoValidate,

formTarget
text autocomplete, list, maxlength, pattern, placeholder,
readonly, required, size

69
 time autocomplete, list, max, min, readonly, required, step
url autocomplete, list, maxlength, pattern, placeholder,
readonly, required, size
week autocomplete, list, max, min, readonly, required, step

It used to accept the align attribute, but this is no longer supported in HTML 5.

To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods, and additional properties with the same name and
meaning as the attributes of the underlying HTML element referred to above (with the formaction,
formenctype, formmethod, formnovalidate, formtarget, maxlength and readonly properties of the
underlying element corresponding to the formAction, formEnctype, formMethod, formNoValidate,
formTarget, maxLength and readOnly properties of the DOM object). It also supports the following
additional properties and methods:

Additional properties:

Property Description Applies to type

defaultChecked Returns default value of checked attribute checkbox,
radio. See Here
defaultValue Sets / returns default value All. See Here
files Returns a FileList object representing file(s) file. See Here
selected by upload button
form Returns form that contains element All. See Here
indeterminate Sets / returns value of its indeterminate checkbox. See
status Here

Additional methods:

Method Description Applies to type

select() Selects content of password field Password. See Here
stepDown() Decrements value of relevant field datetime, datetime-local,
by specified amount month, number, range, time, week. See
Here
stepUp() Increments value of relevant field datetime, datetime-local,
by specified amount month, number, range, time, week

The default style applicable to this element is shown here.

<ins>
[HTMLElementIns]
The HTML <ins> element indicates text added to a document. It is often used in association with the
<del> element to highlight modifications to text.

70
The attributes it can take (other than HTML global attributes and HTML event attributes) include:

Attribute Description More

cite URL which explains the quote / deleted / inserted text Here
datetime Date and time of element Here

To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods, and additional properties with the same name and
meaning as the attributes of the underlying HTML element referred to above (with the datetime property
of the underlying element corresponding to the dateTime property of the DOM object). The default style
applicable to this element is shown here.

<kbd>
[HTMLElementKbd]

The HTML <kbd> element is a phrase element indicating keyboard input. It is not depreciated, but
typically a richer effect can be achieved using CSS.

The attributes it can take are HTML global attributes and HTML event attributes.

To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods. The default style applicable to this element is shown
here.

<keygen>
[HTMLElementKeygen]

The HTML <keygen> element indicates a key-pair generator field (for forms). It is positioned within a form
element. When the form is submitted, the private key is stored locally and the public key (of the key-pair)
is sent to the server.

The attributes it can take (other than HTML global attributes and HTML event attributes) include:

Attribute Description More

autofocus Specifies whether element should automatically Here
get focus when page loads
challenge Indicates value of element should be challenged Here
when submitted
disabled Specified element(s) to be disabled Here
form Name of the form that element belongs to Here
keytype Specifies security algorithm of key Here
name Name of element Here

Note: it appears likely that <keygen> elements will be dropped from future versions of HTML so it may be
desirable not to use <keygen> elements.

71
To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods, and additional properties with the same name and
meaning as the attributes of the underlying HTML element referred to above. It also supports the
following additional properties:

Property Description More

type Returns type of form element in which the keygen Here
field appears
The default style applicable to this element is shown here.

<label>
[HTMLElementLabel]
The HTML <label> element indicates a label for an <input> element. It does not appear special as far as
the user is concerned, but does improve the usability of the <input> element, as it means that if the user
clicks on the text within <label> element then it toggles the control.

The attributes it can take (other than HTML global attributes and HTML event attributes) include:

Attribute Description More

for Specifies which form element(s) a label Here
calculation is bound to
form Name of the form that element belongs to (this Here
should be the id attribute of the element to which
the label element relates, to bind the two
together)
To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods, and additional properties with the same name and
meaning as the attributes of the underlying HTML element referred to above (with the for property of the
underlying element corresponding to the htmlFor property of the DOM object). It used to support the
control property, but this was removed from the HTML specification in 2016.

The default style applicable to this element is shown here.

<legend>
[HTMLElementLegend]
The HTML <legend> element indicates a caption for a <fieldset> element.

The attributes it can take are HTML global attributes and HTML event attributes.

It used to accept the align attribute, but this is no longer supported in HTML 5.

To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods. It also supports the following additional properties:

72
 Property Description More
form Returns form that contains element Here

The default style applicable to this element is shown here.

<li>
[HTMLElementLi]

The HTML <li> element indicates a list item. It is used in <ol> elements (ordered lists), <ul> elements
(unordered lists) and <menu> elements (menu lists).
The attributes it can take (other than HTML global attributes and HTML event attributes) include:

Attribute Description More

value Value of element Here
It used to support the type attribute (which specified what kind of bullet point should be used with the
list element), but this is no longer supported in HTML 5 (similar effects can be achieved using CSS).

To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods, and additional properties with the same name and
meaning as the attributes of the underlying HTML element referred to above. The default style applicable
to this element is shown here.

<link>
[HTMLElementLink]
The HTML <link> element defines the relationship between a document and an external resource. It is
most commonly used to link to CSS style sheets. It is an empty element (i.e. it only contains attributes)
and should only appear in the <head> element of an HTML document (but can appear any number of
times there).

The attributes it can take (other than HTML global attributes and HTML event attributes) include:

Attribute Description More

crossorigin Specifies how element handles cross-origin Here
requests
href URL of page the link goes to Here
hreflang Language of linked document Here
media Specifies media / device linked document is Here
optimised for
rel Relationship between current document and Here
linked document
sizes Specifies size of linked resource Here
type Type of element Here

73
It used to support the charset, rev and target attributes, but these are no longer supported in HTML 5.

To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods, and additional properties with the same name and
meaning as the attributes of the underlying HTML element referred to above (with the crossorigin
property of the underlying element corresponding to the crossOrigin property of the DOM object). The
default style applicable to this element is shown here.

<main>
[HTMLElementMain]

The HTML <main> element indicates the main content of a document. It is new in HTML 5. Content within
the element should ideally be unique to the document and hence should not include material such as
sidebars, copyright information, logos and search forms.
There shouldn’t be more than one <main> element in a document and it shouldn’t be a descendent
of an <article>, <aside>, <footer>, <header> or <nav> element.

The attributes it can take are HTML global attributes and HTML event attributes.

To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods. The default style applicable to this element is shown
here.

<map>
[HTMLElementMap]
The HTML <map> element indicates a client-side image-map (i.e. an image with clickable areas). It needs
a name attribute, which creates a relationship between the image and the map. It typically contains one
or more <area> elements that indicate which parts of the image map are clickable. In HTML 5, if the id
attribute of the <map> element is specified then it needs to have the same value as the name attribute.

The attributes it can take (other than HTML global attributes and HTML event attributes) include:

Attribute Description More

name Name of associated element Here
To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods, and additional properties with the same name and
meaning as the attributes of the underlying HTML element referred to above. It also supports the
following additional properties:

Property Description More

areas Returns a collection of all <area> elements linked to the Here
<map> element
images Returns a collection of all <img> and <object> elements Here
linked to the <map> element

The default style applicable to this element is shown here.

<mark>
[HTMLElementMark]

The HTML <mark> element indicates marked/highlighted text. It is new in HTML 5.

74
The attributes it can take are HTML global attributes and HTML event attributes.
To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods. The default style applicable to this element is shown
here.

<menu>
[HTMLElementMenu]

The HTML <menu> element indicates a menu or list of commands. In theory, it can be used for toolbars,
context menus, listing form controls and commands. However, at the time of writing it was not supported
by many browsers.

The attributes it can take (other than HTML global attributes and HTML event attributes) include:

Attribute Description More

label Title / label of command or group of commands Here
type Type of element Here

To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods, and additional properties with the same name and
meaning as the attributes of the underlying HTML element referred to above. The default style applicable
to this element is shown here.

<menuitem>
[HTMLElementMenuitem]

The HTML <menuitem> element indicates a menu item/command that a user can invoke from a popup
menu. It is new in HTML 5. In theory, it can be used for toolbars, context menus, listing form controls and
commands. However, at the time of writing it was not supported by many browsers.

The attributes it can take (other than HTML global attributes and HTML event attributes) include:

Attribute Description More

checked Specifies that the element should be pre-selected Here
default Default track / command to be enabled unless user Here
preferences specify otherwise
disabled Specified element(s) to be disabled Here

icon Icon for a command / menu item Here

label Title / label command Here
radiogroup Name of group of commands when menu item toggled Here
type Type of element Here

To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods, and additional properties with the same name and
meaning as the attributes of the underlying HTML element referred to above. It also supports the
following additional properties:

Property Description More

command Sets / returns the command property of the DOM object Here

75
The default style applicable to this element is shown here.

<meta>
[HTMLElementMeta]

The HTML <meta> element indicates metadata about an HTML document. Metadata is not displayed on
the page but is machine readable. The <meta> element always goes within the <head> element.
Metadata within a <meta> element are always passed in pairs, one part describing what type of metadata
is involved, the other indicating the value to ascribe to the metadata.

For example, the following are uses of the <meta> element:

Use to which a specific <meta> Example

element can be put
Page author <meta name="author" content="Nematrian">
Page description <meta name="description" content="HTML
meta element">
Page keywords (used by search <meta name="keywords" content="HTML, Reference,
engines) Metadata">
Page to refresh every say 60 <meta http-equiv="refresh" content="60">
seconds
Page viewport that aims to make <meta name="viewport" content="width=device-width, initial-
webpage look good on all devices scale=1.0">

In HTML 5 a viewport metadata component was introduced (see above), allowing webpage designers
greater control over the user’s viewing experience, i.e. how the browser handles the browser window
within which the page is viewed.

The attributes it can take (other than HTML global attributes and HTML event attributes) include:

Attribute Description More

charset Specifies character encoding Here
content Value associated with the http-equiv or name attribute Here
http-equiv HTTP header for information/value of attribute Here
name Name of piece of metadata Here

76
The element used to support the scheme attribute, but this is no longer supported in HTML 5.

To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods, and additional properties with the same name and
meaning as the attributes of the underlying HTML element referred to above (with the http- equiv
property of the underlying element corresponding to the httpEquiv property of the DOM object). The
default style applicable to this element is shown here.

<meter>
[HTMLElementMeter]

The HTML <meter> element indicates a scalar measurement within a specific range (otherwise called a
gauge). It can also take fractional values. It is new in HTML 5. It is not designed to be used to show task
progress, for which the preferred element is the <progress> element.
The attributes it can take (other than HTML global attributes and HTML event attributes) include:

Attribute Description More

form Name of the form that element belongs to Here
high Value above which is considered a high value Here
low Value below which is considered a low value Here
max Maximum value Here
min Minimum value Here
optimum Value deemed optimal for gauge Here
value Value of element Here

The high, low, max and min attributes should satisfy: 𝑚𝑖𝑛 < 𝑙𝑜𝑤 < ℎ𝑖𝑔ℎ < 𝑚𝑎𝑥. Not all major browsers
currently support the high and low attributes.
To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods. It also supports the following additional properties and
methods:

Property Description More

labels Returns a collection of <label> elements Here
corresponding to the gauge labels

The default style applicable to this element is shown here.

<nav>
[HTMLElementNav]

The HTML <nav> element indicates navigation links. It is new in HTML 5. It is usual not to put all
navigation links inside a <nav> element. Instead this element is intended only for major blocks of such
links (so that browsers such as for disabled users can use this element to determine when to omit initial
rendering of content).

The attributes it can take are HTML global attributes and HTML event attributes.

77
To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods. The default style applicable to this element is shown
here.

<noframes>
[HTMLElementNoframes]
The HTML <noframes> element was used to indicate alternate content for users whose browsers do not
support frames. It is not supported in HTML 5.

<noscript>
[HTMLElementNoscript]

The HTML <noscript> element indicates the alternate content to be used for users whose browsers do
not support client-side scripts (either because the browser doesn’t support them, which is rare these
days, or because users have disabled their use). It can be used inside both <head> and
<body> elements. With the former, it can only contain <link>, <style> and <meta> elements.

The attributes it can take are HTML global attributes and HTML event attributes.
To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods. The default style applicable to this element is shown
here.

<object>
[HTMLElementObject]

The HTML <object> element indicates an embedded object, such as a Java applet, ActiveX or Flash plugin.
It can also be used to embed another webpage into the HTML document. <param> elements can be used
to pass parameters to plugins embedded within <object> elements.
<object> elements must appear inside the <body> element of the webpage. Text between the opening
<object> and the closing </object> tags is interpreted as alternative text that is displayed for browsers
that do not support the <object> element. At least one of element’s data or type attributes needs to be
defined.

The attributes it can take (other than HTML global attributes and HTML event attributes) include:

Attribute Description More

data URL of resource to be used by object Here
form Name of the form that element belongs to Here
height Height of element Here
name Name of element Here
type Type of element Here
usemap Specifies an image as a client-side image-map Here
width Width of element Here

78
It used to support the align, archive, border, classid, codebase, codetype, declare, hspace, standby and
vspace attributes, but these are no longer supported by HTML 5.
To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods, and additional properties with the same name and
meaning as the attributes of the underlying HTML element referred to above (with the usemap property
of the underlying element corresponding to the useMap property of the DOM object).

The default style applicable to this element is shown here.

<ol>
[HTMLElementOl]
The HTML <ol> element indicates an ordered list. The list can be numerical or alphabetical. Individual
items within the list are identified using <li> elements. Lists can be styled using CSS.

The attributes it can take (other than HTML global attributes and HTML event attributes) include:

Attribute Description More

reversed List order should be descending (3, 2, 1) not ascending (1, Here
2, 3)
start Start value of an ordered list Here
type Type of element Here

It used to support the compact attribute, but this is no longer supported by HTML 5.

To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods, and additional properties with the same name and
meaning as the attributes of the underlying HTML element referred to above. The default style applicable
to this element is shown here.

<optgroup>
[HTMLElementOptgroup]
The HTML <optgroup> element indicates a group of related options in a drop-down list.

The attributes it can take (other than HTML global attributes and HTML event attributes) include:

Attribute Description More

disabled Specified element(s) (here the option-group) to be Here
disabled
label Title of option group Here

To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods, and additional properties with the same name and
meaning as the attributes of the underlying HTML element referred to above). The default style
applicable to this element is shown here.

79
<option>
[HTMLElementOption]

The HTML <option> element indicates an option in a drop-down list.

The attributes it can take (other than HTML global attributes and HTML event attributes) include:

Attribute Description More

disabled Specified element(s) (here the option-group) to be Here
disabled
label Title of option group Here
selected Indicates that an <option> element should be pre- Here
selected when the page loads
value Value of element Here

To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods, and additional properties with the same name and
meaning as the attributes of the underlying HTML element referred to above. It also supports the
following additional properties:

Property Description More

defaultSelected Returns default value of the selected attribute Here
form Returns reference to form that contains the option Here
index Sets / returns index position of option in drop-down Here
list
text Sets / returns text of the option Here
The default style applicable to this element is shown here.

<output>
[HTMLElementOutput]

The HTML <output> element indicates the result of a calculation (e.g. one performed by a script). It is
new in HTML 5.

The attributes it can take (other than HTML global attributes and HTML event attributes) include:

Attribute Description More

for Specifies which form element(s) a label calculation is Here
bound to
form Name of the form that element belongs to Here
name Name of element Here

To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods, and additional properties with the same name and
meaning as the attributes of the underlying HTML element referred to above (with the for property

80
of the underlying element corresponding to the htmlFor property of the DOM object). It also supports the
following additional properties:

Property Description More

defaultValue Sets / returns default value Here
labels Returns a collection of <label> elements associated Here
with the <output> object
type Returns type of HTML element represented by the Here
<output> object
value Sets / returns value of element Here

The default style applicable to this element is shown here.

<p>
[HTMLElementP]
The HTML <p> element indicates a paragraph.

The attributes it can take are HTML global attributes and HTML event attributes.

It used to support the align attribute, but this is no longer supported in HTML 5.

To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods. The default style applicable to this element is shown
here.

<param>
[HTMLElementParam]
The HTML <param> element indicates a parameter for an object.

The attributes it can take (other than HTML global attributes and HTML event attributes) include:

Attribute Description More

name Name of associated element Here
value Value of element Here
It used to support the type and valuetype attributes, but these are no longer supported in HTML 5.

To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods, and additional properties with the same name and
meaning as the attributes of the underlying HTML element referred to above). The default style
applicable to this element is shown here.

<picture>
[HTMLElementPicture]

81
The HTML <picture> element indicates a container for multiple image resources. A <picture> element
contains zero or more <source> elements followed by one <img> element. The source element(s) will be
differentiated by different srcset attributes (required, defines the URL of the image to be shown by the
<picture> element) and by the media attribute (optional, a CSS media query that identifies which media
relates to that URL). The browser uses the first matching <source> element, and if none match then it
defaults to the <img> element.
The attributes it can take are HTML global attributes and HTML event attributes.

To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods. The default style applicable to this element is shown
here.

<pre>
[HTMLElementPre]
The HTML <pre> element indicates a piece of preformatted text. Typically the text is displayed in a fixed-
width font (usually Courier), preserving both spaces and line breaks.

The attributes it can take are HTML global attributes and HTML event attributes. It used to support the
width attribute, but this is no longer supported by HTML 5.

To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods. The default style applicable to this element is shown
here.

<progress>
[HTMLElementProgress]
The HTML <progress> element is most commonly used to show the progress of some task. It is new in
HTML 5. It is not very suitable for representing a gauge (like a fuel tank), for which better usually is to use
a <meter> element.

For example, markup as follows:

Progress so far: <progress value="40" max="100">

creates output that involves a progress bar showing that 40% of the task has been completed:

If you want the bar to be narrower than it is by default then you need to use the width attribute within
the style of the element, e.g. markup as follows:

Progress so far: <progress value="33" max="100" style="width:40px">

Usually a progress bar will be updated as time progresses, often using JavaScript.
The attributes it can take (other than HTML global attributes and HTML event attributes) include:

82
 Attribute Description More
max Maximum value Here
value Value of element Here

To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods, and additional properties with the same name and
meaning as the attributes of the underlying HTML element referred to above. It also supports the
following additional properties:

Property Description More

labels Returns a list of the progress bar labels (if any) Here
position Returns current position of progress bar Here

The default style applicable to this element is shown here.

<q>
[HTMLElementQ]

The HTML <q> element indicates a short quotation.

The attributes it can take (other than HTML global attributes and HTML event attributes) include:

Attribute Description More

cite URL which explains the quote Here
To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods, and additional properties with the same name and
meaning as the attributes of the underlying HTML element referred to above. The default style applicable
to this element is shown here.

<rp>
[HTMLElementRp]

The HTML <rp> element indicates what to show in browsers that do not support ruby annotations (for
East Asian typography). It is new in HTML 5.

It is used in conjunction with <rt> and <ruby> elements (the <ruby> element includes one or more
characters that need an explanation / pronunciation, the <rt> element gives that information and the
optional <rp> element indicates what to show for browsers that do not support such characters.
The attributes it can take are HTML global attributes and HTML event attributes.

To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods. The default style applicable to this element is shown
here.

83
<rt>
[HTMLElementRt]

The HTML <rt> element indicates an explanation / pronunciation of characters (typically for East Asian
typography). It is new in HTML 5.

It is used in conjunction with <rp> and <ruby> elements (the <ruby> element includes one or more
characters that need an explanation / pronunciation, the <rt> element gives that information and the
optional <rp> element indicates what to show for browsers that do not support such characters.
The attributes it can take are HTML global attributes and HTML event attributes.

To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods. The default style applicable to this element is shown
here.

<ruby>
[HTMLElementRuby]

The HTML <ruby> element indicates ruby annotation (for East Asian typography). It is new in HTML 5.
It is used in conjunction with <rp> and <rt> elements (the <ruby> element includes one or more
characters that need an explanation / pronunciation, the <rt> element gives that information and the
optional <rp> element indicates what to show for browsers that do not support such characters.

The attributes it can take are HTML global attributes and HTML event attributes.

To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods. The default style applicable to this element is shown
here.

<s>
[HTMLElementStrikeThrough]
The HTML <s> element indicates text that is no longer correct. Conventionally, the <s> element should
not be used for replaced or deleted text (instead use a <del> element).

The attributes it can take are HTML global attributes and HTML event attributes.

To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods. The default style applicable to this element is shown
here.

<samp>
[HTMLElementSamp]

84
The HTML <samp> element is a phrase element indicating sample output from a computer program. It is
not depreciated, but typically a richer effect can be achieved using CSS.

The attributes it can take are HTML global attributes and HTML event attributes.
To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods. The default style applicable to this element is shown
here.

<script>
[HTMLElementScript]

The HTML <script> element indicates client-side script / programming code. Usually this is written in
JavaScript. The <script> element either contains this code or points to an external file via its src attribute
(if the src attribute is present then the <script> element must be empty). The contents of an noscript
element indicates what happens for users who have disabled scripts in their browser or whose browser
does not support client-side scripting.
The way in which a script executes is driven by the async and defer attributes. If neither are present then
the script is fetched and executed immediately the browser reaches the element (before the browser
continues parsing the page).

The attributes it can take (other than HTML global attributes and HTML event attributes) include:

Attribute Description More

async Indicates if script to be executed asyncronously Here. Only for
external
scripts
charset Specifies character encoding Here
defer Script to be executed only when page has finished parsing Here. Only for
external
scripts
src URL of resource Here
type Type of element Here
It used to support the xml:space attribute, but this is no longer supported by HTML 5.

To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods, and additional properties with the same name and
meaning as the attributes of the underlying HTML element referred to above. It also supports the
following additional properties:

Property Description More

crossOrigin Sets / returns the CORS settings for the script Here
text Sets / returns contents of all child text nodes of the Here
script

The default style applicable to this element is shown here.

85
<section>
[HTMLElementSection]

The HTML <section> element indicates a section in a document (e.g. a discrete chapter / heading
/ footer etc>. It is new in HTML 5.

The attributes it can take are HTML global attributes and HTML event attributes.

To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods. The default style applicable to this element is shown
here.

<select>
[HTMLElementSelect]

The HTML <select> element indicates a drop-down list. The option elements within the
<select> element identify the available options within the drop-down list

The attributes it can take (other than HTML global attributes and HTML event attributes) include:

Attribute Description More

autofocus Specifies whether element should automatically get focus Here
when page loads
disabled Specified element(s) to be disabled Here
form Name of the form that element belongs to Here
multiple Indicates that a user can enter more than one value Here
name Name of element Here
required Whether the element must be filled out before Here
submitting form
size Specifies number of visible options Here

To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods, and additional properties with the same name and
meaning as the attributes of the underlying HTML element referred to above. It also supports the
following additional properties and methods:
Additional properties:

Property Description More

length Returns number of option elements within the drop- Here
down list
options Returns a collection of all options in drop-down list Here
selectedIndex Sets / returns index of selected option Here
type Returns type of form the drop-down list is within Here
value Sets / returns the value of the selected option in the Here
drop-down list
Additional methods:

86
 Method Description More
add() Adds an option to drop-down list Here
remove() Removes an option from drop-down list Here

The default style applicable to this element is shown here.

<small>
[HTMLElementSmall]

The HTML <small> element indicates smaller text.

The attributes it can take are HTML global attributes and HTML event attributes.

To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods. The default style applicable to this element is shown
here.

<source>
[HTMLElementSource]

The HTML <source> element allows multiple media resources for media elements. It links together
associated <video> and <audio>. It is new in HTML 5. The srcset attribute is required if the
<source> element is used in a picture element, whilst the src attribute is required when the
<source> element is used in an <audio> or <video> element.
The attributes it can take (other than HTML global attributes and HTML event attributes) include:

Attribute Description More

media Specifies media / device linked document is optimised for Here
sizes Specifies image size(s) Here
src Required when URL of resource Here
srcset URL of image to use in different situations Here
type Type of element Here

To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods, and additional properties with the same name and
meaning as the attributes of the underlying HTML element referred to above). The default style
applicable to this element is shown here.

<span>
[HTMLElementSpan]
The HTML <span> element indicates a section in a document. It is usually defined with its own style.

The attributes it can take are HTML global attributes and HTML event attributes.

87
To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods. The default style applicable to this element is shown
here.

<strike>
[HTMLElementStrike]

The HTML <strike> element was used to indicate strikethrough text. It is not supported in HTML
5. Instead, use the <del> or <s> element.

<strong>
[HTMLElementStrong]
The HTML <strong> element is a phrase element indicating more important text. It is commonly used as a
way of highlighting text or making it bold.

The attributes it can take are HTML global attributes and HTML event attributes.

To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods. The default style applicable to this element is shown
here.

<style>
[HTMLElementStyle]
The HTML <style> element indicates style information for a document. HTML documents can contain
multiple <style> elements. See CSS Tutorial for further details.

The attributes it can take (other than HTML global attributes and HTML event attributes) include:

Attribute Description More

media Specifies media / device linked document is optimised for Here
scoped Indicates styles only apply to the element’s parent Here
element and that element’s child elements
type Type of element Here

To create or access such an element in JavaScript see here. The corresponding HTML DOM object
(typically the style property of an element) supports standard DOM properties and methods, and
additional properties with the same name and meaning as the attributes of the underlying HTML element
referred to above. It also supports the following additional properties, see also CSS Properties:

DOM Property Name Corresponding CSS Property Name More

alignContent align-content Here
alignItems align-items Here
alignSelf align-self Here
animation animation Here
animationDelay animation-delay Here
animationDirection animation-direction Here
animationDuration animation-duration Here
animationFillMode animation-fill-mode Here
animationIterationCount animation-iteration-count Here
animationName animationName Here
animationPlayState animationPlayState Here

88
animationTimingFunction animationTimingFunction Here
backfaceVisibility backface-visibility Here
background background Here
backgroundAttachment background-attachment Here
backgroundClip background-clip Here
backgroundColor background-color Here
backgroundImage background-image Here
backgroundOrigin background-origin Here
backgroundPosition background-position Here
backgroundRepeat background-repeat Here
backgroundSize background-size Here
border border Here
borderBottom border-bottom Here
borderBottomColor border-bottom-color Here
borderBottomLeftRadius border-bottom-left-radius Here
borderBottomRightRadius border-bottom-right-radius Here
borderBottomStyle border-bottom-style Here
borderBottomWidth border-bottom-width Here
borderCollapse border-collapse Here
borderColor border-color Here
borderImage border-image Here
borderImageOutset border-image-outset Here
borderImageRepeat border-image-repeat Here
borderImageSlice border-image-slice Here
borderImageSource border-image-source Here
borderImageWidth border-image-width Here
borderLeft border-left Here
borderLeftColor border-left-color Here
borderLeftStyle border-left-style Here
borderLeftWidth border-left-width Here
borderRadius border-radius Here
borderRight border-right Here
borderRightColor border-right-color Here
borderRightStyle border-right-style Here
borderRightWidth border-right-width Here
borderSpacing border-spacing Here
borderStyle border-style Here
borderTop border-top Here
borderTopColor border-top-color Here
borderTopLeftRadius border-top-left-radius Here
borderTopRightRadius border-top-right-radius Here
borderTopStyle border-top-style Here
borderTopWidth border-top-width Here

borderWidth border-width Here

bottom bottom Here
boxShadow box-shadow Here
boxSizing box-sizing Here
captionSide caption-side Here
clear clear Here

89
clip clip Here
color color Here
columnCount column-count Here
columnFill column-fill Here
columnGap column-gap Here
columnRule column-rule Here
columnRuleColor column-rule-color Here
columnRuleStyle column-rule-style Here
columnRuleWidth column-rule-width Here
columnSpan column-span Here
columnWidth column-width Here
columns columns Here
content content Here
counterIncrement counter-increment Here
counterReset counter-reset Here
cursor cursor Here
direction direction Here
display display Here
emptyCells empty-cells Here
filter filter Here
flex flex Here
flexBasis flex-basis Here
flexDirection flex-direction Here
flexFlow flex-flow Here
flexGrow flex-grow Here
flexShrink flex-shrink Here
flexWrap flex-wrap Here
cssFloat float Here
font font Here
fontFamily font-family Here
fontSize font-size Here
fontSizeAdjust font-size-adjust Here
fontStretch font-stretch Here
fontStyle font-style Here
fontVariant font-variant Here
fontWeight font-weight Here
hangingPunctuation hanging-punctuation Here
height height Here
justifyContent justify-content Here
left left Here
letterSpacing letter-spacing Here
lineHeight line-height Here
listStyle list-style Here
listStyleImage list-style-image Here

listStylePosition list-style-position Here

listStyleType list-style-type Here
margin margin Here
marginBottom margin-bottom Here
marginLeft margin-left Here

90
marginRight margin-right Here
marginTop margin-top Here
maxHeight max-height Here
maxWidth max-width Here
minHeight min-height Here
minWidth min-width Here
navDown nav-down Here
navIndex nav-index Here
navLeft nav-left Here
navRight nav-right Here
navUp nav-up Here
opacity opacity Here
order order Here
orphans orphans Here
outline outline Here
outlineColor outline-color Here
outlineOffset outline-offset Here
outlineStyle outline-style Here
outlineWidth outline-width Here
overflow overflow Here
overflowX overflow-x Here
overflowY overflow-y Here
Padding padding Here
paddingBottom padding-bottom Here
paddingLeft padding-left Here
paddingRight padding-right Here
paddingTop padding-top Here
pageBreakAfter page-break-after Here
pageBreakBefore page-break-before Here
pageBreakInside page-break-inside Here
perspective perspective Here
perspectiveOrigin perspective-origin Here
position position Here
quotes quotes Here
resize resize Here
right right Here
tabSize tab-size Here
tableLayout table-layout Here
textAlign text-align Here
textAlignLast text-align-last Here
textDecoration text-decoration Here
textDecorationColor text-decoration-color Here
textDecorationLine text-decoration-line Here
textDecorationStyle text-decoration-style Here
textIndent text-indent Here

textJustify text-justify Here

textOverflow text-overflow Here
textShadow text-shadow Here
textTransform text-transform Here

91
 top top Here
transform transform Here
transformOrigin transform-origin Here
transformStyle transform-style Here
transition transition Here
transitionDelay transition-delay Here
transitionDuration transition-duration Here
transitionProperty transition-property Here
transitionTimingFunction transition-timing-function Here
unicodeBidi unicode-bidi Here
userSelect user-select Here
verticalAlign vertical-align Here
visibility visibility Here
whiteSpace white-space Here
widows widows Here
width width Here
wordBreak word-break Here
wordSpacing word-spacing Here
wordWrap word-wrap Here
zIndex z-index Here

The default style applicable to this element is shown here.

<sub>
[HTMLElementSub]
The HTML <sub> element indicates subscripted text.

The attributes it can take are HTML global attributes and HTML event attributes.

To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods. The default style applicable to this element is shown
here.

<summary>
[HTMLElementSummary]

The HTML <summary> element indicates a heading for a <details> element. It is new in HTML 5.
The attributes it can take are HTML global attributes and HTML event attributes.

To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods. The default style applicable to this element is shown
here.

92
<sup>
[HTMLElementSup]

The HTML <sup> element indicates superscripted text.

The attributes it can take are HTML global attributes and HTML event attributes.
To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods. The default style applicable to this element is shown
here.

<table>
[HTMLElementTable]

The HTML <table> element indicates a table. It typically includes one or more <tr> elements and, within
them, <td> and/or <th> elements. More complicated table layouts can also include <caption>,
<col>, <colgroup>, <tbody>, <tfoot> and <thead> elements.

The attributes it can take are HTML global attributes and HTML event attributes.
It used to support the align, bgcolor, border, cellpadding, cellspacing, frame, rules, summary and width
attributes, but these are no longer supported by HTML 5. Original draft versions of HTML 5 also included
a sortable attribute, but this appears to have been dropped in later specifications and not to have been
implemented so far by major browsers.

To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods. It also supports the following additional properties and
methods:
Additional properties:

Property Description More

caption Returns the <caption> element of the table Here
rows Returns a collection of the <tr> elements of the table Here
tBodies Returns a collection of <tbody> elements of the table Here
tFoot Returns the <tfoot> element of the table Here
tHead Returns the <thead> element of the table Here

Additional methods:

Method Description More

createCaption() Creates empty <caption> element and adds to table Here
createTFoot() Creates empty <tfoot> element and adds to table Here
createTHead() Creates empty <thead> element and adds to table Here
deleteCaption() Removes first <caption> element from table Here
deleteRow() Removes a <tr> element from table Here
deleteTFoot() Removes first <tfoot> element from table Here
deleteTHead() Removes <thead> element from table Here
insertRow() Creates empty <tr> element and adds to table Here

The default style applicable to this element is shown here.

93
<tbody>
[HTMLElementTbody]

The HTML <tbody> element indicates the body of a table. It appears inside a <table> element and is used
in conjunction with <tfoot> and <thead> elements to differentiate between different parts of the table.
This can allow browsers to scroll the table body independently of the header and footer, or to allow
printing of the header and footer at the top and bottom of each page. A <tbody> element needs to come
after any <caption>, <colgroup> and <thead> elements. It needs to contain one or more <tr> elements.

The attributes it can take are HTML global attributes and HTML event attributes.

It used to support the align, char, charoff and valign attributes, but these are no longer supported by
HTML 5.
To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods. The default style applicable to this element is shown
here.

<td>
[HTMLElementTd]

The HTML <td> element indicates a table cell (within a table row). They appear inside <tr> elements.
HTML tables contain two types of cells, i.e. header cells (<th> elements) and standard cells (<td>
elements), and the two are by default formatted differently.

The attributes it can take (in addition to HTML global attributes and HTML event attributes) are:

Attribute Description More

colspan Number of columns a table cell should span Here
headers One or more header cells a cell is related to Here
rowspan Number of rows a table cell should span Here

It used to support the abbr, align, axis, bgcolor, char, charoff, height, nowrap, scope, valign and width
attributes, but these are no longer supported by HTML 5.
To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods. The default style applicable to this element is shown
here.

<textarea>
[HTMLElementTextarea]

94
The HTML <textarea> element indicates a multiline input control. It can hold an unlimited number of
characters, and the text used is typically rendered in a fixed-width font. The size of the text area can be
specified using the element’s cols and rows attributes or using corresponding CSS attributes.
The attributes it can take (other than HTML global attributes and HTML event attributes) include:

Attribute Description More

autofocus Specifies whether element should automatically get focus Here
when page loads
cols Width of text area (in characters) Here
dirname Specifies text direction will be submitted Here
disabled Specified element(s) to be disabled Here
form Name of the form that element belongs to Here
maxlength Maximum number of characters allowed in an element Here
name Name of element Here
placeholder Short hint describing expected value of element Here
readonly Whether element is read-only Here
required Whether the element must be filled out before Here
submitting form
rows Visible number of lines in a <textarea> element Here
wrap How text in a <textarea> element is to be wrapped when Here
submitted in a form

To create or access such an element in JavaScript see here. The corresponding HTML DOM object
supports standard DOM properties and methods, and additional properties with the same name and
meaning as the attributes of the underlying HTML element referred to above (with the maxlength and
readonly properties of the underlying element corresponding to the maxLength and readOnly properties
of the DOM object). It also supports the following additional properties and methods:

Additional properties:

Property Description More

defaultValue Sets / returns default value of element Here
type Returns type of form that contains element Here
value Sets / returns contents of element Here

Additional methods:

Method Description More

select() Selects entire contents of text area Here
The default style applicable to this element is shown here.

<tfoot>
[HTMLElementTfoot

95
96