| |
|
For instance, the <em> tag tells the user agent that a certain chunk of emphasized text begins here. (The user agent may choose how to indicate this emphasis.) Tags often have corresponding "end" tag, which is identical to the opening tag except that it begins with a slash (i.e. </em> for the emphasis tag).
Syntax
Note that HTML, but not XHTML, through some SGML features ("SHORTTAG") allows various abbreviated notations, which make the following equivalent:<element-name attribute-name="attribute-value">content</element-name>
Furthermore the trailing angle bracket can be omitted when another opening one directly follows (<code><li<em>Foo</em</li></code).<ul> <li>Foo</li> <li>Foo</> <li>Foo <li/Foo/ <>Foo </ul>
If an attribute can only take predefined values, the attribute name itself and the equals sign can be omitted (<p left>); when the only valid value is called the same as the attribute, you get "binary attributes" (<dl compact> = <dl compact="compact">).
Web browser support for these features is very limited, though, and this may or may not work at all in your web browser. Do not rely on this behaviour, instead always write full tags and attributes, and quote any attribute values.
Whenever an attribute requires you to specify a color (such as a text or background color), there are two ways to do this. The more flexible of these is hexadecimal RGB notation. A hexadecimal RGB color consists of six hexadecimal digits. The first pair of these signifies the brightness of the red-light component of the color; the second pair, the blue-light component; the third, the green-light component. By combining different values, 16 million colors can be defined. For the benefit of anyone not comfortable with hexadecimal RGB notation, there exists a set of conventional color names: the sixteen names specified in HTML 4.01 are:
| Name | Hexadecimal RGB value | Decimal RGB value | Example |
|---|---|---|---|
| Aqua | #00FFFF | 0,255,255 | |
| Black | #000000 | 0,0,0 | |
| Blue | #0000FF | 0,0,255 | |
| Fuchsia | #FF00FF | 255,0,255 | |
| Gray | #808080 | 128,128,128 | |
| Green | #008000 | 0,128,0 | |
| Lime | #00FF00 | 0,255,0 | |
| Maroon | #800000 | 128,0,0 | |
| Navy | #000080 | 0,0,128 | |
| Olive | #808000 | 128,128,0 | |
| Purple | #800080 | 128,0,128 | |
| Red | #FF0000 | 255,0,0 | |
| Silver | #C0C0C0 | 192,192,192 | |
| Teal | #008080 | 0,128,128 | |
| White | #FFFFFF | 255, 255, 255 | |
| Yellow | #FFFF00 | 255,255,0 |
Most web browsers also recognise additional color names, see Web colors.
Most but not all HTML elements can be "nested": <p><em>You</em>rock!</p> has an EM elemenent 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>, but in practice nesting levels of more than 2 are uncommon.
It is important to remember that a so-called 'block-level' element cannot be nested inside another block-level element, and that tags must be closed in the reverse order that they've been opened.
Wrong: <p><font face="Tahoma">Lucy kissed <em>Jimmy</p></font></em>
Right: <p><font face="Tahoma">Lucy kissed <em>Jimmy</em></font></p>
All HTML documents must start with the Document Type Definition or DTD. This is one of the following:
"Nesting"
Basic tags
"http://www.w3.org/TR/html4/strict.dtd">
"http://www.w3.org/TR/html4/loose.dtd">
"http://www.w3.org/TR/html4/frameset.dtd">
<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.Header tags
<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". Keep this in mind.<meta>, </meta>
This tag has many uses: it can be used to specify a page description, keywords, and the special form <meta http-equiv="foo"> is used to specify commands which should be sent as HTTP headers.<link>, </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.
<base> (XHTML: <base />) DEPRECATEDSpecifies base values for links, such as location or target.
<isindex> (XHTML: n/a) DEPRECATEDUsed to create a primitive search on specially configured servers. Do not use this tag.
<script>, </script>Used to include Javascript or other scripts in the document.
<style>, </style>Used to associate inline stylesheets with the document.
The following are block level elements:
Note: HTML can only specify the form appearance; processing of the user's input must be done with a server-side script.
All presentational tags are deprecated, Cascading Style Sheets (CSS) should be used instead. Both are shown below, use CSS!
<i>, </i> Use italic type. With CSS: {font-style: italics;}
<tt>, </tt>
Body tags
Headings
<h1></h1>, <h2></h2>, <h3></h3>, <h4></h4>, <h5></h5>, <h6></h6>
Section headings at different levels. Use H1 for a high-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 webbrowsers will show H1 as large text in a different font, and H6 as small boldfaced text, but this can be overridden with CSS.
Do not use Hn to get big text.Text containers
<p>, </p>
Create a paragraph.<blockquote>, </blockquote>
Create 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>
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>
Use 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.<ol>, </ol>
Creates an ordered (numerated) list. The 'type' attribute can be used to specify the kind of ordering, but CSS gives more control. {list-style-type: foo;}. Default is Arabic numbering.<ul>, </ul>
Creates an unordered list. CSS can be used to specify the list marker: { list-style-type: foo}. Default is a disc.<dir>, </dir> DEPRECATED
Delimits a directory listing. Don't use, use <ul> instead.<menu>, </menu> DEPRECATED
Creates a menu listing. Should be more compact than an <ul> list, but badly supported. Use <ul> instead.Tables
<table>, </table>
Creates a tableForms
<form>, </form>
Creates a form.Other containers
<div>, </div>
Creates a logical page division. Mainly for use with CSS.<center>, </center> DEPRECATED
Creates a centered division. May also center-align all text. Don't use, use <div align="center"> instead.<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.
<embed>, </embed> UNOFFICIAL'
Calls a plug-in handler for the type specified by the type attribute. Used for embedding Flash files, soundfiles etc.. Use <object> instead.
<applet>, </applet< UNOFFICIAL
Includes a Java applet in the page. Use <object> insstead.
The following are inline elements:Logical markup
<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. This may be rendered centered and with a monospace font.<del>, </del>
Deleted text. Typically rendered with a line through the text.<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> DEPRECATED
Definition, Sample Text, Keyboard Input, Variable: do not use any of these tags, but use <code> instead.Presentational markup
<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.<b>, </b> Use boldface type. Preferred usage is through CSS: {font-weight: bold;}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;}
Links and anchors
<a>, </a>
Creates an element that becomes a hyperlink with the "href" attribute set to a URL and becomes an anchor with the "name" attribute set, which preceded by a hash 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 NOT a tooltip, use the "title" attribute for that.
<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.
<blink>, </blink> UNOFFICIALCauses text to blink. One of the two most hated tags in HTML. Can be done with CSS: {text-decoration: blink;}
<marquee>, </marquee> UNOFFICIALCreates 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. Do not forget to close your comments, or a large part of your page may disappear.
Note: a 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.
External links