Chapter 2:- Basic HTML Tags And Elements

by admin | April 09th 2012 | elearning, HTML & Internet | 2,558 Comments

HTML Elements

HTML documents are text files made up of HTML elements.

HTML elements are defined using HTML tags

HTML Tags

HTML tags are used to mark- up HTML elements

HTML tags are surrounded by the two characters <and>

The surrounding character are called angle brackets

HTML tags normally come in pairs like <b> and </b>

The first tag in a pair is the state tag, the second tag is the end tag
The text between the start and end tags is the element content
HTML tags are not case sensitive, <b> means the same as <B>

HTML Elements

Remember the HTML example from the previous page:

<html><head><title> Title of page </title></head>

<body>

This is my first homepage.

</body>

</html>

This is an HTML element:

The HTML element starts with a start tag:

<b>

The content of the HTML element is: This text is bold

The HTML element ends with an end tag: </b>

The purpose or the <b> tag is to define an HTML element that should be displayed as bold.

This is also an HTML element:

<body>

This is my first homepage. <b> This text is bold</b>

</body>

This HTML element starts with the stat tag <body>, and ends with the end tag </body>

The purpose of the <body> tag is to define the HTML element that contains the body of the HTML document.

Why do We Use Lowercase Tags?

We have just said that HTML tags are not case sensitive: <b> means the same as <b>. If you surf the web, you will notice that plenty of web sites use uppercase HTML tags in their source code. We always use lowercase tags. Why?

If you want to follow the latest web standards, you should always use lowercase tags. The World Wide Web Consortium (W3C) recommends lowercase tags in their HTML 4 recommendation, and XHTML (the next generation HTML) demands lowercase tags.

Basic HTML Tags

The most important tags in HTML are tags that define headings, paragraphs and line breaks.

The best way to learn HTML is to work with examples. We have created a very nice HTML editor for you. With this editor; you can edit the HTML source code if you like, and click on a test button to view the result.

The Overall Structure: HTML, Head, and Body

All HTML documents have three, document-level tags in common. These tags,<html>, <head>,and <body>, delimit certain sections of the HTML document.

The <html> tag

The <html> tag surrounds the entire HTML document. This tag tells the client browser where the document begins and ends.

<html>

…..document contents….

</html>

Additional language options were declared within the <html> tag in previous versions of HTML.

However, those options (notably lang and dir) have been deprecated in HTML version 4.0 The language and directional information is routinely contained in the <head> section. A typical <head> section could resemble the following:

<head>

<title>TITLE OF THE Document</title>

Function New Window (url) {

Fin= window. open (url,””,

“width=800, height=600, scrollbars=yes, resizable=yes”);

}

</script>

</head>

Most of the content within the <head> section will not be visible on the rendered page in the client’s browser. The <title> element determines what the browser displays as the page title-on Windows machines, the document title appears in the browser’s title bar, as shown in Figure2-1.

Document title

Figure: In windows, the document’s <title> appears in the browser’s title bar.

The main, visual content of the HTML document is contained within <body> tags. Note that with HTML version 4.0 most attributes of the <body> tag have been deprecated in favor of specifying the attributes as styles. In previous version Of HTML, you could specify a bevy of options, including the document background, text and link colors. The onload and onunload attributes of the <body> tag, as well as global attributes such as style, are still valid. However, you should specify the other attributes in styles instead of within the <body> tag, such as in the following example:

<html>

<head>

<title> Document Title</title>

Body {background:black; color:white}

a: link {color: red}

a: visited {color: blue}

a: active {color: yellow}

</style>

</head>

<body>

… document body …

</body>

</html>

The Head Element

The head element contains general information, also called meta-information, about a document.Metameans “information about”.

You can say that meta-data means information; also called meta-information means information about information.

Information inside the Head Element

The elements inside the head element should not be displayed by a browser

According to the HTML standard, only a few tags are legal inside the head section. These are: <base>, <link>, <meta>, <title>, <style>, and <script>.

Look at the following illegal construct:

In this case the browser has two options:

Display the text because it is inside a paragraph element

Hide the text because it is inside a head element

If you put an HTML element like <h1> or <p> inside a head element like this, most browser will display it, even if it is illegal.

Should browser forgive you for errors like this? We don’t think so. Others do.

Head Tags

Tag	Description
<head>	Defines information about theDocument
<title>	Defines the document title
<base>	Defines a base URL for allThe links on a page
<link>	Defines a resource reference
<meta>	Defines meta information

Tag	Description
<!DOCTYPE>	Defines the document type. Thistag goes before the <html> starttag,

