Top HTML Interview Questions & Answers

What is HTML?

HTML stands for Hypertext Markup Language. It is widely used markup language to create web pages over the internet. HTML tags are used to structure & display content on websites.

What is the difference between HTML Tags & Elements?

HTML Tags are the labels or entity that create web pages. Each tag provides special meaning for the content.

For example: <p> is paragraph tag.

HTML element is a combination of start tag, content and an end tag. Mostly, website content is written inside start tag ( <p>) and an end tag ( </p>).

For example: <p>This is sample content</p> represents HTML element.

What is the HTML page structure? Explain with example

A basic HTML page structure mainly consists of 3 HTML tags, <html>, <head>, <body> and <!DOCTYPE html> declaration.

A standard HTML page contains <!DOCTYPE html> in the begining. Then <html> tag starts. HTML Page title, style and javascript is included inside the <head> tag. And all main and visible page content is written inside <body> tag.

HTML Page Structure Example

<!DOCTYPE html>
<html>
 
<head>
  <title>This is a sample title</title>
</head>
 
<body>
This is sample page content
</body>
 
</html>

What is attribute in HTML?

Attributes provide additional information inside HTML tags. HTML attributes are specified in the opening tag in the form of attribute name and value.

For example, HTML images can have width and height attributes to define the width and height of the image. Similarly, HTML links or anchor tag use href attribute to provide link address.

Syntax: <img src="my-picture.jpg" width="400" height="400">

What is the difference between DIV, SPAN & Paragraph tag in HTML?

<div> tag is the most common element to define a division and section. This is a block element which means it adds a line break before and after the content inside. Mostly, <div> tag is used to create content boxes and layouts in a website.

<span> an inline element, it only takes the required space in the same line and does not add line breaks. This is helpful for when we need to apply some styles to inline elements such as image, links or highlight piece of text.

<p> tag is used to defines paragraphs. The content written in paragraph adds some space before and after each element just like any document paragraphs.

How to create a link to jump to a specific part of a page in HTML?

To insert a link to a specific section of the same page, use the <a> tag with the href attribute. In href, you need to provide hash (#) symbol and section id where we need to jump.

Links on the same page also known as HTML bookmarks.

Example of links to the same page

Often, we see a link on the bottom of the page which says something like “Back to Top”. When we click on it, page scrolls to the top. Here is a similar example:

<div id="header-section">This is header section content</div>
<a href="#header-section">Jump to Top Header Section</a>

What are different tags to list items in HTML?

There are 3 HTML Listing tags to display a list of items.

Ordered List:

HTML ordered list starts with the <ol> tag and items are listed in <li> tag. This is used when we need to provide list of items marked with numbers or similar format.

Example

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
</ol>

Unordered List:

HTML unordered list starts with the <ul> tag and items are listed in the same <li> tag. This is used when we need to provide list of items marked with bullets or similar symbols.

Example

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

Description List:

An HTML description list provides a list of terms, with a description of each term.

<dl>
  <dt>HTML</dt>
  <dd>HTML stands for Hypertext Markup Language</dd>
  <dt>Computer</dt>
  <dd>Computer is a machine or device for storing and processing data</dd>
</dl>

Most of the time, we only use Ordered and Unordered lists in HTML. Sometimes, we refer to another <datalist> tag but it has different use to list of pre-defined options for an <input> element. This is introduced in HTML5.

How do you insert an image into HTML?

We can use the <img> tags to insert image in an HTML page. The source (src) attribute specifies the image path (URL).

You need to use <img> tag inside <body> <img></body> tag.

Simple Example to insert image in HTML

<img src="folder-path/my-image.jpg" />

For more details please read: HTML Images Tutorial

What is the difference between inline and block elements in HTML?

In HTML, Inline elements placed in the same line and they take only required width. For example, link using <a> tag is displayed on the same line.

HTML block-level element always starts with a new line. These elements occupy the full width available on the screen. For example, paragraph inside <p> always start with a line break.

How do you insert a video in HTML?

In HTML, Video can be inserted using <video> tag. You need to specify video path in source tag under the <video>. Also, you can use width and height attributes directly in video tag.

Example of Video in HTML

<video width="600" height="400" controls>
  <source src="my-video.mp4" type="video/mp4">
</video>