HTML heading

Html heading are define with the<h1> to<h6>tags and tag closed in backslash </h1> .

<h1> This is Largest Heading tag

<h2> This is second Heading tag

<h3> This is third Heading tag

<h4> This is fourth Heading tag

<h5> This is fifth Heading tag

<h6> This is smallest Heading tag

HTML Anchor Tag

The <a> tag define a hyperlink which is used to link form one page to another.The most important attribute of the <a> element is the <href> attibute ,which indicates the link's destination.

HTML Anchor Tag Example

1- The download attribute specifies the target will be downloaded when user clicks on hyperlink.

⇛ <a href ="image/image.jpg" download> download this </ a>

2- The hreflang attribute sepecifies the language of linked document.

⇛ <a href ="https://exampre.in" hreflang="en"> Exampre </ a>

3- The media attribute sepecifies what media or device the linked document is optimized for. This attribute is used to specify that the URL is designed for special device (like android),speech or print media.

⇛ <a href ="att_media.asp?output=print" media="print and (resolution:300dbi)"> open media attribute page for print </ a>

4- The ping attribute sepecifies a list of url to be notified if the user follow the hyperlink. When user clicks on the hyperlink the ping attibute will send a short HTTP POST request to the specified URL

⇛ <a href ="https://exampre.in" ping="https://exampre.in/trackping"> </ a>

5- The referrerpolicy attribute sepecifies which referrer information to send when user clicks on the hyperlink.

⇛ <a href ="https://exampre.in" referrerpolicy="origin"> </ a>

6- The rel attribute sepecifies the relationship between the current document and the link document.

⇛ <a rel ="nofollow" href="http://exampre.in"> Mysite </ a>

7- The target attribute sepecifies where to open the linked documnet

⇛ <a href ="https://exampre.in" target="_blank"> open the linked document is a new window or tab </ a>

⇛ <a href ="https://exampre.in" target="_self"> open the linked document in the same frame as it was clicked(this is default) </ a>

⇛ <a href ="https://exampre.in" target="_parent"> open the linked document is the parent frame </ a>

⇛ <a href ="https://exampre.in" target="_top"> open the linked document is the full body of the window </ a>

⇛ <a href ="https://exampre.in" target="framename"> open the linked document is the named iframe </ a>

HTML Formatting Element

Formatting elements were designed to display special types of text

  •<b> - Bold text

  •<i> - Italic text

  •<strong> - Important text

  •<em> - Emphasized text

  •<mark> - marked text

  •<small> - small text

  •<big> - Big text

  •<del> - Deleted text

  •<ins> - Inserted text

  •<sub> - _{Subscript text}

  •<sup> - ^{Superscript text}

  •<strike> - strike text

   •<pre> - 
 Text in a pre element is displayed in a fixed-width font ,and it preserves both     space and line break

  •<dfn> - For defination

  •<cite> - special text

  •<bdo dir="rtl"> The text is reverse direction (right to left)

  •<bdo dir="ltr"> The text is reverse direction (left to right)

HTML List

In HTML list two type of list. An unordered list starts with the <ul> Each list item start with the <li> tag.

  ⇛ An Unordered HTML List input

 <li>item 1  </li>

 <li>item 2  </li>

 <li>item 3  </li>

  ⇛ An Unordered HTML List Output

• item 1
• item 2
• item 3

In HTML list two type of list. An ordered list starts with the <ol> Each list item start with the <li> tag.

  ⇛ An ordered HTML List input

 <li>list 1  </li>

 <li>list 2  </li>

 <li>list 3  </li>

  ⇛ An ordered HTML List Output

• list 1
• list 2
• list 3

In HTML list other type of list. An other list starts with the <dl> Each list item start with the <dt> tag and <dd> tag

  ⇛ An ordered HTML List input

 <dt>coffee  </dt>

 <dd>cold  </dd>

 <dt>milk  </dt>

 <dd>hot  </dd>

  ⇛ An ordered HTML List Output

coffee

cold

milk

white

