Tags in HTML5-part1

Html5
Fadıl
Tags in HTML5-part1

The Doctype

The doctype declaration is not an HTML tag. This  tag is used for specifying the language and version the document is using. The <!DOCTYPE> tag does not have an end tag and it is not case sensitive too.  The HTML5 specification recommends that all documents should have  <!DOCTYPE> header at the top of it.

Example

&lt;!DOCTYPE&gt;
 &lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;Using Doctype&lt;/title&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;p&gt;Hello world!&lt;/p&gt;
 &lt;/body&gt;
 &lt;/html&gt;

<a> tag

This <a > tag is used to link another page from a webpage. The attribute target in <a> tag can be used to specify if the  new page should open in a  new tab or in a new window.

&lt;a href="http://learnwebdevelopment.info"&gt;learn web development&lt;/a&gt;

Attributes :

*href – specifies the URL of a page that the links go to

*target – species the mode the webpage should open.

*Rel    -This establishes a relationship between current and the destination document URL.

<address> tag

HTML5 address tag is used to mention an address in a document or in a section of a document.

&lt;address&gt;This document was written by:
 &lt;a href="mailto:[email protected]"&gt;Homer Simpson&lt;/address&gt;

<area > tag

HTML area tag is used to define some areas in an image map. You can tag a particular area in an image to be tagged and when the mouse moves over the particular part of the image the information that was coded will be displayed.

<audio > tag

This is an interesting feature that have been included in HTML5 .Till previous versions we need to depend on 3rd party plug-in like flash player to play audios in a webpage. But HTML5 has an inbuilt feature for that   <audio > tag in HTML5 can be used to play audio in a webpage.

&lt;audio src=" music path "&gt;&lt;/audio&gt;

<b> tag

This tag is used to specify a text in bold. Added to this one can use headers like <h1> , <h2> , <h3> , <h4> .

&lt;b&gt;bold&lt;/b&gt; text.

<base> tag

<base> tag is used to specify the base URL. Once  a base URL is set on top of the page all the subsequent links that are used in that page will use the base URL as the starting point.<base> tag should be placed in the head section.

&lt;html&gt;
 &lt;base href="http://www.onepass.biz/" target="_blank" /&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;p&gt;Learn about &lt;a href="2011/07/onepass-to-search-engines/ "&gt;search engines &lt;/a&gt;&lt;/p&gt;
 &lt;/body&gt;
 &lt;/html&gt;

<bdo> tag

This <bdo> tag is used to change the text direction .

&lt;bdo dir="rtl"&gt;LearnHTML5.info&lt;/bdo&gt;

Attributes:
*‘rtl’ ‘ltr’ –indicates the direction of the text.

<body> tag

This tag is used indicate main content section .This is normally placed between the </head> and </html> tags.

&lt;!DOCTYPE HTML&gt;
 &lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;HTML body tag&lt;/title&gt;
 &lt;/head&gt;
 &lt;body style="background-color:blue"&gt;
 &lt;p&gt;LearnHtml5.info&lt;/p&gt;
 &lt;/body&gt;
 &lt;/html&gt;

<br> tag

The HTML <br> tag is used to break a line.
Example :

&lt;!DOCTYPE HTML&gt;
 &lt;html&gt;
 &lt;body&gt;
 &lt;p&gt;Try hard &lt;br /&gt;
 Till the goal is not reached.&lt;/p&gt;
 &lt;/body&gt;
 &lt;/html&gt;

<button> tag

This is used to create button controls in webform.Inside a button one can put text or images to make the purpose understandable to the users.

&lt;!DOCTYPE HTML&gt;
 &lt;html&gt;
 &lt;body&gt;
 &lt;button type="button"&gt;Click Me!&lt;/button&gt;
 &lt;/body&gt;
 &lt;/html&gt;

Attributes:
*Autofocus : Indicates that the button should have the focus when the page loads.

*Form :specifies which form the button belongs.

*Formaction : specifies where the data should be send once the form is submitted.

*Formmethod : specifies the method the data to be send .There are two modee
1)get  2)post

<canvas> tag

Canvas tag is used to display graphics.The <canvas>  tag is just a container actually a script should be used to paint graphics.

&lt;!DOCTYPE HTML&gt;
 &lt;html&gt;
 &lt;body&gt;
 &lt;canvas id="myCanvas"&gt;
 &lt;/canvas&gt;&lt;script type="text/javascript"&gt;
 var canvas=document.getElementById('myCanvas');
 var ptx=canvas.getContext('2d');ctx.fillStyle='#FF0000';
 ctx.fillRect(0,0,60,120);&lt;/script&gt;
 &lt;/body&gt;
 &lt;/html&gt;

<caption> tag

It is used in along with the <table> tag to display the table title.

Example

&lt;!DOCTYPE HTML&gt;
 &lt;html&gt;&lt;head&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;table&gt;
 &lt;caption&gt;Monthly savings&lt;/caption&gt;
 &lt;tr&gt;
 &lt;th&gt;Name&lt;/th&gt;
 &lt;th&gt;Roll Number&lt;/th&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;shawn&lt;/td&gt;
 &lt;td&gt;4&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;jim&lt;/td&gt;
 &lt;td&gt;14&lt;/td&gt;
 &lt;/tr&gt;
 &lt;/table&gt;
 &lt;/body&gt;
 &lt;/html&gt;

<cite> tag

It is used to represent title of book or sometext to distinguish from the normal text.

&lt;!DOCTYPE HTML&gt;
 &lt;html&gt;
 &lt;body&gt;
 &lt;cite&gt;Citation&lt;/cite&gt;
 &lt;/body&gt;&lt;/html&gt;

