Top 50 HTML Interview Questions and Answers For Fresher

HTML Interview Question  And Answer

HTML Interview Question And Answer HTML Interview Question And Answer

Q1) What is HTML?

HTML is a Hypertext Markup Language. This Markup Language is used for creating Static as well as Dynamic Web Pages or Websites and this website will display on a Web Browser as an Output. HTML allows us to create a web page that may include a table, heading, paragraph, image, link, form, and many more. The HTML document can be saved as (.html) or (.htm) respectively.

Q2) Explain the Structure of the HTML document.

HTML Structure-

<html>
	<head>
		<title></title>
	</head>
	<body>	
	</body>
</html>

Q3) What is HTML5?

The working of HTML5 is the Same as HTML language, HTML5 is also used for creating webpages. HTML5 is Markup language which is an upgraded version of HTML with some included features in it.

Q4) Explain the features of HTML5.

Features of HTML5-

Doctype declaration–

<! DOCTYPE HTML >. This tag is used for declaration purposes. It Helps the web browser to identify the given web page is written in the mark-up language.

Section-

Section tag is use to represent section in HTML document. Section may have document header, footer or other sections in the document. Section tag can be written as < section > </ section >

Header-

The header is used to provide a header section to the HTML document. The header section is defined at the top of the document. This tag can be written as < header ></ header >.

Footer-

Footer is used to providing a footer section to the HTML document. The Footer section is defined at the bottom of the document. This tag can be written as < footer ></ footer >.

Article-

This section is used to represent the independent or main content of a webpage.

Main-

The main tag is used to represent the main section of the document which may have the main content of the document. This tag can be written as < main ></ main >

figcaption-

This tag is used to give the caption to the image or videos which are embedded in the document. This tag can be written as < figcaption ></ figcaption >.

Q5) What are HTML Tags?

HTML Tag is considered as a root of the HTML document which is generally used to specify the HTML Document. The standard way to write HTML tags is writing a tag name inside (<) open-angle bracket and (>) close angle bracket. HTML tag can be closed by (/) slash symbol will be considered as a closing tag.

Syntax- < tagname >  </ tagname >

Q6) What is the Difference between HTML Element and HTML Tag?

HTML Element

HTML Tag

HTML Element means the content which is written inside the Start tag and End tag. HTML Element may include an attribute, properties and everything which can be used for formatting the document.

HTML Tag is the root of the HTML document which is used to mark the starting part and ending part of the HTML element.

HTML element starts with a start tag, some attribute or properties (which represents structure or expressions), End tag.

HTML Tag starts with an opening (<) angle bracket and ends with a closing (>) angle bracket. The HTML closing tag can be closed with the help of the (/) slash symbol.

Syntax- < tagname > content</ tagname >

Where,

< tagname >- Start tag.

< /tagname >- End tag.

Syntax- < tagname> </ tagname >

Q7) Explain the Heading tag and different types of heading tag?

A heading tag is used to provide different headings to the HTML document. There are total six heading tags which are used for displaying different heading with different size. Heading tag consists of heading which starts from < h1 > to < h6 >. < h1 > tag is used to represent the largest heading means the most important heading. < h6 > tag represents the smallest heading means the least important heading.

HTML Headings-

 

< h1 > Your first heading </ h1 >

< h2 > Your second heading </ h2 >

< h3 > Your third heading </ h3 >

< h4 > Your fourth heading </ h4 >

< h5 > Your fifth heading </ h5 >

< h6 > Your sixth heading </ h6 >

Q8) Explain the concept of HTML attribute and use of HTML attribute.

HTML Attribute is a concept of formatting or making some changes in HTML tag or HTML element by adding some extra features so that HTML tag can change their way of behavior and display different attributes. HTML Attributes are always defined under start tag or Opening Tag. The attribute consists of name/value like pairs such as name=” value”. HTML Attribute does not have a closing tag.

Examples of HTML attributes are given below –

  • < img src=”D:\html\images\nature.png” width=”700″ height=”500″ >
  • < a href=example.com>click here to go on link</a >
  • < body background=”D:\html\images\nature.png” >
  • < table width=”50%” border=”1″ bordercolor=”black” cellpacing=”2″ cellpadding=”2″ >
  • < input type=”text” Value=”abc” >

Q9) What is HTML comment?

HTML Comment is a concept of providing comments in the code so that the code will be easily understood by others. Comments are an exceptional part of the code means if you did not write a comment in the code then there will be no changes happen in the output. HTML Comments are written only for understanding purposes and cannot be displayed on a browser. HTML comment starts from (<!) open-angle bracket followed by an exclamation mark and ends with (–>).

Syntax– <! –HTML comment– >

Q10) What are the different types of lists used in HTML documents?

