HTML Interview Questions and Answers

---

---

HTML stands for HyperText Markup Language and it is the building block of any web page. HTML was created by Berners-Lee in late 1991 but "HTML 2.0" was the first standard HTML specification which was published in 1995.

In this article we have created a list of mostly asked HTML questions in an interview. Questions are categorized into three parts based on the difficulties. We also have a separate article for HTML5 Interview Questions and Answers where we tried to focus on the features that included in HTML5.

List of HTML Interview Questions and Answers

• Basic HTML Questions and Answers for Beginners
• Intermediate HTML Questions and Answers
• Advanced HTML Interview Questions and Answers

 

Basic HTML Questions and Answers for Beginners

1. What is HTML?

HTML stands for HyperText Markup Language. It is a standard markup language for web pages and used to create content and structure of any web page. It is the building block of web pages. HTML was created by Berners-Lee in late 1991 but "HTML 2.0" was the first standard HTML specification which was published in 1995.

2. What is HTML Tag?

HTML tags are the fundamental elements of HTML used for defining the structure of the document. These are letters or words enclosed by angle brackets (< and >).

<div>example</div>

3. What is HTML Attribute?

HTML attributes provides additional information about the HTML elements. It is used to define the characteristics of an HTML element and is placed inside the element's opening tag. All attributes are made up of key & value pair except some attributes that does not require any value like disabled, required, etc.

<tag attribute="Value">...<tag>

4. What is the current version of HTML?

HTML5 is the current version of HTML. HTML was initially developed by Sir Tim Berners-Lee in late 1991 and was made publicly available in 1993.

You can refer to History and Evolution for history of HTML.

5. What is the difference between HTML and HTML5?

6. What are the List types in HTML?

HTML List is a collection of related information. In HTML, there are three types of lists which are as follows:

• Unordered List: Unordered lists are marked with bullet points, by using html <ul> & <li> tag we can create an unordered list.
• Ordered List: It display a collection of items that have a specific order or sequence. It uses numbers, alphabets etc. to display the list.
• Definition List: HTML definition lists defines a description list which displays it's elements in definition form in the dictionary. It can be used using <dl> along with <dt> and <dd>.

7. What is form in HTML?

HTML forms are simple form that collects data from the users and has has interactive controls and various input types such as text, numbers, email, password, radio buttons, checkboxes, buttons, etc. It can be created using <form>.

8. How to create a Login form in HTML?

We can create a login form in html using HTML forms. To create a login form, we need following elements:

• Input fields for storing name and password.
• A submit button to submit the login credentials.
• A Remember me checkbox to save the login credentials for next login.
• Forgot Password button in case user forgets the login credentials.

You can refer to Login Form article for step wise explanation for creating a login form.

9. What is the use of label tag inside the form element?

HTML label tag defines caption/label for input elements inside a form. It informs users of type of value to enter in the input field.

10. What are the elements that can be used inside of an HTML registration form?

There can be used various elements inside HTML registration form. Some of the elements are:

• Text input fields for personal details like name.
• Email input field for entering email id of user.
• Password input field for entering password.
• A submit button to submit the form.
• Check boxes for selecting multiple options.
• Radio buttons for selecting one option out of many.

You can refer to Registration Form article for example and stepwise understanding for creating a registration form.

11. What is the use of HTML <style> and <script> tags?

HTML <style> and <script> tags defines internal CSS and internal javascript respectively which lets users write CSS and javascript codes directly into HTML document.

12. What is the difference between ordered and unordered list?

13. What are the types of ordered list and unordered list?

Different types of ordered and unordered list are mentioned below:

• Ordered List: It includes numbers, lowercase letters, uppercase letters, lowercase roman numbers and uppercase roman numbers.
• Unordered List: It includes disc, circle and square.

14. Is there any alternative of HTML?

There exists alternatives of HTML like:

• XML: Used for storing and transporting data across different systems and allows custom tags.
• Haml:It simplifies writing HTML code by eliminating closing tags and uses indentation-based syntax which improves readability.
• Markdown: It is used for formatting text like headers, links, lists without use of HTML.

Even after these alternatives exist, it is not possible to completely replace HTML as HTML is still used in these markup languages.

15. Are <b> and <strong> tags same? If not, then why?

Both the tags <b> and <strong> are used for making the text bold but they are not the same. Here are few differences mentioned below :

