|
|
|
|
HTML element
|
| |
|
| |
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 SGML element that meets the requirements of one or more of the HTML Document Type Definitions (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).
Discussion
Ask a question about 'HTML element' Start a new discussion about 'HTML element' Answer questions from other users |
Encyclopedia
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 SGML element that meets the requirements of one or more of the HTML Document Type Definitions (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.
Syntactically HTML elements are constructed with:
- a start tag marking the beginning of an element
- any number of attributes (and their associated values)
- some amount of content (characters and other elements)
- an end tag (note: Empty elements should not have an end tag. It is optional for some others.)
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 for a discussion of the minor differences in content between XHTML 1.0 and HTML 4.01).
Head elements
- 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 engines' Web crawlers may pay particular attention to the words used in the title.
- The
title element must not contain any nested tags (that is, it cannot contain any other elements). Only one title element is permitted in a document.
- 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. HTML permits only one base element for each document. The base element has attributes, but no contents.
- Specifies links to other documents, such as "previous" and "next" links, or alternate versions . A common use is to link to external stylesheets, using the form
<link rel="stylesheet" type="text/css" href="url" title="description_of_style">
A less-common, but important, usage is to supply navigation hints consistently through use of microformats. Several common relationships are defined, that may be exposed to users through the browser interface rather than directly in the web page.
<link rel="next" href="url">
- A document's
head element may contain any number of link elements. The link element has attributes, but no contents.
- Specifies a base font size, typeface, and color for the document. Used together with
font elements. Deprecated in favor of stylesheets.
- Used to add scripts to the document. The script code may be typed literally between the
script tags or may be given in a separate resource whose URL is specified with the script element's optional src attribute.
- Specifies a style for the document, usually in the form
;- The CSS (Cascading Style Sheets) statements may be typed literally between the
style tags or may be given in separate resources whose URLs are specified with @import directives of the form
;
- Used for including generic objects within the document header. Though rarely used within a
head element, it could potentially be used to extract foreign data and associate it with the current document.
- 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,
meta elements specify associative key-value pairs.
- In one form,
meta 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,
<meta http-equiv="foo" content="bar">
- This specifies that the page should be served with an HTTP header called
foo that has a value bar.
- In the general form, a
meta element specifies name and associated content attributes describing aspects of the HTML page. To prevent possible ambiguity, an optional third attribute, scheme, may be supplied to specify a semantic framework that defines the meaning of the key and its value: for example,
<meta name="foo" content="bar" scheme="DC">
- In this example, the
meta element identifies itself as containing the foo element, with a value of bar, from the DC or Dublin Core resource description framework.
Inline elements
Inline elements cannot be placed directly inside the body element; 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 oral user agent may use different voices for emphasis.
- A 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 nested quotation marks — 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 cite attribute gives the source, and must be a fully qualified 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 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:
<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 abbr.
- Similar to the
abbr element, but contains an acronym, like HTML.
Computer code phrase elements
These elements are useful primarily for documenting computer code development and user interaction through differentiation of source code (<code>), source code variables (<var>), user input (<kbd>), and terminal output (<samp>).
- 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:
- Deleted text. Typically rendered as a strikethrough:
Deleted text.
- Inserted text. Often used to mark up replacement text for
<del>'d text. Typically rendered underlined: Inserted text.
Note, both ins and del 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 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 isindex elements to documents without author intervention.
Links and anchors
- Creates an element that becomes a hyperlink with the
href (hypertext reference) 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, or pound ' # ', and appended to the URL, acts as a link target in a URI scheme (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.
Also see the LINK element.
Images and objects
- Includes an image with the
src attribute. The required alt attribute provides alternative text in case the image cannot be displayed. Alt is intended as alternative text, although Microsoft Internet Explorer renders it as a tooltip if no title is given; the title attribute is the tooltip text. It was proposed by Marc Andreessen.
- Specifies a line-break.
- 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 Web browser 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 on what has been exposed in this way by the object's developers.
<embed>…</embed> (proprietary)
- Calls a plug-in handler for the type specified by the
type attribute. Used for embedding Flash files, sound files, etc. This is a proprietary Netscape extension to HTML; <object> is the W3C standard method.
<noembed>…</noembed> (proprietary)
- Specifies alternative content, if the embed cannot be rendered.
- Includes a Java applet in the page. Deprecated;
<object> is now preferred.
Span element
- 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 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
- Creates a paragraph, perhaps the most common block level element. The closing tag is not required in HTML, however is required for XHTML.
- 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 Uniform Resource Identifier. The blockquote 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 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 bold text, 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.
and
Main article: ordered list
- 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: ul, CSS can be used to specify the list marker:
- 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.
- 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.
- Creates a table data cell within a row.
- 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
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.
-
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 or client side must be used to process the user's input once it is submitted.
- Creates a form.
- Create a selection list, from which the user can select a single option. May be rendered as a dropdown list.
Creates an item in a select list.
- Creates a checkbox. Can be checked or unchecked.
- 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.
- 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.
- Creates a submit button.
- Creates a button using an image. The image URL may be specified with the
src tag.
- Creates a reset button for resetting the form to default values.
- 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).
- 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.
- creates a file select
- 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.
- Creates a label for a form input (e.g. radio button). Clicking on the label fires a click on the matching input.
- 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
- 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: img), object (object), big font size (big), small font size (small), superscript (sup), and subscript (sub).
- Used to mark up contact information like address 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 object for its presentation by a user agent [and] thus subsumes some of the tasks carried out by" iframe - 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. - The . Otherwise the content after the
| |