HTML Form

  ⇛ An HTML Form Input

 < form action="" method ="POST" >

 < table >

  < tr >

   < td >Name < /td >

   < td >< Input name="name" type="name" placeholder="Enter your name" />< /td >

  < / tr >

  < tr >

   < td > Father Name < /td >

   < td >< Input name="fname" type="name" placeholder="Enter your Father name" />< /td >

  < / tr >

  < tr >

   < td > Gender:- < /td >

   < td >< Input name="gender" type="radio" Male">
     < Input name="gender" type="radio" FeMale" />< /td >

   < td > Mobile:- < /td >

   < td >< Input name="number" type="number" placeholder="Enter your mobile number" />< /td >

  < / tr >

   < td > Create Password:- < /td >

   < td >< Input name="password" type="pasword" placeholder="Enter your Password" />< /td >

  < / tr >

   < td > Address:- < /td >

   < td >< textarea name="address" type="address" placeholder="Enter your address" /></textarea >< /td >

  < / tr >

   < td > Select Language:- < /td >

  < tr >

   < td >

   < select >

   < option value="select" >select Language< /option >

   < option value="hindi" >Hindi< /option >

   < option value="english" >english< /option >

  < /select >

   < /td >

   < /tr >

  < tr >

   < td >Profile Picture < /td >

   < td >< Input name="file" type="file" />< /td >

   < /tr >

  < tr >

   < td >Agree < /td >

   < td >< Input name="checkbox" type="checkbox" />< /td >

   < /tr >

 < /table >

 < /form >

  ⇛ An HTML Form Output

HTML Image

The HTML < img > tag used to embed an image in a web page.The < img > tag is empty ,it contains attributes only and does not have a closing tag.

The < img > tag has two required atrributes. use the css float property to let the image float to the left or to the right.

  • Src - Specifies the path to the image.

  • alt - Specifies an alternate text for the image.

  ⇛ An HTML Image Input

 < img src="image/IMG_0197.jpg" height="200px" width="400px" alt="kedarnath_pic" border="1" >

  ⇛ An HTML Image output

  ⇛ Common Image Formats

  ⇛ HTML Image Tag

1- The < img > Define an image.

 < img src="image/IMG_0197.jpg" height="200px" width="400px" alt="kedarnath_pic" border="1" >

2- The < map > and < area > tag is used to define an image map. An image map is an image with clickable area.

 < img src ="image/IMG_0197.jpg" height ="200px" width ="400px" alt ="workplace" border ="1" usemap ="#workmap" >

   < map name="workmap" >

   < area shape ="rect" coords ="34,44,250,260" alt ="computer" href ="computer.html" >

   < area shape ="rect" coords ="290,172,333,250" alt ="phone" href ="phone.html" >

   < area shape ="circle" coords ="337,300,44" alt ="tea" href ="tea.htm" >

3- The < Picture > tag gives more flexibility in specifies image resource.The element will be for art direction in resposive designs.

   < picture >

   < source media ="(min-width:650px)" srcset ="pink_flower.jpg" >

   < source media ="(min-width:465px)" srcset ="green_flower.jpg" >

   < img src ="orange_flower.jpg" alt ="flowers" style ="width:auto;" >

4- The background-image to add a background image on an HTML element use the HTML < style > attribute and the css background-image property

<style>

 body {

  background-image : url(image/pic.jpg);

  background-repeat : no-repeat;

  background-attachment : fixed;

  background-size : cover;

   }

</style>

HTML Favicon

To add a favicon to your website either save your favicon image to the root directory of your webserver.

<head>

 < link rel="icon" type ="image/x-icon" href ="/image/favicon.jpg">

</head>

HTML Iframe

The HTML<iframe> tag specifies in line frame. An inline frame is used to embed another document within the current HTML document.Iframe does not support in HTML5 and no body tag require.

<iframe src ="demo_iframe.html" title ="iframe_example"height ="200"width ="300" ></iframe >

HTML javaScript

javascript makes HTML pages more dynamic and interactive. The HTML <script> tag is used to define a client side script.

<p id ="demo"> </p>

 <script>

  document.getElementById( "demo"). innerHTML = "Hello Javacript";

 </script>

 <noscript>

  sorry ,your browser does not support javascript.

 </noscript>

HTML Quotation anf Citaton Elements

  •<blockquote> -

The HTML element defines a section that is quoted from another source.

  •<q> - The HTML element defines a short quotation.

  •<abbr> -The India was freedom in 15 august 1947.

  •<address> -The tag defines the contact information for the author of a document .

HTML Comment Tag

  •<!-------wirte your comment----> - You can add comment to your HTML source by using the syntax.

HTML Block and Inline Elements

HTML Block-level Elements

