HTML Topics Tutorials with Examples

Introduction to HTML5 Tutorial

It is the new version to HTML having some new features to pre-existing tag such as: Features in Elements Semantic Elements: <header>, <footer>, <article> and <section>. Form Elements: number, date, time, calendar and range. Graphic Elements: <svg> and <canvas>. Multi-media Elements: <audio> and <video>. New API’S HTML Geolocation HTML Drag and Drop HTML Local Storage HTML Application Cache HTML Web Workers HTML SSE New Media Element <audio>: Define sound content <embed>: It defines a container …

Responsive HTML5 and CSS3 Tutorial

Introduction to HTML5 Tutorial HTML5 is the latest and upgraded version of HTML. HTML is a hypertext markup language. Technically, it is not a programming language. It is a markup language. HTML provides some brand new feature which will make it much easier. These new features make website layout clearer to website designer and users both. These elements are as <header>, <footer>, <nav>, <article> etc. When a web browser …

HTML Tutorial

This HTML tutorial helps beginners and professionals to learn HTML easily. HTML is a widely used web technology for website development. It stands for Hyper Text Markup Language. It is mainly used to create web pages which are static in nature. HTML Tutorial Index Title Tutorial HTML Tutorial Tutorial HTMl Tags Tutorial HTML Basic Tags Tutorial HTML Attributes Tutorial HTML Text Format Tutorial HTML Links Tutorial HTML Images Tutorial HTML Tables …

HTML Tags

As explained earlier, elements in Html is known as tags. Html consist of huge number of tags but it is divided into two categories. Empty tags: All the tags which is not closed or self-closed tags. E.g. <br>, <img>, <link> etc. Non Empty tags: All those tags which are closed. E.g. <body>, <p>, <title> etc. Types of Tag Meta Tags: DOCTYPE, title, link, meta and style. Text Tags: <p>, <h1>, <h2>, <h3>, <h4>, …

HTML Basic Tags

Heading Tags: This tag represents the document header. It is said to be a good practice if every document starts with Heading. Heading tags ranges from H1 to H6 i.e. six different levels where H1 is max size and H6 is the min size. Example:


<!DOCTYPE html>  
<html>  
<head>  
<title>Heading Example</title>  
</head>     
<body>  
<h1>Tutorial and Example</h1>  
<h2>Tutorial and Example</h2>  
<h3>Tutorial and Example</h3>  
<h4>Tutorial and Example</h4>  
<h5>Tutorial and Example</h5>  
<h6>Tutorial and Example</h6>  
</body>     
</html>

<!DOCTYPE html>

<html>

<head>

<title>Heading Example</title>

</head>

<body>

<h1>Tutorial and Example</h1>

<h2>Tutorial and Example</h2>

<h3>Tutorial and Example</h3>

<h4>Tutorial and Example</h4>

<h5>Tutorial and Example</h5>

<h6>Tutorial and Example</h6>

</body>

</html>

Try Now Paragraph Tag: This<p> tag let your Html document text to structure into different paragraphs. This tag is a non-empty tag thus, …

HTML Attributes

HTML Attributes provide the additional information about HTML elements. Attributes are always specified in the start tag. Attributes usually comes in pairs. lang Attribute This attribute helps in declaring the language of the document. Lang Attribute in case of whole document is declared in the html tag.


<!DOCTYPE html>  
<html lang="en-US">  
<body>  
...  
</body>  
</html>

<!DOCTYPE html>

<body>

...

</body>

</html>

href Attribute This attribute is embedded with the anchor tag (<a>) where href specifies the address of the link.


<a href="https://www.tutorialandexample.com">Tutorial and Example link</a>

<a href="https://www.tutorialandexample.com">Tutorial and Example link</a>

Size …

HTML Text Format

It is a process of formatting text for better look and feel of the text. There are many ways to format tags using different tags such as: <b> – Bold text: It defines Bold text without any importance. <strong> – Important text: It defines Strong text with added strong importance <i> – Italic text: This element shows Italic text. <em> – Emphasized text: It emphasizes the text wit added semantic importance. <mark> – Marked text: It marks the …

HTML Links

It consist of anchor element which is used to create a link between a source anchor and destination anchor. The anchor tag can be embedded between text, image, video or button. HTML Links Syntax:


<span class="tag">&lt;</span><span class="tag-name">a</span> <span class="attribute">href</span>=<span class="attribute-value">"url"</span><span class="tag">&gt;</span>link text<span class="tag">&lt;/</span><span class="tag-name">a</span><span class="tag">&gt;</span>

