40 HTML5 interview questions and answers

HTML is the major language to start any web application. The job seekers who are searching web designer or web developer jobs have to face some common interview questions in their interview. 40 HTML interview questions and answers are explained in this article to help those readers.

#01 HTML stands for?

HTML stands for HyperText Markup Language that is used to design web pages and it is the language of the World Wide Web. It has pre-defined set of tags to create and format any web page. HTML documents are made up of two things: the content and the tags that is used to format the content properly.

#02 What are tags?

Most of the content of the HTML document are enclosed by starting and ending tags. Various types of tags are available in HTML to add text, image, audio, and video in the document. Some tags don’t have ending tag those are called empty tag. Each tag is declared by enclosing with less than symbol (<) and the greater than symbol (>). A slash symbol (/) is used in the closing tag.

For example:


<p>Hello World!</p>
<hr/>
<div>Hello World, again!</div>

Here, three tags are declared which are p, br and div.

hr tag is one type of empty that is used to create a horizontal line in the html document. No ending tag is added for this tag and the starting tag is closed by slash (/).

#03 Do all HTML tags come in a pair?

No. There are some tags in HTML that don’t have ending tag and these type of tags doesn’t contain any content also.

For example:


The <br> tag and <img> tags.

br tag is used to create a new line and img tag is used to add image in the HTML document.

#04 What are some of the common lists that can be used when designing a page?

You can insert any or a combination of the following list types:

– ordered
– unordered
– definition

#05 How do you insert a comment in HTML?

Comments in HTML begins with “<! –“ and ends with “– >”.

For example:


<!-- COMMENT -- >

Comment are used in the script to make the code more understable.

#06 Do all character entities display properly on all operating systems?

No, there are some character entities that cannot be displayed in all browsers of all types of operating systems, if the characters are not supported by the browser. These characters are displayed as little squares as output.

#07 Describe an image map?

Image map lets you to create links in the various portions of a single image. You have to define some particular shapes in the image that will be used for image mapping. The shape can be circle, rectangle or polygon.

For Example:


<img src="picture.gif" width="300" height="200" usemap="#imgmap">
<map name="imgmap">
<area shape="circle" coords="75,45,5" href="flower.htm" >
<area shape="rect" coords="10,5,90,150" href="bird.htm" >
</map>

Here, usemap attribute of img tag is used to link mapping portions of the image.

For irregular shape, you have to select polygonal shape from the image that will contains more than 4 co-ordinates values.

#08 Can attribute values be set to anything or are there specific values that they accept?

Some attribute values can be set to only predefined values. Other attributes can accept any numerical value that represents the number of pixels to set the size of HTML element.

For example:

The href attribute:

<a href="https://www.mywebsite.com">This is a link</a>

The width and height attributes:

<img src="img_example.jpg" width="400" height="800">

The alt attribute:

<img src="img_example.jpg" width="400" height="800" alt="Example image" >

#09 How do you create links to sections within the same webpage?

Links can be created using the <a> tag. Two types of links can created using a tag. These are hyperlink and intrapage link.

For example:

<a href=”a.html” >Link</a>

#10 What is the use of alternative text in image mapping?

When you use image maps, it can easily become confusing and difficult to determine which part is attachec with which links. Using alternative text lets, the user can identify each link.

The <map> element contains a number of <area> elements, that defines the clickable areas in the image map.

#11 Do older HTML files work on newer browsers?

Yes, most of the older files work on the newer browsers, though some features may not working properly.

#12) Can you apply hyperlink to text only?

No, hyperlinks can be apply in the text as well as images. That means you can convert an image into a link that will allow users to link to another page when clicked.

For example:


<a href=”link.html”><img src=”pic.jpg” /></a>

#13 If the operating system does not support the needed character, how can the symbol be represented?

If the operating system does not support a specific character, it is still possible to display that character by showing it as an image instead.

#14 How do you change the number type in the middle of a list?

The <li> tag includes two attributes – type and value. The type attribute can be used to change the numbering type for any list item. The value attribute can change the number index.

For example:


<ol>
<li>HTML</li>
<li>JavaScript</li>
<li type="A">CSS</li>
<li>Bootstrap</li>
</ol>

It is an ordered list and the default type of the list item is changed to alphabetic character in the third list item. The list will be printed as 1,2,C and 4. List type can be changed in the middle of the unordered list also.

#15 What is style sheet?

Style sheet is used to format looks of any web page. Now, style sheet is essential part of web design to make the web pages attractive for the visitors. Style tag and style arrtibute are used to add styling in the page.

#16 Are square bullet available in HTML?

Yes, with ordered lists, you can select to use some different list types, including roman numerals and alphabetical. The type attribute for unordered lists can be set to disc, square, or circle.

For Example:


<ul type="square">
<li>PHP</li>
<li>ASP</li>
<li>C#</li>
</ul>

Here, the default bullet will be replaced by square bullet. List items can contain new list, and other HTML elements, like links and images, etc.

#17 Can you create multi colored text in a webpage?

Yes, multicolor text can be created in a webpage by using font tag.With the font tag you can surround a single character or an entire word.

#18 What is the advantage of grouping multiple checkboxes together?

Grouping checkboxes together help to organize them. Checkbox buttons can have different name and do not need to belong to a group.

For example:


<input type="checkbox" name="interest" value="Painting"> Painting &nbsp; &nbsp; &nbsp;
<input type="checkbox" name="interest" value="Travelling">Travelling
&nbsp; &nbsp; &nbsp;
<input type="checkbox" name="interest" value="Programming"> Programming<br/>

Here, same value is used in the name attribute of each checkbox.Checkbox is used to select multiple data and radio button is used to select only one particular data.

#19 Is it permitted to set specific colors for table borders?

You can set a border color using style sheets, but the colors for a table that does not use style sheets will be the same as the text color.

For Example:


<table border="1" style="border-color:red">
<tr><td>Row 1 Column 1</td><td>Row 1 Column 2</td></tr>
<tr><td>Row 2 Column 1</td><td>Row 2 Column 2</td></tr>
</table>

Here, border color is set by using CSS. Border thickness and different border style of the table can be set by using style sheet.

#20 What other ways can be used to align images and wrap text?

Tables and style sheet can be used to position text and images.

#21 Can a single text link point to two different web pages?

No. The <a> tag can define only a single href attribute, and it can point to a single web page only.

#22 Can you change the color of bullets in a list?

Yes. If you emclose <li> tag and the first character of the list with <font> tags then the the bullet color, and the first character will be the color that is assigned in the color attribute of <font> tag color.

For Example:


<ul>
<font color="Red"><li>R</font>ose</li>
<li>Water Lily</li>
<li>Daisy</li>
</ul>

Font size and font family can be set by using size and face attributes of font tag.

#23 What are the limits of the text field size?

The default size for a text field is 3 characters. Minimum size of text field can be 1 and the maximum size value will determine by the browser width. Wf the size attribute is set to 0, the size will be set to the default size.

#24 Do <th> tags always need to come at the start of a row or column?

<tr> tag can be replaced by <th> tag. The text contained within the <th> tag is displayed as bold in the browser. <th> tags are mainly used for headings but <tr> tag can be used for heading.

#25 What is a marquee?

A marquee allows you to put a scrolling text in a web page. To do this, place whatever text you want to appear scrolling within the <marquee> and </marquee> tags.

For example:


<marquee width="65%" direction="left" height="150px">
Scrolling text from right to left
</marquee>

Here, the text ”scrolling text from right to left” will scroll from the right to left of the screen with defined height and width value.Any text can be scoll from left to right or up to down or down to up by using marquee tag.

#26 How do you create text on a webpage that will allow you to send an email when clicked?

To change text into a clickable link to send email, mailto is used as the value of href attribute of <a> tag.

For example:


<a HREF=”mailto:Email address”>Send email</a>

#27 Is <br> tags the only way to separate sections of text?

No. <br> tag is not only one way to separate lines of text. Other tags, like the <p> tag and <blockquote> tag, also separate sections of text. Blockquote tag is used to add large amount of text content in the HTML document.

