Get ready for your HTML interview with this complete guide, including essential questions and answers for all levels—basic, intermediate, and advanced.
Ready to Master HTML?
Explore our Frontend Web Development Essentials Course and elevate your HTML and web development skills!
Explore NowWhat is HTML?
HTML stands for Hypertext Markup Language. It allows users to create and structure sections, paragraphs, headings, links, and blockquotes for web pages and applications.
How do you insert an image in HTML?
The <img> tag is used to add an image to a web page. Images are linked, not inserted, into web pages, and the tag creates a placeholder for the referenced image. It is an empty tag with no closing tag and requires two attributes: src for the image path and alt for alternative text.
Example:
<img src="assets/images/sample.jpg" alt="A scenic landscape">How do you set a background image in HTML?
To set a background image for an HTML element, use the HTML style attribute with the CSS background-image property.
Example:
<div style="background-image: url('assets/images/background.jpg'); height: 200px; width: 100%;"></div>How do you comment in HTML?
HTML comments are not displayed in the browser but help document the source code. They are written using a specific syntax.
Example:
<!-- This is a sample comment -->How do you add space in HTML?
HTML typically displays a single space between words, regardless of multiple spaces entered. To add extra space, use the non-breaking space entity, which prevents a line break at its location.
Example:
<p>Hello World</p>How do you link CSS to HTML?
CSS, or Cascading Style Sheets, formats the layout of a webpage, controlling colors, fonts, text size, spacing, positioning, and more. CSS can be added to HTML in three ways: inline (using the style attribute), internal (using a <style> tag in the <head>), and external (using a <link> tag to an external CSS file). The external method is most common.
Examples:
<!-- Inline CSS -->
<h1 style="color: blue;">Heading</h1>
<!-- Internal CSS -->
<head>
<style>
body { background-color: lightblue; }
p { color: red; }
</style>
</head>
<!-- External CSS -->
<head>
<link rel="stylesheet" href="styles.css">
</head>How do you align text in HTML?
To align text in HTML, use CSS with the text-align property to control the horizontal alignment of text within an element.
Example:
<style>
.center { text-align: center; }
.left { text-align: left; }
.right { text-align: right; }
.justify { text-align: justify; }
</style>
<div class="center">Centered text</div>
<div class="left">Left-aligned text</div>
<div class="right">Right-aligned text</div>
<div class="justify">Justified text</div>How do you create a table in HTML?
HTML tables organize data into rows and columns using the <table> tag. Rows are defined with <tr>, headers with <th> (bold and centered), and data cells with <td> (regular and left-aligned).
Example:
<table style="width: 100%; border-collapse: collapse;">
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>Alice</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>Bob</td>
<td>30</td>
<td>London</td>
</tr>
</table>How do you convert HTML to PDF?
On Windows, open an HTML page in browsers like Internet Explorer, Chrome, or Firefox. On a Mac, use Firefox. Click the “Convert to PDF” button in the Adobe PDF toolbar, enter a filename, and save the PDF in your desired location.
How do you change text color in HTML?
The HTML style attribute is used to change text color, among other styles like font and size.
Example:
<p style="color: red;">Red text</p>
<p style="color: blue;">Blue text</p>How do you change font color in HTML?
The <font> tag with the color attribute can specify text color, though it is deprecated in HTML5. Use CSS instead for modern practices.
Example (using CSS):
<p style="color: orange;">Orange text</p>
<p style="color: #00FF00;">Green text</p>
<p style="color: rgb(128, 128, 0);">Olive text</p>How do you change background color in HTML?
Use the style attribute with the CSS background-color property to change the background color of an element.
Example:
<body style="background-color: lightblue;">
<h1>Sample Heading</h1>
<p>Sample Paragraph</p>
</body>What is a DOCTYPE in HTML?
The DOCTYPE declaration informs the browser about the document type to expect. In HTML5, it is simply <!DOCTYPE html>.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Sample Page</title>
</head>
<body>
<p>Hello, World!</p>
</body>
</html>How do you change font style in HTML?
Use the style attribute with CSS properties like font-family, font-size, and font-style to change the font style.
Example:
<p style="font-family: Arial, sans-serif; font-size: 18px; font-style: italic;">Styled text</p>How do you add space using the <pre> tag in HTML?
The <pre> tag displays preformatted text, preserving spaces and line breaks. Additional spacing can be controlled with CSS properties like margin.
Example:
<pre style="margin: 10px;">
Hello World
This is spaced text
</pre>What is the DOM in HTML?
The Document Object Model (DOM) is created by the browser when a web page loads, representing the page as a tree of objects. The HTML DOM models HTML elements as objects, including their properties, methods, and events.
How do you add an image in HTML from a folder?
Use the <img> tag with the src attribute pointing to the image file’s path in a folder and the alt attribute for accessibility.
Example:
<img src="images/my-image.jpg" alt="Description of image">How do you create a form in HTML?
Use the <form> tag with <label> for input descriptions and <input> for user input fields.
Example:
<form action="/submit" method="post">
<label for="firstName">First Name:</label><br>
<input type="text" id="firstName" name="firstName"><br>
<label for="lastName">Last Name:</label><br>
<input type="text" id="lastName" name="lastName">
<input type="submit" value="Submit">
</form>How do you create a button in HTML?
Use the <button> tag with the type attribute to create a button.
Example:
<button type="button">Click Me!</button>How do you run an HTML program?
To run an HTML program: 1) Open a text editor like Notepad (Windows) or TextEdit (Mac). 2) Write or paste HTML code. 3) Save the file with a .html extension. 4) Open it in a web browser to view the page.
Example:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>Welcome</h1>
<p>This is my first HTML page.</p>
</body>
</html>How to save an HTML file?
To save an HTML file:
- On the main menu, click File > Save As.
- Alternatively, right-click within the HTML document and select 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?
To allow multiple selections in a drop-down list, add the multiple attribute to the <select> tag.
<label for="Fruit">Choose Fruits:</label>
<select name="Fruit" id="Fruit" multiple>
<option value="Mango">Mango</option>
<option value="Lichhi">Lichhi</option>
<option value="Apple">Apple</option>
</select>How to use the `div` tag in HTML to divide the page?
The div tag stands for “Division tag.” It is used in HTML to create divisions of content on a web page, such as text, images, headers, footers, navigation bars, etc. A div tag has two parts: an opening (<div>) and a closing (</div>) tag, and it is mandatory to maintain both. The div is one of the most used tags in web page development because it has the power to separate respective data on the web page, and a particular section can be created for specific data or functions within web pages.
The div tag is a block-level tag and a generic container tag.
<!DOCTYPE html>
<html>
<head>
<title>Div Tag Demo</title>
<style>
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>
<p>This is a paragraph outside the div.</p>
</body>
</html>What is HTML used for?
HTML is used to create static web pages, and HTML stands for HyperText Markup Language.
How to align text to the center in HTML?
To align text to the center in HTML, you can use CSS. The text-align: center; property can be applied to the element containing the text.
<!DOCTYPE html>
<html>
<head>
<title>Center Align Text Demo</title>
<style>
.center-text {
text-align: center;
}
</style>
</head>
<body>
<h1 class="center-text">Demo Heading</h1>
<p class="center-text">Great Learning</p>
<div style="text-align: center;">
Another way to center text directly using inline style.
</div>
</body>
</html>How to increase font size in HTML?
To increase font size in HTML, use the CSS font-size property.
<!DOCTYPE html>
<html>
<head>
<title>Demo HTML Font Size</title>
<style>
h1 {
color: red;
font-size: 40px; /* Increased font size for heading */
}
p {
color: blue;
font-size: 18px; /* Increased font size for paragraph */
}
</style>
</head>
<body>
<h1>Heading</h1>
<p>Font size demo</p>
<p style="font-size: 24px;">This text has an inline font size of 24px.</p>
</body>
</html>What tag is used to create a button in HTML?
The HTML <button> tag is used to create a clickable button on a website.
<button type="button">Click Me</button>
<button type="submit">Submit Form</button>How to change button color in HTML?
To change button color in HTML, you typically use CSS. The background-color property can be applied to the button element.
<!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;
}
.button-blue {background-color: #008CBA;} /* Blue */
.button-red {background-color: #f44336;} /* Red */
.button-gray {background-color: #e7e7e7; color: black;} /* Gray */
.button-black {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 button-blue">Blue</button>
<button class="button button-red">Red</button>
<button class="button button-gray">Gray</button>
<button class="button button-black">Black</button>
</body>
</html>Which is better: HTML or HTML5?
HTML5 is the newest version of HTML and is considered better than previous versions because it includes new features like audio and video elements, new semantic elements, and support for local storage. It is the current standard for web development.
How to create a drop-down list in HTML?
To create a drop-down list, use the <select> tag. Inside <select>, use <option> tags for each item in the list.
<label for="Fruits">Choose a Fruit:</label>
<select name="Fruits" id="Fruits">
<option value="Mango">Mango</option>
<option value="Apple">Apple</option>
<option value="Banana">Banana</option>
</select>What is `span` in HTML?
The HTML <span> element is a generic inline container for phrasing content that does not inherently represent anything. It can be used to group elements for styling purposes (e.g., using class or id attributes) or because they share attribute values, such as lang.
<p>This is a normal paragraph with <span style="color: blue;">blue text</span> inside.</p>
<p>Here's some <span class="highlight">highlighted text</span>.</p>How to underline text in HTML?
The <u> tag is used to underline text. The <u> tag was deprecated in HTML4 but was re-introduced in HTML5 for specific semantic purposes (e.g., to represent unarticulated text that is rendered as a functionally non-textual annotation).
<!-- Using the <u> tag -->
<p>This is underlined text.</p>
<!-- Preferred CSS method for styling -->
This text is also underlined using CSS.
What is a “fieldset” tag in HTML?
A <fieldset> tag is used to group related elements in a form. It is useful for creating structural groupings within a form, often with a <legend> tag providing a caption for the group.
<form>
<fieldset>
<legend>Personal Information:</legend>
<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"><br><br>
</fieldset>
<fieldset>
<legend>Contact Information:</legend>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email"><br>
</fieldset>
<br>
<input type="submit" value="Submit">
</form>How to change font in HTML?
While the <font> tag was previously used to specify font properties like color, it is deprecated in HTML5. The recommended way to change fonts (family, size, color, etc.) in HTML is by using CSS.
<!DOCTYPE html>
<html>
<head>
<title>Example of Font Styling</title>
<style>
body {
font-family: Arial, sans-serif; /* Changes the font family for the whole body */
color: #333; /* Changes default text color */
}
h1 {
font-family: 'Times New Roman', serif;
color: orange;
}
p {
font-family: 'Courier New', monospace;
color: rgb(128,128,0);
font-size: 1.2em;
}
</style>
</head>
<body>
<center>
<h1>Great Learning</h1>
</center>
<p>This is a paragraph with a different font and color.</p>
<div style="color: #00FF00; font-family: Verdana;">
This text uses inline CSS for font styling.
</div>
</body>
</html>How to add a link in HTML?
To add links in HTML, use the <a> (anchor) tag. The <a> tag indicates where the hyperlink starts, and the </a> tag indicates where it ends. Whatever text is added inside these tags will work as a hyperlink. Add the URL for the link in the href attribute of the <a> tag.
<!-- Basic external link -->
<a href="https://www.google.com">Visit Google</a>
<!-- Internal link to another page on the same website -->
<a href="about.html">About Us</a>
<!-- Link that opens in a new tab -->
<a href="https://www.example.com" target="_blank">Open in new tab</a>
<!-- Link to an email address -->
<a href="mailto:info@example.com">Send us an email</a>What are HTML tags?
HTML tags are keywords enclosed in angle brackets (e.g., <p>, <h1>). They instruct web browsers on how to structure and display content on a web page. Most tags come in pairs (an opening tag and a closing tag), while some are self-closing.
<!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>
<!-- An example of a self-closing tag -->
<img src="image.jpg" alt="Description">
</body>
</html>How to create a checkbox in HTML?
To create a checkbox in HTML, use the <input> tag with type="checkbox". It’s good practice to associate it with a <label> using the for and id attributes for accessibility.
<input type="checkbox" id="car1" name="vehicle1" value="Alto">
<label for="car1"> I have an Alto</label><br>
<input type="checkbox" id="car2" name="vehicle2" value="Audi">
<label for="car2"> I have an Audi</label><br>
<input type="checkbox" id="car3" name="vehicle3" value="BMW">
<label for="car3"> I have a BMW</label><br>How to create a box in HTML?
To create a box-like structure in HTML, you typically use block-level elements like <div> and style them using CSS properties such as width, height, border, padding, and margin, which are part of the CSS Box Model.
<!DOCTYPE html>
<html>
<head>
<style>
div.box-example {
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 class="box-example">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?
To add a scrollbar in HTML, you typically use the CSS overflow property on a block-level element. This property controls how content that overflows an element’s box is handled.
overflow: scroll;will always show scrollbars, even if content doesn’t overflow.overflow: auto;will show scrollbars only when content overflows.overflow: hidden;will hide overflowing content.overflow: visible;is the default and will make overflowing content visible outside the element’s box.
<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
background-color: lightblue;
width: 150px; /* Adjusted width for better demonstration */
height: 100px;
overflow: scroll; /* Always show scrollbars */
border: 1px solid blue;
padding: 10px;
}
div.ex2 {
background-color: lightgreen;
width: 150px;
height: 100px;
overflow: hidden; /* Hide overflow */
border: 1px solid green;
padding: 10px;
}
div.ex3 {
background-color: lightcoral;
width: 150px;
height: 100px;
overflow: auto; /* Show scrollbars only if needed */
border: 1px solid coral;
padding: 10px;
}
div.ex4 {
background-color: lightgray;
width: 150px;
height: 50px; /* Reduced height to force overflow */
overflow: visible; /* Default behavior, content overflows */
border: 1px solid gray;
padding: 10px;
}
</style>
</head>
<body>
<h1>Welcome to Great Learning</h1>
<h2>overflow: 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. This text is long enough to cause a scrollbar.</div>
<br>
<h2>overflow: hidden;</h2>
<div class="ex2">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. This text is long enough to cause overflow, but it will be hidden.</div>
<br>
<h2>overflow: auto;</h2>
<div class="ex3">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. This text is long enough to cause a scrollbar, but only if needed.</div>
<br>
<h2>overflow: visible; (default)</h2>
<div class="ex4">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. This text will overflow visible.</div>
</body>
</html>What is an attribute in HTML?
HTML attributes provide additional information about HTML elements.
- All HTML elements can have attributes.
- Attributes provide additional information about elements.
- Attributes are always specified in the start tag.
- Attributes usually come in name/value pairs, like:
name="value".
How to increase button size in HTML?
You can increase button size using CSS properties like padding, width, and height.
<button style="padding: 15px 30px; font-size: 20px;">Click Here!</button>How to change font size in HTML?
You can change font size using the CSS font-size property, either inline, in a <style> block, or in an external CSS file.
<!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?
You can change the color of text using the CSS color property. This concept is typically applied using CSS, not directly with HTML attributes like in older HTML versions.
<p style="color: red;">This is a demo</p>
<p style="color: blue;">This is another demo</p>How to bold text in HTML?
To make text bold in HTML, use the <b></b> tag or the <strong></strong> tag. The <strong> tag indicates strong importance, while <b> is for stylistic bolding without extra semantic meaning.
<b>Hey, welcome to great learning!</b>
<strong>This text is also bold and semantically important.</strong>How to add a footer in HTML?
You can add a footer to an HTML document using the <footer> element. This element typically contains authorship information, copyright data, or links to related documents.
<!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 is Tim Berners-Lee.
How to align the image in the center in HTML?
You can center an image using CSS. A common method is to set display: block; and margin: auto; on the image itself, or to use Flexbox/Grid on its parent container.
<!-- Using inline CSS -->
<img src="demo.jpg" alt="Paris" style="display: block; margin: 0 auto;">
<!-- Using a CSS class -->
<style>
.center {
display: block;
margin: 0 auto;
}
</style>
<img src="demo.jpg" alt="Paris" class="center">
<!-- Using a flex container -->
<div style="display: flex; justify-content: center;">
<img src="demo.jpg" alt="Paris">
</div>How to create a hyperlink in HTML?
To create a hyperlink in an HTML page, use the <a> (anchor) tag. The href attribute specifies the destination URL.
<a href="https://www.example.com">Visit Example.com</a>How do you add a header in HTML?
You can add a header to an HTML document using the <header> element. This element is typically used for introductory content, such as headings, navigation, or logos.
<!DOCTYPE html>
<html>
<body>
<header>
<h1>My Website Header</h1>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
</nav>
</header>
</body>
</html>How to give space between two buttons in HTML?
You can give space between two buttons using CSS properties like margin or padding, or by using Flexbox/Grid on their container.
<!-- Using margin on individual buttons -->
<button style='margin-right: 16px;'>Button 1</button>
<button style='margin-right: 16px;'>Button 2</button>
<button>Button 3</button>
<!-- Using flexbox on a container -->
<div style='display: flex; gap: 16px;'>
<button>Button A</button>
<button>Button B</button>
<button>Button C</button>
</div>How to change image size in HTML?
You can change image size using the width and height attributes directly on the <img> tag, or more commonly, using CSS properties.
<!-- Using HTML attributes (defines width and height in pixels) -->
<img src="demo.jpg" alt="Nature" width="500" height="600">
<!-- Using inline CSS -->
<img src="demo.jpg" alt="Nature" style="width: 500px; height: 600px;">
<!-- Using CSS class -->
<style>
.responsive-img {
width: 100%; /* Make image responsive to parent width */
height: auto;
max-width: 500px; /* Limit maximum width */
}
</style>
<img src="demo.jpg" alt="Nature" class="responsive-img">Why do we use doctype in HTML?
The <!DOCTYPE html> declaration, also known as the Document Type Declaration (DTD), informs the web browser about the type and version of HTML used in building the web document. For modern web pages, <!DOCTYPE html> specifies HTML5, helping the browser render the page correctly in “standards mode.”
What tag is used to add a video in HTML?
The HTML <video> element is used to embed and show a video on a web page.
<video controls width="320" height="240">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>How to add favicon in HTML?
You can add a favicon to an HTML document by placing a <link> tag within the <head> section of your HTML file, pointing to your icon file (commonly in .ico or .png format).
<head>
<link rel="icon" type="image/png" href="/favicon.png">
<!-- For a local favicon.png file -->
<link rel="icon" type="image/png" href="https://example.com/favicon.png">
<!-- For a favicon hosted on a server -->
</head>How to embed YouTube video in HTML?
To embed a YouTube video, go to the YouTube video you want to embed. Under the video, click SHARE, then click Embed. Copy the provided HTML <iframe> code and paste it into your HTML document.
<!-- Example of YouTube embed code -->
<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID"
frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>How to write text on image in HTML?
You can write text on an image in HTML by using CSS for positioning. Typically, you’d place the image and text within a container and use CSS (like position: relative; on the container and position: absolute; on the text) to overlay the text.
<style>
.container {
position: relative;
text-align: center;
color: white;
}
.bottom-left {
position: absolute;
bottom: 8px;
left: 16px;
}
.top-left {
position: absolute;
top: 8px;
left: 16px;
}
.top-right {
position: absolute;
top: 8px;
right: 16px;
}
.bottom-right {
position: absolute;
bottom: 8px;
right: 16px;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<div class="container">
<img src="img_snow.jpg" alt="Snow" style="width:100%;">
<div class="bottom-left">Bottom Left</div>
<div class="top-left">Top Left</div>
<div class="top-right">Top Right</div>
<div class="bottom-right">Bottom Right</div>
<div class="centered">Centered Text</div>
</div>How to create a popup in HTML with CSS?
You can create a basic popup using HTML and CSS, often combined with JavaScript to toggle its visibility. The CSS hides the popup by default and reveals it when triggered (e.g., by clicking a button).
<style>
/* Popup container */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup (hidden by default) */
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
/* Popup arrow */
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Toggle this class - show the popup */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes fadeIn {
from {opacity: 0;}
to {opacity:1;}
}
</style>
<div class="popup" onclick="myFunction()">Click me!
<span class="popuptext" id="NewPopup">Your popup text goes here.</span>
</div>
<script>
// When the user clicks on div, open the popup
function myFunction() {
var popup = document.getElementById("NewPopup");
popup.classList.toggle("show");
}
</script>How to connect HTML to a database with MySQL?
Directly connecting HTML to a database like MySQL is not possible. HTML is a client-side language. To interact with a database, you need a server-side scripting language (like PHP, Node.js, Python with Django/Flask, Ruby on Rails, etc.) that acts as an intermediary. The HTML form sends data to the server-side script, which then processes and stores it in the MySQL database.
Here’s a general workflow:
- Step 1: Design your HTML form (e.g., for a “Contact Us” page).
- Step 2: Create a database and a table in MySQL to store the data.
- Step 3: HTML form sends data to a server-side script (e.g., using
actionandmethodattributes of the<form>tag). - Step 4: Create a server-side page (e.g., a PHP script) to receive the form data, connect to the MySQL database, and insert the data.
- Step 5: Data is processed and stored.
<!-- Example HTML form -->
<form action="submit_contact.php" method="post">
<label for="name">Name:</label><br>
<input type="text" id="name" name="user_name"><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="user_email"><br><br>
<input type="submit" value="Send Message">
</form>
<!-- A simplified example of what submit_contact.php might look like (PHP) -->
<?php
// Database connection details (replace with your actual details)
$servername = "localhost";
$username = "your_db_username";
$password = "your_db_password";
$dbname = "your_database_name";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
// Get data from HTML form
$name = $_POST['user_name'];
$email = $_POST['user_email'];
// SQL to insert data
$sql = "INSERT INTO contacts (name, email) VALUES ('$name', '$email')";
if ($conn->query($sql) === TRUE) {
echo "New record created successfully";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
$conn->close();
?>How to blink text in HTML?
The HTML <blink> tag is a non-standard element used to create enclosed text that flashes slowly and intermittently. This blinking effect is used very rarely, as it is not eye-soothing for users to watch text constantly turning on and off.
How to add a calendar in an HTML Form?
You can add a calendar input to an HTML form using the `type=”date”` attribute for an `<input>` tag. This provides a native date picker in most modern browsers.
<!DOCTYPE html>
<html>
<body>
<label for="event-date">Select a Date:</label>
<input type="date" id="event-date" name="event-date" value="2025-06-06">
</body>
</html>How to add video in HTML?
The HTML <video> element is used to show a video on a web page.
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>How to add Google Maps in HTML?
You can embed Google Maps into an HTML page using an `<iframe>` with a map URL, or by using the Google Maps JavaScript API for more dynamic integration. Here’s an example using an `<iframe>` for a simple embed:
<!DOCTYPE html>
<html>
<body>
<h1>Google Map Example</h1>
<iframe
width="600"
height="450"
style="border:0"
loading="lazy"
allowfullscreen
referrerpolicy="no-referrer-when-downgrade"
src="https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY&q=Space+Needle,Seattle+WA">
</iframe>
<!-- Replace YOUR_API_KEY with your actual Google Maps API key -->
<!-- You can get an embeddable map URL from Google Maps by searching for a location, clicking "Share", then "Embed a map" -->
</body>
</html>How to create a registration form in HTML with a database?
An HTML form handles the client-side user interface for data input. Connecting it to a database requires server-side scripting (e.g., PHP, Node.js, Python with Flask/Django, Ruby on Rails) to process the submitted data and store it in a database (e.g., MySQL, PostgreSQL, MongoDB). The HTML part is purely for input collection:
<form action="/register" method="post">
<label for="fname">First Name:</label><br>
<input type="text" id="fname" name="fname" required><br><br>
<label for="lname">Last Name:</label><br>
<input type="text" id="lname" name="lname" required><br><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email" required><br><br>
<label for="password">Password:</label><br>
<input type="password" id="password" name="password" required><br><br>
<input type="submit" value="Register">
</form>
<!-- The 'action' attribute should point to your server-side script -->
<!-- Example server-side (PHP): register.php -->
<!-- <?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$fname = $_POST['fname'];
$lname = $_POST['lname'];
$email = $_POST['email'];
$password = password_hash($_POST['password'], PASSWORD_DEFAULT); // Hash the password!
$sql = "INSERT INTO users (first_name, last_name, email, password) VALUES (?, ?, ?, ?)";
$stmt = $conn->prepare($sql);
$stmt->bind_param("ssss", $fname, $lname, $email, $password);
if ($stmt->execute()) {
echo "New record created successfully";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
$stmt->close();
$conn->close();
}
?> -->How to create a dynamic calendar in HTML?
Creating a truly dynamic calendar in HTML typically involves JavaScript to generate the calendar days, handle month/year navigation, and potentially fetch events. While the basic HTML structure for a calendar can be laid out, its dynamism comes from scripting.
<!DOCTYPE html>
<html>
<head>
<style>
.month {
padding: 20px 10px;
width: 100%;
background: #1abc9c;
text-align: center;
color: white;
font-size: 24px;
}
.month ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.month ul li {
display: inline-block;
width: auto;
text-align: center;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
color: white;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
.weekdays {
margin: 0;
padding: 10px 0;
background-color: #ddd;
}
.weekdays li {
display: inline-block;
width: 13.6%; /* Approx 1/7th of width */
text-align: center;
font-weight: bold;
}
.days {
padding: 10px 0;
background: #eee;
margin: 0;
}
.days li {
list-style-type: none;
display: inline-block;
width: 13.6%; /* Approx 1/7th of width */
text-align: center;
margin-bottom: 5px;
font-size: 17px;
color: #777;
}
.days li .active {
padding: 5px;
background: #1abc9c;
color: white !important;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="month">
<ul>
<li class="prev" onclick="changeMonth(-1)">❮</li>
<li class="next" onclick="changeMonth(1)">❯</li>
<li>
<span id="currentMonth"></span><br>
<span style="font-size:18px" id="currentYear"></span>
</li>
</ul>
</div>
<ul class="weekdays">
<li>Mo</li>
<li>Tu</li>
<li>We</li>
<li>Th</li>
<li>Fr</li>
<li>Sa</li>
<li>Su</li>
</ul>
<ul class="days" id="calendarDays">
<!-- Days will be dynamically generated here by JavaScript -->
</ul<
<script>
const monthNames = ["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"
];
let currentDate = new Date();
function renderCalendar() {
const year = currentDate.getFullYear();
const month = currentDate.getMonth();
document.getElementById("currentMonth").innerText = monthNames[month];
document.getElementById("currentYear").innerText = year;
const firstDayOfMonth = new Date(year, month, 1).getDay(); // 0 = Sunday, 1 = Monday
const daysInMonth = new Date(year, month + 1, 0).getDate();
const calendarDays = document.getElementById("calendarDays");
calendarDays.innerHTML = ''; // Clear previous days
// Fill in leading empty days for alignment (adjust for Sunday=0)
let startDay = firstDayOfMonth === 0 ? 6 : firstDayOfMonth - 1; // Adjust so Monday is 0
for (let i = 0; i < startDay; i++) {
let li = document.createElement("li");
calendarDays.appendChild(li);
}
// Fill in actual days of the month
for (let i = 1; i <= daysInMonth; i++) {
let li = document.createElement("li");
li.innerText = i;
if (i === new Date().getDate() && month === new Date().getMonth() && year === new Date().getFullYear()) {
li.classList.add("active"); // Mark today's date
}
calendarDays.appendChild(li);
}
}
function changeMonth(delta) {
currentDate.setMonth(currentDate.getMonth() + delta);
renderCalendar();
}
// Initial render
renderCalendar();
</script>
</body>
</html>How to create frames in HTML?
HTML frames, created using the `<frameset>` and `<frame>` tags, were used to divide the browser window into multiple, scrollable regions, each capable of loading a separate HTML document. However, `<frameset>` and `<frame>` are deprecated in HTML5 due to accessibility, usability, and SEO issues. Modern web development prefers `<iframe>` for embedding external content or using CSS layouts (like Flexbox or Grid) to achieve similar visual divisions without the limitations of traditional frames.
<!DOCTYPE html>
<html>
<head>
<title>HTML Deprecated Frames Example</title>
</head>
<!-- WARNING: <frameset> is deprecated in HTML5 and should not be used for new development. -->
<frameset rows = "20%,*,20%">
<frame name = "top_frame" src = "top.html" />
<frame name = "main_frame" src = "main.html" />
<frame name = "bottom_frame" src = "bottom.html" />
<!-- <noframes> content is displayed if the browser does not support frames -->
<noframes>
<body>
<p>Your browser does not support frames. Please consider upgrading.</p>
<p>Alternatively, you can access the content directly:</p>
<ul>
<li><a href="top.html">Top Content</a></li>
<li><a href="main.html">Main Content</a></li>
<li><a href="bottom.html">Bottom Content</a></li>
</ul>
</body>
</noframes>
</frameset>
</html>How to create a menu in HTML?
A basic menu in HTML is typically created using an unordered list (`<ul>`) for the list of menu items, with each item wrapped in a list item (`<li>`) and an anchor tag (`<a>`) for the links. CSS is then used to style these lists into a horizontal or vertical navigation menu.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Basic styling for a horizontal menu */
nav ul {
list-style-type: none; /* Remove bullet points */
margin: 0;
padding: 0;
overflow: hidden; /* Clear floats */
background-color: #333; /* Background color for the menu */
}
nav li {
float: left; /* Make list items float horizontally */
}
nav li a {
display: block; /* Make the entire link clickable */
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none; /* Remove underline from links */
}
nav li a:hover {
background-color: #111; /* Hover effect */
}
</style>
</head>
<body>
<h2>Simple HTML Menu</h2>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>
</body>
</html>What is the difference between HTML tags and elements?
Tags are the keywords used to define HTML elements. They are enclosed within angle brackets (e.g., `<p>`, `</p>`). An HTML element, on the other hand, consists of the opening tag, its content, and the closing tag. For example, `<p>This is a paragraph.</p>` is a complete HTML element.
Which types of heading are found in HTML?
There are six types of headings found in HTML, numbered `<h1>` to `<h6>`. They represent different levels of section headings, with `<h1>` being the most important (largest by default) and `<h6>` being the least important (smallest by default). Headings are used in the following way:
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>How can you insert a copyright symbol in an HTML webpage?
To insert the copyright symbol, you can use the HTML entity `©` or the named entity `©` in your HTML file.
<p>Copyright © 2025 My Website.</p>
<p>Copyright © 2025 My Website.</p>How to specify metadata in HTML?
The `<meta>` tag is used to specify metadata in HTML. Metadata is data about the HTML document and is not displayed on the page itself. The `<meta>` tag is a void tag, meaning it does not require a closing tag. It is typically placed within the `<head>` section of an HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A description of the page for search engines.">
<meta name="keywords" content="HTML, metadata, web development">
<meta name="author" content="Your Name">
<title>My HTML Page</title>
</head>
<body>
<!-- Page content goes here -->
</body>
</html>What are Inline and block elements in HTML?
Block-level elements take up the full page width and start on a new line. In contrast, inline elements only take the space required to accommodate the length of their content and continue on the same line.
Some examples of block elements are `<div>`, `<p>`, `<header>`, `<footer>`, `<h1>`...`<h6>`, `<form>`, `<table>`, `<canvas>`, `<video>`, `<blockquote>`, `<pre>`, `<ul>`, `<ol>`, `<figcaption>`, `<figure>`, `<hr>`, `<article>`, `<section>`, etc.
Some examples of inline elements are `<span>`, `<a>`, `<strong>`, `<img>`, `<button>`, `<em>`, `<select>`, `<abbr>`, `<label>`, `<sub>`, `<cite>`, `<script>`, `<input>`, `<output>`, `<q>`, etc.
Is the audio tag supported in HTML5?
Yes, the `<audio>` tag is fully supported in HTML5. With this tag, you can embed audio content directly into a webpage without the need for third-party plugins. The file formats commonly supported by HTML5 audio include MP3, WAV, and OGG.
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>Is it possible to change the color of the bullet?
Yes, it is possible to change the color of list bullets. By default, the bullet takes the color from the `color` property of the list item text. Therefore, changing the text color of the list item using CSS will also change the bullet color.
<!DOCTYPE html>
<html>
<head>
<style>
ul.custom-bullets li {
color: blue; /* This will make both text and default bullet blue */
}
/* For more control, you might use list-style-image or pseudo-elements */
ul.custom-bullets-advanced {
list-style-type: none; /* Remove default bullet */
padding-left: 20px; /* Make space for custom bullet */
}
ul.custom-bullets-advanced li {
position: relative;
color: black; /* Set text color */
}
ul.custom-bullets-advanced li::before {
content: "•"; /* Custom bullet character */
color: red; /* Custom bullet color */
position: absolute;
left: 0;
}
</style>
</head>
<body>
<h3>Default bullet color change (text color):</h3>
<ul class="custom-bullets">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<h3>Advanced custom bullet color (using pseudo-element):</h3>
<ul class="custom-bullets-advanced">
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>
</body>
</html>How can you keep list elements straight in an HTML file?
You can use indentation to keep the elements of a list aligned straight and improve readability in an HTML file. When creating nested lists, indenting them further than the parent list helps visually organize the structure, making it easier to quickly determine the lists and elements contained within each level.
<ul>
<li>Main Item 1</li>
<li>Main Item 2
<ul>
<li>Nested Item 2.1</li>
<li>Nested Item 2.2
<ol>
<li>Deeply Nested Item 2.2.1</li>
<li>Deeply Nested Item 2.2.2</li>
</ol>
</li>
</ul>
</li>
<li>Main Item 3</li>
</ul>What are Forms in HTML?
Forms in HTML are used to collect information from visitors to a webpage. Once a user enters information into the form fields, this data can be submitted to a server, typically to be processed by a server-side script and then added to a database or used for other purposes.
<form action="/submit_data" method="post">
<label for="name">Name:</label><br>
<input type="text" id="name" name="name"><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="Submit">
</form>What are void elements in HTML?
Void elements in HTML are those that only need an opening tag and do not require a closing tag because they cannot have any content inside them. Some examples include `<br>`, `<img>`, `<hr>`, `<input>`, `<link>`, and `<meta>`.
<p>This is a paragraph.<br>This is a new line.</p>
<img src="image.jpg" alt="Description of image">
<hr> <!-- Horizontal rule -->
<input type="text" name="username">What is a marquee?
A marquee is a scrolling text that can move in a specific direction across the screen (i.e., left, right, up, or down) automatically. This effect was historically achieved using the non-standard `<marquee>` tag. However, the `<marquee>` tag is deprecated in modern HTML and its use is discouraged due to accessibility and usability issues. Modern web development achieves similar effects using CSS animations or JavaScript.
<!-- WARNING: <marquee> is deprecated and should not be used in new web development. -->
<marquee behavior="scroll" direction="left">This text will scroll horizontally!</marquee>
<!-- Modern equivalent using CSS animation -->
<!DOCTYPE html>
<html>
<head>
<style>
.marquee-css {
width: 100%;
overflow: hidden;
white-space: nowrap;
box-sizing: border-box;
}
.marquee-css span {
display: inline-block;
padding-left: 100%;
animation: marquee 15s linear infinite;
}
@keyframes marquee {
0% { transform: translate(0, 0); }
100% { transform: translate(-100%, 0); }
}
</style>
</head>
<body>
<div class="marquee-css">
<span>This text scrolls using CSS animations for modern browsers.</span>
</div>
</body>
</html>What is an Anchor tag in HTML?
The anchor tag (`<a>`) in HTML is used to create hyperlinks, which allow users to navigate between different web pages, website templates, or sections within the same document. The `href` attribute specifies the destination URL, and the `target` attribute defines where the linked document will open.
<!-- Linking to another page -->
<a href="https://www.example.com">Visit Example Website</a>
<!-- Linking to a section within the same page -->
<a href="#section-id">Go to Section</a>
<!-- Linking to another page in a new tab -->
<a href="another-page.html" target="_blank">Open in New Tab</a>
<!-- Mailto link -->
<a href="mailto:info@example.com">Send us an email</a>What is an image map?
Identified by the <map> tag, an image map can link an image to different web pages. It is one of the most asked questions in interviews these days.
What is the datalist tag?
The `datalist` tag is an HTML tag that lets the user auto-complete a form based on predefined options. It presents users with predefined options that they can choose from. An example of this can be as below:
<label for="favBolActor">
Enter your favorite Bollywood Actor: Press any character<br />
<input type="text" id="favBolActor" list="BolActors">
<datalist id="BolActors">
<option value="Shahrukh Khan">
<option value="Akshay Kumar">
<option value="Aamir Khan">
<option value="Saif Ali Khan">
<option value="Ranbir Kapoor">
<option value="Ranveer Singh">
<option value="Sanjay Dutt">
<option value="Hrithik Roshan">
<option value="Varun Dhawan">
<option value="Ajay Devgan">
</datalist>
</label>What is the difference between HTML and XHTML?
HTML and XHTML have a few differences as below:
- HTML stands for Hypertext Markup Language, while XHTML stands for Extensible Hypertext Markup Language.
- The format of HTML is a document file format, while for XHTML, the file format is a markup file format.
- In HTML, it is not necessary to close tags in the same order as they were opened, but in XHTML, it is necessary.
- In XHTML, it is quite important to write `DOCTYPE` at the top of the file; while in HTML, it is not strictly needed.
- The file name extensions used in HTML are .html, .htm; and the file name extensions used in XHTML are .xhtml, .xht, .xml.
What is the 'class' attribute in HTML?
It is an attribute that refers to one or more class names for an HTML element. The class attribute can be used for HTML elements to apply styling or to select them with JavaScript.
What is the use of an IFrame tag?
IFrame or Inline Frame is an HTML document embedded inside another HTML document on a website. The IFrame element is used for inserting content from other sources, such as an advertisement, into a webpage.
What is the use of the figure tag in HTML5?
The HTML `figure` tag is used for adding self-contained content such as illustrations, photos, diagrams, or code listings. The HTML `figure` tag often contains two tags: `img` (or similar media element) and `figcaption`. `img` is used for adding an image source in a document, while `figcaption` is used for setting a caption for the image.
Why is a URL encoded in HTML?
A URL is encoded in HTML as it converts characters into a format that can be transmitted over the web. A URL is transmitted over the internet through the ASCII character set. Non-ASCII characters can be replaced by "%" which is followed by hexadecimal digits.
What are the different kinds of Doctypes available?
A document type declaration or doctype is an instruction that conveys to the web browser what type of document it should expect.
The `<!DOCTYPE>` declaration is included at the start of each document, just above the `<html>` tag.
The common doctype declarations for different versions of HTML and XHTML are:
- For HTML5: We simply write `<!DOCTYPE html>`
- HTML 4.01 Strict: The strict version of HTML 4.01 does not permit presentational elements to be written within HTML. It also does not support the inclusion of Frames.
- HTML 4.01 Transitional: This Transitional Document Type Definition (DTD) allows users to utilize certain elements and attributes which were not allowed to be used in the strict doctype.
- HTML 4.01 Frameset: In HTML 4.01 Frameset Document Type Definition (DTD), users are allowed to use frames.
- XHTML 1.0 Strict: In XHTML 1.0 Strict Document Type Definition (DTD), deprecated tags are not supported, and the code must be written according to the XML Specification.
- XHTML 1.0 Transitional: In XHTML 1.0 Transitional Document Type Definition (DTD), deprecated elements are allowed.
- XHTML 1.0 Frameset: In XHTML 1.0 Frameset Document Type Definition (DTD), framesets are used.
- XHTML 1.1: In XHTML 1.1 Document Type Definition (DTD), the addition of modules is allowed.
<!DOCTYPE html><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/transitional.dtd"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">Please explain how to indicate the character set being used by a document in HTML.
HTML5 by default uses the UTF-8 charset even if it is not explicitly defined. To define it explicitly in an HTML document, the character set is specified using the `charset` attribute of a `<meta>` tag, which is placed inside the `<head>` element of the HTML.
<head>
<title>Charset HTML</title>
<meta charset="UTF-8">
</head>What is the advantage of collapsing white space?
White spaces are a sequence of blank space characters, treated as a single space character in an HTML document.
The advantages of collapsing white space are:
- Helps the content of the code to be more understandable and readable to users.
- Decreases the transmission time between the server and the client and removes unnecessary bytes occupied by white spaces.
- If you leave extra white space by mistake, the browser will ignore it and display the content properly.
What are HTML Entities?
Some characters are reserved in HTML and have special meanings. HTML entities are used to display invisible characters and reserved characters that might be interpreted as HTML code. An HTML entity is a piece of text, or string, that begins with an ampersand (`&`) and ends with a semicolon (`;`).
A few HTML Entities are:
- ` ` - non-breaking space
- `<` - less than sign (<)
- `>` - greater than sign (>)
- `&` - ampersand (&)
- `"` - double quotation mark (")
- `'` - single quotation mark (')
- `¢` - cent sign (¢)
- `£` - pound sign (£)
Describe the HTML layout structure.
An HTML page layout describes the appearance of a website. An HTML layout structure helps the user to navigate through web pages easily. HTML layout specifies a way to arrange web pages in a well-mannered, well-structured way using simple HTML tags.
HTML Layout can be structured by:
- Using Tables: Giving rows and columns and assigning text to them.
- Multiple Columns Layout using tables.
- Using DIV, SPAN tags.
Common HTML Layout Elements:
- `<header>`: Defines a header section for a document.
- `<nav>`: Defines navigation links.
- `<section>`: Defines a section in a document.
- `<article>`: Defines independent content.
- `<aside>`: Defines sidebar content.
- `<footer>`: Defines a footer for a section.
- `<details>`: Defines additional details.
- `<summary>`: Defines a heading for the `<details>` element.
How to optimize website asset loading?
Page loading refers to how quickly your content is displayed when a user visits a page on your site.
The different ways to optimize asset loading are:
- Minimize HTTP requests.
- Utilize Content Delivery Network (CDN) and remove unused scripts/files.
- Compress images and optimize files.
- Caching data to the browser.
- Reducing redirects to multiple pages.
- Use asynchronous loading and delay loading for CSS and JavaScript files.
- Minify (removing unnecessary characters, spaces, comments, and any not required elements to reduce the size of the files) CSS, JavaScript, and HTML.
- Remove unnecessary plugins.
How is Cell Padding different from Cell Spacing?
Cell Padding and Cell Spacing are attributes for formatting a table, basically setting the white spaces in your table.
| Cell Padding | Cell Spacing |
|---|---|
| Used to fix the width/space between the border and its content. | Fixes the white space between individual cells, i.e., space between the edges and adjacent cells. |
Syntax:
|
Syntax:
|
| The default `cellpadding` value is 1. | The default `cellspacing` value is 2. |
Example:
<table border="2" cellpadding="2" cellspacing="10">
<thead>
<tr>
<td><span>Name</span></td>
<td><span>Email Id</span></td>
</tr>
</thead>
<tbody>
<tr>
<td>abc</td>
<td>abc@gmail.com</td>
</tr>
</tbody>
</table>In how many ways can we position an HTML element? Or what are the permissible values of the position attribute?
To position an HTML element, there are five different values for the `position` attribute:
- `static`
- `relative`
- `fixed`
- `absolute`
- `sticky`
How to include JavaScript code in HTML?
There are two ways we can include JavaScript code in HTML:
Embedded JS: In this method, we add the script tag directly in the HTML document as shown below. You can add the script tag either in the `<head>` section or the `<body>` section of an HTML document, depending on when you want the script to be loaded.
<script>
document.write("Welcome!");
</script>External JS: Create a separate JavaScript file and save it with a `.js` extension. Then, use the `src` attribute of the `<script>` tag to link the `.js` file to the HTML document as shown below.
<script src="file1.js"></script>What is the significance of the `<head>` and `<body>` tags in HTML?
The `<head>` and `<body>` tags of HTML have their own significance as below:
| Head | Body |
|---|---|
| Describes the metadata or information related to the document. | Describes the document's main content of an HTML document. |
| The `<head>` tag contains the title for the document, and also other tags such as scripts, styles, links, and meta information. | The `<body>` tag contains all the visible content of an HTML document, defined using different tags such as text, hyperlinks, images, tables, lists, etc. |
Can we display a web page inside a web page, or is nesting of webpages possible?
Yes, it is possible to create nested pages in an HTML document. We can use `<iframe>` or `<embed>` tags, and with the help of the `src` attribute, one can add a URL to display another page within the current one.
What is an Anchor tag in HTML?
Whenever you need to link any two web pages, website templates, or sections, you can do so using the anchor tag. The anchor tag format is `<a href="#" target="link"></a>`. Here, the `target` attribute defines where the linked document will open, while the `href` attribute indicates the URL or section within the document.
<a href="https://example.com" target="_blank">Visit Example</a>
<a href="#section-id">Go to Section</a>