Example: <a href=”https://www.tutorialandexample.com”>Tutorial for Html</a> Here, <a>: Anchor tag which add the link to any reference text, image etc. href (hypertext reference): It specify the destination for the anchor tag. Local Links: It is specified with a relative URL. …

HTML Images

HTML has <img> tag to display image on the web pages or web application. This tag is an empty tag i.e. we don’t have to close this tag while using. SYNTAX:


<span class="tag">&lt;</span><span class="tag-name">img</span> <span class="attribute">src</span>=<span class="attribute-value">"source address"</span> <span class="attribute">attributes</span>=<span class="attribute-value">"alt, height, width"</span><span class="tag">&gt;</span>

<span class="tag"><</span><span class="tag-name">img</span> <span class="attribute">src</span>=<span class="attribute-value">"source address"</span> <span class="attribute">attributes</span>=<span class="attribute-value">"alt, height, width"</span><span class="tag">></span>

Example:


<html>  
<body>  
<center>Image tag Example</center>  
<img src="https://www.tutorialandexample.com/resources/images/favicon.png"   
alt="tutorialandexample"/>  
</body>  
</html>

<html>

<body>

<center>Image tag Example</center>

<img src="https://www.tutorialandexample.com/resources/images/favicon.png"

alt="tutorialandexample"/>

</body>

</html>

Try Now Output: Image tag Example HTML Images – TutorialAndExample Attributes of Image tag src: It is the most important attribute of image tag which allows to describe the source or path of the image. Source …

HTML Tables

This tag comes in handy when we have to represent the data in tabular format i.e. rows and columns. It is recommended to use <div>tag (division) over table to maintain the layout of the web page. Layout of the page consist of header, footer, navigation, body etc. Table Tags: TAGS DESCRIPTION <table> Defines the table. <tr> It define Row in a table (table row). <th> It define Heading in …

HTML Frames

Frames in Html is used to divide the browser into different sections where each section can load different Html documents. Collection of frame is known as Frameset. Creating frames:We use frameset instead of body tag to divide web page into sections. Rows and Column attributes decide the Horizontal or Vertical Frames


<html>  
<head>  
<title>HTML Frames</title>  
</head>  
<frameset rows = "50%,50%">  
<frameset cols = "25%,50%,25%">  
<frame name = "left" src = "/html/top_frame.htm" />  
<frame name = "center" src = "/html/main_frame.htm" />  
<frame name = "right" src = "/html/bottom_frame.htm" />  
</frameset>  
<frameset rows = "10%,80%,10%">  
<frame name = "top" src = "/html/top_frame.htm" />  
<frame name = "main" src = "/html/main_frame.htm" />  
<frame name = "bottom" src = "/html/bottom_frame.htm" />  
</frameset>  
</frameset>  
</html>

<html>

<head>

<title>HTML Frames</title>

</head>

</frameset>

</frameset>

</html>

Try Now Output:

Frameset tag Attribute Cols Rows Border Frame Border Frame Spacing HTML IFRAMES It …

HTML Lists

Html Lists are used to enlist the items in a particular order or list. Html List is of 3 types. Ordered Lists (ol) Un-Ordered Lists (ul) Description Lists (dl) Ordered List: It is also known as numbered list, here list items are marked with numbers.Type {1, A, a, i, I}


<ol>  
  <li>Flash</li>  
  <li>Arrow</li>  
  <li>Constantine</li>  
</ol>   
<ol type="i">  
  <li>Iron Fist</li>  
  <li>Jessica Jones</li>  
  <li>Luke Cage</li>  
</ol>

<ol>

<li>Flash</li>

<li>Arrow</li>

<li>Constantine</li>

</ol>

<li>Jessica Jones</li>

</ol>

Try Now Output: Flash Arrow Constantine Iron Fist Jessica Jones Luke Cage Un-Ordered List: It is also known as bulleted …

HTML Forms

Forms are required when we want to collect data from the user. Html forms consists of different fields to take user inputs such as: input, text area, checkbox, password, radio button etc. Many languages are embedded with html forms to fully gain the potential use of it. Html: Create forms with different fields to accept user data. CSS: It enhances the style and presentation. JavaScript: It provide validations for form inputs. Server …

HTML References

BASIC HTML TAGS TAGS DESCRIPTION <!DOCTYPE> Defines Document Type <html> Defines Html document <head> Defines Header of document <title> Defines Title of document <body> Describe all the content of document <h1> to <h6> Defines Html Heading <p> Write Paragraph in this tag <br> Line break <!–…–> Comment in Html FORMATTING TAGS TAGS DESCRIPTION <abbr> Defines a abbreviation or acronym <address> Defines contact information about author of a document <b> …

