HTML Interview Questions Part 2

How do add a header in HTML?

<!DOCTYPE html>
<html>
<body>
  
  
  <header>
    <b>hey</b>
  </header>
  
  
</body>
</html>

How to give space between two buttons in HTML?

<div class='myDiv'>
    <button style='margin-right:16px'>Button 1</button>
    <button style='margin-right:16px'>Button 2</button>
    <button>Button 3</button>
</div>

How to change image size in HTML?

<img src="demo.jpg" alt="Nature" style="width:500px;height:600px;">

The width and height attributes always define the width and height of the image in pixels.

HTML Interview Questions

Why do we use doctype in HTML?

Doctype is used for Document Type Declaration and also It informs the web browser about the type and version of HTML used in building the web document.

How to add video in HTML?

The HTML <video> element is used to show a video on a web page.

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

How to add favicon in HTML?

You can create a .png image and then use f the following snippets between the <head> tags for the static HTML documents:

<link rel="icon" type="image/png" href="/favicon.png"/> 
<link rel="icon" type="image/png" href="https://example.com/favicon.png"/>

Advance HTML Interview Questions

How to embed YouTube video in HTML?

  1. On a computer, go to the YouTube video you want to embed.
  2. Under the video, click SHARE .
  3. Click Embed.
  4. From the box that appears, copy the HTML code.
  5. Paste the code into your blog or website HTML.

How to write text on image in HTML?

<div class="container">
  <img src="img_snow.jpg" alt="Snow" style="width:100%;">
  <div class="bottom-left">Left</div>
  <div class="top-left">Up Left</div>
  <div class="top-right">Up Right</div>
  <div class="bottom-right"> Right</div>
  <div class="centered">Middle</div>
</div>

How to create a popup in html with CSS?

<div class="popup" onclick="myFunction()">Click me!
  <span class="popuptext" id="NewPopup">Your text</span>
</div>

HTML Interview Questions

How to connect html to database with MySQL?

  • Step 1: Filter your HTML form requirements for your contact us web page.
  • Step 2: Create a database and a table in MySQL.
  • Step 3: Create HTML form.
  • Step 4: Create PHP page to Insert contact us HTML form data in MySQL database.
  • Step 5: All done!

How to blink text in HTML?

The HTML <blink> tag stands for a non-standard element that is used to create an enclosed text. It flashes slowly and normally blinks, meaning is light flashing on and off in a regular or intermittent way so samely blinking effect is used very rarely, as it is not eye soothing  for users to watch a part of text constantly turning on and off.

How to add calendar in HTML Form?

<!DOCTYPE html>
<html>
<body>
  
  
  
<button onclick=”CalenderFunction()">Put the date</button>
  
  
<script>
function CalenderFunction()n() {
  var x = document.createElement("INPUT");
  x.setAttribute("type", "date");
  x.setAttribute("value", "2014-02-09");
  document.body.appendChild(x);
}
</script>
  
</body>
</html>

Advance HTML Interview Questions

How to add video in HTML?

The HTML <video> element is used to show a video on a web page.
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

How to add google map in HTML?

<!DOCTYPE html>
<html>
<body>
  
<h1> Google Map</h1>
  
<div id="googleMap" style="width:100%;height:400px;"></div>
  
