Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

HTML Interview > HTML Deck 2 > Flashcards

HTML Deck 2 Flashcards

1
Q

What is HTML5?

A

HTML stands for HyperText Markup Language. It is a standard text formatting language used for developing web pages released in 1993. HTML is a language that is interpreted by the browser and it tells the browser what to display and how to display.

It is used to design web pages using markup language. HTML is the combination of Hypertext and Markup language. Hypertext defines the link between the web pages. Markup language is used to define the text document within tag which defines the structure of web pages.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

What are the key new features in HTML5?

A

HTML5 introduces a number of new elements and attributes that can help you in building modern websites. Here is a set of some of the most prominent features introduced in HTML5.

New Semantic Elements − These are like <header>, <footer>, <section>, <article> and <figure>.
Forms 2.0 − Improvements to HTML web forms where new attributes have been introduced for <input></input> tag.
Persistent Local Storage − Web storage facility which provides web application methods to store data on the web browser.
WebSocket − A next-generation bidirectional communication technology for web applications.
Server-Sent Events − HTML5 introduces events which flow from the web server to web browsers and they are called Server-Sent Events (SSE).
Canvas − This supports a two-dimensional drawing surface that you can program with JavaScript.
Audio & Video − You can embed audio or video on your web pages without resorting to third-party plugins.
Geolocation − Now visitors can choose to share their physical location with your web application.
Microdata − This lets you create your own vocabularies beyond HTML5 and extend your web pages with custom semantics.
Drag and drop − Drag and drop the items from one location to another location on the same webpage.</figure>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

What were the key goals and motivations for the HTML5 specification?

A

HTML5 was designed to replace both HTML 4, XHTML, and the HTML DOM Level 2. Major goals of the HTML specification were to:

Deliver rich content (graphics, movies, etc.) without the need for additional plugins (e.g., Flash).
Provide better semantic support for web page structure through the introduction of new structural element tags.
Provide a stricter parsing standard to simplify error handling, ensure more consistent cross-browser behavior, and simplify backward compatibility with documents written to older standards.
Provide better cross-platform support (i.e., to work well whether running on a PC, Tablet, or Smartphone).

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

What is <!DOCTYPE>? What are the different types of <!DOCTYPE> that are available?

A

A doctype or document type declaration is an instruction that tells the web browser about the markup language in which the current page is written. The Doctype is not an element or tag, it lets the browser know about the version of or standard of HTML or any other markup language that is being used in the document.
A DOCTYPE declaration appears at the top of a web page before all other elements. According to the HTML specification or standards, every HTML document requires a document type declaration to ensure that the pages are displayed in the way they are intended to be displayed.
The DOCTYPE for HTML5 is case-insensitive. It indicates the version of HTML which in this case is 5. The earlier versions like HTML4 were based on Standard Generalised Markup Language (SGML) and required a Document Type Definition (DTD). HTML5 however, is not based on SGML and doesn’t need a DTD.
The following DOCTYPE are also supported in HTML5: <!DocTYpe html>, <!dOCtype html> and <!doctype html>.
There are 3 types of DOCTYPES as mentioned below: Strict Doctype, Frameset Doctype and Transitional Doctype.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

What are tags and attributes in HTML?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

What are void elements in HTML?

A

HTML elements which do not have closing tags or do not need to be closed are Void elements. For Example <br></br>, <img></img>, <hr />, etc.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

What is the advantage of collapsing white space?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

What are HTML Entities?

A

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
< < <
> > >
& & &
space  

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

What are different types of lists in HTML?

A

There are ordered list using <ol></ol> and unordered lists using <ul></ul>.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

What is the ‘class’ attribute in HTML?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

What is the difference between the ‘id’ attribute and the ‘class’ attribute of HTML elements?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

Define multipart form data?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

Describe HTML layout structure. Semantic Elements

A

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.
</aside></section></article></nav></footer></header>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

