This Is the Heading of the First HTML5 Test Page


Paragraph Formats (Block Level Elements)






My Photograph
My photo
My Photograph background

A centered paragraph.
Second line of same paragraph. Using the clear:both style, the following "br" tag will insert a break until both margins are clear.
Continuing after the break.

"article" and "address" tags

The "article" tag specifies independent, self-contained content such as forum post, blog post, news story, or comment.

An "address" tag is normally used at the bottom or top of a page body or an article to provide address, signature, or other contact information for its nearest "article" or "body".


"ul": unordered list

"ol": ordered list

  1. First Ordered List Item,
  2. Second Ordered List Item,
  3. Third Ordered List Item With Another Ordered List Embedded:
    1. First Ordered List Subitem,
    2. One Before Last Ordered List Subitem,
    3. Last Ordered List Subitem.
  4. Fourth Ordered List Item,
  5. Fifth Ordered List Item.

"dl, dt, dd": definition list, with terms and descriptions

First Term:
This is the definition of first term.
Second Term:
This is the definition of second and last term.


"div": container with no semantic meaning

"div": Document division element is very often used together with CSS, to set the layout of a section of a web page and it is used when no other semantic element (such as "article" or "nav") is appropriate. By default, browsers automatically add some margin space before and after each "div" element, just like the "p". This can be changed with CSS.

"pre": block of preformatted text

"pre": A preformatted text is text that must be displayed as is, usually on monospaced
font and it cannot include any HTML tags. This tag is preferred to the
obsolete <listing> and <xmp> tags.

"blockquote": section that is quoted from another source

"blockquote": A block quote (a section that is quoted from another source) displays as an indented, single-spaced block of text, which is separated from the body text by a paragraph break. A URL for the source of the quotation may be given using the "cite" attribute.

"details": expandable summary and details text

"details > summary #1": Click to

Detailed information #1.

"details > summary #2": Click to

Detailed information #2.


This is an open dialog window.

Browser notes about "dialog" usage.


Enter some words above and click on the table below to fill the table with rows as many as the words above. Each time you click on the table new rows will be added.

Word # Word

Character Formats (Text Level or Inline Elements)

Physical Character Formats

"Normal text",
"b: bold text (without any extra importance)",
"i: text in an alternate voice or mood (in italic)",
"mark: marked text (yellow background-color by default)",
"ruby: Ruby annotations for showing pronunciation of East Asian characters: (Kan)(ji) 明日 (Ashita) ",
"s: text that is no longer correct, accurate or relevant (striked out)",
"small: small text",
"normal sub: subscript text",
"normal sup: superscript text",
"u: generally underlined text (avoid using)".

A bidirectional element: 100 متر = 100 meters
A right-to-left text.
A forced left-to-right text: 100 متر

Style-Based Font Changes

The following are only achieved through CSS, since the obsolete now "font" tag should no longer be used in any HTML code.


"smaller", "medium (default)", "larger".
"xx-small", "x-small", "small", "initial", "large", "x-large", "xx-large".
"50%", "70%", "100%", "140%", "200%".


"ZapfHumnst BT", "Arial Narrow", or "sans-serif" font.


"red (#FF0000)", "lime (#00FF00)", "blue (#0000FF)", "yellow (#FFFF00)", "fuchsia (#FF00FF)", "aqua (#00FFFF)".
"maroon (#800000)", "green (#008000)", "navy (#000080)", "olive (#808000)", "purple (#800080)", "teal (#008080)".
"black (#000000)", "gray / grey (#808080)", "silver (#C0C0C0)", "white (#FFFFFF)".

More color information.


"font-variant: small-caps",
"font-variant-caps: UNIcase",
"normal: |WAV.|"
"none: |WAV.|"
"blinking text",

Logical Character Formats

"cite: citation",
"data: text",
"del: deleted text",
"dfn: definition (of term or phrase)",
"ins: inserted text",
"q: short quote (generally in curly quotes)",
"span: group inline-elements in a document to manipulate with JavaScript or style with CSS",
"wbr: The web browser will normally line-break at word boundaries, but it can line-break THIS at any character position".

Phrase Tags

