Inline elements cannot be placed directly inside the body element for valid HTML. They must be wholly nested within block-level elements (see block elements below).

General phrase elements

Emphasis (conventionally displayed in italics)

strong emphasis (conventionally displayed bold). An aural user agent may use different voices for emphasis.

An quotation containing only inline elements (for quotations containing block level elements see blockquote below). Quote elements may be nested, By the specification, the author should not include quotation marks Rather quotation marks — including netsted quoatation marks — should be rendered through sttylesheet properties or the browser's default stylesheet. Practical concers due to browser non-compliance may force authors to find work-arounds. The cite attribute gives the source, and must be a fully qualified URI.

Note: within semantic HTML, the display of a lenghty inline quotation as an indented block should be handled through stylesheet presentation. One method is to use an XSLT to select quotation elements exceeding a certain length (in terms of characters or words, etc.) for indented block presentation. An alternative, using Cascading Stylesheets, requires some presentational markup to manually manually classify the element as a lengthy quotation. For example:

<q class='lengthy'>An inline quotation of significant length (say 25 words, for example) goes here...</q>.

A citation. Reference for a quote or statement in the document.

Defining first instance of a term

Contains an abbreviation like HTML

Contains an acronym similar to the abbr element.

Computer code phrase elements

A code snippet. Conventionally rendered in a monospace font: Code snippet.

Sample output (from a program or script)

Keyboard - text to be entered by the user

Variable

Special inline elements

Create _subscript or ^superscript text: Equivalent CSS: {vertical-align: sub} or {vertical-align: super}

Deleted text. Typically rendered as a strikethrough: Deleted text.

Inserted text. Often used to markup replacement text for <del>'d text. Typically rendered underlined: Inserted text.

Note, both ins and del elements may be used as a block elements: containing other block and inline elements. However, these elements must still remain wholly within their parent element to maintain a well-formed HTML document). For example deleting text from the middle of one paragraph across several other paragraph and ending in a final paragraph would need to use three separate del elements. Two del elements would be required as inline element to indicate the deletion of text in the first and last paragraphs, and a third, used as a block element, to indicate the deletion in the intervening paragraphs.

The :isindex element requires server side support for indexing documents. Visually presents a one-line text input for keyword entry. When submitted, the query string is appended to the current URL and the document is displayed with these keywords highlighted. Generally if the server supports this feature it will add the iisindex elements to documents without author intervention.

Links and anchors

Creates an element that becomes a hyperlink with the href attribute set to a URL; additionally the attribute title may be set to a hover box text, some informative text about the link:

}}

In most graphical browsers, when the cursor hovers over the link, the cursor typically changes into a hand with a stretched index finger and the additional information pops up, not in a regular window, but in a special "hover box", usually similar to a Tooltip, which disappears when the cursor is moved away. Some browsers render alt text the same way, though this is technically incorrect.

Alternatively (and sometimes concurrently), the element becomes an anchor with the name attribute set, which preceded by a number sign '#', and appended to the URL, acts as a link target (a "document fragment"), typically causing a Web browser to scroll directly to that point of the page. Any element can be made into an anchor by using the id attribute, so using <a name="foo"> is not necessary.

See also:link

Images and objects

Includes an image with the src attribute, the required alt provides alternative text in case the image cannot be displayed. Alt is intended as alternative text, although many browsers render it as a tooltip; the title attribute is the tooltip text.

Specifies a line-break. Can also be done with CSS: {break: left|right|all}

Specifies a client-side image map.

Specifies an area in the map.

Includes an object in the page of the type specified by the type attribute. This may be in any MIME Type the webbrowser understands, such as an embedded page, code to be handled by a plug-in such as Flash, a Java applet, a sound file etc.

This element may only appear inside an object element. Using attributes such as name and value, each <param/> sets a parameter for the object. Examples include width, height, font, background colour etc, depending what has been exposed in this way by the object's developers.

<embed>…</embed> (unofficial)

Calls a plug-in handler for the type specified by the type attribute. Used for embedding Flash files, soundfiles etc. Not official; <object> is preferred.

<noembed>…</noembed> (unofficial)

Specifies alternative content, if the embed cannot be rendered.

Includes a Java applet in the page. Deprecated; <object> is now preferred.