How to optimize website assets loading?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

What are the various formatting tags in HTML?

A

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
- makes the text a subscript
- 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</ins></mark></strong></del></small></big></em></i></b>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

What are the different kinds of Doctypes available?

A

The three kinds of Doctypes which are available:

Strict Doctype
Transitional Doctype
Frameset Doctype

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

Please explain how to indicate the character set being used by a document in HTML?

A

The character set is defined in <meta></meta> tag inside <head> element.

<!DOCTYPE html>

<html>
<head>
<meta></meta>
...
...
</head>
...
</html>

18
Q

What is the difference between <strong>, <b> tags and <em>, <i> tags?</i></em></b></strong>

A

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.</b></i></b></i></em></b></strong>

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.</em></strong>

19
Q

What is the significance of <head> and <body> tag in HTML?

A

<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></link>, <meta></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.
</style></html></head>
20
Q

Can we display a web page inside a web page or Is nesting of webpages possible?

A

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” />

21
Q

How is Cell Padding different from Cell Spacing?

A

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.

22
Q

How can we club two or more rows or columns into a single row or column in an HTML table?

A

HTML provides two table attributes “rowspan” and “colspan” to make a cell span to multiple rows and columns respectively.

<table>
<tr>
<td>Sum:
$180</td>
</tr>
<tr>
<td>Sum:
$180</td>
</tr>
</table>

23
Q

Is it possible to change an inline element into a block level element?

A

Yes, it is possible using the “display” property with its value as “block”, to change the inline element into a block-level element.

24
Q

In how many ways can we position an HTML element? Or what are the permissible values of the position attribute?

A

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.

25
Q

In how many ways you can display HTML elements?

A

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.

26
Q

What is the difference between “display: none” and “visibility: hidden”, when used as attributes to the HTML element.

A

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.

27
Q

How to specify the link in HTML and explain the target attribute?

A

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:</a>

_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.

28
Q

In how many ways can we specify the CSS styles for the HTML element?

A

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></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.</style>

29
Q

Difference between link tag <link></link> and anchor tag <a>?</a>

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></link> defines a link between a document and an external resource and these are not clickable.</a>

30
Q

How to include javascript code in HTML?

A

HTML provides a 

 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></span></u>
</h1>

<script>
document.getElementById("demo").innerHTML = "script Tag"
</script>

</body>
</html>
31
Q

When to use scripts in the head and when to use scripts in the body?

A

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.

32
Q

What are forms and how to create forms in HTML?

A

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></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>
<label>Enter your name: </label>
<input></input>
<label>Enter Mobile number </label>
<input></input>
<input></input>
</form>

33
Q

How to handle events in HTML?

A

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>
<h3>0</h3>
<input></input>
<input></input>
</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>
34
Q

What are some of the advantages of HTML5 over its previous versions?

A

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.

35
Q

How can we include audio or video in a webpage?

A

HTML5 provides two tags: <audio> and <video> tags using which we can add the audio or video directly in the webpage.</video></audio>

36
Q

Inline and block elements in HTML5?

A

A block-level element always starts on a new line, and the browsers automatically add some space (a margin) before and after the element.

A block-level element always takes up the full width available (stretches out to the left and right as far as it can).

An inline element does not start on a new line.

An inline element only takes up as much width as necessary.

37
Q

What is the difference between <figure> tag and <img></img> tag?</figure>

A

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></img> tag is used to embed the picture in the HTML5 document.</figure></figure>

38
Q

How to specify the metadata in HTML5?

A

To specify we can use <meta></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.

39
Q

Is the <datalist> tag and <select> tag same?</select></datalist>

A

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></input> tag provides a suggestion that the user selects one of the options given or can enter some entirely different value.</datalist></select></select></datalist>

40
Q

Define Image Map?

A

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>

41
Q
A

HTML Interview (4 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2025 Bold Learning Solutions. Terms and Conditions