Post
Ask Question

Use of Anchor, Comment and DOCTYPE in HTML 5

Introduction 

 
I am going to start HTML5 with the Comment tag <! -- ... -->. Any data within a Comment tag will not be displayed by any browser. It's 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 on 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 an underline.
 
Syntax
  1. <a  
  2. accesskey="key"  
  3. charset="character code for language of linked  
  4. resource"  
  5. class="class name(s)"  
  6. coords="comma-separated list of numbers"  
  7. dir="ltr | rtl"  
  8. href="URL"  
  9. hreflang="language code"  
  10. id="unique alphanumeric identifier"  
  11. lang="language code"  
  12. name="name of target location"  
  13. rel="comma-separated list of relationship values"  
  14. rev="comma-separated list of relationship values"  
  15. shape="default | circle | poly | rect"  
  16. style="style information"  
  17. tabindex="number"  
  18. target="frame or window name | _blank | _parent | _self | _top"  
  19. title="advisory text"  
  20. 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:
  1. <a href="Default.aspx"><img src="Image/clean.jpg" width="100" /></a>  

HTMlPage.htm

  1. <!DOCTYPE >  
  2. <html>  
  3.     <head>  
  4.         <title></title>  
  5.     </head>  
  6.     <body>  
  7.         <a href="Default.aspx">Default Page</a>  
  8.         <a href="Default.aspx">  
  9.             <img alt="Image" src="Image/clean.jpg"/>  
  10.         </a>  
  11.     </body>  
  12. </html>  
Output:
 
 IE
 
IE.gif
 
Mozilla
 
mozila.gif
 
Chrome
 
chrom.gif
 

HTMlPage.htm

  1. <!DOCTYPE >  
  2. <html>  
  3.     <head>  
  4.         <link href="Style%20Sheet%20HTML/StyleSheet.css" rel="stylesheet" type="text/css" />  
  5.         <title></title>  
  6.     </head>  
  7.     <body>  
  8.         <a href="Default.aspx">Default Page</a>  
  9.         <a href="Default.aspx">  
  10.             <img alt="Image" src="Image/clean.jpg"/>  
  11.         </a>  
  12.     </body>  
  13. </html>  

StyleSheet.css

  1. a {  
  2.   color: #0000FF;  
  3. }  
  4. a:link {  
  5.   text-decoration: none;  
  6. }  
  7. a:hover {  
  8.   text-decoration: underline;  
  9. }  
  10. a:visited {  
  11.   color: #FF0000;  
  12. }  
Output:
 
IE
 
ie2.gif
 
Mozilla
 
mozila2.gif
 
Chrome
 
chrome2.gif


Similar Articles