<Col> tag

The HTML <col> tag is used for specifying column properties for each column within a colgroup.

<colgroup> tag
HTML <colgroup> is used to specify properties for a group of columns within a table.

&lt;!DOCTYPE HTML&gt;
 &lt;html&gt;
 &lt;body&gt;
 &lt;table border="1"&gt;
 &lt;colgroup span="2" style="background-color:red"&gt;
 &lt;col width="50"&gt;&lt;/col&gt;
 &lt;col width="100"&gt;&lt;/col&gt;
 &lt;/colgroup&gt;
 &lt;tr&gt;
 &lt;td&gt;col 1&lt;/td&gt;
 &lt;td&gt;col 2&lt;/td&gt;
 &lt;td&gt;col 3&lt;/td&gt;
 &lt;/tr&gt;&lt;/table&gt;&lt;/body&lt;/html&gt;

Attribute:
*Span : species the number of columns that the attribute value should be extended.

<command> tag

The HTML <command> tag is used for specifying a command a user can invoke.

&lt;!DOCTYPE HTML&gt;
 &lt;html&gt;&lt;body&gt;
 &lt;menu&gt;&lt;command onclick="alert(‘Welcome')"&gt;Click &lt;/command&gt;
 &lt;/menu&gt;&lt;/body&gt;&lt;/html&gt;

Attributes:
*Checked : Defines if the command is checked or not.

<datalist> tag

The <datalist> tag defines a list of options. Use this element together with the input element, to define which values the input element can have.

Use the input element’s list attribute to bind it together with a datalist.

&lt;!DOCTYPE HTML&gt;
 &lt;html&gt;&lt;body&gt;
 &lt;input list="cars" /&gt;
 &lt;datalist id="cars"&gt;
 &lt;option value="BMW"&gt;
 &lt;option value="Ford"&gt;
 &lt;option value="Volvo"&gt;
 &lt;/datalist&gt;
 &lt;/body&gt;
 &lt;/html&gt;

<dd> tag

The HTML <dd> tag is used for specifying a definition description in a definition list.

&lt;!DOCTYPE HTML&gt;
 &lt;html&gt;
 &lt;body&gt;
 &lt;dl&gt;
 &lt;dt&gt;learnhtml5.info&lt;/dt&gt;
 &lt;dd&gt;A complete guide to learn HTML5&lt;/dd&gt;
 &lt;/dl&gt;&lt;/body&gt;
 &lt;/html&gt;

<del> tag

HTML <del> tag is used  for markup of deleted text.Browsers normally strike out the text that is tagged withdeland underline the inserted text.

&lt;!DOCTYPE HTML&gt;
 &lt;html&gt;
 &lt;body&gt;
 &lt;p&gt;My favorite car is &lt;del&gt;skoda&lt;/del&gt; &lt;ins&gt;Benz&lt;/ins&gt;!&lt;/p&gt;
 &lt;/body&gt;&lt;/html&gt;

<details> tag

The HTML <details> tag specifies additional details that the user can view or hide on demand.

&lt;!DOCTYPE HTML&gt;
 &lt;html&gt;&lt;body&gt;
 &lt;details&gt;
 &lt;summary&gt;Copyright  2011&lt;/summary&gt;
 &lt;p&gt;All pages and graphics on this web site are the property QualityPoint Technologies.&lt;/p&gt;
 &lt;/details&gt;
 &lt;/body&gt;
 &lt;/html&gt;

<dfn> Tag

<dfn> tag is used for indicating a definition.

Example :

&lt;!DOCTYPE HTML&gt;
 &lt;html&gt;
 &lt;body&gt;
 &lt;dfn&gt;Definition term&lt;/dfn&gt;&lt;br /&gt;
 &lt;/body&gt;
 &lt;/html&gt;

<div> tag

The HTML <div> tag is used for defining a section of your document. With the<div> tag, you can group large sections of HTML elements together and format them with CSS.

&lt;!DOCTYPE HTML&gt;
 &lt;html&gt;
 &lt;body&gt;
 &lt;div style="color:#FF0000"&gt;
 &lt;h3&gt;This is a learnhtml5.info&lt;/h3&gt;
 &lt;p&gt;You  are learning HTML.&lt;/p&gt;
 &lt;/div&gt;
 &lt;/body&gt;
 &lt;/html&gt;

<em> tag

The HTML <em> tag is used for indicating emphasis. The em tag surrounds the word/term being emphasised.

&lt;!DOCTYPE HTML&gt;
 &lt;html&gt;
 &lt;body&gt;
 &lt;em&gt;Emphasized text&lt;/em&gt;&lt;br /&gt;
 &lt;/body&gt;
 &lt;/html&gt;

<embed> tag

The HTML <embed> tag is used for embedding an external application or interactive content into an HTML document.

sample

&lt;!DOCTYPE HTML&gt;
 &lt;html&gt;
 &lt;body&gt;
 &lt;embed src="path" /&gt;
 &lt;/body&gt;
 &lt;/html&gt;

<fieldset> tag

This is used to group related information.

&lt;!DOCTYPE HTML&gt;
 &lt;html&gt;
 &lt;body&gt;
 &lt;form&gt;
 &lt;fieldset&gt;
 &lt;legend&gt;Details&lt;/legend&gt;
 Name: &lt;input type="text" /&gt;&lt;br /&gt;
 Email: &lt;input type="text" /&gt;&lt;br /&gt;
 Date of birth: &lt;input type="text" /&gt;
 &lt;/fieldset&gt;&lt;/form&gt;&lt;/body&gt;
 &lt;/html&gt;