Span element

<span>…</span>

Creates an inline logical division. This may be used to identify a part of the HTML page, for example so as to apply an id or class attribute, which can then be referenced from CSS or DOM call. Like most HTML elements, span also supports inline CSS in its optional style attribute).

Block

Many HTML elements are designed for altering the semantic structure or meaning of a document. Some are block-level, but most are inline and can be included in the normal flow of text.

General block elements

Creates a paragraph, perhaps the most common block level element.

Contains quoted material when the quotation itself includes block level elements (for instance, quoting several paragraphs). The cite attribute may give the source, and must be a fully qualified URI. The blockquote element is often misunderstood. It is an element meant to contain quotations that are themselves block level. In other words: to contain a complete paragraph or many paragraphs. In HTML strict DTDs inline elements are prohibited from blockquote elements. For quotations not containing block level elements see the quote (q) element.

Inserts a horizontal rule. Horizontal rules can also be handled through the CSS properties.

Headings

Section headings at different levels. Use <h1> for the highest-level heading (the major sections), <h2> for the next level down (sub-section), <h3> for a level below that, and so on. The lowest level heading is <h6>.

Most web browsers will show <h1> as large text in a different font, and <h6> as small bold-faced text, but this can be overridden with CSS. The heading elements are not intended merely for creating large or bold text: they describe something about the document's structure and organization. Some programs use them to generate outlines and tables of contents.

Lists

Creates a definition list (consisting of definition terms paired with definitions). Can also be used to specify speakers and quoted text.

Creates a definition term.

Creates a definition.

Creates an ordered (enumerated) or unordered (bulleted) list. With ol, the type attribute can be used to specify the kind of ordering, but CSS gives more control: {list-style-type: foo}. The default is Arabic numbering. For ul, CSS can be used to specify the list marker: {list-style-type: foo}. The default marker is a disc.

Creates a list item in ordered and unordered lists.

Delimits a directory listing. Deprecated in favor of <ul>.

Creates a menu listing. Should be more compact than an <ul> list, but badly supported. Deprecated in favor of <ul>.

Tables

Creates a table

Creates a row in the table.

Specifies a column group in a table.

Specifies attributes for an entire column in a table.

Specifies a caption for the entire table.

Specifies the header part of a table. This section may be repeated by the user agent if the table is split across pages (in printing or other paged media).

Specifies the main part of a table.

Specifies the footer part of a table. Like <thead>, this section may be repeated by the user agent if the table is split across pages (in printing or other paged media)

Forms

}}

Creates a form.

}}

Create a menu list, from which the user can select a single option. May be rendered as a dropdown menu.

end=no}} Creates a menu item in a menu list.

end=no}}

Creates a checkbox. Can be checked or unchecked.

end=no}}

Creates a radio button. If multiple radio buttons are given the same name, the user will only be able to select one of them from this group.

end=no}}

Creates a general-purpose button. But it's advised to use <button> if possible (i.e. if the client supports it) which provides richer possibilities.

end=no}}

Creates a submit button.

end=no}}

Creates a button using an image. The image URL may be specified with the src tag.

end=no}}

Creates a reset button for resetting the form to default values.

end=no}}

Creates a one-line text input. The size attribute specifies the default width of the input in character-widths. Maxlength sets the maximum number of characters the user can enter (which may be greater than size).

end=no}}

Creates a variation of one-line text input. The only difference is that inputted text is masked: usually every character is shown as an asterisk or a dot. It should be noted, however, that the value is submitted to the server as clear text. So an underlying secure transport layer like HTTPS is needed if confidentiality is a matter.

}}

Creates a label for a form input (e.g. radio button). Clicking on the label toggles the control.

}}

Create a multiple-line text area, the size of which is specified by cols and rows attributes. Text in between the tags appears in the text area when the page is loaded.

Other containers

<div>…</div>

Creates a block logical division. This may be used to identify a part of the HTML document, for example so as to apply an id or class attribute, which can then be referenced from CSS or DOM calls. Like most HTML elements, div also supports inline CSS in its optional style attribute).