"code: or computer program text (monospaced)",
"em: basic emphasis (generally in italics)",
"kbd: keyboard input (monospaced)",
"samp: sample output from a computer program (monospaced)",
"strong: emphasis or important text (generally in bold)",
"var: variable term or phrase (generally in italics)".

Special Characters

HTML5 Base Entities
Entity Name	Code	Result	Description
&quot; 		&#34;	"	quotation mark
&apos; 		&#39;	'  	apostrophe
&amp; 		&#38;	& 	ampersand
&lt; 		&#60;	< 	less-than
&gt; 		&#62;	> 	greater-than

ISO 8859-1 Symbol Entities Entity Name Code Result Description &nbsp; &#160;   non-breaking space &iexcl; &#161; ¡ inverted exclamation mark &curren; &#164; ¤ currency &cent; &#162; ¢ cent &pound; &#163; £ pound &yen; &#165; ¥ yen &brvbar; &#166; ¦ broken vertical bar &sect; &#167; § section &uml; &#168; ¨ spacing diaeresis &copy; &#169; © copyright &ordf; &#170; ª feminine ordinal indicator &laquo; &#171; « angle quotation mark (left) &not; &#172; ¬ negation &shy; &#173; ­ soft hyphen &reg; &#174; ® registered trademark &trade; &#8482; ™ trademark &macr; &#175; ¯ spacing macron &deg; &#176; ° degree &plusmn; &#177; ± plus-or-minus  &sup2; &#178; ² superscript 2 &sup3; &#179; ³ superscript 3 &acute; &#180; ´ spacing acute &micro; &#181; µ micro &para; &#182; ¶ paragraph &middot; &#183; · middle dot &cedil; &#184; ¸ spacing cedilla &sup1; &#185; ¹ superscript 1 &ordm; &#186; º masculine ordinal indicator &raquo; &#187; » angle quotation mark (right) &frac14; &#188; ¼ fraction 1/4 &frac12; &#189; ½ fraction 1/2 &frac34; &#190; ¾ fraction 3/4 &iquest; &#191; ¿ inverted question mark &times; &#215; × multiplication &divide; &#247; ÷ division
ISO 8859-1 Character Entities Entity Name Code Result Description &Agrave; &#192; À capital a, grave accent &Aacute; &#193; Á capital a, acute accent &Acirc; &#194; Â capital a, circumflex accent &Atilde; &#195; Ã capital a, tilde &Auml; &#196; Ä capital a, umlaut mark &Aring; &#197; Å capital a, ring &AElig; &#198; Æ capital ae &Ccedil; &#199; Ç capital c, cedilla &Egrave; &#200; È capital e, grave accent &Eacute; &#201; É capital e, acute accent &Ecirc; &#202; Ê capital e, circumflex accent &Euml; &#203; Ë capital e, umlaut mark &Igrave; &#204; Ì capital i, grave accent &Iacute; &#205; Í capital i, acute accent &Icirc; &#206; Î capital i, circumflex accent &Iuml; &#207; Ï capital i, umlaut mark &ETH; &#208; Ð capital eth, Icelandic &Ntilde; &#209; Ñ capital n, tilde &Ograve; &#210; Ò capital o, grave accent &Oacute; &#211; Ó capital o, acute accent &Ocirc; &#212; Ô capital o, circumflex accent &Otilde; &#213; Õ capital o, tilde &Ouml; &#214; Ö capital o, umlaut mark &Oslash; &#216; Ø capital o, slash &Ugrave; &#217; Ù capital u, grave accent &Uacute; &#218; Ú capital u, acute accent &Ucirc; &#219; Û capital u, circumflex accent &Uuml; &#220; Ü capital u, umlaut mark &Yacute; &#221; Ý capital y, acute accent &THORN; &#222; Þ capital THORN, Icelandic &szlig; &#223; ß small sharp s, German &agrave; &#224; à small a, grave accent &aacute; &#225; á small a, acute accent &acirc; &#226; â small a, circumflex accent &atilde; &#227; ã small a, tilde &auml; &#228; ä small a, umlaut mark &aring; &#229; å small a, ring &aelig; &#230; æ small ae &ccedil; &#231; ç small c, cedilla &egrave; &#232; è small e, grave accent &eacute; &#233; é small e, acute accent &ecirc; &#234; ê small e, circumflex accent &euml; &#235; ë small e, umlaut mark &igrave; &#236; ì small i, grave accent &iacute; &#237; í small i, acute accent &icirc; &#238; î small i, circumflex accent &iuml; &#239; ï small i, umlaut mark &eth; &#240; ð small eth, Icelandic &ntilde; &#241; ñ small n, tilde &ograve; &#242; ò small o, grave accent &oacute; &#243; ó small o, acute accent &ocirc; &#244; ô small o, circumflex accent &otilde; &#245; õ small o, tilde &ouml; &#246; ö small o, umlaut mark &oslash; &#248; ø small o, slash &ugrave; &#249; ù small u, grave accent &uacute; &#250; ú small u, acute accent &ucirc; &#251; û small u, circumflex accent &uuml; &#252; ü small u, umlaut mark &yacute; &#253; ý small y, acute accent &thorn; &#254; þ small thorn, Icelandic &yuml; &#255; ÿ small y, umlaut mark
Some Other Entities Entity Name Code Result Description &OElig; &#338; Œ capital ligature OE &oelig; &#339; œ small ligature oe &Scaron; &#352; Š capital S with caron &scaron; &#353; š small S with caron &Yuml; &#376; Ÿ capital Y with diaeres &circ; &#710; ˆ modifier letter circumflex accent &tilde; &#732; ˜ small tilde &Alpha; &#913; Α greek capital letter alpha &Beta; &#914; Β greek capital letter beta &Gamma; &#915; Γ greek capital letter gamma &Delta; &#916; Δ greek capital letter delta &Epsilon; &#917; Ε greek capital letter epsilon &Zeta; &#918; Ζ greek capital letter zeta &ensp; &#8194;   en space &emsp; &#8195;   em space &thinsp; &#8201;   thin space &zwnj; &#8204; ‌ zero width non-joiner &zwj; &#8205; ‍ zero width joiner &lrm; &#8206; ‎ left-to-right mark &rlm; &#8207; ‏ right-to-left mark &ndash; &#8211; – en dash &mdash; &#8212; — em dash &lsquo; &#8216; ‘ left single quotation mark &rsquo; &#8217; ’ right single quotation mark &sbquo; &#8218; ‚ single low-9 quotation mark &ldquo; &#8220; “ left double quotation mark &rdquo; &#8221; ” right double quotation mark &bdquo; &#8222; „ double low-9 quotation mark &dagger; &#8224; † dagger &Dagger; &#8225; ‡ double dagger &hellip; &#8230; … horizontal ellipsis &permil; &#8240; ‰ per mille  &lsaquo; &#8249; ‹ single left-pointing angle quotation &rsaquo; &#8250; › single right-pointing angle quotation &euro; &#8364; € euro &larr; &#8592; ← leftwards arrow &uarr; &#8593; ↑ upwards arrow &rarr; &#8594; → rightwards arrow &darr; &#8595; ↓ downwards arrow &forall; &#8704; ∀ for all &part; &#8706; ∂ partial differential &exist; &#8707; ∃ there exists &empty; &#8709; ∅ empty sets &nabla; &#8711; ∇ nabla &isin; &#8712; ∈ element of &notin; &#8713; ∉ not an element of &ni; &#8715; ∋ contains as member &prod; &#8719; ∏ n-ary product &sum; &#8721; ∑ n-ary summation &spades; &#9824; ♠ black spade suit &clubs; &#9827; ♣ black club suit &hearts; &#9829; ♥ black heart suit &diams; &#9830; ♦ black diamond suit