16. How to add comments in HTML code?

In HTML, comments are added using <!-- -->. Anything written between <!-- --> is treated as a comment. It can be used for both single and multi-line comments. For example: <!-- This is a comment -->

Note: HTML comments are used only for documentation purpose, it does not appear in web page.

17. Is it necessarily needed to close each tag of HTML?

It is always good practice to close the tags but is not necessarily needed to close each tag. Tags can be paired tags or self-closing tags.

• Paired Tags: Tags which require both opening and closing tags. For example: <div></div>, <p></p> etc.
• Self-Closing Tags: Tags which don't requires a closing tag. For example: <img>, <input>.

18. Why we use attribute in the opening tag rather than the closing tag?

HTML attributes are not used in closing tag because the closing tag marks the end of the element and it is not responsible for any information about an element. Attributes in opening tag provides extra information about element and browser can apply the attributes immediately so that web page can be seen as we wan it to be displayed.

19. What are the self closing tags in HTML?

Self closing tags are the tags which only have opening tag. These tags do not require a closing tag and also known as void elements or empty elements. Examples: <img>, <input>, <br>, <hr> and <link>.

20. What are the block elements in HTML?

Block elements are the elements which occupies the whole available width of the container and always starts on new line. Some of the block elements are: <div>, <p>, <article>, <blockquote>, <aside>, <form> and <hr>.

Intermediate HTML Questions and Answers

1. What are the HTML Entities?

