HTML element

From Free net encyclopedia

(Redirected from Html tag)
Template:Selfref

Template:Html series In computing, an HTML element indicates structure in an HTML document. More specifically, it is an SGML element that meets the requirements of one or more of the HTML Document Type Definitions (DTDs). HTML elements generally consist of three parts: a start tag marking the beginning of an element, some amount of content, and an end tag. Elements may represent headings, paragraphs, hypertext links, lists, embedded media, and a variety of other structures. Image:HTML element structure.png

Many HTML elements include attributes in their start tags, defining desired behavior. The end tag is optional for many elements; in a minimal case, an empty element has no content or end tag. 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. Such elements may be ignored or displayed improperly on browsers not supporting them.

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.

XHTML is the successor to HTML; XHTML 1.0 supports the same elements as HTML 4 and in most cases valid XHTML 1.0 documents will be valid or nearly valid HTML 4.

Contents

[edit]

Block-level and inline elements

Elements within the BODY of an HTML document are either block-level or inline ("text level"). Block-level elements — such as headings, paragraphs, lists, or tables — are "larger" than inline ones and generally may contain other block-level elements or inline elements. Inline elements — such as hyperlinks, citations, quotations, or emphasized text — may contain only other inline elements or text.

A block-level element, such as a paragraph, is typically displayed as an independent "block" separated from other blocks by vertical space (margins). Inline elements generally occupy a line determined by their nearest block-level ancestor.

(See "The global structure of an HTML document")

[edit]

Nesting of elements

Many HTML elements can be nested, or contained within other HTML elements:

<p>You <em>rock</em></p>

Nesting can be more complex:

King Louis said, <q lang="fr">L'etat, c'est <em>moi</em>!</q> (<cite><a href="/wiki/Louis_XIV_of_France">Wikipedia</a></cite>).

Nesting may be arbitrarily deep, but the elements must be closed in the reverse order that they were opened for the code to remain valid (this pattern is known as Last in, first out).

Wrong
<p>Lucy kissed <em>Jimmy</p></em>
Right
<p>Lucy kissed <em>Jimmy</em></p>

Some block-level elements (e.g. paragraphs) may contain only inline elements, and some (e.g. forms, lists) must contain only block-level children, but most may contain either block-level or inline elements.

[edit]

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>
Define a page title. This element is required in every HTML and XHTML document. Different user agents may make use of 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 become the default filename when saving the page, Search engines' web crawlers may pay particular attention to the words used in the title element. The title element must not contain any nested tags.
<meta>
<meta /> (in XHTML)
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>
<link /> (in XHTML)
Specifies links to other documents, such as 'previous' and 'next' links, or alternate versions [1]. A common use is to link to external stylesheets, using the form:
<link rel="stylesheet" type="text/css" href="url" title="description of style"> [2]
<base>
<base /> (in XHTML)
Specifies a base URL for all relative href and other links in the document. Must appear before any element that refers to an external resource.
<basefont> (deprecated)
<basefont /> (deprecated, in XHTML)
Specifies a base font size, typeface and color of the document. Used together with font elements.
<script>…</script>
Used to add JavaScript or other scripts to the document. The script code may be literally typed between the script tags and/or it may be in a separate resource whose URL is specified in script's optional src attribute. [3]
<style>…</style>
Specifies a style for the document, usually:
<style type="text/css">…</style>
The CSS statements may be literally typed between the style tags and/or it may be in separate resources whose URLs are specified in @import directives such as:
<style> @import "url"; </style>. [4]
[edit]

Body elements defined in HTML 4.01

All body tags are block-level elements, and cannot be contained within an inline element.

[edit]

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.
[edit]

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.

[edit]

Block-level

<p>…</p>
Creates a paragraph.
<blockquote>…</blockquote>
Creates a block quotation; conventionally displayed indented, but not designed for indenting text. May have automatically generated quotation marks. 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 contact information for the document or a section of it.
<hr>
<hr /> (in XHTML)
Inserts a horizontal rule.
[edit]

Inline