This is the caption of the table.
This table consists of four columns and four rows. However some cells span more than one column or row.
Header 1 Header 2 Header 3 Header
(the last one)
This is the cell consisting of rows 2 and 3 in column 1. This is the cell consisting of
columns 2 and 3 in row 2.
Column 4 in row 2.
Column 2 in row 3. This is the cell consisting of
columns 3 and 4 in row 3.
Column 1 in (footer) row 4 Column 2 in row 4 Column 3 in row 4 Column 4 in row 4

Forms and Buttons


Because of the "autofocus" attribute of the following "Autofocus Button", this page is scrolled to show this area. Go to top of page!


"form" with "action" and "get" method

A sample form with form fields. Click here to enable the Input fields "fieldset".

Input fields:





Input types marked with an * may not be supported by all browsers.

"form" with "oninput"

"form oninput":
"input": %
"output": __.__

Inline Frames and Objects

Content Embedding

"applet" (no longer supported in HTML5)

Scribble "applet": Your browser does not support Java. (Note that, applets are no longer supported in HTML5.)

"canvas": Your browser does not support "canvas".

"svg": Your browser does not support "svg".

External applications or interactive contents



"object": Your browser does not support "object".

"picture": My Photograph



Global Attributes for Tags



The "class" attribute specifies one or more class names for an element. The class attribute is mostly used to point to a class in a style sheet. However, it can also be used by JavaScript code to make changes to HTML elements with a specified class. For example, click on this paragraph to change the color of it and the color of the heading above it (both are of the same class).

