In this article, you will learn HTML interview questions and answers intermediate leve that are most frequently asked in interviews. Before proceeding to learn HTML interview questions and answers – intermediate level, first we learn the complete HTML Tutorial, and HTML Interview Questions and Answers – Basic Level.
HTML Interview Questions and Answers
The below contains the list of the top most common & frequently asked HTML & HTML 5 interview questions with their explanations.
Both the tags (<div> and <span>) are used to represent the part of the web page. The <div> tag is used as the block component, and the <span> tag is used as an inline component.
<div>
A Computer Science Portal for Geeks
<span>
GeeksforGeeks
<span>
</div>
<div> tag: The div tag is known as the Division tag. It is a block-level tag & is used in HTML to make divisions of content on the web page (text, images, header, footer, navigation bar, etc). Div tag has both openings (<div>) and closing (</div>) tags, and it is mandatory to close the tag.
<span> tag: The HTML span element is a generic inline container for inline elements and content. It is used to group elements for styling purposes (by using the class or id attributes). A better way to use it is when no other semantic element is available.
2. Differences between <div> & <span> tag:
<div> tag
|
<span> tag
|
|
The <div> tag is a block level element.
|
The <span> tag is an inline element.
|
|
It is best to attach it to a section of a web page.
|
It is best to attach CSS to a small section of a line on a web page.
|
|
It accepts align attribute.
|
It does not accept aligned attributes.
|
|
This tag should be used to wrap a section, for highlighting that section.
|
This tag should be used to wrap any specific word that you want to highlight on your webpage.
|
id Attribute: The id attribute is a unique identifier that is used to specify the document. It is used by CSS and JavaScript to perform a certain task for a unique element. In CSS, the id attribute is written using the # symbol followed by id.
Syntax:
<element id="id_name">
In CSS Stylesheet:
#id_name {
// CSS Property
}
class Attribute: The class attribute is used to specify one or more class names for an HTML element. The class attribute can be used on any HTML element. The class name can be used by CSS and JavaScript to perform certain tasks for elements with the specified class name. The class name can be represented by using the “.” symbol.
Syntax:
<element class="class_name>
In CSS Stylesheet:
.class {
// CSS Property
}
Difference between id and class attribute: The only difference between them is that “id” is unique on a page and can only apply to at most one element, while the “class” selector can apply to multiple elements.
When the content of one completely different webpage is embedded into another webpage, it is called a nested webpage. The nested webpage can be created using the following 2 methods:
- <iframe> tag: The iframe in HTML stands for Inline Frame. The “iframe” tag defines a rectangular region within the document in which the browser can display a separate document, including scrollbars and borders.
- <embed> tag: The <embed> tag in HTML is used for embedding external applications which are generally multimedia content like audio or video into an HTML document.
The <head> element is like a container for metadata i.e. data about data and it also lies between the <html> tag and the <body> tag. Metadata is the data about the HTML document and is not displayed on the webpage. It defines the document title, style, script, and other meta information.
The HTML <head> element is a container for the following elements:
- <title>: It defines the title of the webpage.
- <link>: It is most often used to link an external CSS file.
- <meta>: It is used to specify the Character set, Page description, Keywords, Author of the document, and Viewport settings. It will not be displayed but is used by browsers on how to display content or reload pages and by search engines, and other web services.
- <base>: It is used to specify the base URL or target for relative URLs.
- <style>: It is used to make internal CSS within our HTML webpage.
- <script>: It is used to define within the HTML webpage.
The metadata means information about data. The <meta> tag in HTML provides information about HTML Document or in simple words, it provides important information about a document. These tags are basically used to add name/value pairs to describe properties of HTML documents, such as expiry date, author name, list of keywords, document author, etc. This tag is an empty element because it only has an opening tag and no closing tag, but it carries information within its attributes. A web document can include one or more meta tags depending on information, but in general, it doesn’t affect the physical appearance of the document.
Syntax:
<meta attribute-name="value">
Key Points:
- The <meta> tag contents are not visible on your browser & is added inside the <head> tag.
- They are just used to give additional information about the HTML document.
- The <meta> tags are added to our HTML document for the purpose of Search Engine Optimisation.
Page layout is the part of graphic design that deals with the arrangement of visual elements on a page. Page layout is used to make the web pages look better. It establishes the overall appearance, relative importance, and relationships between the graphic elements to achieve a smooth flow of information and eye movement for maximum effectiveness or impact.
Page Layout Information:
- Header: The part of the front end which is used at the top of the page. <header> tag is used to add header section in web pages.
- Navigation bar: The navigation bar is the same as the menu list. It is used to display the content information using hyperlinks.
- Index / Sidebar: It holds additional information or advertisements and is not always necessary to be added to the page.
- Content Section: The content section is the main part where content is displayed.
- Footer: The footer section contains the contact information and other query related to web pages. The footer section is always put on the bottom of the web pages. The <footer> tag is used to set the footer on web pages.
Semantic Elements have meaningful names which tell about the type of content. For instance header, footer, table, … etc. HTML5 introduces many semantic elements as mentioned below which make the code easier to write and understand for the developer as well as instruct the browser on how to treat them.
- article: It contains independent content which doesn’t require any other context.
- aside: It is used to place content in a sidebar i.e. aside from the existing content.
- details: It defines additional details that the user can hide or view.
- figure & figcaption: It is used to add an image to a web page with a small description.
- footer: It is located at the bottom of any article or document, they can contain contact details, copyright information, etc.
- header: It is used for the header of a section introductory of a page.
- main: It defines the main content of the document.
- mark: It is used to highlight the text.
- nav: It is used to define a set of navigation links in the form of a navigation bar or nav menu.
- section: A page can be split into sections like Introduction, Contact Information, Details, etc and each of these sections can be in a different section tag.
HTML provides some method to display reserved characters. Reserved characters are those characters that are either reserved for HTML or those which are not present in the basic keyboard.
For Example: ‘<‘ is already reserved in HTML language. Sometimes this character needs to display on the web page which creates ambiguity in the code. Along with these are the characteristics which are normally not present in basic keyboard ( £, ¥, €, © ), etc. HTML provides some Entity names and Entity numbers to use these symbols. Entity number is easy to learn.
There are some characters in HTML that are reserved, & have special meaning when they are used in an HTML document. Like if you used less than or greater than sign in your HTML document then the browser will treat them differently. So we will use HTML entities to insert symbols in a webpage.
|
Special Symbols
|
Syntax
|
|
©:copyright
|
©
|
|
®:registered trademark
|
®
|
|
™:trade mark
|
™
|
|
@: at
|
@
|
|
¶: paragraph
|
¶
|
|
§: section
|
§
|
|
ℂ: double-struck capital c
|
𝕔
|
|
℅: care of
|
℅
|
A Uniform Resource Locator (URL) is simply the address of a website to access the website content like www.geeksforgeeks.org. But there are certain characters allowed to use in the URL like alphabets A-Z and a-z, numbers 0-9, and a few special characters. They can be used as it is but the rest of the characters that are not in this list are used after encoding them to a suitable form.
URL Encoding is the process of converting the URL into a valid format that is accepted by web browsers. URL Encoding takes place by replacing all the characters that are not allowed with a % sign followed by two hexadecimal digits. These two hexadecimal values represent the numerical values of the character in the ASCII character set. For example, a space is not acceptable in a URL and is replaced by ‘%20’ or a ‘+’ sign while encoding. Similarly, a $ sign is replaced by ‘%24’.
Reserved Characters: There are certain characters that sometimes have special meanings in the URL and they can be used in both ways. For example, the ‘/’ character is a reserved character and it has a special meaning when being used as a delimiter to separate the paths of a URL. Here it is used by encoding it to ‘%2F’. Elsewhen it has no special purpose it can be used normally.
The Hypertext Transfer Protocol (HTTP) is designed to enable communications between clients and servers. HTTP works as a request-response protocol between a client and server. There are 2 HTTP request methods ie., GET & POST
- GET: It requests data from a specified resource.
- POST: This method is used to submit data to be processed to a specified resource.
- The bold parts in the URL are the GET parameters and the italic parts are the value of those parameters.
- More than one parameter=value can be embedded in the URL by concatenating with ampersands (&).
- One can only send simple text data via GET method.
The HTML “canvas” element is used to draw graphics via JavaScript.The “canvas” element is only a container for graphics. One must use JavaScript to actually draw the graphics. Canvas has several methods for drawing paths, boxes, circles, text, and adding images.
Example: The canvas would be a rectangular area on an HTML page. By default, a canvas has no border and no content. An id attribute has been specified to refer to it in a script, and a width and height attribute to define the size of the canvas. The style attribute is used to add a border.
HTML
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas"
width="400"
height="200"
style="border:2px solid #000000;">
</canvas>
</body>
</html>
|
Output:
SVG stands for Scalable Vector Graphics. It basically defines vector-based graphics in XML format. SVG graphics do NOT lose any quality if they are zoomed or resized. Every element and every attribute in SVG files can be animated.
Advantages of SVG: Advantages of using SVG over other image formats (like JPEG and GIF) are:
- SVG images can be created and edited with any text editor.
- SVG images can be searched, indexed, scripted, and compressed.
- SVG images are scalable.
- SVG images can be printed with high quality at any resolution.
15. What are the different multimedia formats supported by HTML?
Multimedia files have formats and different extensions like .wav, .mp3, .mp4, .mpg, .wmv, and .avi
Geo-location in HTML5 is used to share the location with some web site and aware of the exact location. It is mainly used for local businesses, restaurants, or to show locations on the map. It uses JavaScript to give the latitude and longitude to the backend server. Most of the browsers support Geolocation API. Geo-location API uses a global navigator object which can be created as follows:
var loc = navigator.geolocation
Displaying Location using HTML Geolocation: The following code is displaying the current location with the help of latitude and longitude via HTML Geolocation.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Latitude and longitude</title>
<style>
.gfg {
font-size: 40px;
font-weight: bold;
color: #009900;
margin-left: 50px;
}
.geeks {
margin-left: 150px;
}
p {
font-size: 20px;
margin-left: 20px;
}
</style>
</head>
<body>
<div class="gfg">GeeksforGeeks</div>
<p>Displaying location using Latitude and Longitude</p>
<button class="geeks"
onclick="getlocation()">
Click
</button>
<p id="demo1"></p>
<script>
var variable1 = document.getElementById("demo1");
function getlocation() {
navigator.geolocation.getCurrentPosition(showLoc);
}
function showLoc(pos) {
variable1.innerHTML = "Latitude: "
+ pos.coords.latitude
+ "<br>Longitude: "
+ pos.coords.longitude;
}
</script>
</body>
</html>
|
Output:
SessionStorage and LocalStorage are known as the web storage API. Data can be stored on the client-side by using these APIs.
SessionStorage:
- SessionStorage is used for storing data on the client-side.
- The maximum limit of data saving in SessionStorage is about 5 MB.
- Data in the SessionStorage exist till the current tab is open if we close the current tab then our data will also erase automatically from the SessionStorage.
- Like SessionStorage, LocalStorage is also used for storing the data on the client-side.
- The maximum limit of data saving is about 5 MB in LocalStorage also.
- LocalStorage has no expiration time, Data in the LocalStorage persist till the user manually deletes it. This is the only difference between LocalStorage and SessionStorage
HTML Form is a document that stores information of a user on a web server using interactive controls. An HTML form contains different kinds of information such as username, password, contact number, email id, etc.
The elements used in an HTML form are check box, input box, radio buttons, submit buttons, etc. Using these elements the information of a user is submitted on a web server. The form tag is used to create an HTML form.
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<form>
Username:
<br>
<input type="text"
name="username">
<br>
Email id:
<input type="text"
name="email_id">
<br>
<input type="submit"
value="Submit">
</form>
</body>
</html>
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...