Basic Interview Questions
No. HTML elements are defined by a starting tag, may contain some content and a closing tag.For example, <h1>Heading 1</h1> is a HTML element but just <h1> is a starting tag and </h1> is a closing tag.
Tags are the primary component of the HTML that defines how the content will be structured/ formatted, whereas Attributes are used along with the HTML tags to define the characteristics of the element. For example, <p align=” center”>Interview questions</p>, in this the ‘align’ is the attribute using which we will align the paragraph to show in the center of the view.
HTML elements which do not have closing tags or do not need to be closed are Void elements. For Example <br />, <img />, <hr />, etc.
In HTML, a blank sequence of whitespace characters is treated as a single space character, Because the browser collapses multiple spaces into a single space character and this helps a developer to indent lines of text without worrying about multiple spaces and maintain readability and understandability of HTML codes.
In HTML some characters are reserved like ‘<’, ‘>’, ‘/’, etc. To use these characters in our webpage we need to use the character entities called HTML Entities. Below are a few mapping between the reserved character and its respective entity character to be used.Character Entity Name Entity Number < < < > > > & & & (non-breaking space) Eg. 10 PM Eg. <p>10  PM</p>  
The class attribute is used to specify the class name for an HTML element. Multiple elements in HTML can have the same class value. Also, it is mainly used to associate the styles written in the stylesheet with the HTML elements.
Multiple elements in HTML can have the same class value, whereas a value of id attribute of one element cannot be associated with another HTML element.
Multipart form data is one of the values of the enctype attribute. It is used to send the file data to the server-side for processing. The other valid values of the enctype attribute are text/plain and application/x-www-form-urlencoded.
Every web page has different components to display the intended content and a specific UI. But still, there are few things which are templated and are globally accepted way to structure the web page, such as:
- <header>: Stores the starting information about the web page.
- <footer>: Represents the last section of the page.
- <nav>: The navigation menu of the HTML page.
- <article>: It is a set of information.
- <section>: It is used inside the article block to define the basic structure of a page.
- <aside>: Sidebar content of the page.
To optimize website load time we need to optimize its asset loading and for that:
- CDN hosting - A CDN or content delivery network is geographically distributed servers to help reduce latency.
- File compression - This is a method that helps to reduce the size of an asset to reduce the data transfer
- File concatenation - This reduces the number of HTTP calls
- Minify scripts - This reduces the overall file size of js and CSS files
- Parallel downloads - Hosting assets in multiple subdomains can help to bypass the download limit of 6 assets per domain of all modern browsers. This can be configured. but most general users never modify these settings.
- Lazy Loading - Instead of loading all the assets at once, the non-critical assets can be loaded on a need basis
HTML has various formatting tags:
- <b> - makes text bold
- <i> - makes text italic
- <em> - makes text italic but with added semantics importance
- <big> - increases the font size of the text by one unit
- <small> - decreases the font size of the text by one unit
- <sub> - makes the text a subscript
- <sup> - makes the text a superscript
- <del> - displays as strike out text
- <strong> - marks the text as important
- <mark> - highlights the text
- <ins> - displays as added text
The three kinds of Doctypes which are available:
- Strict Doctype
- Transitional Doctype
- Frameset Doctype
The character set is defined in <meta> tag inside <head> element.<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
...
...
</head>
...
</html>
The effect on a normal webpage of the tags <strong>, <b> and <em>, <i> is the same. <b> and <i> tags stands for bold and italic. These two tags only apply font styling and bold tag <b>, just adds more ink to the text, these tags don't say anything about the text.
Whereas, <strong> and <em> tags represent that the span of text is of strong importance or more importance and emphatic stress respectively than the rest of the text. These tags have semantic. meaning
<head> tag provides the information about the document. It should always be enclosed in the <html> tag. This tag contains the metadata about the webpage and the tags which are enclosed by head tag like <link>, <meta>, <style>, <script>, etc. are not displayed on the web page. Also, there can be only 1 <head> tag in the entire Html document and will always be before the <body> tag.
<body> tag defines the body of the HTML document. It should always be enclosed in the <html> tag. All the contents which needs to be displayed on the web page like images, text, audio, video, contents, using elements like <p>, <img>, <audio>, <heading>, <video>, <div>, etc. will always be enclosed by the <body> tag. Also, there can be only 1 body element in an HTML document and will always be after the <head> tag.
Yes, we can display a web page inside another HTML web page. HTML provides a tag <iframe> using which we can achieve this functionality.<iframe src=”url of the web page to embed” />
Cell Spacing is the space or gap between two consecutive cells. Whereas, Cell Padding is the space or gap between the text/ content of the cell and the edge/ border of the cell. Please refer to the above figure example to find the difference.
HTML provides two table attributes “rowspan” and “colspan” to make a cell span to multiple rows and columns respectively.
Yes, it is possible using the “display” property with its value as “block”, to change the inline element into a block-level element.
There are mainly 7 values of position attribute that can be used to position an HTML element:
- static: Default value. Here the element is positioned according to the normal flow of the document.
- absolute: Here the element is positioned relative to its parent element. The final position is determined by the values of left, right, top, bottom.
- fixed: This is similar to absolute except here the elements are positioned relative to the <html> element.
- relative: Here the element is positioned according to the normal flow of the document and positioned relative to its original/ normal position.
- initial: This resets the property to its default value.
- inherit: Here the element inherits or takes the property of its parent
- inline: Using this we can display any block-level element as an inline element. The height and width attribute values of the element will not affect.
- block: using this, we can display any inline element as a block-level element.
- inline-block: This property is similar to inline, except by using the display as inline-block, we can actually format the element using height and width values.
- flex: It displays the container and element as a flexible structure. It follows flexbox property.
- inline-flex: It displays the flex container as an inline element while its content follows the flexbox properties.
- grid: It displays the HTML elements as a grid container.
- none: Using this property we can hide the HTML element.
Below are some of the display types which are rarely used:
- table
- inline-table
- table-cell
- table-column
- table-row
- inline-grid
- list-item
- inherit
- initial
- table-caption
When we use the attribute “visibility: hidden” for an HTML element then that element will be hidden from the webpage but still takes up space. Whereas, if we use the “display: none” attribute for an HTML element then the element will be hidden, and also it won’t take up any space on the webpage.
HTML provides a hyperlink - <a> tag to specify the links in a webpage. The ‘href’ attribute is used to specify the link and the ‘target’ attribute is used to specify, where do we want to open the linked document. The ‘target’ attribute can have the following values:
- _self: This is a default value. It opens the document in the same window or tab as it was clicked.
- _blank: It opens the document in a new window or tab.
- _parent: It opens the document in a parent frame.
- _top: It opens the document in a full-body window.
There are three ways in which we can specify the styles for HTML elements:
- Inline: Here we use the ‘style’ attribute inside the HTML element.
- Internal: Here we use the <style> tag inside the <head> tag. To apply the style we bind the elements using ‘id’ or ‘class’ attributes.
- External: Here we use the <link> tag inside <head> tag to reference the CSS file into our HTML code. Again the binding between elements and styles is done using ‘id’ or ‘class’ attributes.
The anchor tag <a> is used to create a hyperlink to another webpage or to a certain part of the webpage and these links are clickable, whereas, link tag <link> defines a link between a document and an external resource and these are not clickable.
HTML provides a <script> tag using which we can run the javascript code and make our HTML page more dynamic.<!DOCTYPE html>
<html>
<body>
<h1>
<span>This is a demo for </span>
<u><span id="demo"></span></u>
</h1>
<script>
document.getElementById("demo").innerHTML = "script Tag"
</script>
</body>
</html>28
If the scripts contain some event-triggered functions or jquery library then we should use them in the head section. If the script writes the content on the page or is not inside a function then it should be placed inside the body section at the bottom. In short, follow below three points:
- Place library scripts or event scripts in the head section.
- Place normal scripts that do not write anything on the page, in the head section until there is any performance issue.
- Place scripts that render something on the web page at the bottom of the body section.
The HTML form is used to collect the user inputs. HTML provides a <form> tag to create forms. To take input from the user we use the <input> tag inside the form so that all collected user data can be sent to the server for processing. There are different input types like ‘button’, ‘checkbox’, ‘number’, ‘text’, ‘password’, ‘submit’ etc.
<form action="/submit_data.php">
<label>Enter your name: </label>
<input type="text" name="name" />
<label>Enter Mobile number </label>
<input type="number" name="mobile_no"/>
<input type="submit" value="Submit">
</form>HTML allows event trigger actions in browsers using javascript or JQuery. There are a lot of events like ‘onclick’, ‘ondrag’, ‘onchange’, etc.
<!DOCTYPE html>
<html>
<body style="padding-top:50px">
<h3 id="event_demo">0</h3>
<input type="button" onclick="myFunction()" value="Click Me" />
<input type="reset" onclick="reset()" value="Reset" />
</body>
<script>
function myFunction() {
var value = document.getElementById("event_demo").innerHTML
value = parseInt(value) + 1;
document.getElementById("event_demo").innerHTML = value;
}
function reset() {
document.getElementById("event_demo").innerHTML = 0;
}
</script>
</html>Some advantages of HTML5 are:-
- It has Multimedia Support.
- It has the capabilities to store offline data using SQL databases and application cache.
- Javascript can be run in the background.
- HTML5 also allows users to draw various shapes like rectangles, circles, triangles, etc.
- Included new Semantic tags and form control tags.
HTML5 provides two tags: <audio> and <video> tags using which we can add the audio or video directly in the webpage.
Inline Block Inline elements just take up the space that is absolutely necessary for the content and does not start from a new line.
Example:- <span>, <a>, <strong>, <img>, <button>, <em>, <select>, <abbr>, <label>, <sub>, <cite>, <abbr>, <script>, <label>, <i>, <input>, <output>, <q>, etc.Block elements start on a new line and consume the full width of the page available.
Example:- <div>, <p>, <header>, <footer>, <h1>...<h6>, <form>, <table>, <canvas>, <video>, <blockquote>, <pre>, <ul>, <ol>, <figcaption>, <figure>, <hr>, <article>, <section>, etc.
The <figure> tag specifies the self-contained content, like diagrams, images, code snippets, etc. <figure> tag is used to semantically organize the contents of an image like image, image caption, etc., whereas the <img> tag is used to embed the picture in the HTML5 document.
To specify we can use <meta> tag which is a void tag,i.e., it does not have a closing tag. Some of the attributes used with meta tags are name, content, http-equiv, etc. The below image tells how to specify the metadata.
No. The <datalist> tag and <select> tag are different. In the case of <select> tag a user will have to choose from a list of options, whereas <datalist> when used along with the <input> tag provides a suggestion that the user selects one of the options given or can enter some entirely different value.
Image Map lets a developer map/link different parts of images with the different web pages. It can be achieved by the <map> tag in HTML5, using which we can link images with clickable areas.<img src=”image_url” , usemap=”#workspace” />
<map name=”workspace”>
<area shape=”rect” coords=”34, 44, 270, 350” , href=”xyz.html” />
<area shape=”rect” coords=”10, 120, 250, 360” , href=”xyz.html” />
</map>
Semantic elements are those which describe the particular meaning to the browser and the developer. Elements like <form>, <table>, <article>, <figure>, etc., are semantic elements.
<progress> tag should be used when we want to show the completion progress of a task, whereas if we just want a scalar measurement within a known range or fraction value. Also, we can specify multiple extra attributes for <meter> tags like ‘form’, ‘low’, ‘high’, ‘min’, etc.
Yes, in HTML5 we can drag and drop an element. This can be achieved using the drag and drop-related events to be used with the element which we want to drag and drop.
| SVG | Canvas |
|---|---|
| SVG is a vector based i.e., composed of shapes. | It is Raster based i.e., composed of pixels. |
| SVG works better with a larger surface. | Canvas works better with a smaller surface. |
| SVG can be modified using CSS and scripts. | Canvas can only be modified using scripts. |
| SVG is highly scalable. So we can print at high quality with high resolution. | It is less scalable. |
HTML5 supports the following three types of audio file formats:
- Mp3
- WAV
- Ogg
These were the target area of the HTML5 specs:44. What are the significant goals of the HTML5 specification?
This web storage helps in storing some of the static data in the local storage of the browser so that we do not need to fetch it from the server every time we need it. There is a size limit based on different browsers. This helps in decreasing the load time and a smooth user experience. There are two types of web storage that are used to store data locally in HTML5:
The <output> tag is used for representing the result of a calculation. It has the following attributes:
- for - It defines the relationship between the elements used in calculation and result.
- form - This is used to define the form the output element belongs to.
- name - The name of the output element.
<form oninput = "result.value=parseInt(n1.value)+parseInt(n2.value)">
<input type = "number" name = "n1" value = "1" /> +
<input type = "number" name = "n2" value = "2" /><br />
The output is: <output name = "result"></output>
</form>As HTML5 was all about better semantics and arrangements of the tags and elements, the <header> tag specifies the header section of the webpage. Unlike in previous version there was one <h1> element for the entire webpage, now this is the header for one section such as <article> or <section>. According to the HTML5 specification, each <header> element must at least have one <h1> tag.
HTML5 supports two kinds of graphics:
- Canvas - It is like drawing on a whitepaper or a blank webpage. We can add different graphic designs on web pages with available methods for drawing various geometrical shapes.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<canvas width="300" height="100" style="border:2px solid;"></canvas>
</body>
</html>- SVG - Scalable Vector Graphics are used mostly for diagrams or icons. It follows the XML format.
<!DOCTYPE html>
<html>
<body>
<svg width="400" height="110">
<rect width="300" height="100" style="fill:#FFF;stroke-width:2;stroke:#000" />
</svg>
</body>
</html>Both of the above examples produce this output and represent two different approaches provided by HTML5 to implement graphical aspects in the webpage.
- <audio> - Used for sounds, audio streams, or music, embed audio content without any additional plug-in.
- <video> - Used for video streams, embed video content etc.
- <source> - Used for multiple media resources in media elements, such as audio, video, etc.
- <embed> - Used for an external application or embedded content.
- <track> - Used for subtitles in the media elements such as video or audio.
<label>
Video:
</label>
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
<track src="subtitles.vtt" kind="subtitles" srclang="en" label="English">
</video>
<br>
<label>
Embed:
</label>
<embed type="video/webm" src="https://www.youtube.com/embed/MpoE6s2psCw" width="400" height="300">
<br>
<label>
Audio:
</label>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
</audio>The drag and drop functionality is a very intuitive way to select local files. This is similar to what most of the OS have copy functionality thus making it very easy for the user to comprehend. Before the native drag and drop API, this was achievable by writing complex Javascript programming or external frameworks like jQuery. To enable this functionality there is a draggable attribute in the <img> tag and need to set ondrop and ondragover attribute to an eventhandler available in scripts.<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drop(ev) {
...
}
</script>
</head>
<body>
...
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" style="border: 1px solid #aaaaaa; width:350px; height: 70px;"></div>
<br>
<img id="drag1" src="img_logo.gif" draggable="true" width="336" height="69">
...
</body>
</html>
MathML stands for Mathematical Markup Language. It is used for displaying mathematical expressions on web pages. For this <math> tag is used.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<math>
<mrow>
<mrow>
<msup>
<mi> a </mi>
<mn> 2 </mn>
</msup>
<mo> + </mo>
<msup>
<mi> b </mi>
<mn> 2 </mn>
</msup>
<mo> + </mo>
<mn> 2 </mn>
<mn> a </mn>
<mn> b </mn>
</mrow>
<mo> = </mo>
<mn> 0 </mn>
</mrow>
</math>
</body>
</html>
This displays the equation a2 + b2 + 2ab = 0.
The events pushed from the webserver to the browsers are called server-sent events. DOM elements can be continuously updated using these events. This has a major advantage over straight-up polling. In polling, there is a lot of overhead since every time it is establishing an HTTP connection and tearing it down whereas, in server-sent events, there is one long-lived HTTP connection. To use a server-sent event, <eventsource> element is used. The src attribute of this element specifies the URL from which sends a data stream having the events.
<eventsource src = "/cgi-bin/myfile.cgi" />These are added to bring parallelism and async capability. It runs in the background to do the computationally expensive tasks without yielding to make the page responsive. It is achieved by starting a separate thread for such tasks. These are not meant to perform UI operations. There are three types of web workers:
- Dedicated Workers - These are workers that are utilized by a single script.
- Shared Workers -These are workers that are utilized by multiple scripts running in different windows, IFrames, etc.
- Service Workers - These act as proxy servers between web applications, the browser, and the network. Mostly used for push notifications and sync APIs.
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<script>
var w;
function startWorker() {
if(typeof(Worker) !== "undefined") {
if(typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}
w.onmessage = function(event) {
document.getElementById("result").innerHTML = event.data;
};
}
}
function stopWorker() {
w.terminate();
w = undefined;
}
</script>Its value is a boolean type that indicates whether or not the data being submitted by the form will be validated beforehand. By making this false, forms can be submitted without validation which helps users to resume later also.<form action = "" method = "get" novalidate>
Name:<br><input type="name" name="sname"><br>
Doubt:<br><input type="number" name="doubt"><br>
<input type="submit" value="Submit">
</form>
Raster Images - The raster image is defined by the arrangement of pixels in a grid with exactly what color the pixel should be. Few raster file formats include PNG(.png), JPEG(.jpg), etc.
Vector Images - The vector image is defined using algorithms with shape and path definitions that can be used to render the image on-screen written in a similar markup fashion. The file extension is .svg
To support old browsers instead of defining the resource of svg in src attribute of <img> tag, it should be defined in srcset attribute and in src the fallback png file should be defined.<img src="circle.png" alt="circle" srcset="circle.svg">
The manifest file is used to list down resources that can be cached. Browsers use this information to make the web page load faster than the first time. There are 3 sections in the manifest fileCACHE MANIFEST
# 2012-06-16 v1.0.0
/style.css
/logo.gif
/main.js
NETWORK:
login.php
FALLBACK:
/html/ /offline.html<!DOCTYPE HTML>
<html manifest="tutorial.appcache">
...
...
</html>
Geolocation API is used to share the physical location of the client with websites. This helps in serving locale-based content and a unique experience to the user, based on their location. This works with a new property of the global navigator object and most of the modern browsers support this.
var geolocation = navigator.geolocation;<html> <body> <p>Click "try it" button to get your coordinates.</p> <button onclick="getLocation()">Try It</button> <p id="demo"></p> <script> var x = document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { x.innerHTML = "Geolocation functionality is not supported by this browser."; } } function showPosition(position) { x.innerHTML = "Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude; } </script> </body> </html>