"contenteditable" and "spellcheck"

This is a praggagraph. It is editable and also spell check is enabled. Try to change some text.

"contextmenu" (removed from HTML5)

The "contextmenu" attribute specifies a context menu for an element which appears when a user right clicks on that element. For example, right click on this paragraph to view a sample context menu. In this example, menu items are shown with an exclamation mark to distinguish them from the other default items. This attribute works only in Firefox and is not part of HTML5.


The "data-*" attributes are used to store custom data private to the page or application. This way, we can embed custom data attributes on any HTML elements and use them in the page’s JavaScript to create a more engaging user experience. For example, click on this paragraph to display all of its attributes, including some "data-*" attributes.


The "dir" attribute specifies the text direction of the element’s content. For example:

This is in the default left-to-right text direction.

This is in right-to-left text direction.

This is in the direction determined by the browser based on the content (only recommended if the text direction is unknown).

"draggable" and "dropzone"

The "draggable" attribute specifies whether or not a user is allowed to drag an element. It is often used in drag and drop operations (using JavaScript). For example, you can drag and drop this paragraph to the following box and then back again. The "dropzone" attribute, which is a new attribute and currently not supported by any browser, specifies whether the dragged data is copied, moved, or linked, when it is dropped on an element.


The "hidden" attribute specifies that the element is not yet, or is no longer, relevant. Browsers should not display elements that have the hidden attribute specified, like the following paragraph. Click on this paragraph to remove the "hidden" attribute of the next paragraph.


The "id" attribute specifies a unique ID for an element. It must be unique amongst all the IDs in the element’s tree. It is case-sensitive, it must contain at least one character, and it must not contain any ASCII whitespace. HTML bookmarks are created with the "id" attribute. Also, in CSS, to select an element with a specific "id", write a hash (#) character, followed by the "id" of the element. Click on this paragraph to display its "id".


The "lang" attribute specifies the language of the element’s content. It may choose the appropriate formats for date and number inputs. It can be used by the "spellcheck" attribute. Quote characters will change for the "q" element. Note the following examples:

Ceci est un paragraphe.

Dies ist ein Absatz.

Bu bir paragraftır.

Αυτή είναι μια παράγραφος.


The "style" attribute specifies an inline style for an element which will override any style set globally (e.g., styles specified in the "style" tag or in an external style sheet). The following editable paragraph contains some style definitions. After you change these definitions click on the button below it to apply these style definitions on the same paragraph.

color: yellow;
background-color: #720;
font-size: 15px;
border: 2px solid green;
padding: 5px;


The "tabindex" attribute specifies the tab order of an element. When an element with a "tabindex" x is focused and you press the Tab button, the element with "tabindex" x+1 will be focused. Instead, if you press Shift+Tab, the element with "tabindex" x-1 will be focused. In the following, first click on the first paragraph and try to press Tab to navigate the next "tabindex" paragraphs in the order specified. Similarly, Shift+Tab will navigate back.






The "title" attribute specifies extra information about an element. For example, move your mouse over this paragraph to see the contents of its "title" attribute as a tooltip.


The "translate" attribute specifies whether the content of an element should be translated or not. For example, this paragraph has its "translate" attribute set to "no". So it will not be translated by an online translation engine that translates this page. However, note that this attribute is new and not supported by any major browser.

Event Attributes

HTML has the ability to let events trigger some actions in a browser, like starting a JavaScript when a user clicks on an element. Listing all of these event attributes is outside the scope of this page. However, there are many usages of these attributes in this page for demonstration purposes, like: