Top 37 Best Html Interview Questions And Answers 2023

Html Interview Questions

1. What is HTML?

Ans.

HTML stands for Hyper Text Markup Language. It is a language of World Wide Web. It is a standard text formatting language which is used to create and display pages on the Web. It makes the text more interactive and dynamic. It can turn text into images, tables, links.

2. What are Tags?

Ans.

HTML tags are composed of three things: an opening tag, content and ending tag. Some tags are unclosed tags.

–

HTML documents contain two things:

–

content, and

tags

When a web browser reads an HTML document, the browser reads it from top to bottom and left to right. HTML tags are used to create HTML documents and render their properties. Each HTML tags have different properties.

–

Syntax-

<tag> content </tag>

Content is placed between tags to display data on the web page.

3. Do all HTML tags have an end tag?

Ans.

No. There are some HTML tags that don’t need a closing tag. For example: <image> tag, <br> tag.

4. What is formatting in HTML?

Ans.

The HTML formatting is a process of format the text for a better look and feel. It uses different tags to make text bold, italicized, underlined.

5. How many types of heading does an HTML contain?

Ans.

The HTML contains six types of headings which are defined with the <h1> to <h6> tags. Each type of heading tag displays different text size from another. So, <h1> is the largest heading tag and <h6> is the smallest one. For example:

–

<h1>Heading no. 1</h1>

<h2>Heading no. 2</h2>

<h3>Heading no. 3</h3>

<h4>Heading no. 4</h4>

<h5>Heading no. 5</h5>

<h6>Heading no. 6</h6>

6. How to create a hyperlink in HTML?

Ans.

The HTML provides an anchor tag to create a hyperlink that links one page to another page. These tags can appear in any of the following ways:

–

Unvisited link – It is displayed, underlined and blue.

Visited link – It is displayed, underlined and purple.

Active link – It is displayed, underlined and red.

7.Which HTML tag is used to display the data in the tabular form?

Ans.

The HTML table tag is used to display data in tabular form (row * column). It also manages the layout of the page, e.g., header section, navigation bar, body content, footer section. Here is the list of tags used while displaying the data in the tabular form:

–

Tag Description

<table> It defines a table.

<tr> It defines a row in a table.

<th> It defines a header cell in a table.

<td> It defines a cell in a table.

<caption> It defines the table caption.

<colgroup> It specifies a group of one or more columns in a table for formatting.

<col> It is used with <colgroup> element to specify column properties for each column.

<tbody> It is used to group the body content in a table.

<thead> It is used to group the header content in a table.

<tfooter> It is used to group the footer content in a table.

8. What are some common lists that are used when designing a page?

Ans.

There are many common lists which are used to design a page. You can choose any or a combination of the following list types:

–

Ordered list – The ordered list displays elements in numbered format. It is represented by <ol> tag.

Unordered list – The unordered list displays elements in bulleted format. It is represented by <ul> tag.

Definition list – The definition list displays elements in definition form like in dictionary. The <dl>, <dt> and <dd> tags are used to define description list.

9. What is the difference between HTML elements and tags?

Ans.

HTML elements communicate to the browser to render text. When the elements are enclosed by brackets <>, they form HTML tags. Most of the time, tags come in a pair and surround content.

10. What is semantic HTML?

Ans.

Semantic HTML is a coding style. It is the use of HTML markup to reinforce the semantics or meaning of the content. For example: In semantic HTML <b> </b> tag is not used for bold statement as well as <i> </i> tag is used for italic. Instead of these we use <strong></strong> and <em></em> tags.

11. What is an image map?

Ans.

Image map facilitates you to link many different web pages using a single image. It is represented by <map> tag. You can define shapes in images that you want to make part of an image mapping.

Html CSS Interview Questions

Q1. What is CSS?

Answer:

CSS outline the style of an HTML webpage, it is a language by which we can set the behavior of an HTML webpage. It describes how the HTML content will be shown on screen.

–

CSS controls the layout of several HTML web pages. CSS is referred to as the Cascading Style Sheet.

Q2. Name all the modules which are used in the current version of CSS.

Answer:

There are several modules in CSS as stated below:

–

Selectors

Box Model

Backgrounds and Borders

Text Effects

2D/3D Transformations

Animations

Multiple Column Layout

User Interface.

Q3. Distinguish between CSS2 and CSS3.

Answer:

There are several differences between CSS2 and CSS3.

–

CSS3 is divided into two various sections which are called as a module. Whereas in CSS2 everything accedes into a single document with all the information in it.

CSS3 modules are supported almost on every browser and on the other hand modules of CSS and CSS2 are not supported in every browser.

In CSS3 we will find that many graphics related characteristics have been introduced like “Border-radius or box-shadow, flexbox.

In CSS3, a user can precise multiple background images on a webpage by using properties like background-image, background-position, and background-repeat styles.

Q4. Cite different types of CSS.

Answer:

There are three types of CSS as mentioned below.

–

External – These are written in separate files.

Internal – These are cited at the top of the web page code document.

Inline – These are written right next to the text.

Q5. Why is the external style sheet useful?

Answer:

External style sheet is very useful as we write all the styling codes in a single file and it can be used anywhere by just referencing the link of that external style sheet file.

–

So if we do any changes in that external file, then the changes can also be observed on the webpage. So we can say that it is very useful and it makes your work easy while working on larger files.

Q6. Explain the concept of Tweening.

Answer:

Tweening is the process in which we create intermediate frames between two images to get the appearance of the first image which develops into the second image.

It is mainly used for creating animation.

Q7. Define CSS image scripts.

Answer:

CSS image scripts is a group of images which is placed into one image.

It reduces the load time and request number to the server while projecting multiple images into a single web page.

Q8. Explain the term Responsive web design.

Answer:

It is a method in which we design and develop a web page according to the user activities and conditions which are based on various components like the size of the screen, portability of the web page on different device etc.

Hence it is done by using different flexible layouts and grids.

Q9. What are CSS counters?

Answer:

CSS counters are variables which can be incremented by rules of CSS that inspector track how many times the variable has been used.

Html Interview Questions And Answers

1. How to insert a copyright symbol on a browser page?

Ans.

You can insert a copyright symbol by using &copy; or &#169; in an HTML file.

2. How to create a nested webpage in HTML?

Ans.

The HTML iframe tag is used to display a nested webpage. In other words, it represents a webpage within a webpage. The HTML <iframe> tag defines an inline frame. For example:

–

<!DOCTYPE html>

<html>

<body>

<h2>HTML Iframes example</h2>

<p>Use the height and width attributes to specify the size of the iframe:</p>

<iframe src=”src=”questionsgems.com” height=”300″ width=”400″></iframe>

</body>

</html>

3. How do you keep list elements straight in an HTML file?

Ans.

You can keep the list elements straight by using indents.

4. Does a hyperlink only apply to text?

Ans.

No, you can use hyperlinks on text and images both. The HTML anchor tag defines a hyperlink that links one page to another page. The “href” attribute is the most important attribute of the HTML anchor tag.

Syntax

<a href = “………..”> Link Text </a>

5. What is a style sheet?

Ans.

A style sheet is used to build a consistent, transportable, and well-designed style template. You can add these templates on several different web pages. It describes the look and formatting of a document written in markup language.

6. Can you create a multi-colored text on a web page?

Ans.

Yes. To create a multicolor text on a web page you can use <font color =”color”> </font> for the specific texts you want to color.

7. Is it possible to change the color of the bullet?

Ans.

The color of the bullet is always the color of the first text of the list. So, if you want to change the color of the bullet, you must change the color of the text.

8. Explain the layout of HTML?

Ans.

HTML layout specifies a way in which the web page is arranged.

–

Every website has a specific layout to display content in a specific manner.

–

Following are different HTML5 elements which are used to define the different parts of a webpage.

–

<header>: It is used to define a header for a document or a section.

<nav>: It is used to define a container for navigation links

<section>: It is used to define a section in a document

<article>: It is used to define an independent, self-contained article

<aside>: It is used to define content aside from the content (like a sidebar)

<footer>: It is used to define a footer for a document or a section.

9. What is a marquee?

Ans.

Marquee is used to put the scrolling text on a web page. It scrolls the image or text up, down, left or right automatically. You should put the text which you want to scroll within the <marquee>……</marquee> tag.

10. How many tags can be used to separate a section of texts?

Ans.

Three tags are used to separate the texts.

–

<br> tag – Usually <br> tag is used to separate the line of text. It breaks the current line and conveys the flow to the next line

<p> tag – The <p> tag contains the text in the form of a new paragraph.

<blockquote> tag – It is used to define a large quoted section. If you have a large quotation, then put the entire text within <blockquote>………….</blockquote> tag.

11. How to make a picture of a background image of a web page?

Ans.

To make a picture a background image on a web page, you should put the following tag code after the </head> tag.

–

<body background = “image.gif”>

Here, replace the “image.gif” with the name of your image file which you want to display on your web page.

Html Interview Questions And Answers For Freshers

1. How do you add a copyright symbol on a HTML page?

Ans.

Copyright symbol can be either copied and pasted from other sources. Or, you can also add it by writing a small piece of code: &copy; or & #169; in the required page