Creates pre-formatted text. Text within this element is typically displayed in a non-proportional font exactly as it is laid out in the file (see ASCII art). Whereas browsers ignore white space (for example, hard returns, carriage-returns, line-feeds, tabs, and repeated-spaces) for all of the other HTML elements, the pre element signals that this white space should be rendered as authored. With the CSS properties: {white-space: pre; font-family: monospace;}, other elements can be presented in the same way. This element can contain any inline element except: image (img), object (object), big font size (big), small font size (small), superscript (sup), and subscript (sub).

Used to markup contact information for the document or a section of it. Inline elements are the only permitted. Authors can use the break element br to insert a new line within this element.

Includes another HTML document in the page. Although not formally deprecated in HTML 4.01, "The object element allows HTML authors to specify everything required by an object for its presentation by a user agent thus subsumes some of the tasks carried out by" iframe [http://www.w3.org/TR/1999/PR-html40-19990824/struct/objects.html#h-13.1

Unlike an object element, an iframe (inline frame) element may be the "target" frame for links defined in other elements and it may be "selected" by a browser as the focus for printing, viewing HTML source etc.^*

(Also see Frames below.)

Frames

An HTML document may contain a header and a body or a header and a frameset, but not both. For frames the Frames DTD must be used.

Delimit the frameset. The frames layout is given by comma separated lists in the rows and cols attributes.

Delimit a single frame, or region, within the frameset. A different document linked with the src attribute appears inside.

Contains a normal <body> element with child elements that will appear in web browsers that don't support frames.

An inline frame inside a normal HTML <body>, which embeds another HTML document. Alternatively, a similar effect can also be achieved using the <object> element. To embed a document within another document, authors may use either the IFRAME element or the OBJECT element, but the elements differ in some ways (World Wide Web Consortium ^*).

See also Framing (World Wide Web).

Presentational markup

Official

Creates a block-level centered division. May also center-align all text. Deprecated in favor of <div> or another element with centering defined using CSS.

Use boldface type. Equivalent CSS: {font-weight: bold}

Use italic type. Equivalent CSS: {font-style: italic}

Creates bigger text. Equivalent CSS: {font-size: larger}.

Creates smaller text. Equivalent CSS: {font-size: smaller}

Create strike-through text: Strikethrough Equivalent CSS: {text-decoration: line-through}

Use a typewriter-like (fixed-width) font. Equivalent CSS: {font-family: monospace}

Use an underlined font. Equivalent CSS: {text-decoration: underline}

<font *>…</font> (deprecated)

Can specify the font color with the color attribute, typeface with the face attribute, and absolute or relative size with the size attribute.

1. <font color="green">text</font> creates green text. See template:fontcolor.
2. <font color="#1f4099">text</font> creates text with hexadecimal color #1f4099.
3. <font size="4">text</font> creates text with size 4. Sizes are from 1 to 7. The standard size is 3, unless otherwise specified in the <body> or other tags.
4. <font size="+1">text</font> creates text with size 1 bigger than the standard.. <font size="-1">text</font> is opposite.
5. <font face="Courier">text</font> makes text with Courier font.

• <font size="N"> corresponds to {font-size: Yunits} (the HTML specification does not define the relationship between size N and unit-size Y, nor does it define a unit).

• <font color="red"> corresponds to {color: red}
• <font face="Courier"> corresponds to {font-family: Courier}

Unofficial

<blink>…</blink> (unofficial)

Causes text to blink. Can be done with CSS: {text-decoration: blink}

<marquee>…</marquee> (unofficial)

Creates scrolling text. No equivalent with CSS; use scripting instead.

<nobr>…</nobr> (unofficial)

Causes text to not return at end of line. Can be done with CSS: {white-space: nowrap}

HTML Comment

<!--…-->

Encloses a comment. This is an SGML tag and not limited to HTML, so it may appear anywhere in the document, even before the DTD or after </html>. A client should render none of its enclosed contents. The closing ">" is required. For compatibility with some pre-1995 browsers, SGML comments are sometimes used inside <style> or <script> tags, but this is not necessary and may in fact cause undesired effects.

External links

• Complete lists of elements and attributes for HTML 4.01

World Wide Web | HTML

Etiquetta de HTML | Elementi HTML | HTML žymė | Lijst van HTML-elementen | Tag | Элементы HTML | รายชื่อ HTML element