Structural HTML Tags
Structured HTML tags are like keywords define that how a web browser will format and display the content. With the help of tags, a web browser can distinguish between HTML content and simple content. HTML tags contain three main parts: an opening tag, content, and closing tag. But some HTML tags are unclosed tags. HTML tags are used to create HTML documents and render their properties. Each HTML tags have different properties. All HTML tags must enclosed within < > these brackets.
<body>
<body>…</body>
Defines the beginning and the end of the document body. The body contains the content of the document (the part that is displayed in the browser window). Attributes to the <body> tag affect the entire document.
Attributes
alink=”#rrggbb” or color name
Sets the color of active links (i.e., the color while the mouse button is held down during a “click”). Color is specified in hexadecimal RGB values or by standard web color name. Chapter 5, HTML Overview, explains how to specify color in HTML.
background=url
Provides the URL to a graphic file to be used as a tiling graphic in the background of the document. bgcolor=”#rrggbb” or color name
Sets the color of the background for the document. Color is specified in hexadecimal RGB values or by standard web color name.
link=”#rrggbb” or color name
Sets the default color for all the links in the document. Color is specified in hexadecimal RGB values or by standard web color name.
text=”#rrggbb” or color name
Sets the default color for all the text in the document. Color is specified in hexadecimal RGB values or by standard web color name.
vlink=”#rrggbb” or color name
Sets the color of the visited links for the document. Color is specified in hexadecimal RGB values or by standard web color name.
<head>
<head>…</head>
Defines the head (also called “header”) portion of the document that contains information about the document. The <head> tag has no attributes, but serves only as a container for the other header tags, such as <base>, <meta>, and <title>.
<html>…</html>
Placed at the beginning and end of the document, this tag tells the browser that the entire document is composed in HTML.
<link>
Defines a relationship between the current document and another document. This tag goes within the <head> portion of the document. It is often used to refer to an external stylesheet.
Attributes
href=url
Identifies the target document.
methods=list
Specifies a browser-dependent list of comma-separated display methods for this link. It is not commonly used.
rev=relation
Specifies the relationship from the target document to the source.
rel=relation
Specifies the relationship from the current source document to the target.
rel=stylesheet
This attribute is used within the <link> tag to create a relationship with an external stylesheet.
title=text
Provides a title for the target document.
type=resource
Shows the type of outside link. The value text/CSS indicates that the linked document is an external cascading style sheet
<meta>
<meta>
Provides additional information about the document. It should be placed within the <head> tags at the beginning of the document. It is commonly used for making documents searchable (by adding keywords) and may be used for client pull functions.
Attributes
content=text
Specifies the value of the meta tag and is always used in conjunction with name= or http-equiv=. http-equiv=text
Specifies information to be included in the HTTP header that the server appends to the document. It is used in conjunction with the name attribute.
name=text
Specifies a name for the meta information.
scheme=text
Provides additional information for the interpretation of meta data. This is a new attribute introduced in HTML 4.0.
<title>
<title>…</title>
Specifies the title of the document. The title generally appears in the top bar of the browser window
Setting Up an HTML Document
The standard skeletal structure of an HTML document is as follows: <HTML>
<HEAD><TITLE>Document Title</TITLE></HEAD> <BODY>Contents of Document</BODY>
</HTML>
The HTML standard requires that the entire document appears within the <html> container, however, most browsers can properly display the contents of the document even if these tags are omitted. All HTML documents are made up of two main structures, the head (also called the “header”) and the body. The exception to this rule is when the document contains a frameset in place of the body.
The Document Header
The header, delimited by the <head> tag, contains information that describes the HTML document. The head tag has no attributes of its own but merely serves as a container for other tags that help define and manage the document’s contents.
Titles
The most commonly used element within the header is the document title (within <title> tags, as shown in the example above), which provides a description of the page’s contents. The title is also used as the name of the link as displayed in a user’s bookmarks or “hot list.” Search engines rely heavily on document titles as well. For all these reasons, it is important to provide thoughtful and descriptive titles for all your documents and avoid vague titles such as “Welcome,” or “MyPage.”
Other header elements
Other useful HTML elements are also placed within the <head> tags of a document:
<base>
This tag establishes the document’s base location, which serves as a reference for all the links in the document.
Creating Links.
<link>
This tag defines the relationship between the current document and another document. Although it can signify relationships such as index, next, and previous, it is most often used today to link a document to an external style sheet.
<meta>
“Meta” tags are used to provide information about a document, such as
keywords or descriptions to aid search engines. It may also be used for clientpull
functions. The <meta> tag is discussed later in this chapter.
<script>
JavaScripts and VBScripts may be added to the document within its header.
<style>
Embedded style sheets must be added to the document header by placing the
<style> element within the <head> container.
.
The Document Body
The document body, delimited by <body> tags, contains the contents of the document -the part that you want to display in the browser window.
The body of an HTML document might consist of just a few paragraphs of text, a single image, or a complex combination of text, images, tables, and multimedia objects. What you put on the page is up to you.
You can use the <body> tag to set colors for the background and text elements
Page Element HTML TAG Description
Background color
<BODY BGCOLOR=”color”> Sets the color for the background of the entire page.
Regular text <BODY TEXT=”color”> Sets the color for all the regular text in the document. The default color for text is black.
Links <BODY LINK=”color”> Sets the color for hyperlinks.
The default color for links is blue.
Visited link <BODY VLINK=”color”> Sets the color for links that have already been clicked. The default color for visited links is purple.
Active link <BODY ALINK=”color”> Sets the color for a link while it is in the process of being clicked. The default color for an active link is red.
Formatting Text
Paragraphs and Headings (Block-Level Elements)
Block-level elements are always formatted with a line-break before and after, with most adding some amount of additional space above and below as well. The most commonly used block elements are paragraphs (<p>), headings (<h1…h6>), and
blockquotes (<blockquote>).
<address>…</address>
Identifies ownership or authorship information, typically at the beginning or end of a document. Addresses are generally formatted in italic type with a line break (but no extra space) above and below.
<blockquote>…</blockquote>
Enclosed text is a blockquote, which is generally displayed with an indent on the left and right margins and added space above and below the paragraph.
Note that:
• Some older browsers display blockquote material in italic, making it difficult to read.
• Browsers are inconsistent in the way they display images within blockquotes.
Some align the graphic with the indented blockquote margin; others align the image with the normal margin of paragraph text. It is a good idea to test on a variety of browsers.
<div>…</div>
Denotes the beginning and end of a division of the page. First introduced in HTML
3.2 as a way to define a unique style for each division, only the alignment function (using the align attribute) was implemented by the major browsers. The <div> tag has proven itself enormously valuable, however, when used in conjunction with style sheets.
Attributes
align=center|left|right
Aligns the text within the tags to the left, right, or center of the page.
<hn>…</hn>
Specifies that the enclosed text is a heading. There are six different levels of headings, from <h1> to <h6>, with each subsequent level displaying at a smaller size. <h5> and <h6> usually display smaller than the surrounding body text.
Attributes
align=center|left|right
Used to align the header left, right, or centered on the page. Microsoft Internet Explorer 3.0 and earlier do not support the right alignment.
<p>…</p>
Denotes the beginning and end of a paragraph when used as a container. Many browsers will also allow the <p> tag to be used without a closing tag to start a new paragraph. The container method is preferred, particularly if you are using Cascading Style Sheets with the document.
Attributes
align=center|left|right
Aligns the text within the tags to the left, right, or center of the page.
<abbr>…</abbr>
Identifies the enclosed text as an abbreviation. It has no inherent effect on text display, but can be used as an element selector in a style sheet.
Attributes
title=string
Provides the full expression for the abbreviation. This may be useful for nonvisual browsers and search engines.
Example
<ABBR TITLE=”Massachusetts”>Mass.</ABBR>
<acronym>…</acronym>
Indicates an acronym. It has no inherent effect on text display, but can be used as an element selector in a style sheet.
Attributes
title=string
Provides the full expression for the acronym. This may be useful for nonvisual browsers and search engines.
Example
<ACRONYM TITLE=”World Wide Web”>WWW</ACRONYM>
<b>…</b>
Enclosed text is rendered in bold.
<big>…</big>
Sets the type one font size larger than the surrounding text. It is equivalent to <font size=”+1″>.
<blink>…</blink>
Causes the contained text to flash on and off.
<cite>…</cite>
Denotes a citation—a reference to another document, especially books, magazines, articles, etc. Browsers generally display citations in italic.
<code>…</code>
Denotes a code sample. Code is rendered in the browser’s specified monospace font (usually Courier).
<del>…</del>
Indicates deleted text. It has no inherent style qualities on its own, but may be used to hide deleted text from view or display it as strike-through text via style sheet controls. It may be useful for legal documents and any instance where edits need to be tracked. Its counterpart is inserted text (<ins>). Both can be used to indicate either inline or block-level elements.
<em>…</em>
Indicates emphasized text. Nearly all browsers render emphasized text in italic.
<font>…</font>
Used to affect the style (color, typeface, and size) of the enclosed text.
Attributes
color=”#rrggbb”
Specifies the color using a hexadecimal RGB value.
face=typeface (or list of typefaces)
Specifies a typeface for the text. The specified typeface will be used only if it is found on the user’s machine. You may provide a list of fonts (separated by commas) and the browser will use the first available in the string.
size=value
Sets the size of the type to an absolute value on a scale from 1 to 7 (3 is the default), or using a relative value +n or -n (based on the default or <basefont> setting).
<i>…</i>
Enclosed text is displayed in italic.
<ins>…</ins>
Indicates text that has been inserted into the document. It has no inherent style qualities on its own, but may be used to indicate inserted text in a different color via style sheet controls. It may be useful for legal documents and any instance in which edits need to be tracked. Its counterpart is deleted text (<del>). Both can be used to indicate either inline or block-level elements.
<s>…</s>
The enclosed text is displayed as strike-through text (same as <strike> but introduced by later browser versions).
<small>…</small>
Renders the type one font size smaller than the surrounding text. It is equivalent to <font size=”- 1″>.
<strike>…</strike>
The enclosed text is displayed as strike-through text (crossed through with a horizontal line).
<strong>…</strong>
The enclosed text is strongly emphasized. Nearly all browsers render <strong> text in bold.
<sub>…</sub>
Formats enclosed text as subscript.
<sup>…</sup>
Formats enclosed text as superscript.
<tt>…</tt>
Formats enclosed text as typewriter text. The text enclosed in the <tt> tag will be displayed in a monospaced font such as Courier.
<u>…</u>
Enclosed text will be underlined when displayed.
Spacing and Positioning
<br>
Breaks the text and begins a new line, but does not add extra space as the <p> tag does. Attributes
clear=all|left|right
Breaks the text flow and resumes the next line after the specified margin is clear. This is often used to start the text below an aligned image (preventing text wrap).
<center>…</center>
Centers the enclosed text horizontally on the page (same as <DIV align=center>.
Lists
The following is a collection of tags used for formatting a number of different types of lists in HTML. Any list can be nested within another list.
<dir>…</dir>
Creates a directory list consisting of list items <li>. Directory lists were originally designed to display lists of files with short names, but they have been deprecated with the recommendation that unordered lists (<ul>) be used instead. Most browsers render directory lists the same as unordered lists (with bullets), although some will use a multicolumn format.
<dl>…</dl>
Indicates a definition list, consisting of terms (<dt>) and definitions (<dd>).
<dd>…</dd>
Denotes the definition portion of an item within a definition list. The definition is usually displayed with an indented left margin. The closing tag is commonly omitted but should be included when applying style sheets.
<dt>…</dt>
Denotes the term portion of an item within a definition list. The closing tag is normally omitted but should be included when applying style sheets.
<li>…</li>
Defines an item in a list. It is used within the <dir>, <ol>, and <ul> list tags.
Attributes
The following attributes have been deprecated by the HTML 4.0 Specification in favor of style sheet controls for list item display.
type=format
Changes the format of the automatically generated numbers or bullets for list items. Within unordered lists (<ul>), the type attribute can be used to specify the bullet style (disc, circle, or square) for a particular list item. Within ordered lists (<ol>), the type attribute specifies the numbering style (see options under <ol> listing below) for a particular list item.
value=number
Within ordered lists, you can specify the number (n) of an item. The following list items will increase from the specified number.
<menu>…</menu>
This indicates the beginning and end of a menu list, which consists of list items <li>. Menus are intended to be used for a list of short choices, such as a menu of links to other documents. It is little used and has been deprecated in favor of <ul>.
Attributes
compact
Displays the list as small as possible (not many browsers do anything with this attribute).
type=disc|circle|square
Defines the shape of the bullets used for each list item.
<ol>…</ol>
Defines the beginning and end of an ordered list, which consists of list items <li>.
Attributes
compact
Displays the list as small as possible (not many browsers do anything with this attribute).
start=number
Starts the numbering of the list at n, instead of 1.
type=1|A|a|I|i
<ul>…</ul>
Defines the beginning and end of an ordered list, which consists of list items <li>.
Attributes
compact
Displays the listed block as small as possible. Not many browsers support this attribute.
type=disc|circle|square
Defines the shape of the bullets used for each list item.
Creating Links
<a>…</a>
Defines an anchor within the document. An anchor is used to link to another document. It can also serve to label a fragment within a document (also called a named anchor), which is used as a reference for linking to a specific point in an HTML document.
Attributes
href=url
Specifies the URL of the target destination.
method=value
Specifies a list of names, each representing a particular document-processing method, usually an application name. It is browser-dependent and is rarely used in practice.
Link Examples
– To a local file:
<A HREF=”filename.html”>…</A>
– To an external file:
<A HREF=”http://server/path/file.html”>…</A>
– To a named anchor:
<A HREF=”http://server/path/file.html#fragment”>…</A>
– To a named anchor in the same file:
<A HREF=”#fragment”>…</A>
– To send an email message:
<A HREF=”mailto:username@domain”>…</A>
– To a file on an FTP server:
<A HREF=”ftp://server/path/filename”>…</A>
Setting Colors in <body>
Link color specifications in the <body> tag are applied to the whole document.
Specifying Color for a Specific Link
You can override the color of a specific link by placing <font> tags within the anchor tags. There is no way to set the visited link and active link colors for specific links. This feature is supported by versions 3.0 and 4.0 of Internet Explorer, but only version 4.0 of Netscape Navigator.
<A HREF=”document.html”><FONT COLOR=aqua> Specially colored link</FONT></A>
Setting Global-Link Colors with Style Sheets
You can apply almost any style sheet property to a link by using the anchor tag (<a>) as a selector. However, CSS1 introduced a group of pseudo-classes (link, Links <BODY LINK=”color”> Sets the color for hyperlinks. The default color for links is blue.
Visited links <BODY VLINK=”color”> Sets the colors for links that have already been clicked. The default color for visited links is purple.
Active links <BODY ALINK=”color”> Sets the color for a link while it is in the process of being clicked. The default color for an active link is red.
<hr>
Adds a horizontal rule to the page.
Attributes
align=center|left|right
If the rule is shorter than the width of the window, this tag controls the horizontal alignment of the rule. The default is center.
noshade
This displays the rule as a solid (non-shaded) bar.
size=number
Specifies the thickness of the rule in pixels.
width=number or %
Specifies the length of the rule in pixels or as a percentage of the page width. By default, rules are the full width of the browser window.
<img>
Places a graphic on the page.
Attributes
align=type
Specifies the alignment of an image using one of the following attributes:
Type Resulting Alignment
absbottom Navigator 3.0 & 4.0 and Internet Explorer 4.0 only. Aligns the bottom of the image with the bottom of the current line.
absmiddle Navigator 3.0 & 4.0 and Internet Explorer 4.0 only. Aligns the middle of the image with the middle of the current line. baseline Navigator 3.0 & 4.0 and Internet Explorer 4.0 only. Aligns the bottom of the image with the baseline of the current line.
bottom Aligns the bottom of the image with the text baseline. This is the default vertical alignment. center According to the W3C Spec, this centers the image horizontally on the page; however, in reality, browsers treat it the same as align=middle.
alt=text
Provides a string of alternative text that appears when the image is not displayed.
border=number
Specifies the width (in pixels) of the border that surrounds a linked image. It is standard practice to set border=0 to turn the border off.
height=number
Specifies the height of the image in pixels. It is not required but recommended to speed up the rendering of the web page.
hspace=number
Used in conjunction with the align attribute, this attribute specifies in a number of pixels the amount of space to leave clear to the left and right of the image.
If you liked our content Structured HTML Tags, then you will also like CSS Selectors
Leave a Reply