<em>…</em>
Emphasis (conventionally displayed in italics)
<strong>…</strong>
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.
<cite>…</cite>
A citation. Reference for a quote or statement in the document.
<code>…</code>
A code snippet. Conventionally rendered in a monospace font: Code snippet.
<del>…</del>
Deleted text. Typically rendered as a strikethrough: Deleted text.
<ins>…</ins>
Inserted text. Often used to markup replacement text for <del>'d text. Typically rendered underlined: Inserted text.
<dfn>…</dfn>
Defining instance of a term
<samp>…</samp>
Sample output (from a program or script)
<kbd>…</kbd>
Keyboard - text to be entered by the user
<var>…</var>
Variable
<sub>…</sub>
<sup>…</sup>
Create subscript or superscript text: Equivalent CSS: {vertical-align: sub} or {vertical-align: super}
[edit]

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>.
[edit]

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)
[edit]

Forms

Template:Main

HTML specifies the elements that make up a form, and the method by which it will be submitted. However, some form of server-side script must be used to process the user's input once it is submitted.

<form action="wherever">…</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. Can be checked or unchecked.
<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 from this group.
<input type="submit" value="NAME">
Creates a submit button.
<input type="image" border=0 src="name.gif">
Creates a submit button using an image.
<input type="reset">
Creates a reset button for resetting the form to default values.
<input type="text">
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).
<textarea>…</textarea>
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.
<isindex> (deprecated in HTML 4.01)
Creates a one-line text input. Is not enclosed inside form element unlike other elements. When submitted, the query string of the current URL is replaced with the entered text and the document is reloaded. <input> should be used instead.
[edit]

Other containers

<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, which can then be referenced from CSS. Like most HTML elements, span also supports inline CSS in its optional style attribute).
<div>…</div>
Creates a block-level logical page division. Can be used with CSS in the same ways as span, described above.
<center>…</center> (deprecated)
Creates a centered division. May also center-align all text. Deprecated in favor of <div> with centering defined using CSS.
<object>…</object>
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.
<param>
<param /> (in XHTML)
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.
<applet>…</applet> (deprecated)
Includes a Java applet in the page. Deprecated; <object> is now preferred.
<iframe>…</iframe>
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 [and] thus subsumes some of the tasks carried out by" iframe [5]
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.[6]
(Also see Frames below.)
[edit]

Presentational markup

The use of presentational markup is discouraged. The equivalent CSS should be used instead. Deprecated elements are only valid in the Transitional and Frameset variants of HTML 4.01 and XHTML1.0. They are invalid in XHTML1.1 and the Strict variants of HTML 4.01 and XHTML 1.0. <b>…</b> and <i>…</i> are invalid in the current draft of XHTML2.0.

<b>…</b>
Use boldface type. Equivalent CSS: {font-weight: bold}
<i>…</i>
Use italic type. Equivalent CSS: {font-style: italic}
<big>…</big>
Creates bigger text. Equivalent CSS: {font-size: larger}.
<small>…</small>
Creates smaller text. Equivalent CSS: {font-size: smaller}
<s>…</s> and <strike>…</strike> (deprecated)
Create strike-through text: Strikethrough Equivalent CSS: {text-decoration: line-through}
<tt>…</tt>
Use a typewriter-like (fixed-width) font. Equivalent CSS: {font-family: monospace}
<u>…</u> (deprecated)
Use an underlined font. Equivalent CSS: {text-decoration: underline}
<font [color=color,] [size=size,] [face=face]>…</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.

Examples (all the examples are deprecated, uss CSS equivalents if possible):

  1. <font color="green">text</font> creates green text.
  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.

Equivalent CSS for font attributes:

  • <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}
[edit]

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="additional information">link label</a>
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 '#' in the URL acts as a link target (a "document fragment"), typically scrolling 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.
[edit]

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.
[edit]

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.
<nobr>…</nobr> (unofficial)
Causes text to not return at end of line. Can be done with CSS: {white-space: nowrap}
<!--…-->
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.
[edit]

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 given 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 that will appear in web browsers that don't support frames.
<iframe>…</iframe>
An inline frame inside a normal HTML <body>, which embeds another HTML document. The function of this element has been "subsumed" (in the words of the World Wide Web Consortium [7]) by the <object> element, which produces the same effect in all modern browsers.

See also Framing (World Wide Web).

[edit]

External links

it:Elementi HTML lt:HTML žymė nl:Lijst van HTML-elementen pt:Tag ru:Элементы HTML th:รายชื่อ HTML element

Retrieved from "http://www.netipedia.com/index.php/HTML_element"