Use of Anchor, Comment and DOCTYPE in HTML 5

Gurjeet Singh
12y
11.6k
0
1
100
Article

I am going to start HTML5 with the Comment tag <! -- ... -->. Any data within a Comment tag will not be displayed by any browser. Its data will not visible for the user. It may be used for informational messages for developers. Most web developers use a comment tag to explain their code, which can help anyone to edit the source code.

You can store any program specific information in it. A Comment tag does not have any attributes or events associated with it.

Syntax

<! -- ... -->

Examples

<! -- This is a comment tag only. In the following code I will use an <a> anchor tag to navigate from one page to another page.
-->

<! DOCTYPE> (Document Type Definition)

The <! DOCTYPE> statement should be used as the first line of all documents. It is used by a browser to know what HTML version you are using in your markup language. There are no attributes or events associated with this element in HTML5.

Validation programs might use this construct when determining the correctness of an HTML document.

While HTML5 does not follow the SGML/XML concept of validation, the <! DOCTYPE> is still used. HTML5 does however provide for syntax checking currently dubbed conformance checking. Note though that conformance checking does not rely on XML/SGML grammar.

Modern browsers may determine what rendering mode to use depending on the <! DOCTYPE > statement. This is dubbed the doctype switch. An incorrect <! DOCTYPE> that does not correspond to appropriate markup usage may result in inaccurate display.

<a> (Anchor)

This element defines a hyperlink, the named target destination for a hyperlink, or both. This is used to link from one page to another. By default it's represented in blue color and underlined when the link is unvisited, but when you click on the link its color changes into purple and an active link is by default red with underline.

Syntax

<a
accesskey="key"
charset="character code for language of linked
resource"
class="class name(s)"
coords="comma-separated list of numbers"
dir="ltr | rtl"
href="URL"
hreflang="language code"
id="unique alphanumeric identifier"
lang="language code"
name="name of target location"
rel="comma-separated list of relationship values"
rev="comma-separated list of relationship values"
shape="default | circle | poly | rect"
style="style information"
tabindex="number"
target="frame or window name | _blank | _parent | _self | _top"
title="advisory text"
type="content type of linked data">
</a>

We can combine a hyperlink element with an img element to produce a picture on the screen that a user can click on. Remember that elements can be nested within other elements. Instead of putting text after the starting <a> tag, put an <img> tag:
<a href="Default.aspx"><img src="Image/clean.jpg" width="100" /></a>

HTMlPage.htm


<!DOCTYPE >
<html>
<head>
    <title></title>
</head>
<body>

<a href="Default.aspx">Default Page</a>
<a href="Default.aspx"><img alt="Image" src="Image/clean.jpg"/></a>
</body>
</html>

Output:

IE

MoZilla

Chrome

HTMlPage.htm


<!DOCTYPE >
<html>
<head>
<link href="Style%20Sheet%20HTML/StyleSheet.css" rel="stylesheet" type="text/css" />
    <title></title>
</head>
<body>

<a href="Default.aspx">Default Page</a>
<a href="Default.aspx"><img alt="Image" src="Image/clean.jpg"/></a>
</body>
</html>

StyleSheet.css

a
{
    color: #0000FF;
}
a:link
{
    text-decoration: none;
}
a:hover
{
    text-decoration: underline;
}
a:visited
{
    color: #FF0000;
}

Output:

IE

MoZilla

Chrome

Up Next

Ebook Download

View all

New Layout Design using HTML and CSS

Read by 1 people

Download Now!

Learn

View all