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.
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"."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": 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.
Detailed information #1.
Detailed information #2.
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 |
|---|
"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:
漢
字
明日
",
"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 متر
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)".
"font-variant: small-caps",
"font-variant-caps: UNIcase",
"font-kerning:"
"normal:
|WAV.|"
"none:
|WAV.|"
"blinking text",
"Normal",
"abbr",
"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 T
"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)".
HTML5 Base Entities Entity Name Code Result Description " " " quotation mark ' ' ' apostrophe & & & ampersand < < < less-than > > > greater-than
ISO 8859-1 Symbol Entities Entity Name Code Result Description   non-breaking space ¡ ¡ ¡ inverted exclamation mark ¤ ¤ ¤ currency ¢ ¢ ¢ cent £ £ £ pound ¥ ¥ ¥ yen ¦ ¦ ¦ broken vertical bar § § § section ¨ ¨ ¨ spacing diaeresis © © © copyright ª ª ª feminine ordinal indicator « « « angle quotation mark (left) ¬ ¬ ¬ negation ­ ­ soft hyphen ® ® ® registered trademark ™ ™ ™ trademark ¯ ¯ ¯ spacing macron ° ° ° degree ± ± ± plus-or-minus ² ² ² superscript 2 ³ ³ ³ superscript 3 ´ ´ ´ spacing acute µ µ µ micro ¶ ¶ ¶ paragraph · · · middle dot ¸ ¸ ¸ spacing cedilla ¹ ¹ ¹ superscript 1 º º º masculine ordinal indicator » » » angle quotation mark (right) ¼ ¼ ¼ fraction 1/4 ½ ½ ½ fraction 1/2 ¾ ¾ ¾ fraction 3/4 ¿ ¿ ¿ inverted question mark × × × multiplication ÷ ÷ ÷ division
ISO 8859-1 Character Entities Entity Name Code Result Description À À À capital a, grave accent Á Á Á capital a, acute accent    capital a, circumflex accent à à à capital a, tilde Ä Ä Ä capital a, umlaut mark Å Å Å capital a, ring Æ Æ Æ capital ae Ç Ç Ç capital c, cedilla È È È capital e, grave accent É É É capital e, acute accent Ê Ê Ê capital e, circumflex accent Ë Ë Ë capital e, umlaut mark Ì Ì Ì capital i, grave accent Í Í Í capital i, acute accent Î Î Î capital i, circumflex accent Ï Ï Ï capital i, umlaut mark Ð Ð Ð capital eth, Icelandic Ñ Ñ Ñ capital n, tilde Ò Ò Ò capital o, grave accent Ó Ó Ó capital o, acute accent Ô Ô Ô capital o, circumflex accent Õ Õ Õ capital o, tilde Ö Ö Ö capital o, umlaut mark Ø Ø Ø capital o, slash Ù Ù Ù capital u, grave accent Ú Ú Ú capital u, acute accent Û Û Û capital u, circumflex accent Ü Ü Ü capital u, umlaut mark Ý Ý Ý capital y, acute accent Þ Þ Þ capital THORN, Icelandic ß ß ß small sharp s, German à à à small a, grave accent á á á small a, acute accent â â â small a, circumflex accent ã ã ã small a, tilde ä ä ä small a, umlaut mark å å å small a, ring æ æ æ small ae ç ç ç small c, cedilla è è è small e, grave accent é é é small e, acute accent ê ê ê small e, circumflex accent ë ë ë small e, umlaut mark ì ì ì small i, grave accent í í í small i, acute accent î î î small i, circumflex accent ï ï ï small i, umlaut mark ð ð ð small eth, Icelandic ñ ñ ñ small n, tilde ò ò ò small o, grave accent ó ó ó small o, acute accent ô ô ô small o, circumflex accent õ õ õ small o, tilde ö ö ö small o, umlaut mark ø ø ø small o, slash ù ù ù small u, grave accent ú ú ú small u, acute accent û û û small u, circumflex accent ü ü ü small u, umlaut mark ý ý ý small y, acute accent þ þ þ small thorn, Icelandic ÿ ÿ ÿ small y, umlaut mark
Some Other Entities Entity Name Code Result Description Œ Œ Œ capital ligature OE œ œ œ small ligature oe Š Š Š capital S with caron š š š small S with caron Ÿ Ÿ Ÿ capital Y with diaeres ˆ ˆ ˆ modifier letter circumflex accent ˜ ˜ ˜ small tilde Α Α Α greek capital letter alpha Β Β Β greek capital letter beta Γ Γ Γ greek capital letter gamma Δ Δ Δ greek capital letter delta Ε Ε Ε greek capital letter epsilon Ζ Ζ Ζ greek capital letter zeta     en space     em space     thin space ‌ ‌ zero width non-joiner ‍ ‍ zero width joiner ‎ ‎ left-to-right mark ‏ ‏ right-to-left mark – – – en dash — — — em dash ‘ ‘ ‘ left single quotation mark ’ ’ ’ right single quotation mark ‚ ‚ ‚ single low-9 quotation mark “ “ “ left double quotation mark ” ” ” right double quotation mark „ „ „ double low-9 quotation mark † † † dagger ‡ ‡ ‡ double dagger … … … horizontal ellipsis ‰ ‰ ‰ per mille ‹ ‹ ‹ single left-pointing angle quotation › › › single right-pointing angle quotation € € € euro ← ← ← leftwards arrow ↑ ↑ ↑ upwards arrow → → → rightwards arrow ↓ ↓ ↓ downwards arrow ∀ ∀ ∀ for all ∂ ∂ ∂ partial differential ∃ ∃ ∃ there exists ∅ ∅ ∅ empty sets ∇ ∇ ∇ nabla ∈ ∈ ∈ element of ∉ ∉ ∉ not an element of ∋ ∋ ∋ contains as member ∏ ∏ ∏ n-ary product ∑ ∑ ∑ n-ary summation ♠ ♠ ♠ black spade suit ♣ ♣ ♣ black club suit ♥ ♥ ♥ black heart suit ♦ ♦ ♦ black diamond suit
| Header 1 | Header 2 | Header 3 | Header 4 (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 |
Because of the "autofocus" attribute of the following "Autofocus Button", this page is scrolled to show this area. Go to top of page!
Scribble "applet":
"canvas":
"svg":
"embed":
"iframe":
"object":
"picture":
"audio":
"video":
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).
This is a praggagraph. It is editable and also spell check is enabled. Try to change some text.
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).
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 paragraf
tı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.
Tabindex="1"
Tabindex="3"
Tabindex="2"
Tabindex="4"
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.
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:
onclick ondragover ondragstart ondrop oninput onmouseover