A block-level elements always start a new line and the browsers automatically add some space(margin) before and after the elememt.The commonly used block elemets are <p> and <div>Here are the block-level elements in HTML.

  •<address> -The tag defines the contact information for the author of a document.

  •< p > -The tag define paragraph .

  •< pre > -The tag defines preformatted text .

  •<article> -The tag specifies independent ,self-contained content.

  •<aside>-The tag defines some content aside from the content it is placed in.

  •<blockquote> -The HTML element defines a section that is quoted from another source.

  •<canvas> -The HTML element defines used to draw graphics on the fly,via scripting .

  •<dd>- The tag used to describe a term/name in discription list.

  •<div> -The HTML tag defines a division or a section in a html document .

  •<dl> -The HTML tag defines discription list

  •<dt> -The HTML tag defines a term/name in a discription list.

  •<fieldset> -The HTML tag is used to group related element in a form. The tag draw a box around related element.

  •<figcation> -The HTML tag defines a caption for a < figure > element .

  •<figure> -The tag specifies self-contained content ,like illustration,diagrams,photo,code listing etc. .

  •< footer> -The tag define a footer for a documents of section .

  •< form > -The tag is used to create a html form for user input .

  •< h1 > to < h6 > -The tag are used to define html heading .

  •< header > -The header element represents a container for introductory content or set of navigational links .

  •< hr > -The tag is used thematic break in html page .

  •< table > -create a table .

  •< thead > -The tag table head .

  •< tbody > -The tag table body .

  •< tfoot > -The tag is used to group footer content in a html table .

  •< li > -The tag define list item .

  •< ol > -The tag define a ordered list . An ordered list can be numerical or alphabetical

  •< ul > -The tag define a unordered(bulleted) list .

  •< main > -The tag specifies the main content of a document .

  •< nav > -The tag define a set of navigation link .

  •< section > -The tag is used to section in a document .

  •< noscript > -The tag define a alternate content to be displayed to user that have disabled script in their browser or have a browser that does not support script .

  •< video > -The tag define a embed video content in a document . < source > tag with diffrent video source.

HTML Inline Elements

An inline element can not contain a block-level element.An inline element does not start on a new line

  •< a > -The tag define a hyperlink which is used to link form one page to another .The most important attribute of the < a > element is href .

  •< abbr > -The tag defines an abbreviation or an acronym .

  •< acronym > -The tag does not support in HTML 5 an acronym or abbreviation should be marked up with the abbr tag .

  •< b > -The tag specifies bold text without any extra impotance .

  •< bdo > -The tag stand for Bi-Directional Override .

  •< big > -The tag specify diffrent font size and does not support in HTML5 .

  •< br > -The tag inserts a single line break .

  •< button > -The tag define a clickable button .

  •< cite > -The tag define a the title of a creative work book,poem etc .

  •< code > -The tag is used to define a piece of computer code .

  •< samp > -The tag define a sample output from a computer .

  •< kbd > -The tag define keybord input .

  •< var > -The tag define a variable .

  •< dfn > -The tag stands for the definition element .

  •< em > -The tag define a emphasized text .

  •< i > -The tag define a italic text .

  •< img > -The tag used to embed an image in a html page .

  •< lable > -The tag define a lable for serveral element .

  •< map > -The tag define a image map .

  •< object > -The tag define a container for an external resource .

  •< output > -The tag represent the result of a calculation .

  •< q > -The tag define a short quotation .

  •< script > -The tag used wirte script .

  •< select > -The tag used create dropdown list .

  •< small > -The tag used small text .

  •< span > -The tag is inline container used to markup a part of a text or a part of document .

  •< strong > -The tag used to define text with strong importance .

  •< sub > -The tag define a subscript text .

  •< sup > -The tag define a superscript text .

  •< textarea > -The tag define a multi line text input control .

  •< time > -The tag define a specifies time .

  •< tt > -not support in HTML5 .

  •< input > -The tag specifies an input field where the user can enter data .

  •< input type="button" >

  •< input type="checkbox" >

  •< input type="color" >

  •< input type="date" >

  •< input type="datetime-local" >

  •< input type="email" >

  •< input type="file" >

  •< input type="hidden" >

  •< input type="image" >

  •< input type="month" >

  •< input type="number" >

  •< input type="radio" >

  •< input type="range" >

  •< input type="reset" >

  •< input type="search" >

  •< input type="submit" >

  •< input type="tel" >

  •< input type="text" > default value

  •< input type="time" >

  •< input type="url" >

  •< input type="week" >

HTML Media Elements

HTML Video

The HTML < video > element is used to show a video on a webpage.

  <vdieo width ="400"control >

  <source src ="mov.mp4"type ="video/mp4" >

  </video >

HTML Audio

The HTML < audio > element is used to show a audio on a webpage.

  <audio control >

  <source src ="song.mp3"type ="audio/mp3" >

  </audio >

Learn More HTML

W3school

W3school-2