What is HTML?
The full form of HTML stands for Hypertext Markup Language and it also allows the user to create and structure sections, paragraphs, headings, links, and blockquotes for web pages and applications.
How to set background image in HTML?
In order to add a background image on an HTML element you need to use two things:
- the HTML style attribute and
- the CSS background-image property:
<div style="background-image: url('img_boy.jpg');">How to comment in HTML?
Normally HTML comments are not being displayed in the browser. But these comments can help to document the HTML source code.
<!– Write your comments here –>
HTML Interview Questions
How to link CSS to HTML?
Before start with how to link CSS with HTML,
Let’s have a look at: What is CSS?
Full form of CSS stands for Cascading Style Sheets (CSS) which is used to format the layout of a webpage.
With the help of CSS, someone can control the color, font, the size of text, the spacing between elements and also how elements are positioned and laid out, what background images or background colors to be used, different displays for different devices and screen sizes, and so many more as well.
Types of CSS:
So there are three ways to add CSS to HTML documents :
- Inline – by putting the style attribute inside HTML elements
- Internal – by putting a <style> element in the <head> section
- External – by adding a <link> element to link to an external CSS file
The most common and used way to add CSS, is to have the styles in external CSS files.
Inline CSS
An inline CSS can be used to apply a unique and also different style to a single HTML element.
An inline CSS has the style attribute of an HTML element.
Now put the text color of the <h1> element to red, and the text color of the <p> element to blue:
<h1 style="color:red;">A Blue Heading</h1>
<p style="color:blue;">A red paragraph.</p>Internal CSS
An internal CSS can be used to define a style for a single HTML page.
An internal CSS is used to define in the <head> section of an HTML page and also within a <style> element.
Now let’s have an example of the text color of ALL the <h1> elements (on that page) to blue, and the text color of ALL the <p> elements to red.
The page will be displayed with “powderblue” background color:
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>External CSS
An external style sheet concept is normally used to define the style for many HTML pages.
In order to start using an external style sheet, put a link to it in the <head> section of each HTML page:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>How to align text in HTML?
Basically, if you want to align your text using HTML, then you need to use css and follow the proper process:
div.a {
text-align: center;
}
div.b {
text-align: left;
}
div.c {
text-align: right;
}
div.c {
text-align: justify;
}The text-align property discusses the horizontal alignment of text in an element.
How to create a table in HTML?
HTML tables help web developers to set the data into rows and columns.
The <table> tag is there in the HTML table.
Each table row can be defined with a <tr> tag.
Each header can be defined with a <th> tag.
Each data or the cell is defined with a <td> tag.
If your text is in the <th> elements then they will be bold and centered.
If your text is in the <td> elements then they will be regular and left-aligned.
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Hobbies</th>
</tr>
<tr>
<td>Ram</td>
<td>Kumar</td>
<td>Travelling</td>
</tr>
<tr>
<td>Shyam</td>
<td>Chadra</td>
<td>Reading books</td>
</tr>
</table>Advance HTML Interview Questions
How to convert HTML to PDF?
If you are working in a Windows system then open an HTML web page in Internet Explorer, Google Chrome or Firefox.
- On a Mac, open an HTML web page in Firefox
- Press on the “Convert to PDF” button in the Adobe PDF toolbar in order to get started with the PDF conversion
- Enter the filename and save your new PDF file in a desired location
How to change text color in HTML?
The HTML style attribute is the option to add styles to an element, like: Color, Font, Size, and more.
<!DOCTYPE html>
<html>
<body>
<p>I am normal</p>
<p style="color:red;">This is red</p>
<p style="color:blue;">This is blue</p>
<p style="font-size:50px;">I am Fat and big</p>
</body>
</html>How to change font color in HTML?
<font> tag, is used to specify the text color.
- <font Color=”Blue”>
- <font color=”rgb(128,128,0)”
- <font color=”#00FF00″>
<!DOCTYPE html>
<html>
<head>
<title>
Example of color attribute
</title>
</head>
<body>
<font color="orange">
<!-- The color attribute of font tag sets the color name 'orange' for the word Great Learningt-->
<center>
<h1>
Great Learning
</h1>
</center>
</font>
</body>
</html>HTML Interview Questions
How to change background color in HTML?
<!DOCTYPE html>
<html>
<body style="background-color:powderblue;">
<h1>This is a sample 1</h1>
<p>This is a sample 2.</p>
</body>
</html>What is doctype in HTML?
The HTML Document Type.
It is a way to give “information” to the browser about what will be the document type to expect. In HTML5, the <! DOCTYPE> declaration is simple: <! DOCTYPE html>
How to change font style in HTML?
<!DOCTYPE html>
<html>
<head>
<title>HTML Font</title>
</head>
<body>
<h1>Our Products</h1>
<p style = "font-family:georgia,garamond,serif;font-size:16px;font-style:italic;">
This is sample doc
</p>
</body>
</html>Advance HTML Interview Questions
How to add space in HTML?
In order to add a space in the webpage, go where you want to add the space and then use the spacebar. Normally, HTML displays one space between words, no matter how many times you have entered the space bar. Now if you Type to force an extra space. This is known as a non-breaking space because it helps to prevent a line break at its location.
What is DOM in HTML?
DOM stands for Document Object Model. When a web page is getting loaded that time the browser creates a Document Object Model of the page and it is constructed as a tree of Objects. HTML DOM is basically an Object Model for HTML.
HTML DOM describes:
- The HTML elements as objects
- Properties of all HTML elements
- Methods of all HTML elements
- Events of all HTML elements
How to add image in HTML from a folder?
- Copy the image from your images folder.
- Open up the index.
- Code: <img src=”” alt=”My test image“> is the HTML code that inserts an image into the page.
- Insert the file path into your HTML code between the double quote marks of the src=”” code.
HTML Interview Questions
How to create form in HTML?
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>How to create button in HTML?
<button type="button">Click Here!</button>How to run HTML program?
- Step 1: Open Notepad (PC) Windows 8 or later: …
- Step 1: Open TextEdit (Mac) Open Finder > Applications > TextEdit.
- Step 2: Write Some HTML. Write or copy the following HTML code into Notepad:
- Step 3: Save the HTML Page. Save the file on your computer. …
- Step 4: View the HTML Page in Your Browser
Advance HTML Interview Questions
How to save HTML file?
In order to save html file
- On the main menu
- click File > Save As
- Right-click within the HTML document
- click File > Save As
- In the Save As dialog box, specify the file name and location, then click Save
How to select multiple options from a drop down list in HTML?
<label for="Fruit">Choose a Fruit:</label>
<select name="Fruit" id="Fruit">
<option value="Mango">Mango</option>
<option value="Lichhi">Licchi</option>
</select>How to use div tag in html to divide the page?
The div tag stands for Division tag. This is used in HTML to make divisions of content in the web page like text, images, header, footer, navigation bar, etc. div tag has two parts like:
- open(<div>) and
- closing (</div>) tag and it is mandatory to maintain the tag.
The div is the most used tag in web page development because it has power to separate respective data in the web page and also a particular section can be created for particular data or function in the web pages.
- div tag is Block level tag
- Generic container tag
<html>
<head>
<title>div tag demo</title>
<style type=text/css>
p{
background-color:gray;
margin: 100px;
}
div
{
color: white;
background-color: 009900;
margin: 4px;
font-size: 35px;
}
</style>
</head>
<body>
<div > div tag demo 1 </div>
<div > div tag demo 2 </div>
<div > div tag demo 3 </div>
<div > div tag demo 4 </div>
</body>
</html>HTML Interview Questions
What is HTML used for?
HTML is used to make static web pages and HTML stands for markup language.
How to align text in center in HTML?
<!DOCTYPE html>
<html>
<head>
<title>New HTML Document</title>
</head>
<body>
<h1>Demo</h1>
<p style="text-align:center;">Great Learning</p>
</body>
</html>How to increase font size in HTML?
<!DOCTYPE html>
<html>
<head>
<title>Demo HTML font size</title>
</head>
<body>
<h1 style="color:red;font-size:40px;">Heading</h1>
<p style="color:blue;font-size:18px;">Font size demo</p>
</body>
</html>Advance HTML Interview Questions
How to create button in HTML?
<button type="button">Click Here!</button>How to change button color in HTML?
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.buttondemo {background-color: #008CBA;} /* Blue */
.buttondemo2 {background-color: #f44336;} /* Red */
.buttondemo3 {background-color: #e7e7e7; color: black;} /* Gray */
.buttondemo4 {background-color: #555555;} /* Black */
</style>
</head>
<body>
<h2>Button Colors</h2>
<p>Change the background color of a button with the background-color property:</p>
<button class="button">Green</button>
<button class="button buttondemo">Blue</button>
<button class="button buttondemo2">Red</button>
<button class="button buttondemo3">Gray</button>
<button class="buttonbuttondemo4">Black</button>
</body>
</html>What is the difference between html and html5?
When HTML5 was released that time the primary objective was to improve the World Wide Web experience for developers and end-users. :
- HTML5 supports SVG (Scalable Vector Graphics), canvas, and also other virtual vector graphics, but in HTML, make use of vector graphics was only possible by using it in conjunction with different technologies like Flash, VML (Vector Markup Language), or Silverlight.
- Web SQL databases are normally used in HTML5 for storing the data temporarily. In the older version of HTML we were only able to use browser cache and could be utilized for this purpose.
- In HTML5 the main advantage is JavaScript can run within a web browser, while when we talk about the older version of HTML only allows JavaScript to run in the browser interface thread.
- HTML5 is not based on SGML. The language has improved parsing rules which helps to provide enhanced compatibility.
HTML Interview Questions
How to create drop down list in HTML?
<label for="Fruits">Choose a Fruit:</label>
<select name="Fruits" id="cars">
<option value="Mango">Mango</option>
<option value="Apple">Apple</option>
</select>What is span in HTML?
The HTML <span> element stands for a generic inline container for phrasing content, that does not inherently represent anything. It can also be used to group elements for styling purposes like using the class or id attributes, or because they share attribute values, such as lang.
How to underline text in HTML?
<u> tag is used for underline the text. The <u> tag was deprecated in HTML, but then they re-introduced in HTML5.
Advance HTML Interview Questions
How to create a box in HTML?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.square {
height: 50px;
width: 50px;
background-color: #555;
}
</style>
</head>
<body>
<h2>Draw Square using CSS</h2>
<div class="square"></div>
</body>
</html> How to put an image in HTML?
<img> tag is used to add an image in a web page.
Images are not inserted into a web page basically they are linked to web pages. The <img> tag helps to create a holding space for the referenced image.
The <img> tag is normally empty, it has attributes only, and does not have a closing tag.
<img> tag has two required parameters:
- src – The path to the image
- alt – An alternate text for the image
To insert a image in html you need to use img tag:
<img src="image path" alt="Italian Trulli">
<img src="demo.jpg" alt="Italian Trulli">How to change font in HTML?
<font> tag, is used to specify the text color.
- <font Color=”Blue”>
- <font color=”rgb(128,128,0)”
- <font color=”#00FF00″>
<!DOCTYPE html>
<html>
<head>
<title>
Example of color attribute
</title>
</head>
<body>
<font color="orange">
<!-- The color attribute of font tag sets the color name 'orange' for the word Great Learningt-->
<center>
<h1>
Great Learning
</h1>
</center>
</font>
</body>
</html>HTML Interview Questions
How to add a link in HTML?
To add links in html we use <a> and </a> tags, which are the tags used to define the links. The <a> tag indicates where the hyperlink starts and the </a> tag indicates where it ends. Whatever text gets added inside these tags, will work as a hyperlink. Add the URL for the link in the <a href=” ”>.
What is HTML tags?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title of the document</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>How to create a checkbox in HTML?
<input type="checkbox" id="car" name="vehicle1" value="Bike">
<label for="car1"> I have a Alto</label><br>
<input type="checkbox" id="car2" name="vehicle2" value="Car">
<label for="car2"> I have an Audi</label><br>
<input type="checkbox" id="car3" name="vehicle3" value="Boat">
<label for="car3"> I have a BMW</label><br>Advance HTML Interview Questions
How to create a box in HTML?
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lightgrey;
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
</style>
</head>
<body>
<h2>Demonstrating the Box Model</h2>
<p>Hey, welcome to Great Learning.</p>
<div>Great Learning Academy is an initiative taken by Great Learning, where we are offering 1000+ hours of content across 80+ courses in Data Science, Machine Learning, Artificial Intelligence, Cloud Computing, Business, Digital Marketing, Big Data and many more for free.</div>
</body>
</html>How to add a scroll bar in HTML?
<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
background-color: lightblue;
width: 110px;
height: 110px;
overflow: scroll;
}
div.ex2 {
background-color: lightblue;
width: 110px;
height: 110px;
overflow: hidden;
}
div.ex3 {
background-color: lightblue;
width: 110px;
height: 110px;
overflow: auto;
}
div.ex4 {
background-color: lightblue;
width: 110px;
height: 110px;
overflow: visible;
}
</style>
</head>
<body>
<h1>Welcome to great learning</h1>
<h2>scroll:</h2>
<div class="ex1">Great Learning Academy is an initiative taken by Great Learning, where we are offering 1000+ hours of content across 80+ courses in Data Science, Machine Learning, Artificial Intelligence, Cloud Computing, Business, Digital Marketing, Big Data and many more for free.</div>
</body>
</html>What is an attribute in HTML?
HTML attributes help to provide the additional information about HTML elements.
- All HTML elements always have attributes
- Attributes provide additional information about elements
- Attributes always have the start tag
- Attributes usually use in name/value pairs like: name=”value”
HTML Interview Questions
How to increase button size in HTML?
<button type="button">Click Here!</button>How to change font size in HTML?
<!DOCTYPE html>
<html>
<head>
<title>Demo HTML font size</title>
</head>
<body>
<h1 style="color:red;font-size:40px;">Heading</h1>
<p style="color:blue;font-size:18px;">Font size demo</p>
</body>
</html>How to change color of text in HTML?
<p style="color:red">This is a demo</p>
<p style="color:blue">This is another demo</p>
This concept is not used in HTML5Advance HTML Interview Questions
How to bold text in HTML?
To text bold in HTML, use the <b> </b> tag or <strong> </strong> tag.
<b> hey, welcome to great learning!</b>How to add a footer in HTML?
<!DOCTYPE html>
<html>
<body>
<h1>The footer element</h1>
<footer>
<p>demo of footer<br>
<a href="mailto:admin@example.com">admin@example.com</a></p>
</footer>
</body>
</html>Who invented HTML?
The inventor of HTML Tim Berners-Lee.
HTML Interview Questions
How to align the image in the center in HTML?
<img src="demo.jpg" alt="Paris" class="center">How to create a hyperlink in HTML?
A hyperlink in an HTML page, use the <a> and </a> tags
How do you separate a section of texts in HTML?
We separate a section of texts in HTML using the below tags:
- <br> tag – It is used to separate the line of text. It breaks the current line and shifts the flow of the text to a new line.
- <p> tag–This tag is used to write a paragraph of text.
- <blockquote> tag–This tag is used to define large quoted sections.
Advance HTML Interview Questions
Define the list types in HTML?
The list types in HTML are as below:
- Ordered list–The ordered list uses <ol> tag and displays elements in a numbered format.
- Unordered list–The unordered list uses <ul> tag and displays elements in a bulleted format.
- Definition list–The definition list uses <dl>, <dt>, <dd> tags and displays elements in definition form like in a dictionary.
How do you align list elements in an HTML file?
We can align the list elements in an HTML file by using indents. If you indent each nested list in further than the parent list, you can easily align and determine the various lists and the elements that it contains.
Differentiate between an Ordered list and an Unordered list?
An unordered list uses <ul> </ul> tags and each element of the list is written between <li> </li> tags. The list items are displayed as bullets rather than numbers.
An ordered list uses <ol> </ol> tags and each element of the list is written between <li> </li> tags. The list items are displayed as numbers rather than bullet points.
<!DOCTYPE html>
<html>
<body>
<h2>HTML List Example</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
HTML Interview Questions
How do you display a table in an HTML webpage?
The HTML <table> tag is used to display data in a tabular format. It is also used to manage the layout of the page, for example, header section, navigation bar, body content, footer section. Given below are the list of HTML tags used for displaying a table in an HTML webpage:
| 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. |
What is white space in HTML?
An empty sequence of space characters is called the white space in HTML. This white space is considered as a single space character in the HTML.
White space helps the browser to merge multiple spaces into one single space, and so taking care of indentation becomes easier. White space helps in better organizing the content and tags, making them readable and easy to understand.
How do you create links to different sections within the same HTML web page?
We use the <a> tag, along with referencing through the use of the # symbol, to create several links to different sections within the same web page.
Advance HTML Interview Questions
Why do we use a style sheet in HTML?
A style sheet helps in creating a well-defined template for an HTML webpage that is both consistent as well as portable. We can link a single style sheet template to various web pages, which makes it easier to maintain and change the look of the website.
What is semantic HTML?
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 not used for italic. Instead of these we use <strong></strong> and <em></em> tags.
What is SVG in HTML?
HTML SVG is used to describe the vector or raster graphics. SVG images and their behaviors are defined in XML text files.
We mostly use it for vector type diagrams like pie charts, 2-Dimensional graphs in an X, Y coordinate system.
<svg width=”100″ height=”100″>
<circle cx=”50″ cy=”50″ r=”40″ stroke=”yellow” stroke-width=”4″ fill=”red” />
</svg>
HTML Interview Questions
How do you create nested web pages in HTML?
Nested web pages basically mean a webpage within a webpage. We can create nested web pages in HTML using the built-in i frame tag. The HTML <iframe> tag defines an inline frame. For example:
<!DOCTYPE html>
<html>
<body>
<h2>HTML Iframes example</h2>
<p>
specify the size of the iframe using the height and width attributes:
</p>
<iframe src=”https://simplilearn.com/” height=”600″ width=”800″></iframe>
</body>
</html>
How do you add buttons in HTML?
We can use the built-in Button tag in HTML to add buttons to an HTML web page.
<!DOCTYPE html>
<html>
<body>
<h2>HTML Button Tag Example</h2>
<button name=”button” type=”button”>CLICK ME</button>
</body>
</html>
What is the alt attribute in HTML?
The alt attribute is used for displaying a text in place of an image whenever the image cannot be loaded due to any technical issue.
<!DOCTYPE html>
<html>
<body>
<h2>HTML Alt Example</h2>
<img src=”tulip.jpeg” alt=”Tulip Garden” />
</body>
</html>
Advance HTML Interview Questions
How do you add color to the text in HTML?
You can add color to the text in HTML by using the following code:
<!DOCTYPE html>
<html>
<body>
<h2>HTML Color Text Example</h2>
<h1 style="color:Tomato;">Hello HTML</h1>
<p style="color:DodgerBlue;">Line 1</p>
<p style="color:MediumSeaGreen;">Line 2</p>
</body>
</html> How do you add CSS styling in HTML?
There are three ways to include the CSS with HTML:
- Inline CSS: It is used when less amount of styling is needed or in cases where only a single element has to be styled. To use inline styles add the style attribute in the relevant tag.
- External Style Sheet: This is used when the style is applied to many elements or HTML pages. Each page must link to the style sheet using the <link> tag:
<head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css” />
</head>
- Internal Style Sheet: It is used when a single HTML document has a unique style and several elements need to be styled to follow the format. Internal styles sheet is added in the head section of an HTML page, by using the <style> tag:
<head>
<style type=”text/css”>
hr {
color: sienna;
}
p {
margin-left: 20px;
}
body {
background-image: url(“images/back40.gif”);
}
</style>
</head>
How do you add JavaScript to an HTML webpage?
JavaScript is used for making HTML web pages more interactive, and user-friendly. It is a scripting language that allows you to interact with certain elements on the page, based on user input. As with CSS, there are three major ways of including JavaScript:
- Inline:
You can add JavaScript to your HTML elements directly whenever a certain event occurs. We can add the JavaScript code using attributes of the HTML tags that support it. Here is an example that shows an alert with a message when the user clicks on it:
<button onclick=”alert(‘Click the Button!’);”>
Click!
</button>
- Script block:
You can define a script block anywhere on the HTML code, which will get executed as soon as the browser reaches that part of the document. This is why script blocks are usually added at the bottom of HTML documents.
<html>
<script>
var x = 1;
var y = 2;
var result = x + y;
alert(“X + Y is equal to ” + result);
</script>
</html>
- External JavaScript file:
You can also import the JavaScript code from a separate file and keep your HTML code clutter-free. This is especially useful if there is a large amount of scripting added to an HTML webpage.
<html>
<script src=”my-script.js”></script>
</html>
HTML Interview Questions
What are the various markup languages, and what are the differences between them?
- HTML — Hypertext Markup Language
- KML — Key whole Markup Language
- MathML — Mathematical Markup Language
- SGML — Standard Generalized Markup Language
- XHTML — extensible Hypertext Markup Language
- XML — extensible Markup Language
What is !DOCTYPE?
A doctype or document type declaration is an instruction that tells the web browser about the markup language in which the current page is written. The doctype is not an element or tag, it lets the browser know about the version of or standard of HTML or any other markup language that is being used in the document.
The DOCTYPE for HTML5 is case-insensitive and can be written as shown below:
<!DOCTYPE html>What are attributes ?
An attribute is used to provide extra or additional information about an element.
- All HTML elements can have attributes. Attributes provide additional information about an element.
- It takes two parameters : name and value. These define the properties of the element and are placed inside the opening tag of the element. The name parameter takes the name of the property we would like to assign to the element and the value takes the properties value or extent of the property names that can be aligned over the element.
- Every name has some value that must be written within quotes.
Syntax:
<element attribute_name="attribute_value">Advance HTML Interview Questions
What is the difference between <em> and <i> tag?
- <i> tag: It is one of the element of HTML which is used in formatting HTML texts. It is used to define a text in technical term, alternative mood or voice, a thought, etc.Syntax:<i> Content… </i>
- <em> tag: It is also one of the element of HTML used in formatting texts. It is used to define emphasized text or statements.Syntax:<em> Content… </em>By default, the visual result is the same but the main difference between these two tags is that the <em> tag semantically emphasizes the important word or section of words while <i> tag is just offset text conventionally styled in italic to show alternative mood or voice.
What are the different formats in which colors in HTML can be declared?
Color of an element can be defined in the following ways:
- Built-In Color
- RGB Format
- RGBA Format
- Hexadecimal Notation
- HSL
- HSLA
Built-In Color: These are a set of predefined colors which are used by its name. For example: red, blue, green etc.
Syntax:
h1 {
color: color-name;
}
RGB Format: The RGB(Red, Green, Blue) format is used to define the color of an HTML element by specifying the R, G, B values range between 0 and 255. For example: RGB value of Red color is (255, 0, 0), Green color is (0, 255, 0), Blue color is (0, 0, 255) etc.
Syntax:
h1 {
color: rgb(R, G, B);
}
RGBA Format: The RGBA format is similar to the RGB, but the difference is RGBA contains A (Alpha) which specify the transparency of elements. The value of alpha lies between 0.0 to 1.0 where 0.0. represents fully transparent and 1.0 represents not transparent.
Syntax:
h1 {
color:rgba(R, G, B, A);
}
Hexadecimal Notation: The hexadecimal notation begins with # symbol followed by 6 characters each range from 0 to F. For example: Red #FF0000, Green #00FF00, Blue #0000FF etc.
Syntax:
h1 {
color:#(0-F)(0-F)(0-F)(0-F)(0-F)(0-F);
}
HSL: HSL stands for Hue, Saturation, and Lightness respectively. This format uses the cylindrical coordinate system.
- Hue: Hue is the degree of the color wheel. Its value lies between 0 to 360 where 0 represents red, 120 represents green and 240 represents blue color.
- Saturation: It takes percentage value, where 100% represents completely saturated, while 0% represents completely unsaturated (gray).
- Lightness: It takes percentage value, where 100% represents white, while 0% represents black.
Syntax:
h1 {
color:hsl(H, S, L);
}
HSLA: The HSLA color property is similar to HSL property, but the difference is HSLA contains A (Alpha) which specify the transparency of elements. The value of alpha lies between 0.0 to 1.0 where 0.0. represents fully transparent and 1.0 represents not transparent.
Syntax:
h1 {
color:hsla(H, S, L, A);
}
What is the use of target attribute in <link> tag.
The HTML <link> target Attribute is used to specify the window or a frame where the linked document is loaded. It is not supported by HTML 5.
Syntax:
<link target="_blank|_self|_parent|_top|framename">
Attribute Values:
- _blank: It opens the link in a new window.
- _self: It opens the linked document in the same frame.
- _parent: It opens the linked document in the parent frameset.
- _top: It opens the linked document in the full body of the window.
- framename: It opens the linked document in the named frame.
HTML Interview Questions
What are the different types of lists in HTML?
HTML offers three ways for specifying lists of information. All lists must contain one or more list elements.
The types of lists that can be used in HTML are :
- ul : An unordered list. This will list items using plain bullets.
- ol : An ordered list. This will use different schemes of numbers to list your items.
- dl : A definition list. This arranges your items in the same way as they are arranged in a dictionary.
What is the difference between block and inline elements?
Every element in HTML has a default display value which depends upon the element type. Block or inline are the default display value for the most of the elements.
Block Level Elements: A block-level element always starts on a new line and stretches out to the left and right as far as it can.
- div element: The div element is used as a container for other HTML elements. It has no required attributes. Style, class and id are the commonly used attributes.
Syntax:
<div>GFG</div>
Inline Elements: An inline element is the opposite of the block-level element. It does not start on a new line and takes up only necessary width.
- span element: The span element is used as a container for text. It has no required attributes. Style, class and id are the commonly used attributes.
Syntax:
<span>GFG</span>
State the various heading tags, do they hold any importance?
There are six levels of headings defined by HTML. These six heading elements are H1, H2, H3, H4, H5, and H6; with H1 being the highest level and H6 the least.
Importance of Heading :
- Search Engines use headings for indexing the structure and content of the webpage.
- Headings are used for highlighting important topics.
- They provide valuable information and tell us about the structure of the document.
Advance HTML Interview Questions
How to redirect to a particular section of a page using HTML?
One can use the anchor tag to redirect to a particular section on the same page. You need to add “id attribute” to the section that you want to show and use the same id in href attribute with “#” in the anchor tag. So that On click a particular link, you will be redirected to the section that has the same id mention in the anchor tag.
Syntax:
// Anchor tag <a href="#home_section">home</a> <section id="home_section">Information About Page</section>
Example: When user click on “Contact Us” link, he will be redirected to “Contact Us section” on the same page.
What is the advantage of white space?
White space helps the browser to collapse multiple spaces into one single space, and thereby the indent lines of the text can be taken care of without caring for the multiple spaces that are left. Thereby using the HTML code, white space helps in better organizing the content and tags, making them readable and easy to understand.
Can some attribute value best to predefined values?
Yes, some attribute values can be set to predefined values, but other attributes can accept any kind of numerical value, which represents the pixel size.
HTML Interview Questions
Which is the web page that is printed and pointed mostly as the web address in the magazine?
The top-level page is the most popular web page that is printed and pointed mostly as the web address in the magazine because it can help the users to browse to all other pages on the website from the same link.
Why do we use alternate text in the image mapping?
Alternate text is used in image mapping to remove the confusion and get clear about the hotspots that correspond to the particular link. This way, descriptive text can be applied to each of the hotspot links.
Can HTML files work well on the new browser?
Of course, the HTML files could work very well on the new browser, just that the new browser is compliant with the HTML standards. It may be possible that some new browsers may not support the features of HTML and therefore, won’t work well.
Advance HTML Interview Questions
What are the different advantages of grouping several checkboxes?
There are several advantages to grouping several checkboxes. These include,
- It helps in organizing the checkboxes.
- It helps in applying particular names on the checkbox buttons to differentiate them easily from a group.
- It supports the creation of a different group of checkboxes on a single webpage with different names.
If there is no text between the tags, then what will be the outcome? Give an example?
If there is no text between the tags, then there will be nothing available to format, and hence no formatting can be done. For instance, tags without closing tag like that of image tag or <img> tag do not require any text between them, and hence no formatting will be needed in such a case.
Where can you specify colors for table borders?
The specification of color for table borders can be made in style sheet, and in its absence, the same as the text color will apply.
HTML Interview Questions
Can style sheets help in aligning images and wrap text?
Yes, the style sheet can apply tables to position text and images for aligning them accordingly.
Can a single hyperlink take the web browser to different pages?
No, a single hyperlink can take the web browser to only one pre-specified single web page.
How is the maximum size value determined?
The maximum size value can be determined by the browser width.
Advance HTML Interview Questions
What will happen if the size attribute will be set to zero?
If the size attribute is set to zero, then the size will be set to the default size of 13 characters.
Is there any other way to separate the section of text without using <br>?
Yes, there are other ways to separate sections of text which includes <p> tag and <blockquote> tag.
Can the stylesheet limit the number of style definitions?
No, the style sheets do not limit the number of style definitions for a given selector, which can be included within the brackets. However, every new style definition needs to be separated from others using the semicolon symbol.
HTML Interview Questions
Can we group the various selectors with different class names?
Yes, we can group the various selectors with different class names and the same style definition by using commas.
Write a program to create nested webpages in HTML.
Representing a webpage inside of another webpage is a nested webpage. It is done using the iframe tag which creates an inline frame.
<!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="https://hackr.io/" height="400" width="600"></iframe>
</body>
</html>
Explain SVG with HTML code.
HTML SVG describes the two-dimensional vector and vector/raster graphics. SVG images and their behaviors are defined in XML text files. It is used for vector diagrams like pie charts, 2-Dimensional graphs in an X, Y coordinate system.
<!DOCTYPE html>
<html>
<body>
<h2>HTML SVG example</h2>
<svg width="400" height="400">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="6" fill="red" />
</svg>
</body>
</html>
Advance HTML Interview Questions
What is the audio tag? Implement it
The audio tag is used to add sound or music on the web page. It supports three audio type formats: mp3, WAV, Ogg.
Explain the button tag with the help of code.
Button tag lets you create a clickable button in the HTML form on the webpage.
<!DOCTYPE html>
<html>
<body>
<h2>HTML Button Tag Example</h2>
<button name="button" type="button">CLICK ME</button>
</body>
</html> Write HTML code to print the following table.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 2px solid black;
}
</style>
</head>
<body>
<table >
<tr>
<th> Serial No. </th>
<th> Product Name </th>
<th> Quantity </th>
<th> Total Price </th>
</tr>
<tr>
<td> 1 </td>
<td>Rice</td>
<td> 2 Kg </td>
<td> 500 </td>
</tr>
<tr>
<td> 2 </td>
<td> Corn Flour </td>
<td> 2 Kg </td>
<td> 300 </td>
</tr>
<tr>
<td> 3 </td>
<td> Marie Biscuits </td>
<td> 2 pkt </td>
<td> 20 </td>
</tr>
<tr>
<td> 4 </td>
<td> Chilli Powder </td>
<td> 200 gm </td>
<td> 100 </td>
</tr>
<tr>
<td> 5 </td>
<td>Mangoes</td>
<td> 4 Kg</td>
<td> 700 </td>
</tr>
</table>
</body>
</html>HTML Interview Questions
Explain different types of headings in HTML
<!DOCTYPE html>
<html>
<head>
<style>
h1{
color: red;
}
h2{
color: blue;
}
h3{
color: green;
}
h4{
color: purple;
}
h5{
color: yellow;
}
h6{
color: orange;
}
</style>
</head>
<body>
<h1>This is Heading 1</h1>
<h2>This is Heading 2</h2>
<h3>This is Heading 3</h3>
<h4>This is Heading 4</h4>
<h5>This is Heading 5</h5>
<h6>This is Heading 6</h6>
</body>Explain the script tag.
Script tag can be inside the head or body tag of the HTML code. This tag is executed when the browser reaches that part of the document.
<!DOCTYPE html>
<html>
<body>
<h2>HTML Script Tag Example</h2>
<script>
var x = 5;
var y = 6;
var result = x + y;
alert("X + Y is equal to " + result);
</script>
</body>
</html> How to insert an Emoji on the webpage
<!DOCTYPE html>
<html>
<body>
<h2>HTML Emoji Example</h2>
<p>😀</p>
</body>
</html> Advance HTML Interview Questions
Explain HTML forms
Forms are designed to get the user input which can later be sent to the server for processing. Input can be given as text or in the form of radio buttons and can be submitted by clicking the submit button.
<!DOCTYPE html>
<html>
<body>
<h2>HTML Form Example</h2>
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>
<p> </p>
<form>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
<input type="radio" id="other" name="gender" value="other">
<label for="other">Other</label>
<br> </br>
<input type="submit" value="Submit">
</form>
</body>
</html> 