HTML Canvas

HTML5 CANVAS: It is used to draw graphics using JavaScript. <canvas> is only the graphic container actual graphics is designed by JavaScript. Canvas tag cab be used to designed paths, boxes, circles, text and adding images. Examples: <canvas id=“myCanvas” width=“200” height=“100” style=“border:1px solid #000000;”> Your browser does not support the HTML5 canvas tag. </canvas> Try Now Output:


<canvas id="myCanvas" width="200" height="100"></canvas>


&nbsp;&nbsp;&nbsp;
<canvas&nbsp;id="myCanvas"&nbsp;width="200"&nbsp;height="100"&nbsp;style="border:1px&nbsp;solid&nbsp;#d3d3d3;">&nbsp;&nbsp;
Your&nbsp;browser&nbsp;does&nbsp;not&nbsp;support&nbsp;the&nbsp;HTML5&nbsp;canvas&nbsp;tag]&nbsp;&nbsp;
</canvas>&nbsp;&nbsp;<script>&nbsp;&nbsp;
var&nbsp;c&nbsp;=&nbsp;document.getElementById("myCanvas");&nbsp;&nbsp;
var&nbsp;cctx&nbsp;=&nbsp;c.getContext("2d");&nbsp;&nbsp;
ctx.beginPath();&nbsp;&nbsp;
ctx.arc(95,50,40,0,2*Math.PI);&nbsp;&nbsp;
ctx.stroke();&nbsp;&nbsp;
</script>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">  

Your browser does not support the HTML5 canvas tag]  

</canvas>  <script>  

var c = document.getElementById("myCanvas");  

var cctx = c.getContext("2d");  

ctx.beginPath();  

ctx.arc(95,50,40,0,2*Math.PI);  

ctx.stroke();  

</script>

❮ Prev Next ❯

HTML SVG

HTML SVG: SVG stands for Scalable Vector Graphics which defines the graphics for the web. It is a language for describing 2-D graphics in XML. Each drawn shape in SVG is an object.


<svg width="100" height="100">  
  <circle cx="50" cy="50" r="40"  
  stroke="black" stroke-width="4" fill="turquoise"/>  
Sorry, your browser does not support inline SVG.  
</svg>

<circle cx="50" cy="50" r="40"

stroke="black" stroke-width="4" fill="turquoise"/>

Sorry, your browser does not support inline SVG.

</svg>

Try Now Output:


<svg width="400" height="100">  
  <rect width="400" height="100"   
  style="fill:rgb(255,128,0);stroke-width:10;stroke:rgb(0,0,0)" />  
Sorry, your browser does not support inline SVG.  
</svg>

<rect width="400" height="100"

style="fill:rgb(255,128,0);stroke-width:10;stroke:rgb(0,0,0)" />

Sorry, your browser does not support inline SVG.

</svg>

Try Now Output: ❮ Prev Next ❯

HTML Audio

HTML AUDIO: HTML5 provides a method to embed the audio file into a webpage by using HTML5. Before HTML5 audio files is used to play on the browser with the help of plug-ins such as flash etc. Syntax:


<audio controls>
      <source src="address" type="file type">
</audio>

</audio>

Example:


<audio controls>
    <source src="johny-johny.mp3" type="audio/mp3">
</audio>

</audio>

Try Now Output:


<audio controls="controls" data-mce-fragment="1"></audio>

❮ Prev Next ❯

HTML Video

HTML VIDEO: HTML5 has introduced the <video> tag to embed video into the webpage directly without using the plug-ins. Syntax:


<video attributes >  
  <source src="address" type="video/mp4">  
  Your browser does not support the video tag.  
</video>

Your browser does not support the video tag.

</video>


<video width="320" height="240" controls>  
  <source src="mountain.mp4" type="video/mp4">  
  Your browser does not support the video tag.  
</video>

Your browser does not support the video tag.

</video>

Try Now Output:


<video controls="controls" width="320" height="240" data-mce-fragment="1"></video>

❮ Prev

HTML Youtube


<object width="100" height="100" data="bookmark.swf"></object>


<embed src="tutorialandexample.jpeg">

EMBED YOUTUBE To embed video in HTML document YOUTUBE is the best option thus, HTML5 has provided that option. Syntax:


<iframe width="value1" height="value2"  

src="https://www.youtube.com/embed/video_id Attributes">  

</iframe>

src="https://www.youtube.com/embed/video_id Attributes">

</iframe>

ATTRIBUTES Autoplay: It allows user to automatically plays the video when …