This article is about HTML elements in general. For information on how to format Wikipedia entries, see Wikipedia:How to edit a page and
In computing, an HTML element is an SGML element that meets the requirements of one or more of the HTML Document Type Definitions (DTDs). It consists of a sequence beginning with a start tag including optional parameters called attributes, optional embedded content, and an end tag. A minimal case is an empty element, which has no content or end tag, although may still include attributes.
Some end tags may legally be omitted in HTML, but not in XHTML. XHTML is a more recent (2000) variant of HTML that introduced the requirements of XML to the element formations. These are stricter than the SGML rules that were allowed under the original HTML DTDs. For example, in XHTML all opening tags must be followed at some point by a corresponding closing tag and all empty elements must be self-terminated, as in <br/> or <br />. Strictly speaking <br></br> is also allowed in XHTML, but may be misunderstood by some browsers to mean <br><br>, so is best avoided.
Informally, HTML elements are sometimes referred to as "tags" (an example of synecdoche), though many prefer the term tag strictly in reference to the semantic structures delimiting the start and end of an element.
There are a few elements that are not part of any official DTDs, yet are supported by some browsers and used by some web pages. Their use is generally discouraged in favor of more standard methods.
Nesting
Many HTML elements can be nested. Nesting is most easily defined through examples:
<p>You <em>rock</em></p>
has an <em> element nested inside a <p> element. This can become more complex, for example:
<h1>Children that <em>do <span style="color:red">not</span> clean up</em> their rooms</h1>
Nesting may be arbitrarily deep, but the tags must be closed in the reverse order that they were opened.
- Wrong
<p>Lucy kissed <em>Jimmy</p></em>- Right
<p>Lucy kissed <em>Jimmy</em></p>
Nesting is restricted partly on the basis of whether an element is block-level or inline. A block-level element typically begins on a new line, while an inline element typically does not. A block-level element may contain other block-level elements or inline elements, while an inline element may only contain other inline elements. Examples of block-level elements include paragraphs, lists, tables, headings, and the <div> generic container element. Examples of inline elements include structured text such as emphasis, citations, or abbreviations, as well the <span> generic container element.
Header elements defined in HTML 4.01
<html>...</html>-
Delimit an HTML document (i.e. instead of an XML or another class document). The tags are optional in HTML, but some browsers and other utilities may not recognize the document without them.
<head>...</head>- Delimit the header section of the document, which contains information about the page. The tags are optional in HTML; if omitted the extant of the header may be inferred by other means.
<body>...</body>- Delimit the body section of the document, which contains the displayed content of the page. Like the
<html> and <head>, the tags themselves are not required if the document is HTML.
<title>...</title>-
Delimit the page title. This element is required in every HTML and XHTML document. Different user agents and operating systems render the title in different ways. Web browsers usually display it in the title bar when the window is open, and in the task bar when it is minimized. It may be the default filename when saving the page, and so on. Unlike other tags, the title element is not allowed to contain any tags. Browsers may render any enclosed tags as they are. For example
<title>My <b>first</b> webpage</title> might render as "My <b>first</b> webpage", not the intended "My first webpage".
<meta>...</meta>-
Delimit metadata, and can be used to specify a page description, keywords, and the special form
<meta http-equiv="foo">, used to specify commands which should be sent as HTTP headers.
<link>-
Specifies any link types for the document, such as previous and next links, or alternate versions. Its most common use is to link an external stylesheet to the page, in the form:
<link rel="stylesheet" type="text/css" href="url ">
<base><base/> (in XHTML)Specifies base values for links, such as location or target.<script>...</script>-
Used to include JavaScript or other scripts in the document.
<style>...</style>-
Specifies a style for the document, usually:
-
<style type="text/css">...</style>
-
with style data or references such as:
-
/*<![CDATA[*/ @import "url "; @import "url "; /*]]>*/
Body elements defined in HTML 4.01
All body tags are block-level elements, and cannot be contained within an inline element.
Headings
<h1></h1> through <h6></h6>- 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.
Structured text
Many HTML elements are designed for altering the structure or meaning of text. Some are block-level, but most are inline and can be included in the normal flow of text.
Block-level
<p>...</p>- Creates a paragraph. In HTML the closing tag is optional.
<blockquote>...</blockquote>-
Creates a block quotation; conventionally displayed indented, but not designed for indenting text. May have automatically generated quotes. The
<cite> attribute may give the source, and must be a fully qualified URL.
<pre>...</pre>-
Creates pre-formatted text. Text will be displayed in a non-proportional font exactly as it is laid out in the file (see ASCII art). With CSS:
{white-space: pre}
<address>...</address>- Used to markup address information.
Inline
<em>...</em><strong>...</strong>- Emphasis (conventionally displayed in italics) and strong emphasis (conventionally displayed bold). An aural user agent may use different voices for emphasis.
<q>...</q>-
A short inline quotation. This should be rendered with generated quote marks. Quotes may be nested, in which case quote marks should be correct for the document language. The
cite attribute gives the source, and must be a fully qualified URL.
<code>...</code>- A code snippet. Conventionally rendered in a monospace font.
<del>...</del>- Deleted text. Typically rendered as a strikethrough.
<ins>...</ins>- Inserted text. Often used to markup replacement text for
<del>'d text. Typically rendered underlined.
<dfn>...</dfn><samp>...</samp><kbd>...</kbd><var>...</var>- Definition, sample text, keyboard input, variable. These are similar to
<code>, but may carry more specific meaning.
<sub>...</sub><sup>...</sup>- Create subscript or superscript text. Equivalent CSS:
{vertical-align: sub} or {vertical-align: super}
Lists
<dl>...</dl>-
Creates a definition list (consisting of definition terms paired with definitions). Can also be used to specify speakers and quoted text.
<dt>...</dt>- Creates a definition term.
<dd>...</dd>- Creates a definition.
<ol>...</ol><ul>...</ul>-
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.
<li>...</li>- Creates a list item in ordered and unordered lists.
<dir>...</dir> (deprecated)- Delimits a directory listing. Deprecated in favor of
<ul>.
<menu>...</menu> (deprecated)- Creates a menu listing. Should be more compact than an
<ul> list, but badly supported. Deprecated in favor of <ul>.
Tables
<table>...</table>- Creates a table
<tr>...</tr>-
Creates a row in the table.
<th>...</th>- Creates a table header cell within a row; contents are conventionally displayed bold and centered. An aural user agent may use a louder voice for these items.
<td>...</td>- Creates a table data cell within a row.
<colgroup>...</colgroup>- Specifies a column group in a table.
-
-
<col> (<col /> in XHTML)- Specifies attributes for an entire column in a table.
<caption>...</caption>- Specifies a caption for the entire table.
<thead>...</thead>- 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).
<tbody>...</tbody>- Specifies the main part of a table.
<tfoot>...</tfoot>- 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
HTML can only specify the form appearance; processing of the user's input must be done with a server-side script.
<form>...</form>-
Creates a form.
<select name="foo">...</select>-
Create a menu list, from which the user can select a single option. May be rendered as a dropdown menu.
<option>...</option>- Creates a menu item in a menu list.
<input type="checkbox">- Creates a checkbox.
<input type="radio">-
Creates a radio button; if multiple radio buttons are given the same name, the user will only be able to select one of them.
<input type="submit" value="NAME">- Creates a send button.
<input type="image" border=0 name="NAME" src="name.gif">- Creates a send button using a image.
<input type="reset">- Creates a reset button for resetting the form to default values.
<input type="text">- Creates a one-line text area. Size sets the long dimension in character-widths. Maxlength sets the maximum number of characters the user can enter (which may be greater than size).
<textarea>...</textarea>- Create a multiple-line text area specified by
cols and rows attributes. Text in between the tags appears in the text area when the page is loaded.
Other containers
<span>...</span>- Creates an inline logical division. Allows a piece of text an id or class, to be referred to using CSS (and allows inline CSS).
<div>...</div>- Creates a block-level logical page division. Mainly for use with CSS.
<center>...</center> (deprecated)- Creates a centered division. May also center-align all text. Deprecated in favor of
<div> with centering defined using CSS.
<hr><hr/> (in XHTML)- Inserts a horizontal rule.
<object>...</object>-
Includes an object in the page of the type specified by the
type attribute. This may be any MIME Type the webbrowser understands, such as an embedded page (see <iframe>), a plug-in such as Flash, or a soundfile.
<param>...<param/> (in XHTML)- This tag may only appear inside an
object element, and sets parameters for the object, for example its width, height, or the URL of the content.
<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.
<applet>...</applet> (unofficial)- Includes a Java applet in the page. Not official;
<object> is preferred.
Presentational markup
<b>...</b>- Specify boldface type. Equivalent CSS:
{font-weight: bold}
<big>...</big>- Creates bigger text. Equivalent CSS:
{font-size: foo}.
Compare with <small>...</small>
<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. Equivalent CSS for font attributes:
<font size="N"> corresponds to {font-size: Ypx} (the HTML specification does not define the relationship between size N and pixel-size Y).<font color="red"> corresponds to {color: red}<font face="Courier"> corresponds to {font-family: Courier}
<i>...</i>- Use italic type. Equivalent CSS:
{font-style: italic}
<s>...</s> and <strike>...</strike> (deprecated)- Create strike-through text. Equivalent CSS:
{text-decoration: line-through}
<small>...</small>- Creates smaller text. Equivalent CSS:
{font-size: foo}
Compare with <big>...</big>
<tt>...</tt>-
Use a typewriter-like (fixed-width) font. Equivalent CSS:
{font-family: monospace}
<u>...</u> (deprecated)- Use an underlined font.
Links and anchors
<a>...</a>-
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:
<a href="URL" title="hover box text">link label</a>- Depending on the browser, when the cursor hovers over the link, it changes into a hand with a stretched index finger and the hover box text pops up, not in a regular window, but in a special hover box, which disappears when the cursor is moved away.
-
Alternatively, the element becomes an anchor with the
name attribute set, which preceded by a number sign '#' acts as a link target. Any element can be made into an anchor by using the id attribute, so using <a name="foo"> is not necessary.
Images
<img...><img... /> (in XHTML)-
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.
Others
<br><br/> (in XHTML)- Specifies a line-break. Can also be done with CSS: {break: left|right|all}
<map>...</map>-
Specifies a client-side image map.
<area><area/> (in XHTML)- Specifies an area in the map.
<blink>...</blink> (unofficial)- Causes text to blink. One of the two most hated tags in HTML. Can be done with CSS:
{text-decoration: blink}
<marquee>...</marquee> (unofficial)- Creates scrolling text. The other most hated tag in HTML. No equivalent with CSS; use scripting instead.
<!--...-->- 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.
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.
<frameset>...</frameset>
Delimit the frameset. The frames layout is giving by comma separated lists in the rows and cols attributes.
-
<frame>...</frame>- Delimit a single frame, or region, within the frameset. A different document linked with the
src attribute appears inside.
<noframes>...</noframes>- Contains a normal
<body> element with children what will appear in web browsers that don't support frames.
<iframe>...</iframe>- A inline frame inside a normal HTML
<body>, which has many attributes of the img element, but embeds another HTML document instead of a picture.
See also Framing (World Wide Web).
External links
- http://www.w3.org/TR/html401/index/elements.html and http://www.w3.org/TR/html401/index/attributes.html provide complete lists of elements and attributes for HTML 4.01
Last updated: 06-02-2005 00:04:10
Last updated: 08-19-2005 00:39:37
