# html
**1. Are the HTML tags and elements the same thing?**
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`
**2: void elements** : HTML elements which do not have closing tags or do not need to be closed `<br />, <img />, <hr />, etc.`
**3: HTML Entities?** : In HTML some characters are reserved like ‘<’, ‘>’, ‘/’, etc. To use these characters in our webpage we need to use the character entities.
<img src="https://i.imgur.com/9dZyW2y.png"/>
**4: different types of lists in HTML?** orderd 'ol' unorderd list 'ul' defination/description list: `<dl><dt><dd></dd></dt></dl>`.
**5 : HTML layout structure** different in each page put the mosr common is `<header>`,`<footer>`,`<nav>`,`<article>: It is a set of information.`,`<section>`,`<aside>: Sidebar content of the page`.
**6: How to optimize website asset?**
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.
6: **head tag & body tag**
**head tag** provides the information about the document. 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.
**7. Can we display a web page inside a web page or Is nesting of webpages possible?**
17. Can we display a web page inside a web page or Is nesting of webpages possible?
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” />`
**8. How is Cell Padding different from Cell Spacing?**
**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.
**9. In how many ways you can display HTML elements?**
1. **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.
2. **block**: using this, we can display any inline element as a block-level element.
3. **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.
4. **flex**: It displays the container and element as a flexible structure. It follows flexbox property.
5. inline-flex: It displays the flex container as an inline element while its content follows the flexbox properties.
6. **grid**: It displays the HTML elements as a grid container.
1. none: Using this property we can hide the HTML element.
**10. Is it possible to change an inline element into a block level element?**
Yes, `“display”: “block”`, to change the inline element into a block-level element.
**11. In how many ways can we position an HTML element? Or what are the permissible values of the position attribute?**
There are mainly 7 values of position attribute that can be used to position an HTML element:
1. **static**: Default value. Here the element is positioned according to the normal flow of the document.
2. **absolute**: Here the element is positioned relative to its parent element. The final position is determined by the values of left, right, top, bottom.
3. **fixed**: This is similar to absolute except here the elements are positioned relative to the <html> element.
4. **relative**: Here the element is positioned according to the normal flow of the document and positioned relative to its original/ normal position.
5. **initial**: This resets the property to its default value.
6. **inherit**: Here the element inherits or takes the property of its parent.
**12.the difference between “display: none” and “visibility: hidden”**
**“visibility: hidden”** for an HTML element then that element will be hidden from the webpage but still takes up space
**“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
**24. How to specify the link in HTML and explain the target attribute?**
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.
**25. In how many ways can we specify the CSS styles for the HTML element?**
1. **Inline:** Here we use the ‘style’ attribute inside the HTML element.
2. **Internal:** Here we use the `<style>`tag inside the `<head>` tag. To apply the style we bind the elements using ‘id’ or ‘class’ attributes.
3. **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.
**26. Difference between link tag `<link>` and anchor tag `<a>`?**
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
**27. When to use scripts in the head and when to use scripts in the body?**
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:
1. Place library scripts or event scripts in the head section.
2. Place normal scripts that do not write anything on the page, in the head section until there is any performance issue.
1. Place scripts that render something on the web page at the bottom of the body sectio
**28. How to handle events in HTML?**
HTML allows event trigger actions in browsers using javascript or JQuery. There are a lot of events like ‘onclick’, ‘ondrag’, ‘onchange’, etc.
# HTML5 Interview Questions
**1. What are some of the advantages of HTML5 over its previous versions?**
Some advantages of HTML5 are:-
1. It has Multimedia Support.
2. It has the capabilities to store offline data using SQL databases and application cache.
3. Javascript can be run in the background.
4. HTML5 also allows users to draw various shapes like rectangles, circles, triangles, etc.
5. Included new Semantic tags and form control tags
**2. Inline and block elements in HTML5?**
**3. What is the difference between `<figure>` tag and `<img>` tag?**
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.
**4. How to specify the metadata in HTML5?**
**5. What are Semantic Elements?**
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.
**6.Difference between SVG and Canvas HTML5 element?**
**7. Explain the concept of web storage in HTML5.**
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:
**Local Storage** - This helps in storing data that will be retained even though the user reopens the browser. It is stored for each webapp on different browsers.
**Session Storage** - This is used for one session only. After the user closes the browser this gets deleted.
**8. Which tag is used for representing the result of a calculation? Explain its attributes.**
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.
**9. Explain new input types provided by HTML5 for forms?**
**Date** - Only select date by using type = "date"
**Week** - Pick a week by using type = "week"
**Month** - Only select month by using type = "month"
**Time** - Only select time by using type = "time".
**Datetime** - Combination of date and time by using type = "datetime"
**Datetime-local** - Combination of date and time by using type = "datetime-local." but ignoring the timezone
**Color** - Accepts multiple colors using type = "color"
**Email** - Accepts one or more email addresses using type = "email"
**Number** - Accepts a numerical value with additional checks like min and max using type = "number"
**Search** - Allows searching queries by inputting text using type = "search"
**Tel** - Allows different phone numbers by using type = "tel"
**Placeholder** - To display a short hint in the input fields before entering a value using type = "placeholder"
**Range** - Accepts a numerical value within a specific range using type = "range"
**Url** - Accepts a web address using type = "url”
**10. Why do you think the addition of drag-and-drop functionality in HTML5 is important? How will you make an image draggable in HTML5?**
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.
**11. Why do you think the addition of drag-and-drop functionality in HTML5 is important? How will you make an image draggable in HTML5?**
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.
```html
<!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>
```
**12. What are the server-sent events in HTML5?**
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.
**13. What is a manifest file in HTML5?**
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 file
**CACHE Manifest** - Files needs to be cached
**Network** - File never to be cached, always need a network connection.
**Fallback** - Fallback files in case a page is inaccessible
**14. What is the Geolocation API in HTML5?**
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;
```
**15. Explain Web Components and it’s usage.**
These are used to create reusable custom elements which are very difficult in traditional HTML. It consists of three technologies:
**Custom elements** - These are JavaScript APIs that help in defining custom elements and their behavior.
**Shadow DOM** - These are JavaScript APIs that attach an encapsulated shadow DOM tree to an element to keep the element’s features private and unaffected by other parts.
Google Drive
Gist
Clipboard
Sign in with Wallet
