HTML Interview Questions

What is HTML?

HTML stands for Hyper Text Markup Language. It is a markup language for building web pages. It is a collection of tags which collectively construct a web page.

What are HTML Tags?

Tags are used to define element in a web page. It is written within opening and closing brackets.

Here are few examples of tags -

<h1>, <p>, <body>

There are two type of tags -

  • closed tags
<div>some content</div>
  • unclosed tags
<img src = "path" alt = "image" />

What are semantic and non-semantic tags?

Semantic tags are the one which has its own meaning and tells what type of data it renders. One the other hand, non-semantic tags has no meaning on its own and it does not tell the type of data it renders.

  • Semantic tags
<h1>, <p>, <main>, <header>, <footer>, <nav>
  • Non-semantic tags
<div>, <span>

For a website's SEO and accessibility, semantic tags are recommended

What is difference between div and span?

div is a block level element. It takes 100% width of the parent element. On the other hand span is an inline element and it takes only required width based on its content.

What are attributes?

Attributes are the properties that define how a tag will behave. Attributes are written inside tag with name and it's value.

<body style="color: red;">
<img src="path-to-image" alt="image" />
<script src="path-to-script"></script>

Here attributes are style, src, alt.

What is alt attribute?

alt is the attribute that provide a fallback text description when image is not viewable to user.

How do you write comments in HTML?

In HTML, you can write comments using <!-- -->

Here's an example

<body>
<!-- This is a comment -->
<h1>Some Text</h1>
</body>

Comments are ignored by browser

How to highlight text in HTML?

Texts can be highlighted using mark tag.

E.g.

<div>
    This is a <mark>highlighted</mark> text
</div>

What is Ordered List and Unordered List

Ordered List is used to display list items in a sequencial order Ordered List

Unordered List is used to display list items without any sequence Unordered List

What is <!DOCTYPE>?

It is a declaration which is recommened to add at the starting of file to inform browser about the type of document.

<!DOCTYPE html>

What is the difference between inline and block-level elements?

Block-level Elements Inline Elements
Takes full width Takes width that is required
Adjacents tags goes to next line Adjacent inline tags displays next to inline element
Eg: div, section, img Eg: span, input

You can turn inline element into block and vice versa by following code:

<!-- Inline to Block -->
<span style="display:block;"></span>

<!-- Block to Inline -->
<div style="display:inline;"></div>

How to add image to a web page?

To add an image, we can use <img> tag. It accepts an attribute called src which denotes the path to the image.

<img src="path-to-image" alt="Some description">

alt = alternative text that describes the image. Adding alt attribute is always recommended

What is hyper link and how do you add it to a webpage?

Hyperlink provides link to another document, file or another webpage. <a> tag is used to add hyperlink.

<a href="https://google.com">google</a>

This results in below output:

google

Hyperlinks can be added to other elements as well like image

What is an iframe?

iframe is used to display a webpage inside a website.

<iframe src="https://google.com"></iframe>

You can use iframe to embed youtube videos to your webpage

How to add a new line in html?

<br /> tag is used to add a new line in html.

some text<br />some text in new line

How to add a space in html?

&nbsp; is used to add a space in html.

some text&nbsp;some other text

How to add a horizontal line in html?

<hr /> is used to a horizontal line or horizontal rule. 

<h1>Heading 1</h1>
<hr />
<h2>Heading 2</h2>

How to add external style and script files in html?

We can add the above mentioned file in following ways:

external style

<link href="/path/style.css" rel="stylesheet">

external script

<script src="/path/script.js"></script>

What is a Form and how to add a Form in html?

Forms are used to collect data from user which can be sent to a server or simply to display it on the page. We can add form using <form> tag. Inside form tag, input controls are written to handle user inputs.

Eg:

<form>
    <label for="email">Email</label>
    <input type="text" id="email" name="email">
    <br />
    <label for="password">Password</label>
    <input type="password" id="password" name="password">
    <br />
    <button type="submit">Submit</button>
</form>

How to create a table in html?

Table can be created using <table> tag to display tabular data.

Eg:

<table>
    <tr>
        <th>Roll number</th>
        <th>Name</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Bruce</td>
    </tr>
    <tr>
        <td>2</td>
        <td>John</td>
    </tr>
    <tr>
        <td>3</td>
        <td>David</td>
    </tr>
</table>

<table> To add table

<tr> To add table row

<th> To add table heading

<td> To add table data

What is a title tag?

Title tags are used to display title of the web page.

Eg:

<!DOCTYPE html>
<html>
    <head>
        <title>Google</title>
    </head>
    <body>
        ...
    </body>
</html>

Output: title

What are meta tags?

Meta tags are used to provide information on meta data about a webpage. The data may include viewport, description, author etc. These details are used in SEO (Search Engine Optimization). Meta tags are written inside <head> tag.

Eg:

<head>
    <meta name="description" content="Some information about the webpage">
</head>

You can view details on meta data by viewing source of the webpage. Simple right click and select 'View page source'

Explain HTML5

HTML5 is the latest standard of HTML that provides common standard interface to display websites in different browsers. In HTML5, we have got new feature such as semantic tags like header, footer etc, canvas, drag and drop, web workers etc.

Normally, we refer it only as HTML instead of adding versions to the name