<script>
function myMap() {
var mapProp= {
  center:new google.maps.LatLng(51.508742,-0.120850),
  zoom:5,
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
</script>
  
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&amp;callback=myMap"></script>
  
</body>
</html>

How to create a dynamic calendar in HTML?

<div class="month">
  <ul>
    <li class="prev">❮</li>
    <li class="next">❯</li>
    <li>August<br><span style="font-size:18px">2017</span></li>
  </ul>
</div>
  
<ul class="weekdays">
  <li>Mo</li>
  <li>Tu</li>
  <li>We</li>
  <li>Th</li>
  <li>Fr</li>
  <li>Sa</li>
  <li>Su</li>
</ul>
  
<ul class="days">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li><span class="active">10</span></li>
  <li>11</li>
  </ul>

HTML Interview Questions

How to create frames in HTML?

<!DOCTYPE html>
<html>
  
   <head>
      <title>HTML Demp Frames</title>
   </head>
     
   <frameset rows = "10%,80%,10%">
      <frame name = "top1" src = "/html/top_frame.htm" />
      <frame name = "mainframe" src = "/html/main_frame.htm" />
      <frame name = "bottompart" src = "/html/bottom_frame.htm" />
    
      <noframes>
         <body>Hey Great Learning</body>
      </noframes>
       
   </frameset>
    
</html>

How to create a menu in HTML?

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
  width: 35px;
  height: 5px;
  background-color: black;
  margin: 6px 0;
}
</style>
</head>
<body>
  
<p>Menu icon:</p>
  
<div></div>
<div></div>
<div></div>
  
</body>
</html>

What is the difference between HTML tags and elements?

The starting and ending tags mark the beginning and end of the HTML element. The tags are enclosed within the < and > symbol. HTML Elements is the text written between HTML tags and it holds the content.

Advance HTML Interview Questions

Which types of heading are found in HTML?

There are 6 types of headings that can be found in HTML which are numbered <h1> to <h6> from largest to smallest. Headings are used in the following way.

<h1> heading 1 </h1>

<h2> heading 2 </h2>

<h3> heading 3 </h3>

<h4> heading 4 </h4>

<h5> heading 5 </h5>

<h6> heading 6 </h6>

How can you insert a copyright symbol in HTML webpage?

To insert the copyright symbol you can use the “&#169” as well as “&copy” in the HTML file.

How to specify the metadata in HTML?

<meta> is the tag used to specify metadata in HTML. <meta> is a void tag which means there is no closing tag. 

HTML Interview Questions

What are Inline and block elements in HTML?

The block elements take up the full page width and start on a new line, instead of inline element that only take the space to accommodate the length of the content and continue on the same line. Some examples of block elements are <div>, <p>, <header>, <footer>, <h1>…<h6>, <form>, <table>, <canvas>, <video>, <blockquote>, <pre>, <ul>, <ol>, <figcaption>, <figure>, <hr>, <article>, <section>, etc.  Some examples of inline elements are <span>, <a>, <strong>, <img>, <button>, <em>, <select>, <abbr>, <label>, <sub>, <cite>, <abbr>, <script>, <label>, <i>, <input>, <output>, <q>, etc.

Is audio tag supported in HTML 5?

Audio tags are supported in HTML5 and with these, you can add audio to a webpage. The file formats supported by HTML5 include MP3, WAV, and OGG.

Is it possible to change the color of the bullet?

To change the color of the bullet, you need to change the text color of the first line in the list. The bullet takes the color from the first line of the list.

Advance HTML Interview Questions

How can you keep list elements straight in an HTML file?

You can use indents to keep the elements of a list aligned straight. You can use a nested list and indent them further than the parent list, you can quickly determine the lists and elements contained under the list.

What are Forms in HTML?

If you want to collect the information of the visitors to the webpage, you can add a form to the webpage. Once the user enters the information into the form fields, it is added to a database specified by you.

What are void elements in HTML?

Some elements in HTML only need an opening tag, without the need for a close tag, and these are known as void elements. Some examples are <br />, <img />, <hr />, etc.

HTML Interview Questions

What is a marquee?

A scrolling text that can go in a specific direction across the screen i.e. left, right, up, or down, automatically. For this you can use the tag <marquee> Text to scroll </marquee>.

What is an Anchor tag in HTML?

Whenever you need to link any two web pages, website templates, or sections, you can do so using the anchor tag. The anchor tag format is <a href=”#” target=”link”></a>. Here the ‘link’ is defined as the target attribute, while the ‘href’ attribute indicates the sections in the documents.

What is an image map?

Identified by the <map> tag, the image map can link an image to different web pages. It is one of the most asked questions in interviews these days.

Advance HTML Interview Questions

What is data list tag?

The data list tag is an HTML tag that lets the user auto-complete the form based on the predefined options. It presents the users with predefined options that they can choose from. An example of this can be as below:

<label>    

 Enter your favorite Bollywood Actor: Press any character<br />    

 <input type=”text” id=”favBolActor” list=”BolActors”>    

 <datalist id=”BolActor”>    

 <option value=”Shahrukh Khan”>    

 <option value=”Akshay Kumar”>    

 <option value=”Aamir Khan”>     

 <option value=”Saif Ali Khan”>     

 <option value=”Ranbir Kapoor”>     

 <option value=”Ranveer Singh”>     

 <option value=”Sanjay Dutt”>     

 <option value=”Hrithik Roshan”>     

 <option value=”Varun Dhawan”>     

 <option value=”Ajay Devgan”>    

 </datalist>    

</label>     

What is difference between HTML and XHTML?

HTML and XHTML has a few differences as below:

  • HTML stands for Hypertext Markup Language while XHTML stands for Extensible Hypertext Markup Language
  • The format of HTML is a document file format while for XHTML the file format is a markup file format
  • In HTML it is not necessary to close tags in the same order as they were opened, but in XHTML it is necessary
  • In XHTML, it is quite important to write doctype on the top of the file; while in HTML is it not needed
  • The file name extension used in HTML are .html, .htm.; and the file name extension used in XHTML are .xhtml, .xht, .xml.

What is the ‘class’ attribute in HTML?

It is an attribute that refers to one or more than one class name for an HTML element. The class attribute can be used for the HTML elements. 

HTML Interview Questions

What is the use of an I Frame tag?

I Frame or Inline Frame is basically an HTML document implanted inside the other  HTML documents on a website. The I Frame element is used for inserting content from other source, which can be an advertisement into a webpage.

What is the use of figure tag in HTML 5?

The HTML figure tag is used for adding self-contained content such as illustrations, photos, diagrams, or code listings. HTML figure tag contains two tags such img src and figcaption. Img src is used for adding image source in a document; while fig caption is used for setting caption to an image.

Why is a URL encoded in HTML?

URL is encoded in HTML as it converts characters into a format that can be transmitted over the web. A URL is transmitted over the internet through the ASCII character set. The non-ASCII characters can be replaced by “%” which is followed by hexadecimal digits.

Advance HTML Interview Questions

What is HTML5?

HTML5 is the latest version of HTML (Hypertext Mark-up Language) which is also referred to as World Wide Web (www) primary language. This standard version of HTML has features and behaviors, as well as a larger set of technologies leading to the building of more diverse and powerful web sites and applications. It is a cooperation between W3C(World Wide Web Consortium) and WHATWG( Web Hypertext  Application Technology Working Group). HTML5 actually incorporates three main kinds of code – HTML, CSS and JavaScript to take care of structure, presentation and implementation respectively, hence reducing the requirement of external plugins. 

The advanced features of HTML5 that make it more user-friendly include-

  • Addition of new attributes
  • Addition of new parsing rules in order to enhance its flexibility
  • Supporting Web SQL, i.e. allows implementation of standards for storing data in SQL databases
  • Allowing offline editing
  • Supporting Protocol and MIME handler registration simultaneously
  • Encouragement of semantic(markup)

What is HTML5 used for?

HTML5 is a markup language that is used to design the structural layout and format of webpages in World Wide Web. It is the fifth and latest version of HTML, hence it has a good lot of enhanced features and elements in its box for the users and developers. HTML5 is used for designing web content like web pages, sites, applications, advertisements, audio-video contents and games. 

HTML5 has replaced Flash in a quite fast pace and allows to make highly interactive ads and videos without requiring any external plugins, thus it can be said that it has revolutionized the world of web.  

What are the building blocks of HTML5?

The building blocks of HTML5 are:

  • Inclusion of canvas and SVG
  • Possess more semantic text markup
  • Supports many new form elements
  • Offers high level audio and video content
  • Supports JavaScript API in the background
  • Has new API for communication
  • Supports geolocation API
  • Supports web worker API
  • Provides efficient data storage in the form of local storage and session storage

HTML Interview Questions

When was HTML5 released?

HTML5 was published on 22 January, 2008 as a public-facing form. However, it was released as a W3C recommendation on 28 October, 2014 which brought the specification process to completion. Further, HTML5.1 and HTML5.2 were released as recommendations by W3C on 1 November,2016 and on 14 December, 2017 respectively. HTML5 does not only intend to encompass HTML4 but XHTML 1and DOM Level2 HTML also.

What is new in HTML5?

HTML5 includes a lot of new features that are quite convenient to implement. New inline elements of HTML5 indicate contents that are-

  • Marked in a definite fashion
  • Time and date
  • Fraction of a certain range
  • Represent progress of any particular task towards its completion

The new features of HTML5 that support making of more dynamic pages-

  • Support creation of  context menus
  • href is no more required on a tag
  • async attribute to allow asynchronous loading of script

 The new form types HTML5 include: datetime, datetime-local, date, month, week, time, number, range, email, url.

HTML5 does not support some elements of HTML4 like acronym, big, dir, etc. HTML5 provides a few new elements like supporting drawing space in JavaScript, adding audio and video to one’s web pages with simple tags.

HTML5 gives a well-defined structure of a web page, including definitions for sections of pages, header & footer of a page, navigation on a page, some primary content or article on a page, images to annotate articles of page, and some extra content like slide bar on the pages.

Which browsers support HTML5?

Currently, latest versions of Apple Safari, Google Chrome, Opera and Mozilla Firefox support many functionalities of HTML5. Internet Explorer 9.0 is also intended to have support for HTML features. Besides, the mobile web browsers that come pre-installed on Android phones, iPhones, and iPads, all provide excellent support for HTML5.

Advance HTML Interview Questions

How to turn on HTML5 in Chrome?

Here are the steps to turn on HTML5 in Chrome by installing the extension from Chrome Web Store (using IDE for example):

  • Choose New Project from File to open New Project Wizard
  • Select HTML5/JS Application in the HTML/JavaScript category and then Click Next
  • Specify the name and location for your project, followed by clicking Next
  • Choose No Site Template > Click on Finish button(index.html is opened in the editor)
  • Confirm integration
  • Click Run in the toolbar
  • Click Go to Chrome Web Store button in the Install Chrome Extension dialog box(Connector page is opened in Chrome)
  • In the connector page, click on Add to Chrome option
  • Now, click Re-Run Project in the dialog box of Install Chrome extension  as the final step

It has been quite long since Google proposed making HTML5 the default language over Flash in Chrome, i.e. Chrome directly syncs to HTML5. However, when it comes to Androids, one can always enable HTML5 in Chrome by changing its settings.

How to install HTML5?

No as such installation of HTML5 is required since almost all the modern day web browsers support HTML5 by default. However, a proper text editor to work with HTML5 (like in the case of HTML) is required to be installed on the device, which can be done by directly downloading it from the browser. All the HTML5 web contents are automatically supported by the web browsers; hence no separate installation is needed to work on or with HTML5.

Why to use HTML5?

There are numerous reasons that point towards the benefits of using HTML5. Be it for individual purposes or for business purposes, HTML5 is there to meet its users’ needs and requirements.

  • More interactive: In this world of growing virtualization, high interactivity is a must to have features. <canvas>, the HTML5 drawing tag is used to create dynamic websites. Besides, it comes with a great assortment of APIs, like Drag and Drop, offline storage database, browser history management, document editing and timed playback of media, to provide excellent user experience.
  • High accessibility: The Semantics and ARIA of HTML5 are the major reasons behind the creation of highly accessible sites. Headings like <header>, <section>, etc. are responsible for providing access to different sections of a web page.
  • Doctype: Coding in HTML5 does not involve any kind of hustle and bustle at all. Its doctype declaration is nevertheless pretty precise and simple. Apart from the simplicity part, HTML5 runs in almost all the web browsers.
  • Supports audio and video without external plugin: <video> and <audio> tags of HTML5 enable its users to access audio and video content without any third party plugin like Flash and Silverlight. These tags use attributes like height, width, autoplay and so on to specify the parameters of the audio/video.
  • Enhanced storage: The local and session storage of HTML5 provides a smarter way of using the storage capacity efficiently. Local storage makes the web applications possible without third party plugins.
  • Easy and clean coding: With a diversified set of attributes and tags, it becomes very easy to code in HTML5. It allows writing clean and descriptive codes with its semantic markup structure. Also, HTML5 boilerplate enables the designers to create webpages without facing any hassle.
  • Wide browser support: All modern and popular web browsers such as Chrome, Firefox, Opera, etc., all support HTML5. Now even IE features tend to make use of some HTML5 functionality.
  • Game development: HTML5 provides an efficient way to develop interactive games. <canvas> element plays an important role in game development using HTML5.
  • Mobile friendly: Since mobile technology is ruling the world in the current era, it is pretty much comprehensible for HTML5 to be mobile friendly if it wants to lead the world of web.

HTML Interview Questions

How to use or code in HTML5?

In order to code in HTML5, begin with <!DOCTYPE HTML> in the text editor. One can simply open the text editor and write the code for html5 like any other html code, just to be kept in mind that one has to start with <!DOCTYPE  HTML>.  Start with DOCTYPE, add <html> tag to specify the language, create head section and body section as per your requirements and then save the file with .htm extension. 

  • Start with DOCTYPE
  • Add <html> tag to specify the language
  •  Create the head section and body section as per your requirements and then save the file with .html extension. Consider the following sample code:
<!DOCTYPE HTML>
<html lang = "en">
<head>
  <!-- basic.html -->
  <title>basic.html</title>
  <meta charset = "UTF-8" />
</head>
<body>
  <h1> Sample</h1>
  <p>
    This is a sample code.
   It teaches how to code in HTML5
  </p>
</body>
</html>

Which DOCTYPE is correct for HTML5?

DOCTYPE( Document Type Definition) is a declaration that is done on the top of a webpage. It tells the web browser about the version of markup language being used for writing the webpage. There are three types of DOCTYPE- Strict, Framest and Transitional DOCTYPE. The DOCTYPE for HTML5 is quite efficiently concise as well as case – insensitive.

The correct DOCTYPE declaration for HTML5 is: <!DOCTYPE html>

<!DocTYpe html>, <!dOCtype html>, and <!doctype html>, are some other declarations of DOCTYPE that are supported by HTML5.

How to turn off HTML5?

In case one wants to turn off or disable HTML5 in one’s browse, one can easily do so by going through the following procedure:

For YouTube(Chrome)

  • Scroll down the HTML5 video Settings page on YouTube
  • Click on the ‘Use the default player’
  • Also, for Chrome, in HTTP Switchboard a selective column in the matrix can be turned off to turn off HTML5 functionalities

       For Firefox

  • Go to about:config
  • Set media.ogg.enabled to false

Advance HTML Interview Questions

How to download HTML5 video?

There are several easy ways to download an HTML5 video, one of them are mentioned here:

  • Open video downloader by clicking on +New Download button
  • Copy and paste of URL html5 video and further analyse it
  • Now choose the resolution and format as per your desire
  • Click on Download All button and download the HTML5 video in a go

How are hyperlinks inserted in the webpage?

Hyperlinks are defined with the HTML <a> tag.

<!DOCTYPE html>    
<html>    
    <body>    
       <h2>HTML Hyperlink Example</h2>    
       <a href="url">link text</a>
    </body>    
</html> 

Explain Description Lists in HTML

The description list allows us to add a description to each element of the list. 

The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term. 

<!DOCTYPE html>    
<html>    
<body>    
<h2>HTML Description List xample</h2>    
<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>
</body>    
</html>

HTML Interview Questions

What sections would you typically find in a manifest file? 

CACHE MANIFEST — hypertext markup language will perform the caching of files in this section after they are downloaded.
NETWORK – A server connection is needed for files to be listed here. The browser cannot cache them.
FALLBACK – If a page is not accessible to cache at the time of the command, this delineates where the fallback page is, so the file can be rerouted.

What are Transitional and Strict Doc Types, and how do they differ from each other?

A Strict Doc Type is a doc that includes all the necessary programming properties and components. It excludes some elements, like expostulated components or Framesets. A Transitional Doc Type is different in that regard. It contains all the components and properties that are needed and includes some items that a Strict Doc Type excludes, such as presentational elements (like text style). It also excludes the use of Framesets.

How is HTML used in web development?

HTML is a hypertext markup language that is common to the entire world wide web. Using it allows designers to create and display pages on the web. The hypertext markup language is added as tags to ensure that content displays consistently and as intended no matter what kind of device it’s displayed on.

Advance HTML Interview Questions

What is the function of Tags?

Tags are HTML commands that are placed around copy and content to ensure it behaves on the page as it should. It starts with the <> symbol and ends with the closing tag, </>
Ex. <h1> headline copy</h1>

Does it always take two HTML tags to make a command? 

No. There are some tags where only one command is needed, such as <img>, which can serve as a closing tag.

Why do boxes sometimes appear on a rendered page that’s been designed with HyperText Markup Language?

Some HTML commands are not supported by the browser that’s currently running the page. When this happens small broken boxes appear where the code used to be. It keeps the characters from rendering properly on the page.

HTML Interview Questions

Why do developers often use stylesheets in Hyper Text Markup Language?

When you create “stylesheets” in HTML, you can create a template design that can remain consistent from page to page. This shorthand makes your coding more replicable and makes it easier to both build pages out and make changes.

What is whitespace in HTML design and what are its advantages to the developer?

In Hyper Text Markup Language design, whitespace is considered a single space character—an empty sequence of space. By using it, you instruct your browser to collapse many spaces into one single space, improving your indent. This has the advantage of making your content tags more readable and better organized.

What is the difference between DIV and SPAN in HTML? 

The main difference between DIV and SPAN is that DIV is a block line element whereas span is an inline element. The former is used before and after huge chunks of code. On the other hand, span limits itself within a line or a paragraph. 

Advance HTML Interview Questions

What are the entities in HTML?

Entities in HTML are nothing but a piece of text and are used to showcase characters that are reserved or invisible. They begin with an ampersand sign and end with a semicolon. For example: blank space (&nbsp;), ampersand (&amp;), less than (&lt;), etc. 

What is the use of a span tag? Explain with example 

The span tag helps group elements for styling. The tag works on inline elements and helps markup text or characters in a document. The tag allows easy styling either through CSS (via class attribute) or Javascript (via id attribute) From adding color to the text or inserting a background, span tag facilitates all.  

Example:  

<span style="color:#008000;"> 
Here, we use span to change the color to green. 
</span>

What are the differences between Local Storage and Session Storage Objects?

HTML Interview Questions

Name some new features which were not present in HTML but are in HTML5?

The features in HTML5 that have garnered maximum attention includes:  

  1. Video and audio: Following the digital trend, HTML5 has introduced both a video <video> and an audio <audio> tag. As a result, it makes it easier for web developers to integrate visual content dynamically.  
  2. Nav: Introduced to help link different pages on a website <nav>.  
  3. Canvas: To draw and create visual content or embed graphics easily <canvas>.  
  4. Footer: Add new elements in the footer section. In general, it helps add copyright information at the end of the document <footer>.  

Why are Meta tags used in HTML?

It tells the browser about the document, the keywords, the author, etc. Search engines refer to metadata to learn about the page while indexing.  

<!DOCTYPE html> 
<html> 
   <head> 
      <title>Meta Tags</title> 
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" /> 
      <meta name = "description" content = "Enlisting top interview questions." /> 
   </head> 
   <body> 
   <p>HTML Interview Questions!</p> 
   </body>
</html>

Explain five new input types provided by HTML5 for forms?

The five new input types include: 

  1. Email: To validate whether the input is of the standard email format.
<form> 
    <label for="myemail">Enter Your Email Address:</label> 
    <input type="email" id="myemail" required> 
</form>

URL: Will only accept URL as input.

<form> 
    <label for="myurl">Enter URL of the Website:</label> 
    <input type="url" id="myurl" required> 
</form>

Number: Will only accept numbers.

<form> 
    <label for="mynumber">Enter a Number:</label> 
    <input type="number" min="2" max="20" step="0.5" id="mynumber"> 
</form>

Date: To check if the input maps standard date format

 <form> 
    <label for="mydate">Select Date:</label> 
    <input type="date" value="2021-07-01" id="mydate"> 
</form>

Advance HTML Interview Questions

Compare HTML & XML?

CriteriaHTMLXML
Deployed forRendering things on screenDescribing what things are
Functioning areaHuman to computer interactionComputer to computer interaction
Can explain what data meansNoYes

Give some examples of semantic and non-semantic HTML tags.

Example: Examples of semantic HTML tags include < p > tag for defining a paragraph, < h1 > to < h6 > tags for defining header text, < blockquote > tag for defining quotation from another source and < em > tag for defining emphasized text. Examples of non-semantic HTML tags include < b > tag for indicating bold text, < i > tag for indicating italic text and < u > tag for indicating underlined text.”

When do you use < span > tags?

HTML < span > tags are inline containers. They may define a part of the document or apply styles to inline elements. < span > tags are similar to < div > tags. However, we use < span > tags as inline containers whereas < div > tags are used at block level. We can style a < span > tag using a CSS or control it with JavaScript. For example, to display enclosed text in red color, we can code it as < span style=”color:red” >text< /span >.

HTML Interview Questions

Is it mandatory to close all the tags in HTML?

No, it is not mandatory to close all the tags in HTML.

Some HTML tags are unclosed that don’t need a closing tag. For example, <img>, <br>, <hr>

What is meant by head in HTML?

In HTML, head contains meta-information about the document.

The <HEAD> tag appears first in a document above the <BODY> tag.

This tag is a container for all the head elements.

Following are the tags which include inside the <HEAD> tag,

  • <title>
  • <style>
  • <base>
  • <script>
  • <link>
  • <meta>
  • <no script>

What Is The Simplest Html Page?

HTML Code:
<HTML>
<HEAD>
<TITLE>This is my page title! </TITLE>
</HEAD>
<BODY>
This is my message to the world!
</BODY>
</HTML> 

Advance HTML Interview Questions

What Is Everyone Using To Write Html?

Everyone has a different preference for which tool works best for them. Keep in mind that typically the less HTML the tool requires you to know, the worse the output of the HTML. In other words, you can always do it better by hand if you take the time to learn a little HTML.

How Can I Use Tables To Structure Forms?

Small forms are sometimes placed within a TD element within a table. This can be a useful for positioning a form relative to other content, but it doesn’t help position the form-related elements relative to each other. 
To position form-related elements relative to each other, the entire table must be within the form. You cannot start a form in one TH or TD element and end in another. You cannot place the form within the table without placing it inside a TH or TD element. You can put the table inside the form, and then use the table to position the INPUT, TEXTAREA, SELECT, and other form-related elements, as shown in the following example. 

<FORM ACTION=”[URL]”>
<TABLE BORDER=”0″>
<TR>
<TH>Account:</TH>
<TD><INPUT TYPE=”text” NAME=”account”></TD>
</TR>
<TR>
<TH>Password:</TH>
<TD><INPUT TYPE=”password” NAME=”password”></TD>
</TR>
<TR>
<TD> </TD>
<TD><INPUT TYPE=”submit” NAME=”Log On”></TD>
</TR>
</TABLE>
</FORM>

How to Check For Errors?

HTML validators check HTML documents against a formal definition of HTML syntax and then output a list of errors. Validation is important to give the best chance of correctness on unknown browsers (both existing browsers that you haven’t seen and future browsers that haven’t been written yet). 

HTML checkers (linters) are also useful. These programs check documents for specific problems, including some caused by invalid markup and others caused by common browser bugs. Checkers may pass some invalid documents, and they may fail some valid ones. 

All validators are functionally equivalent; while their reporting styles may vary, they will find the same errors given identical input. Different checkers are programmed to look for different problems, so their reports will vary significantly from each other. Also, some programs that are called validators (e.g. the “CSE HTML Validator”) are really linters/checkers. They are still useful, but they should not be confused with real HTML validators. 

When checking a site for errors for the first time, it is often useful to identify common problems that occur repeatedly in your markup. Fix these problems everywhere they occur (with an automated process if possible), and then go back to identify and fix the remaining problems. 

Link checkers follow all the links on a site and report which ones are no longer functioning. CSS checkers report problems with CSS style sheets.

HTML Interview Questions

Do I Have To Memorize A Bunch Of Tags?

No. Most programs that help you write HTML code already know most tags, and create them when you press a button. But you should understand what a tag is, and how it works. That way you can correct errors in your page more easily.

List Various Font Attributes Used In Style Sheet.

font-style
font-variant
font-weight
font-size/line-height
font-family
caption
icon
menu
message-box
small-caption
status-bar

What Are Style Sheet Properties?

CSS Background
CSS Text
CSS Font
CSS Border
CSS Outline
CSS Margin
CSS Padding
CSS List
CSS Table

Advance HTML Interview Questions

What Are The Various Style Sheets?


Inline, external, imported and embedded are the different types of style sheets.

 What Is Extensible Stylesheet Language (xsl)?

XSL is a proposed styling language for formatting XML (eXtensible Markup Language) documents. The proposal was submitted to the W3C by Microsoft, Inso, and ArborText.

Document Style Semantics And Specification Language (dsssl)?

Document Style Semantics and Specification Language is an international standard, an expression language, a styling language for associating processing (formatting and transformation) with SGML documents, for example XML.

HTML Interview Questions

Can You Use Someone Else’s Style Sheet Without Permission?

This is a somewhat fuzzy issue. As with HTML tags, style sheet information is given using a special language syntax. Use of the language is not copyrighted, and the syntax itself does not convey any content – only rendering information.

It is not a great idea to reference an external style sheet on someone else’s server. Doing this is like referencing an in-line image from someone else’s server in your HTML document. This can end up overloading a server if too many pages all over the net reference the same item. It can’t hurt to contact the author of a style sheet, if known, to discuss using the style sheet, but this may not be possible. In any case, a local copy should be created and used instead of referencing a remote copy.

Do URL’s Have Quotes Or Not?

Double or single quotes in URLs are optional. The tree following examples are equally valid:

BODY {background: url(pics/wave.png) blue}
BODY {background: url(“pics/wave.png”) blue}
BODY {background: url(‘pics/wave.png’) blue}

Do Any WYSIWYG Editors Support The Creation Of Style Sheets? Any Text-based Html Editors?

As support for CSS in browsers has matured in the last year, both WYSIWYG and Text-based HTML editors have appeared that allow the creation or the assistance of creating Cascading Style Sheet syntax. There are now at least two dozen editors supporting CSS syntax in some form. The W3C maintains an up-to-date list of these WYSIWYG and text-based editors.

Advance HTML Interview Questions

 Must I Quote Property Values?

Generally no. However, values containing white spaces, e.g. font-family names should be quoted as white spaces surrounding the font name are ignored and whitespaces inside the font name are converted to a single space, thus font names made up of more than one word (e.g.) ‘Times New Roman’ are interpreted as three different names: Times, New and Roman.

What Is The Percentage Value In ‘font-size’ Relative To?

It is relative to the parent element’s font-size. For example, if the style sheet says:

H1 {font-size: 20pt;}
SUP {font-size: 80%;}

…then a <SUP> inside an <H1> will have a font-size of 80% times 20pt, or 16pt.

Can I Attach More Than One Declaration To A Selector?

Yes. If more than one declaration is attached to a selector they must appear in a semi colon separated list, e.g.;

Selector {declaration1; declaration2}
P {background: white; color: black}

HTML Interview Questions

How To Style Forms?

Forms and form elements like SELECT, INPUT etc. can be styled with CSS – partially.

Checkboxes and Radio buttons do not yet accept styles, and Netscape 4.xx has certain issues, but here is a tutorial that explains the application of CSS Styles on Form Elements.

How To Style Table Cells?

Margin, Border and Padding are difficult to apply to inline elements. Officially, the <TD> tag is a block level element because it can contain other block level elements (see Basics – Elements). 

If you need to set special margins, borders, or padding inside a table cell, then use this markup:

<td>
yourtext </div></td> 
to apply the CSS rules to the div inside the cell. </p>

How Far Can CSS Be Taken Beyond The Web Page–that Is, Have Generalized Or Non-web Specific Features For Such Things As Page Formatting Or Type Setting?

Yes, it’s possible to take CSS further in several directions. W3C just published a new Working Draft which describes features for printing, e.g., footnotes, cross-references, and even generated indexes.

Another great opportunity for CSS is Web Applications. Just like documents, applications need to be styled and CSS is an intrinsic component of AJAX. The “AJAX” name sounds great.

Advance HTML Interview Questions

How Frustrating Is It To Write A Specification Knowing That You’re At The Browser Vendors’ Mercy?

That’s part of the game. I don’t think any specification has a birthright to be fully supported by all browsers. There should be healthy competition between different specifications. I believe simple, author-friendly specifications will prevail in this environment.

Microformats are another way of developing new formats. Instead of having to convince browser vendors to support your favorite specification, microformats add semantics to HTML through the CLASS attribute. And style it with CSS.

What Is Initial Value?

Initial value is a default value of the property, that is the value given to the root element of the document tree. All properties have an initial value. If no specific value is set and/or if a property is not inherited the initial value is used. For example the background property is not inherited, however, the background of the parent element shines through because the initial value of background property is transparent. 

<P style=”background: red”>Hello <strong>World </strong> </P>
Content of the element P will also have red background

Why Shouldn’t I Use Fixed Sized Fonts ?

Only in very rare situations we will find users that have a “calibrated” rendering device that shows fixed font sizes correct. This tells us that we can never know the real size of a font when it’s rendered on the user end. Other people may find your choice of font size uncomfortable. A surprisingly large number of people have vision problems and require larger text than the average. Other people have good eyesight and prefer the advantage of more text on the screen that a smaller font size allows. What is comfortable to you on your system may be uncomfortable to someone else. Browsers have a default size for fonts. If a user finds this inappropriate, they can change it to something they prefer. You can never assume that your choice is better for them. So, leave the font size alone for the majority of your text. If you wish to change it in specific places (say smaller text for a copyright notice at the bottom of page), use relative units so that the size will stay in relationship to what the user may have selected already. Remember, if people find your text uncomfortable, they will not bother struggling with your web site. Very few (if any) web sites are important enough to the average user to justify fighting with the author’s idea of what is best.

HTML Interview Questions

What Browsers Support Style Sheets? To What Extent?

Microsoft’s Internet Explorer version 3.0 Beta 2 and above supports CSS, as does Netscape Communicator 4.0 Beta 2 and above and Opera 3.5 and above. Take note that the early implementations in these browsers did not support ALL of the properties and syntax described in the full CSS1 specification and beyond. Later versions have been getting much closer to full CSS1 compliance, but then comes the next hurdle – CSS2…it was such a big leap over CSS1 that it has taken the browsers years to come close to supporting a majority of CSS2’s features. Mozilla and Opera’s current versions both offer excellent CSS standards compliance. The Macintosh version of Internet Explorer is said to be very impressive in its CSS capabilities as well, but PC IE lags behind these implementations. Quite a few other implementations of CSS now exist in browsers that are not as widely-used (such as Amaya, Arena and Emacs-W3), but coverage of features in these documents currently only covers Internet Explorer, NCSA Mosaic, Netscape and Opera browsers.

Is There Anything That Can’t Be Replaced By Style Sheets?

Quite a bit actually. Style sheets only specify information that controls display and rendering information. Virtual style elements that convey the NATURE of the content can not be replaced by style sheets, and hyperlinking and multimedia object insertion is not a part of style sheet functionality at all (although controlling how those objects appear IS part of style sheets functionality.) The CSS1 specification has gone out of its way to absorb ALL of the HTML functionality used in controlling display and layout characteristics. For more information on the possible properties in CSS, see the Index DOT Css Property Index.

Rule of Thumb: if an HTML element or attribute gives cues as to how its contents should be displayed, then some or all of its functionality has been absorbed by style sheets.

How Can I Make A Page Look The Same In E.g. Ns And Msie ?

The simple answer is, you can’t, and you shouldn’t waste your time trying to make it exactly the same. Web browsers are allowed, per definition, to interpret a page as they like, subject to the general rules set down in the HTML and CSS specifications. As a web author you can not have a prior knowledge of the exact situation and/or medium that will be used to render your page, and it’s almost always rather counterproductive to try to control that process. There is no necessity for a well-written page to look the same in different browsers. You may want to strive to ensure that it looks good in more than one browser, even if the actual display (in the case of graphical browsers) comes out a bit different. “Looking good” can be achieved by adopting sensible design and guidelines, such as not fixing the size or face of your fonts, not fixing the width of tables, etc… Don’t fight the medium; most web users only use one browser and will never know, or bother to find out, that your page looks different, or even “better”, in any other browser.

Advance HTML Interview Questions

How Do I Write My Style Sheet So That It Gracefully Cascades With User’s Personal Sheet ?

You can help with this by setting properties in recommended places. Style rules that apply to the whole document should be set in the BODY element — and only there. In this way, the user can easily modify document-wide style settings.

What Can Be Done With Style Sheets That Can Not Be Accomplished With Regular Html?

Many of the recent extensions to HTML have been tentative and somewhat crude attempts to control document layout. Style sheets go several steps beyond, and introduces complex border, margin and spacing control to most HTML elements. It also extends the capabilities introduced by most of the existing HTML browser extensions. Background colors or images can now be assigned to ANY HTML element instead of just the BODY element and borders can now be applied to any element instead of just to tables. For more information on the possible properties in CSS, see the Index DOT CSS Property Index.

How Do I Quote Font Names In Quoted Values Of The Style Attribute?

The attribute values can contain both single quotes and double quotes as long as they come in matching pairs. If two pair of quotes are required include single quotes in double ones or vice versa:

<P STYLE=”font-family: ‘New Times Roman’; font-size: 90%”>
<P STYLE=’font-family: “New Times Roman”; font-size: 90%’>

It’s been reported the latter method doesn’t work very well in some browsers, therefore the first one should be used.

HTML Interview Questions

Styles Not Showing?

There are different ways to apply CSS to a HTML document with a stylesheet, and these different ways can be combined:

* inline (internal) (Deprecated for XHTML)
* embedded (internal)
* linked (external) and
* @import (external)

Note: An external stylesheet is a text file that contains only CSS Styles. HTML comments are not supposed to be in there and can lead to misinterpretation (> is the CSS “Child” selector!).

HTML Part 1HTML Part 3
Back to top