HTML Entities represents reserved characters in HTML or include special characters and symbols. It also displays characters that are unavailable on a standard keyboard. Entities start with ampersand('&') and end with semi column(';). Examples: &gt; for greater than(>), &lt; for less than(<), &quot; for quotation mark(").

2. Does tags and elements are the same thing in HTML?

Tags and elements are two different things. Here is the differences between them:

3. How to create a 6*4 table?

We can create a 6*4 table having 6 rows and 4 columns using following steps:

• Create a table using <table> tag.
• Use <thead> tag to define the header section of the table. It consist of one row created using <tr> tag and <th> is used to to specify the header cell.
• After the header section, use <tbody> to define the table body.
• Inside table body, each row consist of four <td> which specifies the table column and is used to enter the table data.
• Repeat the above step to create five more rows.
• Now, we have a table with 1 header section and six rows with four columns.

Here is an example code of above mentioned steps to create a 6*4 table.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Table Example</title>
</head>
<body>
    <table border="1" align="center" bgcolor="#9cfc88">
        <caption>
            <strong>Example of 6*4 Table</strong>
        </caption>
        <thead>
            <tr>
                <th>Name</th>
                <th>City</th>
                <th>Phone</th>
                <th>Pin</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>User 1</td>
                <td>City 1</td>
                <td>9876543210</td>
                <td>804450</td>
            </tr>
            <tr>
                <td>User 2</td>
                <td>City 2</td>
                <td>9876543211</td>
                <td>804451</td>
            </tr>
            <tr>
                <td>User 3</td>
                <td>City 3</td>
                <td>9876543212</td>
                <td>804452</td>
            </tr>
            <tr>
                <td>User 4</td>
                <td>City 4</td>
                <td>9876543213</td>
                <td>804453</td>
            </tr>
            <tr>
                <td>User 5</td>
                <td>City 5</td>
                <td>9876543214</td>
                <td>804454</td>
            </tr>
            <tr>
                <td>User 6</td>
                <td>City 6</td>
                <td>9876543215</td>
                <td>804455</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

4. What is the advantage of collapsing whitespace?

Advantage of collapsing whitespace are as follows:

• HTML collapses multiple spaces, tabs, and line breaks into a single white space which helps developers to indent the HTML code to increase the readability of code.
• It simplifies text rendering and extra spaces doesn't affect the UI.

<!DOCTYPE html>
 <html lang="en">
 <head>
    <title>Whitespace Collapsing</title>
 </head>
 <body>
    <p>
        This       has     many       empty       spaces      
        but      will      collapse to one space in output.
    </p>
 </body>
 </html>

5. What is the semantic element in HTML?

Semantic elements is used to describe it's meaning to both browsers and developers. These elements describes the element's purpose and content type inside them. It makes a web page understandable for both developers, browsers, search engines and screen readers.

Examples of semantic elements: <header>, <footer>, <nav>, <section>, <main> etc.

6. How to create a hyperlink text in HTML?

To create a hyperlink text in HTML, we use anchor tag. Text written between <a></a> tags create a hyperlink text where href attribute is used to specify the url.

Here is an example to create a hyperlink text:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Hyperlink Text</title>
</head>
<body>
    <a href="/index.htm" target="_blank">
        Tutorials Point
    </a>
</body>
</html>

7. What would happen if there is no text between the HTML tags?

If there is no text between HTML tags then output depends on type of tag we are using.

• For block level elements, there will be nothing to display on the screen but it will still take default space or according to specified styles.
• Self closing tags will perform their intended function as they don't require text like img tag is used to insert image specified in src attribute.

8. How to create a nested unordered list in HTML?

Nested unordered list refers to creating an unordered list inside an unordered list. Here are steps to create a nested unordered list:

• Create an unordered list using <ul> and <li>.
• Create another unordered list inside <li> element.

Here is an example of above mentioned steps.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Nested Unordered List</title>
</head>
<body>
    <ul>
        <li>First list item
            <ul>
                <li>1st child of 1st list item</li>
                <li>2nd child of 1st list item</li>
            </ul>
        </li>
        <li>Second list item
            <ul>
                <li>1st child of 2nd list item</li>
                <li>2nd child of 2nd list item</li>
            </ul>
        </li>
    </ul>
</body>
</html>

9. How to merge multiple cell of an HTML table?

We can merge multiple cell of an HTML table using rowspan or colspan attribute or both.

The rowspan attribute merges two or more rows while colspan attribute merges two or more columns of table. Here is an example implementing both rowspan and colspan attribute.

<!DOCTYPE html>
<html>
<body>
    <h2>Merging cells using rowspan and colspan</h2>
    <table border="1">
        <tr>
            <th>First Name </th>
            <th>Job role</th>
        </tr>
        <tr>
            <td>Tharun</td>
            <td rowspan="2">Content writer</td>
        </tr>
        <tr>
            <td>Akshaj</td>
        </tr>
        <tr>
            <td colspan="2">Welcome to the company</td>
        </tr>
    </table>
</body>
</html>

10. What are the different types of headings in HTML?

There are six levels of headings in HTML from <h1> to <h6>, where <h1> indicates the most important heading, and <h6> indicates the least important heading.

11. What are the values of input type attribute?

The following table shows values of input type attribute:

12. How to create a button in HTML?

In HTML, we can create a button using <button> tag or using type attribute of input tag.

Syntax for creating button using button tag :

<button>Click ME</button>

Syntax for creating button using input type attribute :

<input type="button" value="Click Me">

13. How to set an image as a background in HTML?

We can use background attribute of body tag to set an image as a background in HTML.

Syntax:

<body background="image.png">

14. Are HTML tags and attributes case-sensitive?

HTML tags and attributes are not case-sensitive. HTML div tag is same as Div or DIV. Here is an example:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Case-sensitive Example</title>
</head>
<body>
    <div>This div is in lowercase.</div>
    <DIV>This div is in uppercase.</DIV>
    <DiV>This div is mix of upper and lowercase.</Div>
</body>
</html>

15. What is the use of the target attribute in the <link> tag?

The target attribute in link tag specifies where to open the linked document specified in href attribute.

Advanced HTML Interview Questions and Answers

1. What is the difference between block and inline elements?

2. How do you add CSS to an HTML webpage?

CSS can be added to HTML in three ways which are mentioned below:

• Inline CSS: The style attribute must be placed within an HTML element. Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Inline css</title>
</head>
<body>
    <p style="background-color: #04af2f; color: white;">
        This example uses inline css to change 
        the background color and text color.
    </p>
</body>
</html>

Internal CSS: It requires the <style> element to be placed within an HTML file's head section. Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Internal css</title>
    <style>
        p {
            background-color: #04af2f; 
            color: white;
        }
    </style>
</head>
<body>
    <p>
        This example uses internal css to change 
        the background color and text color.
    </p>
</body>
</html>

External CSS: It requires the use of the <link> element within the head section of an HTML file. Example:

External CSS file: style.css

p {
    background-color: #04af2f; 
    color: white;
}       

HTML file

<!DOCTYPE html>
<html lang="en">
<head>
    <title>External css</title>
    <link rel="stylesheet" href="/style.css">
</head>
<body>
    <p>
        This example uses external css to change 
        the background color and text color.
    </p>
</body>
</html>

You can refer to HTML-Style Sheet tutorial for more information.

3. What hierarchy do the style sheets follow?

Style sheet follows following hierarchy:

Inline style takes the higher precedence than internal and external css. Second highest precedence is of internal css and external css has least precedence. This is the precedence order:

Inline style > Internal CSS > External CSS.

If any style is marked with !important, then it takes the highest precedence over inline CSS. So, the order becomes:

!important > Inline style > Internal CSS > External CSS.

You can refer to CSS Specificity for detailed understanding and examples.

4. What is the role of the <meta> tag in HTML?

HTML meta tag specifies metadata about HTML document and is placed inside head tag. Metadata is data about data which provides additional important information about a document.

5. What is the difference between an absolute and relative URL?

6. Why we should use alt on img element?

HTML alt attribute is used within an img element to provide a textual description of the image, which is displayed if the image fails to load.

7. What is the role of the action attribute in HTML forms?

The action attribute specifies the url where form data is to be sent after submission of form for processing the form inputs.

8. What is the role of the title attribute in HTML?

HTML title attribute is used to provide additional information about an element, usually displayed as a tooltip when the user hovers over the element.

9. What is the role of the method attribute in HTML forms?

HTML method attribute is used to define which HTTP method to use when submitting the form. It specifies how the form data should be sent to the server for processing. It has two values: GET and POST, where GET is the default value.

10. What is the difference between <link> tag and <a> tag?

11. How to navigate on the same page in HTML?

We can navigate on the same page in HTML using anchor tag. Here is a step wise process:

• Create a text hyperlink using anchor tag
• Assign id to the section where you want to navigate.
• In text hyperlink, set the href value to id of section where you want to navigate.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Navigation</title>
</head>
<body>
    <ul>
        <li><a href="#sec1">Jump to Section 1</a></li>
        <li><a href="#sec2">Jump to Section 2</a></li>
    </ul>
    <h4 id="sec1">This is section 1</h4>
    <p>
        HTML is a Standard Markup language for
        web pages. HTML stands for HyperText
        Markup Language and is used to create
        content and structure of any web page.
        If you think of the human body as a web
        page then HTML is the skeleton of the
        body. It is the building block of web
        pages. HTML was created by Berners-Lee
        in late 1991 but "HTML 2.0" was the
        first standard HTML specification
        which was published in 1995.
    </p>
    <h4 id="sec2">This is section 2</h4>
    <p>
        HTML is a Standard Markup language for
        web pages. HTML stands for HyperText
        Markup Language and is used to create
        content and structure of any web page.
        If you think of the human body as a web
        page then HTML is the skeleton of the
        body. It is the building block of web
        pages. HTML was created by Berners-Lee
        in late 1991 but "HTML 2.0" was the
        first standard HTML specification
        which was published in 1995.
    </p>
</body>
</html>

12. What are void elements?

Self closing tags are also known as void elements which do not have any content. Examples: <input>, <img>, <link> etc

13. How to change an inline element into a block-level element?

We can change an inline element into a block-level element using CSS display: block; property. Here is an example:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Inline to Block</title>
    <style>
        #inline {
            display: block;
        }
    </style>
</head>
<body>
    <span>This is inline element.</span>
    <span>This is also inline element.</span>
    <span id="inline">
        Inline to Block element using CSS display property
    </span>
    <span id="inline">
        Inline to Block element using CSS display property
    </span>
</body>
</html>

14. How to handle events in HTML?

To handle events in HTML, we need to add function in the HTML tag that will be be executed in JavaScript when any of the events in the HTML tag is fired or triggered. You can use addEventListener() method or inline event attributes like onclick, onkeypress, ondblclick etc. to add function to HTML tags.

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

HTML script tag is placed inside head when you want to render the script code before rendering the web page like loading libraries, APIs or frameworks as HTML follows top-down approach.

HTML script tag is placed inside body when you want script to load after the webpage has rendered, when you are not loading APIs or critical scripts and while manipulating DOM as it improves webpages loading time and performance.

Conclusion

As you got the idea of what kind of questions can be asked from HTML to know your knowledge in HTML. These HTML Interview Questions can be asked in your next interview from HTML.