HTML TAGS Document Elements Root Elements Provide the Containers Enclosing All Other HTML Elements

HTML TAGS 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. <html>…</html> Delimit an HTML document (i.e. instead of an XML or another class document). The HTML element takes the attributes lang for the primary language for the document (such as en for English) and a profile for a URI specifying metadata for the document (rarely used). The only contents allowed in an HTML element is one head element and one body element. (See Frames, below, for an exception where body is not used.) <head>…</head> Delimit the header section of the document, which contains information about the page. The head element basically contains the metadata for the document. There are seven possible head elements including a meta element for extensible specification of metadata. <body>…</body> Delimit the body section of the document, which contains the displayed content of the page. These root elements are arranged as follows: <html> <head> Any of the various head related elements arranged in any order and occurring any number of times except base and title which can only occur once each. Title is the only required head element. </head> <body> At least one of either a block element or a script element must occur,(though any number may occur), arranged in any order to suit the meaning and also typically the presentation of the document. The ins and del elements are also permissible within the body element when used as block level elements. The other block elements are: paragraph (p), heading (h1...h6), block quotation (blockquote), ordered list (ol), unordered list (ul), definition list (dl), division (div), no script support (noscript), form (form), table (table), fieldset (fieldset), and address (address). No other HTML elements are valid within the body element. </body> </html> Nesting of elements Nesting describes the structural relationship between tags in HTML code. When Tag A is nested inside Tag B, then Tag A should be opened and closed before Tag B is closed. Mixing up the tags can cause unpredictable results. Let's look at a simple example first: <b>This text is in bold for emphasis<u>and this is underlined.</b>This should be underlined, but not bold</u> Note that we closed the bold tag inside the underline tag. The designer may expect the browser to stop rendering the text in bold, but keep underlining. That doesn't always happen. Netscape 4.x renders the text like this: This text is in bold for emphasis and this is underlined. This should be underlined, but not bold. While Explorer 5.0 and Netscape 6.0 interpret it this way: This text is in bold for emphasis and this is underlined. This should be underlined, but not bold. Netscape 4.x swaps the closing bold and underline tags. This closes the tags in the proper order according to HTML standards - but may cause unanticipated results. 1 Basic Tags <h1>…</h1> <h2>…</h2> <h3>…</h3> <h4>…</h4> <h5>…</h5> <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. <h1>This is header 1</h1> <h2>This is header 2</h2> <h3>This is header 3</h3> <h4>This is header 4</h4> <h5>This is header 5</h5> <h6>This is header 6</h6> <p>…</p> Creates a paragraph, perhaps the most common block level element. The closing tag is not required in HTML. <p>This is some text in a very short paragraph</p> <br> <br/> (XML compatible) Specifies a line-break. In HTML the <br> tag has no end tag. In XHTML the <br> tag must be properly closed, like this: <br />. This text contains<br />a line break <hr> <hr/> (XML compatible) Inserts a horizontal rule. In HTML the <hr> tag has no end tag. In XHTML the <hr> tag must be properly closed. This is some text <hr /> This is some text  The comment tag is used to insert a comment in the source code. A comment will be ignored by the browser. You can use comments to explain your code, which can help you when you edit the source code at a later date.  <p>This is a regular paragraph</p> 2 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. <b>…</b> and <i>…</i> are invalid in the current draft of XHTML2.0. <center>…</center> (deprecated) Creates a block-level centered division. May also center-align all text. Deprecated in favor of <div> or another element with centering defined using CSS. <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> (deprecated) <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>…</font> (deprecated) <font [color=color] [size=size] [face=face]>…</font> 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, use 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.. 5. <font size="-1">text</font> is opposite. 6. <font face="Courier">text</font> makes text with Courier font. Equivalent CSS for font attributes: · <font size="N"> corresponds to {font-size: Yunits · <font color="red"> corresponds to {color: red} · <font face="Courier"> corresponds to {font-family: "Courier"} 3 Links and anchors <a>…</a> 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: <a href="URL" title="additional information">link text</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 ' # ', and appended to the URL, acts as a link target (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. Note: A linked page is normally displayed in the current browser window, unless you specify another target. Destination anchors in HTML documents may be specified either by the A element (naming it with the name attribute), or by any other element (naming with the id attribute). Thus, for example, an author might create a table of contents whose entries link to header elements H2, H3, etc., in the same document. Using the A element to create destination anchors, we would write: <H1>Table of Contents</H1> <P><A href="#section1">Introduction</A><BR> <A href="#section2">Some background</A><BR> <A href="#section2.1">On a more personal note</A><BR> ...the rest of the table of contents... ...the document body... <H2><A name="section1">Introduction</A></H2> ...section 1... <H2><A name="section2">Some background</A></H2> ...section 2... <H3><A name="section2.1">On a more personal note</A></H3> ...section 2.1... We may achieve the same effect by making the header elements themselves the anchors: <H1>Table of Contents</H1> <P><A href="#section1">Introduction</A><BR> <A href="#section2">Some background</A><BR> <A href="#section2.1">On a more personal note</A><BR> ...the rest of the table of contents... ...the document body... <H2 id="section1">Introduction</H2> ...section 1... <H2 id="section2">Some background</H2> ...section 2... <H3 id="section2.1">On a more personal note</H3> ...section 2.1... An anchor name is the value of either the name or id attribute when used in the context of anchors. Anchor names must observe the following rules: Uniqueness: Anchor names must be unique within a document.

HTML TAGS Document Elements Root Elements Provide the Containers Enclosing All Other HTML Elements

Details

Download

Copyright

We respect the copyrights and intellectual property rights of all users. All uploaded documents are either original works of the uploader or authorized works of the rightful owners.

Support