Html Interview Questions
-
1 What is HTML
HTML stands for HyperText Markup Language. Markup language is used for creating websites and anything that can be viewed in a web browser. The markup tells the Web browser how to display a Web page's words , images and content for the user.
HTML is a set of Markup tags:
A markup language is a set of markup tags
Eample:
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
The start <> tag is called the opening tag. The end</> tag is called the closing tag.
-
2 What is DOCTYPE
The <!DOCTYPE> declaration must be placed in your HTML document, before the <html> tag. It gives the instruction to the web browser about what version of HTML the page is written in.
-
3 What are the different versions of HTML
HTML version are HTML, HTML+, HTML 2.0, HTML 3.2, HTML 4.0 and the latest version of is HTML 5.
-
4 What are HTML Elements
HTML elements are written with a start tag, with an end tag, with the content in between:
<tagname>Hello World</tagname>
-
5 What are HTML Tags
HTML tags similar to keywords which is surrounded by angle brackets, for example, for paragraph we can use HTML tag(<h1>). HTML tags mostly comes in pair like, <h1>, </h1>
-
6 What is HTML Attribute
HTML attribute provide additional information to the HTML Elements. Attributes are always specified in the start tag.
For example, <font size=”5” color=”green”>, here size and color are html attributes.
-
7 . Do all HTML tags come in pair
No, there are single HTML tags that does not need a closing tag.
Examples are the <br> tag and <img> tags -
8 What are Block-level Elements
A block-level element always starts on a new line and takes entire space of its parent element (container).
Browsers typically display the block-level element with new line and takes up the full width.Examples of block-level elements:
<div>
<h1> - <h6>
<p></p>
-
9 What are Inline Elements
An inline element does not start on a new line and only takes up the space bounded by the tags that define the inline element.
Example:
<span></span>
<a></a>
<img>
-
10 How to open a link in new tab or window
To open a link in new tab or window, use the following html code:
<a href=”http://www.letsknowit.com” target=”_blank”>Welcome to letsknowit.com!</a>
-
11 How to display right to left text in bidirectional text supporting browser
: <body dir="trl">Text should go in opposite direction</body>
-
12 How to create emails links
To HTML create email links using <a href>
Example:
<a href="mailto:youremail@domain.com">Send Email</a>
-
13 What is Responsive Web Design
Responsive Web Design makes your web page look good and suitable to work on every device and every screen size, no matter how large or small, mobile or desktop
-
14 What is HTML5
HTML5 is the fifth major revision of the standard that defines Hypertext Markup Language (HTML). One of the design goals for HTML5 is to support for multimedia on mobile devices. Other new features in HTML5 include specific functions for embedding graphics, audio, video, and interactive documents
-
15 Difference between HTML and HTML5
In HTML 4.01, the <!DOCTYPE> declaration refers to a DTD, because HTML 4.01 was based on SGML. The DTD specifies the rules for the markup language, so that the browsers render the content correctly.
HTML5 is not based on SGML, and therefore does not require a reference to a DTD.
New HTML5 Elements:
New semantic elements like <header>, <footer>, <article>, and <section>.
New form control attributes like number, date, time, calendar, and range.
New graphic elements: <svg> and <canvas>.
New multimedia elements: <audio> and <video>
-
16 Differences Between HTML 4.01 and HTML5
HTML 4.01
1. Audio and Video are not part of HTML4 specification.
2. Vector Graphics is possible with the help of technologies such as VML, Silverlight, Flash etc.
3. It is almost impossible to get true GeoLocation of user browsing any website especially if it comes to mobile devices.
4. Browser cache can be used as temporary storage.
5. Does not allow JavaScript to run in browser. JS runs in same thread as browser interface.
6. Works with all old browsers
HTML5
1. Audio and Videos are integral part of HTML5 specifications e.g. <audio> and<video> tags.
2. Vector graphics is integral part of HTML5 e.g.SVG and canvas
3. JS GeoLocation API in HTML5 helps identify location of user browsing any website (provided user allows it)
4. Application Cache, Web SQL database and Web storage is available as client side storage. Accessible using JavaScript interface in HTML5 compliant browsers.
5. Allows JavaScript to run in background. This is possible due to JS Web worker API in HTML5
6. Most of modern browser have started supporting HTML5 specification e.g. Firefox, Mozilla, Opera, Chrome, Safari etc.
-
17 How to define doctype in HTML5
<!DOCTYPE html>
<html>
<head>
<title>Doctype declaration in HTML5</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
-
18 Define HTML5 Elements as Block Elements
Example:
header, section, footer, aside, nav, main, article, figure {
display: block;
}
-
19 How to disable input in HTML5
:<input type="text" value="John" disabled>
-
20 What is header tag in HTML5
The HTML <header> element represents a group of introductory or navigational aids. The <header> element is usually contain the section's heading (an <h1>-<h6> element or other elements like a logo, wrapped section's header, a search form, and so on).
You can't placed the <header> tag within a <footer>, <address> or another <header> element -
21 What is footer tag in HTML5
The <footer> tag defines a footer for a document or section.
A footer typically contains information about the author of the section, copyright data or links to related documents -
22 What is HTML5 <figure> and <figcaption> Elements
: In HTML5 <figure> contain the images and caption grouped together.
Example:
<figure>
<img src="demo.jpg" alt="demo" width="150" height="150">
<figcaption>Fig1. - Hello, HTML5</figcaption>
</figure>
The <img> element defines the image, the <figcaption> element defines the image caption(Content)
-
23 Which element is no longer supported in HTML5
<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>
<tt>
-
24 What is meant by onblur and onfocus in HTML5
Event attributes
The onblur attribute hits the moment that the element loses focus
The onfocus attribute fires the moment that the element gets focus.
Demo
<input type="text" value="Search" onfocus="if (this.value=='Search') {this.value='';}" onblur="if (this.value=='') {this.value='Search';}">
-
25 How to display the correct HTML5 element for playing video files
<video width="400" controls>
<source src="video_name.mp4" type="video/mp4">
<source src="video_name.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
Note:Text between the <video> and </video> tage will not display video that the browser do not support the <video> element
-
26 Is type attribute for <script> elements is required in HTML5
No
-
27 Which method is used to get the current location of a user in HTML5
getCurrentPosition()
-
28 what is contenteditable in html5
In HTML5 any element can be editable. The contenteditable attribute specifies whether the content of an element is editable or not.
Example:
<!DOCTYPE html>
<html>
<body>
<div contentEditable="true">
This text can be edited by the user.
</div>
</body>
</html>
-
29 What is SVG
SVG stands for Scalable Vector Graphics. You can use SVG on the web pretty easily. It looks great on retina displays. SVG has several methods for drawing paths, boxes, circles, text, and graphic images
-
30 How you draw circle is SVG
Answer:
Example
<!DOCTYPE html>
<html>
<body>
<svg width="300" height="300">
<circle cx="130" cy="130" r="100" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html>
-
31 In which format SVG graphics is defined
SVG graphics is defined in XML format
-
32 How to specify that an input field must be filled out in HTML5
Required attribute When present, it specifies that an input field must be filled out before submitting the form.
Example:
<input type="text" name="usrname" required>
-
33 What is readonly attribute in input
The readonly attribute specifies that the input field is read only (cannot be changed)
Example:
<form action="">
Your name:<br>
<input type="text" name="your name" value="your name" readonly>
</form>
-
34 What is disabled attribute in input
The readonly attribute specifies that the input field is diabled, you can't change anything.
Example:
<form action="">
Your name:<br>
<input type="text" name="your name" value="your name" disabled>
</form>
-
35 How to get autofocus in input fields
Your name:<input type="text" name="fname" autofocus>
-
36 How to alert message on button click
button type="button" onclick="alert('Hello Superman!')">Hey Click Me!</button>
-
37 What is Local Storage in HTML5
HTML5 Local Storage,web applications can store data locally within the user's browser. The localStorage property allows you to access a local Storage. Before that application data has to be stored in cookies, Local Store is more secure and store large amount of data, without affecting website performance.
Syntax:
myStorage = localStorage;
Example:
localStorage.setItem('myDog', 'harry');