2. What is a physical tag and logical tag in HTML?

Ans.

A Physical tag has physical text which is used to tell the browser how to display the text enclosed in the physical tag.

–

Example for the physical tags are: <big>, <b>, <i>

–

Logical tags are used to tell the meaning of the enclosed text in it. The example of the logical tag is <Important>….</Important> tag. When we enclose text in Important tag then it tell the browser that enclosed text is more important than other text.

3. What is a Fieldset?

Ans.

The <fieldset> is a tag in HTML that is used to group related elements in a form. It draws a box around the related elements.

4. What is the purpose of using alternative texts in images?

Ans.

The basic purpose of using alternative texts is to define what the image is about. During an image mapping, it can be confusing and difficult to understand what hotspots correspond to a particular link. These alternative texts come in action here and put a description at each link which makes it easy for users to understand the hotspot links easily.

5. What is grouping in HTML?

Ans.

Grouping is used to group several HTML controls like input, textarea, selects as well as labels ( <label>) within a web form. In HTML <fieldset> element is used for Grouping.

6. What is HTML and what is it used for?

Ans.

HTML is a widely used language that gives our webpage a structure. HTML stands for HYPERTEXT MARKUP LANGUAGE. HTML was created by Berners lee in 1991. A markup language is a set of markups tags. Every webpage is created in HTML. HTML documents are described in HTML tags.

7. Is there advantages of collapsing white spaces in HTML?

Ans.

Yes, Collapsing white spaces is one good way of writing HTML codes in an organized way. White spaces act similar to a single-spaced character and occupy the same size as rest of the characters. By collapsing multiple white spaces, we can indent lines of text and make the code more readable.

8. How many types of lists are available in HTML?

Ans.

In HTML, we have two types of lists unordered lists and ordered lists. Unordered list starts with <ul> tag and ends with </ul> tag. Ordered tag starts with <ol> and ends with </ol>. Each list item is written as <li></li>

Html Interview Questions And Answers For Experienced

1. How do you apply CSS styles to a web page?

Ans.

When you’ve got a good grasp of HTML, your interviewer may ask you some questions on how HTML works with CSS and JavaScript, to tie everything together. If you are planning on working as a front end developer, employers prefer some proficiency in all three languages.

–

CSS (Cascading Style Sheets) allows you to change the look of elements on the page, transforming it from a simple text document to a fully fledged website. We won’t go into too much detail on CSS here, but you can read our article on CSS interview questions for more.

–

There are three main ways to apply CSS styles to a webpage:

–

Inline styles

You can add a style attribute to almost any tag. Inside this attribute you can write your CSS rules.

–

<div style=”background-color: red;”>A container with a red background.</div>

A style block

You are able to define one or more style blocks inside the head section of your HTML document. Inside these blocks you can write your CSS rules. You will have to specify which elements on the page you’d like to style. In the below example, we’re targeting the <body> tag and an element with a class attribute equal to .button.

<head>

    <style>

         body {

             font-size: 16px;

         }

         .button {

             padding: 10px;

         }

    </style>

</head>

Link to a CSS file

By far the most recommended option is to link to a CSS file. This way you are able to keep the content (HTML) separate from the way you present that content (CSS). It also means you can use the same styles on multiple pages. To link to a CSS file, you will have to add a <link> tag to the <head> section in your document with an href attribute that specifies the location of the CSS file.

–

<head>

    <link rel=”stylesheet” href=”styles.css”>

</head>

2. What browsers support HTML5?

Ans.

All modern browsers support HTML5, however some older browsers do not. Luckily, most browsers will simply handle the new elements as inline elements. You can then use CSS to change certain elements to be displayed as block-level elements where needed.

3. Are there changes to DOCTYPE for HTML5?

Ans.

The DOCTYPE for HTML5 is simple. Once you’ve added this to your page, the browser will interpret everything else as HTML5.

–

<!DOCTYPE html>

4. What new features were added to HTML5?

Ans.

It introduced a number of semantic elements, which is to say elements that convey meaning. Some of the new semantic elements are <header>, <footer>, <section>, and <article> . They are semantic in that they are not just simple containers, but they tell the browser more about their contents.

–

There are additional form element types, like “number”, “date”, “calendar” and “range”. Video and audio elements have also been added, as well as new graphic elements, such as <svg> and <canvas>.

5. What do you know about HTML5?

Ans.

Throughout the history of the internet, there have been many versions of the HTML standard. The versions varied in features and how strict they were. In 2014, the official recommendation for HTML5 by the World Wide Web Consortium was released. It is a living standard, meaning new features can be added over time.