Headings

HTML has six predefined heading tags. Heading use <h> tags containing the number of the heading. The <h1> tag specifies the highest (most important) level of headings, while <h6> specifies the lowest (least important) level of headings.

As with most textual documents, HTML documents use larger fonts to specify higher- level headings. For example consider the following example and its output,

<html>

<head>

<title> Heading Tags </title>

</head>

<body>

<h1> Heading Level 1</h1>

<h2>Heading Level 2</h2>

<h3>Heading Level 3</h3>

<h4>Heading Level 4</h4>

<h5>Heading Level 5</h5>

<h6>Heading Level 6</h6>

<p>Normalbody text.</p>

</body>

</html>

Headings are defined with the <h1> to <h6> tags. <h1>defines the largest heading. <h6> defines the smallest heading. <h1>This is a heading</h1>

<h2> This is a heading</h2>

<h3> This is a heading</h3>

<h4> This is a heading</h4>

<h5> This is a heading</h5>

<h6> This is a heading</h6>

HTML automatically adds an extra blank line before and after a heading,

Paragraphs

Paragraphs are defined with the <p> tag.

<p>This is a paragraph</p>

<p>This is another paragraph</p>

HTML automatically adds an extra blank line before and after a paragraph

Don’t Forget the Closing Tag

You might have m\noticed that paragraphs can be written without end tags

</p> : <p>this is a paragraph

<p>This is another paragraph

The example above will work in most browsers, but don’t rely on it. Future version of HTML will not allow you to skip ANY end tags.

Closing all HTML elements with an end tag is a future proof way of writing HTML. It also makes the code easier to understand (read and browse) when you to mark both where an element starts and where it ends.

Line Breaks

The <br> tag is used which you want to break a line, but don’t want to start a new paragraph. The <br> tag forces a line break wherever you place it. <p> This <br>> is a para<br>graph with line breaks</p>

Try it yourself

The <br>

Tag is an empty tag. It has no end tag like </br>, since a closing tag doesn’t make any sense.

More and more often you will see the <nr> tag written like this: <br/>

Because the <br>tag has on end tag (or closing tag), it breaks one of he rules for future HTML (the XML based XHTML), namely that all elements must be closed.

Writing it like <br/> is a future proof way of closing <or ending> the tag inside the opening tag, accepted by both HTML and XML.

Comments in HTML

The comment tag is used to insert a comment in the HTML 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 dare.

<! — This is a comment– >

Note that you need an exclamation point after the opening bracket, but not before the closing bracket.

Recap on HTML Elements

Each HTML element has an element mane (body,h1,p,br)
The start tag is the name surrounded by angle brackets: <h1>
The end tag is a slash and the name surrounded by angle brackets </h1>
The element content occurs between the start tag and the end tag
Some HTML elements have on content
Some HTML elements have no end tag

Basic Notes – Useful Tips

When you write HTML text, you can never be sure how the text is displayed in another browser. Some people have large computer displays, some have small. The text will be reformatted every time the user resizes his window.

HTML will truncate the spaces in your text. Any number of spaces counts as one. Some extra information: In HTML a new line counts as one space.

Using empty paragraphs <p> to insert blank lines is a bad habit. Use the <br> tag instead. (But don’t use the <br> tag to create lists. Wait until you have learned about HTML lists.)

HTML automatically adds an extra blank line before and after some elements, like before and after a paragraph, and before and after a heading.

We use a horizontal rule (the <hr> tag), to separate the sections in out tutorials. Basic HTML Tags

If you lookup the basic HTML tags in the reference below, you will see that the reference contains additional information about tag attributes.

You will learn more about HTML tag attributes in the next chapter of this tutorial. Tag Description

<html>	Defines an HTML document
<body>	Defines the document’s body
<h1> to </h6>	Defines header 1 to header 6
<p>	Defines a paragraph
<br>	Inserts a single line break
<hr>	Defines a horizontal rule
<!–>	Defines a comment

Horizontal Rules

Horizontal rules are used to visually break up sections of a document. The <hr> tag creates a line from the current position in the document to the right margin and breaks the line accordingly.

For example, if you were reproducing text from a book, you might want to use rules to show a break between chapters, as shown in the following excerpt from Anna Sewell’s Black Beauty:

<! DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”

http://www.w3.org/TR/html4/strict.dtd>

<html>

<head>

<title> Excerpt of Black Beauty </title>

</head>

<body>