HTML language allows the user to represent and maintain the data or information or content which is to be in a sequential manner.HTML list is a concept of maintaining your data in a proper sequence means in an ordered way or unordered manner.

HTML lists supports three types of lists-

  • Ordered list.
  • Unordered list.
  • Definition list.

Q11) What is the Ordered list in HTML?

An ordered list is a concept in which the list item is arranged in an ordered format. It allows us to give a specific number or an alphabetical order list to the data items. Ordered list represented by < ol > open and </ ol >close tag.

Example-

  1. List item
  2. List item
  3. List item
  4. List item

Q12) What is an Unordered list in HTML?

Unordered list contains the data item which is not in the ordered format but in the bullet format. Unordered list represented by < ul > open and </ ul >close tag.

Example-

  • List item
  • List item
  • List item
  • List item

Q13) What is the Definition list in HTML?

A definition list is also known as a description list. Definition list contains the list of items which is arranged like a dictionary word. The words which are arranged in a dictionary-like in alphabetical order same arrange in a definition list at the same time this list is used to give the description along with the list items. Definition list represented by < dl > open and </ dl >close tag.

Example-

Bread

Coffee

Egg

Milk

Q14) Explain the concept of hyperlinks in HTML documents.

The concept of Hyperlink is used for providing links in the HTML document. Hyperlink or link can be provided by < a > anchor tag. HTML hyperlink allows the user to navigate through the link from one webpage to another.

There are three types of link in HTML document-

  • Visited link- Visited link is in underline and having purple color.
  • Unvisited link- Unvisited link represented in underline as well as in blue color
  • Active link- Active link represented in underline as well as in red color

Q15) What is the definition of Semantic Element in an HTML document?

Semantic element in HTML is use to provide a meaning to the content of your document. Semantic generally considered as a coding style so that for the same tag or content there will be a new approach to write a code. In the Semantic element bold tag < b > </ b > can be written as < strong ></ strong > strong tag. And italic tag < i ></ i > can be written as < em ></ em > tag.

Q16) Explain the HTML Layout.

HTML page layout is a better aspect of designing a webpage in a standard fashion. Layout elements at the proper section represent the better website. HTML page layout is useful for arranging an HTML element so that the website will look more attractive.

  • < header > – This Part of the webpage is very useful while designing the Header part of the webpage.
  • < nav > – nav represents navigation links. Navigation-link or nav is act as a container where the link will help to navigate within the webpage or external webpage.
  • < aside > – This is useful for representing the content like a sidebar. In the aside tag, only those content is mention which represents the content aside from the content.
  • < section > – This is use to define a header section of HTML document.
  • < article > – This section is used to represent the independent or main content of a webpage.
  • < footer > – The footer section is used to represent the footer element of the webpage.

Q17) Define a Style Sheet?

The use for style sheets is to make a standard, consistent, well-designed template. These templates can be added to a different website. Style sheets allow the user to format the website with the standard markup language so that the website will look good.

Q18) Define the marquee tag in the HTML document?

The marquee tag helps to scroll the content on a page. Marquee tag can scroll image as well as text from any direction like the right to left or top to bottom. If you want to scroll the text or image automatically then you need to put the text inside the marquee tag.

Syntax-< marquee >……</ marquee >

Q19) Explain the difference between a block-level element and an inline element?

Block Level Element

Inline Element

In HTML, the Block level element act as a container with blocks like structure, and the Block level element always starts from a new line.

The inline element always starts from where they are defined. In the inline element, it is easy to understand the working flow and structure of the document.

Block-level elements always have 100% width according to page size.

Inline element always used a space that is required.

Tags include-< div >, < img >, < section >, < form >, < nav >.

Tags include-< span >, < b >, < a >, < input >.

Q20) Which HTML tags are used to represent the data in a tabular form?

Below the lists of tags used in HTML Table-

Tag

Description

< table >

Table tag is used to define a Table in HTML Document.

< tr >

This tr means Table Row. The < tr >tag is use to represents table row in HTML Document.

< td >

This td means Table Cell. The < td >tag is use to represents table cell in HTML Document.

< th >

This th means Table Header. The < th >tag is used to represents the header cell in HTML Document.

< caption >

A caption tag is used for representing table caption.

< colgroup >

This tag is used for selecting more than one column in the table so that table content can be format easily.

< col >

This tag is generally used with colgroup tag to specify the column properties.

< tbody >

This tag is used to represents body content in the table.

< thead >

This tag is used to represents Table Header

< tfooter >

This tag is used to represents Table Footer

Q 21) Explain the concept of an Image map in an HTML document?

Image map tag is used for linking more than one Webpage with a single image. The image map tag can be written as :

< img src=”example.jpg” alt=”example” usemap=”#demo” >

 In this tag, you can define the standard shape of the image so that it is easy to map the different images with a single image.

Q22) Can we apply a hyperlink to a text?

A hyperlink can be applied to text as well as images. If you wish to apply a hyperlink to a text then the text should be mention in the anchor < a > tag. Anchor tag consists of href attribute which is generally used to give reference to the link of another web page. This attribute is used to navigate the current webpage with another one.

Syntax- < a href=”URL”> your text </ a >

Q23) Define Iframe tag in HTML document?

Iframe tag is used to create a nested webpage. A nested webpage means creating a webpage within a webpage. Iframe tag uses the concept of the nested webpage. Iframe tag can be define as < iframe > </ iframe >. In the iframe tag, you can provide a link via providing a URL or you can give the path of your local document via the link.

Example-

<!DOCTYPE html>
<html>
  <body>
    <h1>This is an example of iframe.</h1>

    <iframe
      src="https://geeky4u.com/"
      title="Geeky4u.com is a online learning platform.">
    </iframe>
  </body>
</html>

Q24) Differentiate between DIV and SPAN tags in HTML documents.

DIV

SPAN

The DIV element is acts like a block element.

SPAN element is acts like an inline element.

The DIV element is used as a large chunk of data used in HTML.

SPAN element is used as a small chunk of data used in HTML or a small paragraphs.

DIV tag contains SPAN tag. If you want to declare the SPAN tag then you should declare in the DIV tag.

SPAN tag is declared inside a DIV tag

Q25) What is the concept of alt attribute in HTML document?

The concept of the alt attribute is to define alternate text within the HTML document. This attribute is used in the context of the image tag. When you insert an image tag into the document but if in case the image will not display on the browser then in such a situation alt attribute is used. The alt attribute gives us extra information of an image that is mention in the document.

Q26) How you can insert a picture as a background image on a web page?

In an HTML document, you can add a picture as a background image to a webpage. For adding a background image, it is important to add background property in the body tag.

Example-

<body background ="image 1.jpg">

In the above example, image1.jpg is an image file.

Q27) Define Empty element in HTML document?

Empty elements are considered as an element with no content, no properties, no attribute in it. The empty element does not have a closing tag. Only a single element is declared within the tag. For Example- < br >, < hr > etc.

Q28) Explain the uses of the SPAN tag in the document.

Uses of span tag-

  • The span tag is used for formatting very small and important content within a large text.
  • The span tag is used for Highlighting the important text.
  • This tag can be used to give color to the text.
  • This tag can be used to give background color to the text.

Q29) What is inline CSS?

The inline attribute is a concept of adding style attribute in the HTML element. While adding the HTML attribute we need to add the style attribute into the HTML start tag. Similar to the style attribute you can declare inline CSS in an HTML document.

Q30) What is internal and embedded CSS?

Internal tag is used for defining style on the HTML page. This is used within the head section of the HTML document. For declaring internal CSS, you need to create a separate style tag outside the body tag. In the style tag, you can add special attributes that are defined and declare within two curly brackets along with the start tag.

Q31) Explain the concept of External CSS in the HTML documents.

External style CSS is used for providing the style attribute through the link which is provided into the HTML head by using an external style tag. HTML Style External style attribute is used for providing links into the head tag and by using this attribute HTML page will define style on different pages.

Q32) What will happened if you run the external CSS file on a browser?

External CSS always used as a reference link in the HTML document. External CSS file should be called in the HTML document so that whatever the properties are defined in the external CSS file must be applied on the main web page. If you run only an external CSS file on a browser then the file will not give any output.

Q33) What is the HTML ID attribute?

HTML ID is a concept of representing the unique id element in the document. The id attribute is used by CSS and JavaScript. Generally, the Id attribute is used in the division for calling the div function in the document. This id attribute can be represented by the # symbol along with the name of the Id attribute.

Syntax-

< Style >

#name-of-id {

Property: value

}

< html tag id=”name of id” ></ html end tag >

</ style >

Q34) Explain cell spacing and cell padding in HTML Table?

Cell spacing is a concept that is used to give a space between two cells in the table. Cell padding is a concept that is used to give a space between content in the table and the table border.

Example-                                                              

< table border cellspacing=3 >

< table border cellpadding=4 >

Q35) Difference between HTML and XHTML?

HTML

XHTML

HTML is a hypertext markup language.

XHTML extensible markup language.

HTML is used for making static web pages.

XHTML uses for making dynamic web pages.

HTML is not supported by all modern browsers.

XHTML is supported by all modern browsers.

Q36) What is a Button tag in HTML?

Button tag is used in the form tag as well as in a normal web page just to create a button that must be clickable. This tag is used to create “submit” as well as the “reset” button.

Syntax- < button name=”button” type=”button” > click here </ button >

Q37) Explain meta tag in HTML?

HTML Meta element is useful for defining very important data such as character set, keywords, or very important to describe the page. The output will not show any specific changes in the document but it is essential for the browser to understands the page structure. This information in the meta tag is useful for the website for search engine ranking purposes.

Syntax-

For defining character set- < meta charset=”UTF=8” >

Q38) What is a form tag in HTML?

HTML allows us to create a form. The form can be created by using a form tag. You can take different input from the user by using this tag. HTML form tag contains many elements like input, text area, select, button, label, etc.

Q39) Why active links and normal links are not the same?

By default, the Active link and Normal link both are in blue color. The best way to identify the active link is to mouse hover. If you hover the mouse on a link then easy to understand the changes in the active link and normal link to the browser.

Q40) Explain the concept of JavaScript in HTML?

The concept of JavaScript is used to make a website more dynamic, more interactive, user friendly. JavaScript code can be inserted into the HTML as well as in CSS so that the website will get into action. This programming language is used to update or to change the code of HTML and CSS. This language deals with calculating, manipulating, and validating the data.

Q41) What is the difference between HTML and JavaScript?

Sr. no

JavaScript

HTML

1.

JavaScript is a client-side scripting language.

HTML is a hypertext markup language that is used to design the webpages.

2.

JavaScript is used for making the webpages more dynamic and interactive.

HTML is a basic markup language so that is used to provide static content.

3.

JavaScript supports dynamic webpage so that it will help the user to make their website more interactive and user-friendly.

HTML also can provide good support to the user for making their websites but without JavaScript it would not be possible for the developers to create dynamic content.

4.

JavaScript is not compatible with the cross-browser.

HTML is compatible with cross-browser.

5.

It provides dynamic web pages.

It supports static web pages.

Q42) Define HTML < script > tag?

The script is used for client-side scripting purposes. In the < script > tag you can use a script and call the script by using an attribute called id attribute within the HTML document. This < script > tag also allows the file which is present in the external location then the attribute called as src attribute which is used to link a file that is present at some external file location into the present HTML document.

Q43) Explain the concept of HTML < noscript > tag?

Noscript tag is used for defining an alternate text to the script which is provided. This tag is used when the current browser will not support the JavaScript and unable to print the script then the text which is written in the NoScript tag will automatically call and print as an output.

Q44) Explain logical and physical tags in HTML

A logical tag use to describe the enclosed text within the tag. When you declare a text in the logical tag then the web page will focus only on that text. < strong > tag is the best example of a logical tag. Whatever the text you mention in the strong tag will be considered as important content within the page.

Example- < strong > your text </ strong >

The physical tag represents the overall content enclosed in the tag. Whatever the content enclosed in the tag will be considered as a physical tag

Example- < b ></ b >, < i ></ i >

Q 45) Explain how to apply JavaScript to a webpage?

The javaScript concept is used in the document to make the existing webpage more dynamic. For this, some functions need to be added to the document.

Example-

  <body>
    <h3> Script tag.</h3>
    <p>
      Here text call by id attribute which is define in TEST
      document in getElementByID.
    </p>
    <p id="TEST document"></p>
    <script>
      document.getElementById("TEST document").innerHTML = "Good Morning!";
    </script>
  </body>
  • < script > is a tag which is used for scripting purpose in a client-side scripting language.
  • The document is used here to define that the changes are happening only in the HTML document.
  • getElementById is used for defining the element in id.
  • innerHTMl is used for specifying that the changes are only occurring inside the HTML file one.

Q46) What happen if you did not define <! DOCTYPE HTML > in the document?

In HTML <! DOCTYPE html > is not considered as a tag it just used for declaration purpose. HTML is having many types HTML 4.01 strict, HTML 4.01 traditional XHTML etc. so <! DOCTYPE html > is used to give the instruction to the web browser that the document is HTML page.

Q 47) Can we change the color of a Bullet in the document?

Yes, we can change the color of a bullet in the document. The color of a bullet is associate with the color of a text so if you wish to change the color of a bullet then you need to change the color of a text.

Q48) Explain the concept of Responsive websites in HTML?

Responsive Web Design is a concept of creating Web Pages that are responsive to all devices. The web page should be responsive so that it is convenient for the user. Responsive Web Page supports all devices like mobile devices, tablets, personal computers, etc. Responsive web design helps the webpages so that webpage will adjust the size of the HTML Document with all the devices so that webpage will look attractive on all the devices.

Q49) How to make an HTML page Responsive?

Responsive Website is setting of Viewport into the meta elements so that the website can be resized, enlarge, shrink, etc. It is important to settle into the document while creating a webpage.

Syntax- < meta name=”viewport” >

Q50) How to provide File Path in HTML Document?

In an HTML document, a File path can be provided by using the src attribute. The src is a source attribute that is used for providing a file path to the HTML document. src attribute is useful for recognizing the path of the image so that browser can identify the correct path and print the image on the document.

Syntax- < img src=”path or link” >

Table of Contents