In this tutorial we will learn all important html interview questions and also learn html5 interview questions with answers.
HTML is a hypertext markup language for creating web pages.
Html tags are used to mark up the start/opening and end/closing tags.
Tags are two types-
Example - <p> This is opening tag.
</p> This is closing tag.
An HTML element usually consists of a starting tag & end tag.
Example - <p> This is the content of the paragraph element </p> .
Attributes provide additional information about an element and attributes are always specified in the start tag.
All attributes have of two parts -
Example -
<a href="https://www.teknowize.com" target="_blank" title="click here">
No,some HTML tag not need a closing tag.
For example -
<image> tag , <br> tag ,<hr> tag etc.
It is a process in which the text is formating for a better look. It use many type of tags for making text bold, italic, underline etc.
The HTML has six types of heading tag. The H1 tag is the largest heading tag and the H6 is the smallest heading tag.
<h1> Heading No 1 </h1>
<h2> Heading No 2 </h2>
<h3> Heading No 3 </h3>
<h4> Heading No 4 </h4>
<h5> Heading No 5 </h5>
<h6> Heading No 6 </h6>
HTML have a tag which is called as ancor tag , which use to create a hyperlink that link one webpage to another webpage.
The ancor tag appear in three ways -
Unvisited link
Visited link
Active link
In HTML, the table tag displays the data in tabular form ( row * column ).Layout for the page e.g., header section, navigation bar, body content, footer section also managed by table tag.
List of tags used when displaying the data in tabular form -
Tag |
Description
|
<table> | It defines a table. |
<tr> | It define a row in a table. |
<th> | It define a header cell in a table. |
<td> | It defines a cell in a table. |
<caption> | It define the table caption. |
<colgroup> | It specified a group of one or more columns in a table for formatting. |
<col> | It is use with <colgroup> element to specify column properties for each column. |
<tbody> | It is use to group the body content in a table. |
<thead> | It is used to group the header content in a table. |
<tfooter> | It is used to group the footer content in a table. |
There are many types of list are available but two types of list are commonly use
Copyright symbol can be inserted into a browser page using © or © in an HTML file.
Iframe tag is used to create a nested webpage in HTML. In another word, iframe is used to create a webpage within a webpage.
For example -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>webpage</title>
</head>
<body>
<h2>HTML Iframes example</h2>
<p>Use the height and width attributes to specify the size of the iframe</p>
<iframe src="https://www.teknowize.com/" height="300" width="400"></iframe>
</body>
</html>
Indents are used to keep HTML element straight.
We can apply hyperlink in text and images both. In HTML ancor tag use to link one page with another page.
<a href="....................">Link Text</a>
Style sheet is use to make web pages creative. We use cascading style sheet to designing the web pages.
Yes it is possible to use multi-colored text on a webpage.
The color of the bullet depend on the first text color of the list.
Actually, web pages arrange in which manner, that is described in HTML layout.
<header> : It is used to create head of the website.
<nav> : It is used to create navigation bar of the website.
<section> : It is used to create section in a website.
<article> : Using it we can create an independent, self-contained article.
<aside> : Using it we can create content aside from the content ( just like sidebar ).
<footer> : It is used to create footer of the website.
<br> tag - The <br> tag is used to break the line the text.
<p> tag - <p> tag stand for paragraph tag which means, the text written in the form of new paragraph.
We can put the background image in a webpage by using below code after </head> tag.
<body background="image.gif">
The element with no content are known as empty element.
For example - <br> , <hr> etc.
Span tag in HTML is used for -
• To add colour on text.
• To add background on the text.
• To highlight any text.
Example -
<p>Welcome to <span style="color:#ffffff">Teknowize</span></p>
Iframe tag in HTML used to display a web page inside a web page.
Syntax -
<iframe src="URL"> </iframe>
For example -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>webpage</title>
</head>
<body>
<h2>HTML Iframes example</h2>
<p>Use the height and width attributes to specify the size of the iframe</p>
<iframe src="https://www.teknowize.com/" height="300" width="400"></iframe>
</body>
</html>
Lets learn most important Html5 interview questions.
No, <!DOCTYPE html> tag is not a HTML tag. It is basically used to give instruction to the web browser about the version of the HTML page.
The <canvas> element is a container using which we can draw graphic on web page with the help of scripting language (like JavaScript ).
Example -
<canvas id="myCanvas1" width="300" height="100" style="border:2px solid;">
Your browser doesnor support the HTML% canvas tag
</canvas>
Using HTML SVG we can describe two dimensional vector and vector graphics / raster graphics.
Example -
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="yellow" stroke-width="4" fill="red" />
</svg>
• Color
• Date
• Datetime-local
• Time
• Url
• Range
• Telephone
• Number
• Search
Yes, almost every web browser support HTML5
Example - Chrome, opera, Firefox, Internet explorer, Safari etc.
• MP4
• WebM
• Ogg
• mp3
• WAV
• Ogg
Now see the code, using which mp3 file can be played in HTML.
<audio controls>
<source src="koyal.mp3" type="audio/mpeg">
</audio>
On the web page, we can add photo in the document using figure tag.
<p>The taj mahal is widely recognized as "the jewel of muslim art in India</p>
<figure>
<img src="htmlpages/images/tajmahal.jpg" alt="Taj Mahal" />
</figure>
Using <figcaption> element we can provide a caption to an image. It is optional tag which always used before or after the content in <figure> tag.
<figure>
<img src="htmlpages/images/tajmahal.jpg" alt="Taj Mahal" />
<figcaption>Fig.1.1 - A front view of the great taj mahal in agra</figcaption>
</figure>
In HTML5, <button> tag is used to create a clickable button set the <form> tag.
<button name="button" type="button">Click here</button>
Datalist tag used to provide facility to the user to choose the predefined option to select data.
<label>
Enter your favorite cricket players: press any character<br>
<input type="text" id="favCktplayer" list="Cktplayers">
<datalist id="Cktplayers">
<option value="sachin tendulkar"></option>
<option value="brian Lara"></option>
<option value="Jacques Kallis"></option>
<option value="Rahul Dravid"></option>
</datalist>
</label>
HTML4 | HTML5 |
---|---|
<div id="header"> | <header> |
<div id="menu"> | <nav> |
<div id="content"> | <section> |
<div id="post"> | <article> |
<div id="footer"> | <footer> |
No, because if we do not put <! DOCTYPE html> then browser unable to identify the HTML document , due to which some HTML5 tag are not function properly.
The required attribute is used in HTML5 for force the user to fill text in the text field before submitting the form.
<input type="text" name="name" required>
The input type added in HTML5 for validation is email, url, number, tel and date.
<input type="email" name="email">
<input type="url" name="url">
<input type="number" name="number">
<input type="tel" name="tel">
<input type="date" name="date">
You can add HTML autocomplete with the below code.
<input list="citys" type="text" name="city">
<datalist id="citys">
<option value="agra"></option>
<option value="Kolkata"></option>
<option value="Delhi"></option>
<option value="Mumbai"></option>
</datalist>
There are many factors which affect the speed of page loading of a website.
Some methods which help to increase page speed are -
• Reduce the size of the image.
• Remove all unnecessary CSS JS file.
• HTTP compression.
• Minimal caching.
• Minimal redirection.
If text does not presents between tags then there is nothing happened but tag which has no closing tag like <image>, <br> then they not required any text.
The default limit of the text field size are 13 character but if you include attribute of size then you can set the size.
Cell spacing is used to provide a gap or space between each cell. Where cell padding is used to provide a gap or space between text written inside the cell.
In HTML there are three ways in which we can include CSS -
• Inline CSS
<p style="color:brown;">Inline CSS</p>
• External CSS
<link rel="stylesheet" href="style.css">
• Internal CSS
<head>
<style>
p{
color:brown;
}
</style>
</head>
In webpage, we can include JavaScript in three way -
• Inline
<button onclick="alert('click the button')">Click me !</button>
• Script block
<button onclick="alert('click the button')">Click me !</button>
• Link to JavaScript file
<button onclick="myFunction()">Click me !</button>
<script>
function myFunction() {
var x = 5;
var y = 6;
var result = x + y;
alert(x + '+' + y + ' is equal to' + result)
}
</script>
Marquee is used to add auto scrollable text/image on your webpage.
Syntax -
<marquee behavior="scroll" direction=" right"> Welcome to teknowize</marquee>
Visible area of a webpage on a browser
changes based on the device size.
syntax -
<meta name="viewport" content="width=device-width, initial-scale=1.0">
You can change text color in HTML by HTML style attribute.
Syntax -
<tagname style="property:value;">
<p style="color: magenta;">Teknowize </p>
You can bold text in HTML by using bold tag or strong tag.
Syntax -
<b> </b>
or
<strong> </strong>
<p><b>Welcome to</b> </p>
<p><strong>teknowize</strong></p>
You can move any text into center using HTML center tag.
Syntax -
<center> </center>
<center>Welcome to teknowize </center>
You can comment HTML source by below syntax
Syntax -
<!-- write your comment here -->
<p>Welcome to teknowize </p>
<!-- This line is commented and not visible on browser -->
You can link CSS to HTML using link tag. The link tag always placed inside head tag.
Syntax -
<link rel="stylesheet" type="text/css" href=" file path of your .css file " >
<link rel="stylesheet" type="text/css" href="style.css">