HTML element 274393 225483298 2008-07-13T22:49:18Z Tkgd2007 2934677 move image and create bullets in intro {{selfref|This article is about the [[HTML]] elements in general. For information on how to format [[Wikipedia]] entries, see [[Wikipedia:How to edit a page]] and [[Help:HTML in wikitext]]}} In [[computing]], an '''HTML element''' indicates structure in an [[HTML]] document and a way of hierarchically arranging content. More specifically, an HTML element is an [[Standard Generalized Markup Language|SGML]] element that meets the requirements of one or more of the HTML [[Document Type Definition]]s (DTDs). These elements have properties: both ''attributes'' and ''content'', as specified (both allowable and required) according to the appropriate HTML DTD (for example, the HTML 4.01 strict DTD). Elements may represent headings, paragraphs, hypertext links, lists, embedded media, and a variety of other structures. [[Image:HTML element structure.svg|right|Parts of a HTML element: &lt;p class="foo"&gt;This is a paragraph&lt;/p&gt; Start tag: &lt;p class="foo"&gt;; Attribute name: class; value: foo; Content: This is a paragraph.; End tag: &lt;/p&gt;]] Syntactically HTML elements are constructed with: * a ''start tag'' marking the beginning of an element * any number of [[HTML#Attributes|attributes]] (and their associated values) * some amount of ''content'' (characters and other elements) * an ''end tag'' Many HTML elements include ''attributes'' in their start tags, defining desired behavior or indicating additional element properties. The end tag is optional for many elements; in a minimal case, an ''empty element'' has no content and requires no 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 4.01; 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 documents. XHTML 1.0 migrates HTML from its SGML underpinnings to an [[XML]] foundation. Accordingly, the discussion of elements within this article focuses on the final SGML based HTML, version 4.01 (unless noted otherwise). However, to the extent that XHTML 1.0 elements remain identical to the HTML 4.01 elements, the discussion remains applicable (see [[HTML#SGML versus XML based HTML|HTML]] for a discussion of the minor differences in content between XHTML 1.0 and HTML 4.01). {{Html series}} ==Block-level and inline elements== HTML elements are classified as either block-level or inline (text-level). ;Block-level elements:Headings, paragraphs, lists, or tables are "large" structures containing other blocks, inline elements, or text (but see nesting rules, below). They are usually displayed as independent "blocks" separated from other blocks by vertical space (margins). ;Inline or text-level elements:Hyperlinks, citations, quotations, or images are "small" structures that represent or describe small pieces of text or data. They may contain only text or other inline elements, and are usually displayed one after another on a line within the block that contains them. (See <cite>[http://www.w3.org/TR/REC-html40/struct/global.html#h-7.5.3 "The global structure of an HTML document"]</cite>) ===Nesting of elements=== Many HTML elements can be '''nested''', or contained within other HTML elements: <source lang="html4strict"><p>You <em>rock</em></p></source> Nesting can be more complex: <source lang="html4strict"><p>King Louis said, <q lang="fr">L'état, c'est <em>moi!</em></q> (<cite><a href="/wiki/Louis_XIV_of_France">Wikipedia</a></cite>).</p></source> Nesting may be arbitrarily deep, but for the code to remain valid, the elements ''must'' be closed in the reverse order that they were opened. (This pattern is known as [[LIFO|Last in, first out]].) ;Incorrect:<source lang="html4strict"><p>Claire kissed <em>Nick</p></em></source> ;Correct:<source lang="html4strict"><p>Claire kissed <em>Nick</em></p></source> Some [[#Block|block-level]] elements (e.g. paragraphs) may contain only [[#Inline|inline]] elements, and some (e.g. forms, lists) must contain only block-level child elements, but most may contain either block-level or inline elements. ==Document elements== Root elements provide the containers enclosing all other HTML elements. Every HTML page has these elements. The surrounding tags may be omitted. However, some utilities may not recognize or correctly handle the document if this is done. {{XMLElement|html|HTML|…}} :Delimit an [[HTML]] document (as opposed to, for example, an [[XML]] or other class of document). The HTML element takes the attributes <code>lang</code> for the primary language of the document (such as <code>lang=en</code> for English) and <code>profile</code> (rarely used) for a [[uniform resource identifier]] (URI) specifying metadata for the document. The only contents allowed in an HTML element are one <code>head</code> element and one <code>body</code> element. (See [[HTML element#Frames|Frames]], below, for an exception where <code>body</code> is not used.) {{XMLElement|head|Head|…}} :Delimit the header section of the document, which contains information about the page. The <code>head</code> element basically contains the metadata for the document. There are seven possible head elements including a <code>meta</code> element for extensible specification of metadata. {{XMLElement|body|Body|…}} :Delimit the body section of the document, which contains the content to be displayed on the page. These root elements are arranged as follows: :<code>&lt;html&gt;</code> ::<code>&lt;head&gt;</code> :::Any of the various [[#Head elements|head elements]], arranged in any order and occurring any number of times (except <code>title</code> and <code>base</code>, which can occur only once each). The only required head element is <code>title</code>. ::<code>&lt;/head&gt;</code> ::<code>&lt;body&gt;</code> :::One or more [[#Block-level|block elements]] and/or <code>script</code> elements, arranged in any order to suit the meaning and also typically the presentation of the document. The block elements are: :::* Paragraph (<code>p</code>) :::* Heading (<code>h1</code>...<code>h6</code>) :::* Block quotation (<code>blockquote</code>) :::* Ordered list (<code>ol</code>) :::* Unordered list (<code>ul</code>) :::* Definition list (<code>dl</code>) :::* Division (<code>div</code>) :::* No script support (<code>noscript</code>) :::* Form (<code>form</code>) :::* Table (<code>table</code>) :::* Fieldset (<code>fieldset</code>) :::* Address (<code>address</code>) :::The <code>ins</code> and <code>del</code> elements are also permissible within the <code>body</code> element when used as block-level elements. No other HTML elements are valid within the <code>body</code> element. ::<code>&lt;/body&gt;</code> :<code>&lt;/html&gt;</code> ==Head elements == {{XMLElement|title|Title|…}} :Define a document title. This element is required in every HTML and XHTML document. Different user agents may make use of the title in different ways. For example: :* Web browsers usually display it in a window's [[title bar]] when the window is open, and in the [[task bar]] when the window is minimized. :* It may become the default filename when saving the page. :* [[Search engine]]s' Web crawlers may pay particular attention to the words used in the title. :The <code>title</code> element must not contain any nested tags (that is, it cannot contain any other elements). Only one <code>title</code> element is permitted in a document. {{htmlelement|base|Base||end=no}} :Specifies a base [[Uniform Resource Locator|URL]] for all relative <code>href</code> and other links in the document. Must appear before any element that refers to an external resource. HTML permits only one <code>base</code> element for each document. The <code>base</code> element has attributes, but no contents. {{htmlelement|link|Link|end=no}} :Specifies links to other documents, such as "previous" and "next" links, or alternate versions [http://www.w3.org/TR/html4/struct/links.html#edef-LINK]. A common use is to link to external [[cascading Style Sheets|stylesheet]]s, using the form ::<code>&lt;link rel="stylesheet" type="text/css" href=''url'' title=''description_of_style''&gt;</code>[http://www.w3.org/TR/html4/present/styles.html#h-14.3.2] :A document's <code>head</code> element may contain any number of <code>link</code> elements. The <code>link</code> element has attributes, but no contents. {{htmlelement|basefont|Basefont||end=no|deprecated=1}} :Specifies a base font size, typeface, and color for the document. Used together with <code>font</code> elements. [[Deprecation|Deprecated]] in favor of [[Style sheet (web development)|stylesheets]]. {{XMLElement|script|Script|…}} :Used to add [[JavaScript]] or other scripts to the document. The script code may be typed literally between the <code>script</code> tags or may be given in a separate resource whose URL is specified with the <code>script</code> element's optional <code>src</code> attribute. [http://www.w3.org/TR/html4/interact/scripts.html] {{XMLElement|style|Style|…}} :Specifies a [[Cascading Style Sheets|style]] for the document, usually in the form ::;<code><style type="text/css">…</style></code> :The CSS ([[Cascading Style Sheets]]) statements may be typed literally between the <code>style</code> tags or may be given in separate resources whose URLs are specified with <code>@import</code> directives of the form ::;<code><style> @import ''url''; </style></code>. [http://www.w3.org/TR/CSS1#containment-in-html] {{XMLElement|object|Object|…}} :Used for including generic objects within the document header. Though rarely used within a <code>head</code> element, it could potentially be used to extract foreign data and associate it with the current document. {{htmlelement|meta|Meta Information||end=no}} :Can be used to specify additional [[metadata]] about a document, such as its author, publication date, expiration date, page description, keywords, or other information not provided through the other header elements and attributes. Because of their generic nature, <code>meta</code> elements specify associative [[Associative array|key-value pairs]]. :In one form, <code>meta</code> elements can specify [[HTTP]] headers which should be sent before the actual content when the HTML page is served from Web server to client: for example, ::<code>&lt;meta http-equiv="foo" content="bar"&gt;</code> :This specifies that the page should be served with an HTTP header called <code>foo</code> that has a value <code>bar</code>. :In the general form, a <code>meta</code> element specifies <code>name</code> and associated <code>content</code> attributes describing aspects of the HTML page. To prevent possible ambiguity, an optional third attribute, <code>scheme</code>, may be supplied to specify a semantic framework that defines the meaning of the key and its value: for example, ::<code>&lt;meta name="foo" content="bar" scheme="DC"&gt;</code> :In this example, the <code>meta</code> element identifies itself as containing the <code>foo</code> element, with a value of <code>bar</code>, from the DC or [[Dublin Core]] [[Resource Description Framework|resource description framework]]. ==Inline elements== Inline elements cannot be placed directly inside the <code>body</code> element; they must be wholly nested within block-level elements (see [[#Block_elements|Block elements]], below). ===General phrase elements=== {{XMLElement|em|Emphasis|…}} :<em>Emphasis</em> (conventionally displayed in italics) {{XMLElement|strong|Strong Emphasis|…}} :<strong>strong emphasis</strong> (conventionally displayed bold). An oral user agent may use different voices for emphasis. {{XMLElement|q|Quote|…}} :A quotation containing only inline elements (for quotations containing block level elements see <code>blockquote</code> below). Quote elements may be nested. By the specification, the author should not include quotation marks. Rather, quotation marks &mdash; including nested quotation marks &mdash; should be rendered through stylesheet properties or the browser's default stylesheet. Practical concerns due to browser non-compliance may force authors to find work-arounds. The <code>cite</code> ''attribute'' gives the source, and must be a fully qualified [[Uniform Resource Identifier|URI]]. :Note: within semantic HTML, the display of a lengthy inline quotation as an indented block should be handled through stylesheet presentation. One method is to use an [[Extensible Stylesheet Language Transformations|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 classify the element as a lengthy quotation. For example: ::<code>&lt;q class='lengthy'&gt;</code>An inline quotation of significant length (say 25 words, for example) goes here...<code>&lt;/q&gt;</code>. {{XMLElement|cite|Citation|…}} :A citation. Reference for a quote or statement in the document. {{XMLElement|dfn|Definition|…}} :Defining first instance of a term {{XMLElement|abbr|Abbreviation|…}} :Contains an [[abbreviation]], like <span title="abbreviation">abbr.</span> <!-- this element is not supported in wiki so a span is used instead for this example --> {{XMLElement|acronym|Acronym|…}} :Similar to the <code>abbr</code> element, but contains an [[acronym]], like <span title="HyperText Markup Language">HTML</span>. <!-- this element is not supported in wiki so a span is used instead for this example --> === Computer code phrase elements === These elements are useful primarily for documenting computer code development and user interaction through differentiation of source code (&lt;code&gt;), source code variables (&lt;var&gt;), user input (&lt;kbd&gt;), and terminal output (&lt;samp&gt;). {{XMLElement|code|Sourcecode|…}} :A code snippet. Conventionally rendered in a monospace font: <code>Code snippet.</code> {{XMLElement|samp|Sample|…}} :Sample output (from a program or script) {{XMLElement|kbd|Keyboard|…}} :Keyboard - text to be entered by the user {{XMLElement|var|Variable|…}} :Variable ===Special inline elements=== {{XMLElement|sub|Subscript|…}} {{XMLElement|sup|Superscript|…}} :Create <sub>[[subscript]]</sub> or <sup>[[superscript]]</sup> text: Equivalent CSS: <code>{vertical-align: sub}</code> or <code>{vertical-align: super}</code> {{XMLElement|del|Deleted|…}} :Deleted text. Typically rendered as a [[strikethrough]]: <del>Deleted text.</del> {{XMLElement|ins|Inserted|…}} :Inserted text. Often used to markup replacement text for <code>&lt;del></code>'d text. Typically rendered [[underline]]d: <ins>Inserted text.</ins> ::Note, both <code>ins</code> and <code>del</code> elements may be used as 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 paragraphs and ending in a final paragraph would need to use three separate <code>del</code> elements. Two <code>del</code> 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. {{htmlelement|isindex|Index|end=no|deprecated=1}} :The :<code>isindex</code> 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 [[Uniform Resource Locator|URL]] and the document is displayed with these keywords highlighted. Generally if the server supports this feature it will add the isindex elements to documents without author intervention. ===Links and anchors=== {{XMLElement|a|Anchor|…}} :Creates an element that becomes a [[hyperlink]] with the <code>href</code> (hypertext reference[http://www.w3.org/Provider/ServerWriter.html]) attribute set to a [[Uniform Resource Locator|URL]]; additionally the attribute <code>title</code> may be set to a hover box text, some informative text about the link: ;{{XMLElement|a|Hyperlink|link text|atr={{XMLAttribute|href|Hyper Reference|URL|type=URL}}{{XMLAttribute|title|Link Title|additional information|type=TEXT}}}} :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 attribute|alt text]] the same way, though this is technically incorrect. :Alternatively (and sometimes concurrently), the element becomes an anchor with the <code>name</code> attribute set, which preceded by a [[number sign]] ' # ', and appended to the URL, acts as a link target in a [[URI scheme]] (a "document [[Fragment identifier|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 <code>id</code> attribute,[http://www.w3.org/TR/html4/struct/links.html#h-12.2.3] so using <code>&lt;a name="foo"></code> is not necessary. :See also:[[HTML element#link|link]] ===Images and objects=== {{htmlelement|img|Image|end=no}} :Includes an [[image]] with the <code>src</code> attribute. The required [[Alt attribute|<code>alt</code> attribute]] provides alternative text in case the image cannot be displayed. <code>Alt</code> is intended as alternative text, although Microsoft [[Internet Explorer]] renders it as a [[tooltip]] if no <code>title</code> is given; the <code>title</code> attribute is the tooltip text. It was proposed by Marc Andreessen.[http://1997.webhistory.org/www.lists/www-talk.1993q1/0182.html] {{htmlelement|br|Line Break|end=no}} :Specifies a line-break. ;{{XMLElement|map|[[Image Map]]|…|}} :Specifies a client-side [[image map]]. {{htmlelement|area|Area|end=no}} ::Specifies an area in the map. ;{{XMLElement|object|Object|…|}} :Includes an object in the page of the type specified by the <code>type</code> attribute. This may be in any [[MIME]]-type the Web browser understands, such as an embedded page, code to be handled by a plug-in such as [[Macromedia Flash|Flash]], a [[Java (programming language)|Java]] [[applet]], a sound file, etc. ;{{htmlelement|param|Object Parameter|…|end=no}} :This element may only appear inside an <code>object</code> element. Using attributes such as <code>name</code> and <code>value</code>, each <code>&lt;param&gt;</code> sets a parameter for the object. Examples include width, height, font, background colour, etc, depending on what has been exposed in this way by the <code>object</code>'s developers. ;<code id="embed">&lt;embed&gt;…&lt;/embed></code> ('''proprietary''') :Calls a plug-in handler for the type specified by the <code>type</code> attribute. Used for embedding Flash files, sound files, etc. This is a proprietary [[Netscape]] extension to HTML; <code>&lt;object&gt;</code> is the [[W3C]] standard method. ;<code>&lt;noembed&gt;…&lt;/noembed&gt;</code> ('''proprietary''') :Specifies alternative content, if the embed cannot be rendered. ;{{XMLElement|applet|Java Applet|…|deprecated=xhtml}} :Includes a Java applet in the page. Deprecated; <code>&lt;object></code> is now preferred. ===Span element=== ;[[Span and div|{{XMLElement|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 <code>id</code> or <code>class</code> attribute, which can then be referenced from [[Cascading Style Sheets|CSS]] or [[Document Object Model|DOM]] call. Like most HTML elements, <code>span</code> also supports inline CSS in its optional <code>style</code> attribute. ==Block elements== 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=== {{XMLElement|p|Paragraph|…}} :Creates a paragraph, perhaps the most common block level element. The closing tag is not required in HTML, however is required for XHTML. {{XMLElement|blockquote|BlockQuotation|…}} :Contains quoted material when the quotation itself includes block level elements (for instance, quoting several paragraphs). The <code>cite</code> attribute may give the source, and must be a fully qualified [[Uniform Resource Identifier]]. The <code>blockquote</code> element is often misunderstood. It is an element meant to contain quotations that are themselves block level. In other words, it contains a complete paragraph or many paragraphs. In HTML strict DTDs inline elements are prohibited from <code>blockquote</code> elements. For quotations not containing block level elements see the quote (<code>q</code>) element. {{htmlelement|hr|HorizontalRule||end=no}} :Inserts a horizontal rule. Horizontal rules can also be handled through the CSS properties. ===Headings=== {{XMLElement|h1|Primary Headline|…}} {{XMLElement|h2|Secondary Headline|…}} {{XMLElement|h3|Third Level Headline|…}} {{XMLElement|h4|4. Level Headline|…}} {{XMLElement|h5|5. Level Headline|…}} {{XMLElement|h6|6. Level Headline|…}} :Section headings at different levels. Use <code>&lt;h1></code> for the highest-level heading (the major sections), <code>&lt;h2></code> for the next level down (sub-section), <code>&lt;h3></code> for a level below that, and so on. The lowest level heading is <code>&lt;h6></code>. :Most web browsers will show <code>&lt;h1></code> as large text in a different font, and <code>&lt;h6></code> as small bold-faced text, but this can be overridden with [[Cascading Style Sheets|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=== {{XMLElement|dl|Definition List|…}} :Creates a definition list (consisting of definition terms paired with definitions). Can also be used to specify speakers and quoted text. {{XMLElement|dt|Definition Term|…}} :Creates a definition term. {{XMLElement|dd|Definition|…}} :Creates a definition. {{XMLElement|ol|Ordered List|…}} and {{XMLElement|ul|Unordered List|…}} ::''Main article: [[ordered list]]'' :Creates an ordered (enumerated) or unordered (bulleted) list. With <code>ol</code>, the <code>type</code> attribute can be used to specify the kind of ordering, but CSS gives more control: <code>{list-style-type: foo}</code>. The default is Arabic numbering. For <code>ul</code>, CSS can be used to specify the list marker: <code>{list-style-type: foo}</code>. The default marker is a disc. {{XMLElement|li|List Item|…}} :Creates a list item in ordered and unordered lists. {{XMLElement|dir|Directory List|…|deprecated=1}} :Delimits a directory listing. Deprecated in favor of <code>&lt;ul></code>. {{XMLElement|menu|Menu List|…|deprecated=1}} :Creates a menu listing. Should be more compact than an <code>&lt;ul></code> list, but badly supported. Deprecated in favor of <code>&lt;ul></code>. ===Tables=== {{wikibooks|HTML Programming|Tables}} ;{{XMLElement|table|Table|…}} :Creates a table ;{{XMLElement|tr|Table Row|…}} :Creates a row in the table. ;{{XMLElement|th|Table Header Cell|…}} :Creates a table header cell within a row or a column; contents are conventionally displayed bold and centered. An aural user agent may use a louder voice for these items. ;{{XMLElement|td|Table Data Cell|…}} :Creates a table data cell within a row. ;{{XMLElement|colgroup|Column Group|…}} :Specifies a column group in a table. ;{{htmlelement|col|Column Attributes||end=no}} :Specifies attributes for an entire column in a table. ;{{XMLElement|caption|Table Caption|…}} :Specifies a caption for the entire table. ;{{XMLElement|thead|Table Head|…}} :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). ;{{XMLElement|tbody|Table Body|…}} :Specifies the main part of a table. ;{{XMLElement|tfoot|Table Foot|…}} :Specifies the footer part of a table. Like <code>&lt;thead></code>, this section may be repeated by the user agent if the table is split across pages (in printing or other paged media) ===Forms=== These elements can be combined into a form or used separately as user-interface controls. Combined with a first-class javascript engine, these controls provide support for rich user interfaces. :{{main|HTML form}} HTML specifies the elements that make up a form, and the method by which it will be submitted. However, some form of script either [[server-side script|server-side]] or client side must be used to process the user's input once it is submitted. {{XMLElement|form|Form|…|atr={{XMLAttribute|action|Action|url|type=URL|need=required}}}} :Creates a [[form (web)|form]]. {{XMLElement|select|Selection List|…|atr={{XMLAttribute|name|Name|xyz|type=NMTOKEN|need=implied}}}} :Create a selection list, from which the user can select a single option. May be rendered as a dropdown list. {{htmlelement|option|Selection Option|…|atr={{XMLAttribute|value|Value|x|type=ANY|need=required}}|end=no}} ::Creates an item in a <code>select</code> list. {{htmlelement|input|Checkbox|…|atr={{XMLAttribute|type|Field Type|checkbox|type=ENUM|need=implied}}|end=no}} :Creates a checkbox. Can be checked or unchecked. {{htmlelement|input|Radio Button|…|atr={{XMLAttribute|type|Field Type|radio|type=ENUM|need=implied}}|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. {{htmlelement|input|Button|…|atr={{XMLAttribute|type|Field Type|button|type=ENUM|need=implied}}|end=no}} :Creates a general-purpose button. But it's advised to use <code>&lt;button></code> if possible (i.e. if the client supports it) which provides richer possibilities. {{htmlelement|input|Submit Button|…|atr={{XMLAttribute|type|Field Type|submit|type=ENUM|need=implied}}|end=no}} :Creates a submit button. {{htmlelement|input|Submit Button|…|atr={{XMLAttribute|type|Field Type|image|type=ENUM|need=implied}}|end=no}} :Creates a button using an image. The image URL may be specified with the <code>src</code> tag. {{htmlelement|input|Reset Button|…|atr={{XMLAttribute|type|Field Type|reset|type=ENUM|need=implied}}|end=no}} :Creates a reset button for resetting the form to default values. {{htmlelement|input|Textbox|…|atr={{XMLAttribute|type|Field Type|text|type=ENUM|need=optional}}|end=no}} :Creates a one-line text input. The <code>size</code> 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). {{htmlelement|input|Password|…|atr={{XMLAttribute|type|Field Type|password|type=ENUM|need=implied}}|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 concern. {{htmlelement|input|File|…|atr={{XMLAttribute|type|Field Type|file|type=ENUM|need=implied}}|end=no}} :creates a [[file select]] {{htmlelement|input|Hidden|…|atr={{XMLAttribute|type|Field Type|hidden|type=ENUM|need=implied}}|end=no}} :Is not visible in the rendered page, but allows a designer to maintain a copy of something that needs to be submitted to the server as part of the form. This may, for example, be data that this web user entered or selected on a previous form that needs to be processed in conjunction with the current form. {{XMLElement|label|Label|…|atr={{XMLAttribute|for|For|id|type=ENUM|need=implied}}}} :Creates a label for a form input (e.g. radio button). Clicking on the label fires a click on the matching input. {{XMLElement|textarea|Multiline Textarea|…|atr={{XMLAttribute|rows|Rows|8|type=INT}}}} :Create a multiple-line text area, the size of which is specified by <code>cols</code> and <code>rows</code> attributes. Text in between the tags appears in the text area when the page is loaded. ===Other containers=== ;[[Div (HTML tag)|{{XMLElement|div|Logical division|…}}]] :Creates a block logical division. This may be used to identify a part of the HTML document, for example so as to apply an <code>id</code> or <code>class</code> attribute, which can then be referenced from [[Cascading Style Sheets|CSS]] or [[Document Object Model|DOM]] calls. Like most HTML elements, div also supports inline CSS in its optional <code>style</code> attribute. {{XMLElement|pre|PreFormattedText|…}} :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 <code>pre</code> element signals that this white space should be rendered as authored. With the CSS properties: <code>{white-space: pre; font-family: monospace;}</code>, other elements can be presented in the same way. This element can contain any inline element except: image (<code>img</code>), object (<code>object</code>), big font size (<code>big</code>), small font size (<code>small</code>), superscript (<code>sup</code>), and subscript (<code>sub</code>). {{XMLElement|address|Address|…}} :Used to markup contact information like address for the document or a section of it. Inline elements are the only permitted. Authors can use the break element <code>br</code> to insert a new line within this element. ;[[Iframe|{{XMLElement|iframe|Inline frame|…}}]] :Includes another HTML document in the page. Although not formally deprecated in HTML 4.01, "The <code>object</code> 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" <code>iframe</code> [http://www.w3.org/TR/1999/PR-html40-19990824/struct/objects.html#h-13.1] :Unlike an <code>object</code> element, an <code>iframe</code> (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.[http://www.w3.org/TR/1999/PR-html40-19990824/struct/objects.html#embedded-documents] :The <iframe> tag must be closed by </iframe>. Otherwise the content after the <iframe> tag will be taken as alternative text to be displayed when the browser has no iframe support. :The <code>iframe</code> element was not included in the version 1.1 XHTML specification, despite having never been formally deprecated. Those serving their web content as XHTML 1.1 must use the <code>object</code> element. :(Also see Frames [[HTML element#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. :{{XMLElement|frameset|Frameset|…}} ::Delimit the frameset. The frames layout is given by comma separated lists in the <code>rows</code> and <code>cols</code> attributes. :{{XMLElement|frame|Frame|…}} ::Delimit a single frame, or region, within the frameset. A different document linked with the <code>src</code> attribute appears inside. :{{XMLElement|noframes|No Frames|…}} :Contains a normal <code>&lt;body></code> element with child elements that will appear in web browsers that don't support frames. :{{XMLElement|iframe|Inline Frame|…}} ::An [[IFrame|inline frame]] inside a normal HTML <code>&lt;body></code>, which embeds another HTML document. A similar effect can also be achieved using the <code>object</code> element. These approaches differ in some ways ([[World Wide Web Consortium]] [http://www.w3.org/TR/1999/PR-html40-19990824/struct/objects.html#h-13.5]). See also [[Framing (World Wide Web)]]. ==Presentational markup== ===Official 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 the Strict variants of HTML 4.01, XHTML1.0 and XHTML 1.1. <code>&lt;b>…&lt;/b></code> and <code>&lt;i>…&lt;/i></code> are invalid in the current draft of [http://www.w3.org/TR/2005/WD-xhtml2-20050527/ XHTML2.0]. ;{{XMLElement|center|Centered Text|…|deprecated=xhtml}} :Creates a block-level centered division. May also center-align all text. Deprecated in favor of <code>&lt;div&gt;</code> or another element with centering defined using CSS. ;{{XMLElement|b|Bold|…}} <!-- not deprecated in HTML 4.01; not included in XHTML 2.0 which is in draft stage --> :Use '''boldface''' type. Equivalent CSS: <code>{font-weight: bold}</code> ;{{XMLElement|i|Italic|…}} <!-- not deprecated in HTML 4.01; not included in XHTML 2.0 which is in draft stage --> :Use ''italic'' type. Equivalent CSS: <code>{font-style: italic}</code> ;{{XMLElement|big|Big|…}} :Creates <big>bigger</big> text. Equivalent CSS: <code>{font-size: larger}</code>. ;{{XMLElement|small|Small|…}} :Creates <small>smaller</small> text. Equivalent CSS: <code>{font-size: smaller}</code><br/> ;{{XMLElement|s|Strikethrough|…|deprecated=1}} ;{{XMLElement|strike|Strikethrough|…|deprecated=1}} :Create strike-through text: <s>Strikethrough</s> Equivalent CSS: <code>{text-decoration: line-through}</code> ;{{XMLElement|tt|Teletype|…}} :Use a <tt>typewriter-like</tt>, also known as <tt>[[teletype]]</tt>, ([[non-proportional font|fixed-width]]) font. Equivalent CSS: <code>{font-family: monospace}</code> ;{{XMLElement|u|Underlined|…|deprecated=1}} :Use an <u>underlined</u> font. Equivalent CSS: <code>{text-decoration: underline}</code> <!-- font description start --> ;{{XMLElement|font|Teletype|…|deprecated=1}} Use <nowiki><span></nowiki> instead. ;<code>&lt;font [color=''color''] [size=''size''] [face=''face'']>…&lt;/font></code> :Can specify the font color with the <code>color</code> attribute, typeface with the <code>face</code> attribute, and absolute or relative size with the <code>size</code> attribute. Examples (all the examples are deprecated, use CSS equivalents if possible): # <code>&lt;font color="green">text&lt;/font></code> creates <font color=green>green text</font>. # <code>&lt;font color="#1f4099">text&lt;/font></code> creates <font color="#114499">text with [[Web colors#Hex triplet|hexadecimal color]] #1f4099</font>. # <code>&lt;font size="4">text&lt;/font></code> creates <font size="4">text</font> with size 4. Sizes are from 1 to 7. The standard size is 3, unless otherwise specified in the &lt;body> or other tags. # <code>&lt;font size="+1">text&lt;/font></code> creates <font size="+1">text with size 1 bigger than the standard.</font>. <code>&lt;font size="-1">text&lt;/font></code> is opposite. # <code>&lt;font face="Courier">text&lt;/font></code> makes <font face="Courier">text</font> with Courier font. Equivalent CSS for font attributes: :*<code>&lt;font size="N"></code> corresponds to <code>{font-size: Y''units''}</code> (the HTML specification does not define the relationship between size ''N'' and unit-size ''Y'', nor does it define a unit). :*<code>&lt;font color="red"></code> corresponds to <code>{color: red}</code> :*<code>&lt;font face="Courier"></code> corresponds to <code>{font-family: "Courier"}</code> ===Unofficial presentational markup === {{main|Non-standard HTML tags}} These are unofficial presentational elements that may not be supported in all browsers. ;<code>[[Blink tag|&lt;blink&gt;…&lt;/blink&gt;]]</code> ('''unofficial''') :Causes text to blink. Can be done with CSS where supported: <code>{text-decoration: blink}</code> ;<code>[[Marquee tag|&lt;marquee&gt;…&lt;/marquee&gt;]]</code> ('''unofficial''') :Creates scrolling text. No equivalent with CSS; use scripting instead. ;<code>&lt;blackface&gt;…&lt;/blackface&gt;</code> ('''unofficial''') :Supported only in [[WebTV]] browsers, generates extra bold lettering. Can be done with CSS where supported: <code>{font-weight: 900}</code>; with some fonts (such as [[Arial]] or [[Gill Sans]]), using "black" or "ultra bold" variants are more effective. ;<code>&lt;shadow&gt;…&lt;/shadow&gt;</code> ('''unofficial''') :Supported only in [[WebTV]] browsers, generates a shadow underneath text. It can be simulated with CSS but the process is complicated. ;<code>&lt;nobr&gt;…&lt;/nobr&gt;</code> ('''unofficial''') :Causes text to not return at end of line. Can be done with CSS: <code>{white-space: nowrap}</code> ;<code>&lt;wbr&gt;</code> ('''unofficial''') :Adds an optional line break the browser may use if required for wrapping. It performs the same function as zero width space ([[Wbr#Table_of_spaces|HTML entity &amp;#8203;]]). <!-- xcvxcvxcv -->==HTML comment== <source lang="html4strict"> <!-- A Comment --> </source> :Encloses a comment. This is an [[SGML]] construct and not limited to HTML, so it may appear anywhere in the document, even before the DTD or after <code>&lt;/html&gt;</code>. None of its enclosed contents are rendered. For compatibility with some pre-1995 browsers, the contents of <code>&lt;style&gt;</code> and <code>&lt;script&gt;</code> elements are still sometimes surrounded by comment delimiters. ==External links== *[http://learnhtml.9f.com/ HTML Tutor] Learn HTML for free. (Basic and Advanced) * Complete lists of [http://www.w3.org/TR/html401/index/elements.html elements] and *[http://www.w3.org/TR/html401/index/attributes.html attributes] for HTML 4.01 [[Category:World Wide Web]] [[Category:HTML]] [[fr:Élément HTML]] [[ia:Etiquetta de HTML]] [[it:Elemento HTML]] [[lt:HTML žymė]] [[hu:HTML elem]] [[nl:Lijst van HTML-elementen]] [[ja:HTML要素]] [[pt:Tag]] [[ru:Элементы HTML]] [[th:รายชื่อ HTML element]]