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
First Unordered List Item,
Second Unordered List Item,
Third Unordered List Item With Another Unordered List Embedded:
First Unordered List Subitem,
Second Unordered List Subitem,
Third Unordered List Subitem.
Fourth Unordered List Item.
Fifth Unordered List Item.
"ol": ordered list
First Ordered List Item,
Second Ordered List Item,
Third Ordered List Item With Another Ordered List Embedded:
First Ordered List Subitem,
One Before Last Ordered List Subitem,
Last Ordered List Subitem.
Fourth Ordered List Item,
Fifth Ordered List Item.
"dl, dt, dd": definition list, with terms and descriptions
This is the definition of first 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.
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.
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:
", "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.
"data: text", "del: deleted text",
"dfn: definition (of term or phrase)",
"wbr: The web browser will normally line-break at word boundaries,
but it can line-break THIS at any character position".
"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)".
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 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
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
"form" with "oninput"
Inline Frames and Objects
"applet" (no longer supported in HTML5)
External applications or interactive contents
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
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
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.
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
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
A hidden 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.
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
HTML has the ability to let events trigger some actions in a browser,
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: