Wikipedia

HTML element

This is an old revision of this page, as edited by Patrick (talk | contribs) at 23:32, 8 September 2004 (→Images: restore informative example, demonstrates hoverbox, etc). The present address (URL) is a permanent link to this revision, which may differ significantly from the current revision.

In computing, an HTML element (instance) in terms of SGML is the complete sequence of a start tag (with attributes and their values), any embedded HTML content, and the end tag. A special case is empty elements that don't have contents and end tags. Due to the constraints of the DTDs, various parts, including start and end tag, may be omitted in HTML, but not XHTML.

Informally, HTML elements or their attributes are often simply called "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.

"Nesting"

Most but not all HTML elements can be "nested": <p><em>You</em>rock!</p> has an em element nested inside a p element. This can become more complex, for example <h1>Children that <em>do <font color="red">not</font> clean up</em> their rooms</h1>. Nesting may be arbitrarily deep.

Tags must be closed in the reverse order that they've been opened. A so-called 'block-level' element cannot be nested inside an inline element.

Wrong
<p><font face="Tahoma">Lucy kissed <em>Jimmy</p></font></em>
Right
<p><font face="Tahoma">Lucy kissed <em>Jimmy</em></font></p>

Header tags

<html>...</html>
Delimit a HTML document (i.e. instead of an XML or another class document).
<head>...</head>
Delimit the header section of the document, which contains information about the page.
<body>...</body>
Delimit the body section of the document, which contains the displayed content of the page.
<title>...</title>
Delimit the page title. Depending on the user agent and the operating system it is rendered in various ways: in web browsers it is usually displayed in the browser's title bar; in the task bar when the window has been minimized; it can be taken as default for the name of the file when saving the page, etc.. The title element is special in that it cannot contain any other tags: all tags in the title must be rendered as if they are text. So <title>My <b>first</b> webpage</title> will render as "My <b>first</b> webpage", and not "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> (XHTML: <base />)
Specifies base values for links, such as ___location or target.
<script>...</script>
Used to include Javascript or other scripts in the document.
<style>...</style>
Used to specify a style for the document, usually:
<style type="text/css">...</style>
with style data or references such as:
/*<![CDATA[*/ @import "url "; @import "url "; /*]]>*/

Body tags

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 (for example the document title), h2 for a lower-level heading (a major section), h3 for a level below that (for example a subsection), etc. The lowest level heading is h6. Most web browsers will show h1 as large text in a different font, and h6 as small boldfaced text, but this can be overridden with CSS. The heading elements are not intended merely for creating large or bold text.

Text containers

<p>...</p>
Creates a paragraph.
<blockquote>...</blockquote>
Creates a block quotation; conventionally displayed indented, but not to be misused to indent text. May have automatically generated quotes. The cite attribute may give the source, and must be a fully qualified URL.
<pre>...</pre>
Creates preformatted 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.

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.

Logical markup

Most elements intended for altering the meaning of text within its normal flow are inline elements, and can be nested in other inline elements, or in block-level elements. The following are all inline elements.

<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 rendering 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 carry more specific meaning.

Presentational markup

All presentational tags are deprecated in favor of Cascading Style Sheets (CSS). Both are shown below, although CSS is recommended by many web authorities.

<font>...</font>
Sets font sizes in seven intervals using the size attribute from 1 to 7. Can also be used to set the text color using the color attribute, and to change the font used by the face attribute. Preferred usage is through CSS:
  • <font size="N"> corresponds to {font-size: Ypx} (there is no set mapping of N to Y values)
  • <font color="foo"> corresponds to {color: foo}
  • <font face="foobar"> corresponds to {font-family: foobar}
<b>...</b>
Specify boldface type. Preferred usage is through CSS: {font-weight: bold}
<i>...</i>
Use italic type. With CSS: {font-style: italic}
<tt>...</tt>
Use a typewriter-like (fixed-width) font. With CSS: {font-family: monospace}
<s>, </s>; <strike>, </strike>
Create strike-through text. With CSS: {text-decoration: line-through}
<big>...</big>; <small>...</small>
Creates bigger/smaller text. With CSS: {font-size: foo}
<sub>...</sub>; <sup>...</sup>
Create subscript or superscript text. With CSS: {vertical-align: sub} or {vertical-align: super}
<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 intended for specifying tooltip text. See #links and anchors above.

Example:

<img src="http://en.wikipedia.org/upload/b/bc/Wiki.png" title="example of an image" alt="Wikipedia logo">

gives the image   with the same tooltip (hover box), but not with the link, while

<a href="http://en.wikipedia.org/wiki/Image:Wiki.png" title="Wikipedia logo"><img src="http://en.wikipedia.org/upload/b/bc/Wiki.png" alt= "Wikipedia logo" /></a>

also produces the link. Note that the name of the link target in this example is somewhat confusing: it is not an image but a webpage.

In addition the image becomes a link, if the element "img" is put at the position of a link label, see #links and anchors above.

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.
<!--...-->
Creates a comment. This is an SGML tag and not limited to HTML, and as such it may appear anywhere in the document, even before the DTD or after </html>. Its contents and any tags inside it should not be rendered and will remain invisible. Don't forget to close your comments, or a large part of your page may disappear. For historic reasons (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.

See also Framing#Websites.

See also

Retrieved from "https://en.wikipedia.org/w/index.php?title=HTML_element&oldid=5750998"