#28 How does active link different from normal link?

The default color for normal and active links is blue. When any link get the focus then it is called active link and link without any focus or unvisited link is called normal link.

#29 Do style sheets limit the number of new style definitions that can be included within the brackets?

There is no limit for style definition. Multiple selectors can be declared by using comma as separator.

For Example:


p, h3
{
font-size:16px;
font-weight:300;
color:#FFF;
}

Here, three style properties are set for the tag p and h3. Tag name is used as selector in the above css code. You can use class name and id value of any tag as selector.

#30 What is the hierarchy that is being followed when it comes to style sheets?

Inline style get the highest priority. Embedded style gets the second priority and external style sheet get the last priority.

For example:


/*Embedded Style*/
<style>
h1
{
font-size:25px;
}
</style>

/*Inline style*/
<h1 style="font-size:15px">HEADING 1</h1></style>

Here, inline style will get priority and font size will be 15px.

#31 Can several selectors with class names be grouped together?

Yes You can define several selectors and class name with the same style definition by separating them with commas.

For Example:


div, p, .abc
{
background:#069;
}

Here, background color will be applied for all div and p tag, and which tag will use the class, ”abc”. You have use ’#’ symbol with id value of any tag to declare ID selector in CSS code.

#32 What happens if you open the external CSS file in a browser?

Browser cannot open style file because style file has a different extension. Using <link> tag external file can be attached with any HTML document.

#33 How do you make a picture into a background image of a web page?

background arrtibute of <body> tag can be used to set any picture into a background image of a web page.

For Example:


<body background = “image.gif” >

Replace image.gif with the name of your image file. This will take the picture and make it the background image of your web page. Background image of the page or any element can be set by using CSS code.

#34 Mention two new tags included in the HTML 5

<Video> and <Audio> are new tags which are included in HTML5 version. They are mainly used embed and play multimedia content in the web page without any third party plugin.

For example:


<video width="400" height="250" controls>
<source src="filename.mp4" type="video/mp4">
</video>

You have to set a valid mp4 filename in place of filename.mp4 to make the video tag active.

#35 Do you know which are two semantic tags are included in HTML5 version?

<article> and <section> tags are two new semantic tags are included in HTML5. Articles tag is used to organize multiple sections that may have multiple articles. A section tag can also contains multiple article tags.

For Example:


<section>
<h1>JavaScript Programming</h1>
<article>
<h2>Javascript Validation</h2>
<p>Read this article on javascript validation...</p>
</article>
<article>
<h2>Javascript Captcha</h2>
<p>Read this article on javascript captch...</p>
</article>
</section>

Here, two article parts are defined under one section.

#36 What is the use of Canvas element?

The canvas element helps to build charts, graphs, bypass Photoshop to create 2D images and place them directly into HTML5 code. You have to use JavaScript code to draw anything with canvas element.

#37 Mention two benefits of HTML5 Web Storage

Two main benefits of HTML5 Web Storage are:

  • It can store up to 10 MB data that is more than cookie..
  • It cannot be moved with the HTTP request and helps to increase the performance of the application.

#38 What are two types of Web Storage in HTML5?

Two storage types of HTML5 are:
Session Storage:
It stores data of the current session. When a new browser open then all previously stored data will be cleared automatically.
Local Storage:
When the browser closes then the data will not deleted automatically in local storage.

#39 What is the Application Cache in HTML5 and why it is used?

The Application Cache means that a web application stored in cache for future use. Data from the cache is accessible without internet connection.

Some advantages of Application Cache:

  1. Offline browsing – Website is accessible offline.
  2. Speed – Website works faster.
  3. Reduce the server load – server load can be reduced because the browser will download updated content from the server only.

#40 Explain five new input types provided by HTML5 for forms?

Five new input types provided by HTML5 are:

  1. Date: It is used for date input.
  2. datetime-local: It is used for date and time input without time zone.
  3. datetime: It is used for date and time input with time zone.
  4. month: It used to take month and year value from the user.
  5. email: This input field is used to take e-mail address as input.

Hope, this article will help the interviewees to get success in their HTML interview.