<p>One day he was at this game, and did not know that the master was in the next field; but he was there., watching what was going on; over the hedge he jumped in a snap, and catching Dick by the arm, he gave him such a box in the ear as made him roar with the pain and surprise. As soon as we saw the master we trotted up nearer to see what went on. </p> <p> “Bad boy!” he said, “bad boy! To chase the colts. This is not the first time, nor he second, nut it shall be the last.

There—take your money and go home; I shall not want you on my farm again. ”</p> <p> so we never saw Dick any more. Old Daniel, the men who looked after the horses, was just as gentle as our master, so we were well off. </p> <hr> <p>Chapter 02 The Hunt</p> <p>Before I was two years old a circumstance happened which I have never forgotten. It was early in the spring; there had been a little frost in the night, and a light mist still hung over the woods and meadows. I and the other colts were feeding at the lower part of the field when we heard, quite … </p>

</body>

</html>

As with most tags, you can customize the look of the <hr> tag by using Styles. For example, consider the following style:

Hr {color: red; height: 5px; width: 50%;}

<style>

If this style were added to our last example. The results would be similar to the output shown in Figure

HTML Attributes

Attributes provide additional information to an HTML element.

HTML Tag Attributes

HTML tags can have attributes. Attributes provide additional information to an HTML element.

Attributes always come in name/ value pairs like this: name =”value”.

Attributes are always specified in the start tag of an HTML element.

Attributes Example 1:

<h1>defines the start of a heading.

<h1 align= center”> has additional information about the alignment.

Attributes Example 2:

<body> defines the body of an HTML document.

<body bgcolor=”yellow”> has additional information about the background color.

Attributes Example 3:

<table> defines an HTML table. (You will learn more about HTML tables later)

<table border+”1”> has additional information about the border around the table

Use Lowercase Attributes

Attributes and attribute values are case-insensitive. However, the World Wide Web Consortium (W3C) recommends lowercase attributes/attribute values in their HTML 4 recommendation, and XHTML demands lowercase attributes/attribute values.

Always Quote Attribute Values

Attribute values should always be enclosed in quotes. Double style quotes are the most common, but single style quotes are also allowed.

In some rare situations, like when the attribute values itself contains quotes, it is necessary to use single quotes:

name= ‘John “ShotGun” Nelson’

HTML Text Formatting

HTML defines a lot of elements for formatting output’ like bold or italic text.

Text Formatting Tags

Tag	Description
<b>	Defines bold text
<big>	Defines big text
<em>	Defines emphasized text
<i>	Defines italic text
<small>	Defines small text
<strong>	Defines strong text
<sub>	Defines subscripted text
<sup>	Defines superscripted text
<ins>	Defines inserted text
<del>	Defines deleted text
<s>	Deprecated. Use <del> instead
<strike>	Deprecated. Use <del> instead
<u>	Deprecated. Use styles instead

“Computer Output” Tags

Tag	Description
<code>	Defines computer code text
<kbd>	Defines keyboard text
<samp>	Defines sample computer cods
<tt>	Defines teletype text
<var>	Defines a variable
<pre>	Defines preformatted text
<listing>	Deprecated. Use <pre> instead
<plaintext>	Deprecated. Use <pre> instead
<xmp>	Deprecated. Use <pre> instead

Citations, Quotations, and Definition Tags

Tag	Description
<abbr>	Defines an abbreviation
<acronym>	Defines an acronym
<address>	Defines an address element
<bdo>	Defines the text direction
<blockquote>	Defines a long quotation
<q>	Defines a short quotation
<cite>	Defines a citation
<dfn>	Defines a definition term

Inserting texts, Images

HTML can also specify certain formatting to be applied to the text content of the web page.

Font formatting

Font Face: Default, Arial, Courier, Time New Roman.

Size: -3,-2,-1, default, +1, +2, +3

Colour: Default, Black, Red, Green, Blue

Style formatting:

Bold

Italic

Strong

Emphasis

Code

The text formatting effects used above can be combined, as shown in the following example:

Text formatting effects can be combined by using nested HTML tags

Text can also be formatted to become a hypertext link to another web page, document or resource. This is described on the following page.

For images, HTML can be used to specify the image file to be included, the size (in pixels) at which the image should be displayed by the browser and how the image should be ‘wrapped’ around the surrounding text. In addition, images can be made into hyperlinks to other internet resources.

A text alternative that will be displayed if the image fails to load should also be provided.

How to View HTML Source

Have you ever seen a Web page and wondered “Hey! How did they do that?”

To find out, click the VIEW option in your browser’s toolbar and select SOUTCE to PAGE SOURCE. This will open a window that shows you the HTML code of the page.

Chapter 2:- Basic HTML Tags And Elements

Navigation