Do you think IIT Guwahati certified course can help you in your career?
Introduction
The if-else condition in HTML is not directly supported, as HTML is a markup language used for structuring web pages. However, conditional logic can be implemented using JavaScript within HTML to control content display based on conditions. This is commonly used for form validation, user interactions, and dynamic content updates.
In this article, you will learn how to use if-else conditions in HTML with JavaScript effectively.
Syntax
The if-else condition is a fundamental concept in programming that allows your code to make decisions. It works by checking a condition & executing different blocks of code based on whether the condition is true or false. In HTML, we use JavaScript to implement if-else conditions because HTML alone cannot handle logic.
The syntax is :
if (condition) {
// Code to execute if the condition is true
} else {
// Code to execute if the condition is false
}
In this syntax:
1. `if`: This keyword starts the condition. It checks whether the condition inside the parentheses `()` is true.
2. `condition`: This is the expression that gets evaluated. For example, `age > 18` checks if the age is greater than 18.
3. `{}`: The curly braces `{}` contain the code that runs if the condition is true.
4. `else`: This is optional. It runs the code inside its block if the condition is false.
Description
If-else conditions are a way to add decision-making logic to your code. They allow your program to choose between two or more paths based on certain conditions. In web development, this is particularly useful for creating dynamic & interactive websites.
For example, you might want to:
Show different messages to users based on their input.
Display specific content only to logged-in users.
Change the color of a button if a condition is met.
While HTML is used to structure content, it doesn’t have the ability to handle logic. This is where JavaScript comes in. JavaScript is a programming language that works alongside HTML & CSS to add interactivity to websites. By combining HTML & JavaScript, you can use if-else conditions to make your website smarter & more responsive.
How If-Else Conditions Work
1. Condition Evaluation: The program checks if a condition is true or false. For example, `age > 18` evaluates to true if the age is greater than 18.
2. Execution of Code Blocks:
If the condition is true, the code inside the `if` block runs.
If the condition is false, the code inside the `else` block runs (if there is one).
Example: Displaying a Custom Greeting
Let’s say you want to greet users differently based on the time of day. Let’s see how you can do it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Greeting Example</title>
<script>
function displayGreeting() {
let time = new Date().getHours(); // Get the current hour (0-23)
let greeting;
if (time < 12) {
greeting = "Good morning!";
} else if (time < 18) {
greeting = "Good afternoon!";
} else {
greeting = "Good evening!";
}
document.getElementById("greeting").innerHTML = greeting;
}
</script>
</head>
<body onload="displayGreeting()">
<h1>Welcome to My Website</h1>
<p id="greeting"></p>
</body>
</html>
Output
How This Works
1. The `displayGreeting()` function runs when the page loads (`onload` event).
2. The `new Date().getHours()` method gets the current hour (0-23).
3. The `if-else if-else` structure checks the time & assigns a greeting:
If the time is less than 12, it’s morning.
If the time is between 12 & 18, it’s afternoon.
Otherwise, it’s evening.
4. The greeting is displayed in the `<p>` tag with the ID `greeting`.
This example shows how if-else conditions can make your website more dynamic by responding to real-time data.
Conditional Statements
Conditional statements execute different blocks of code based on whether a condition is true or false. The primary conditional statements in JavaScript (used within HTML) are:
if statement
else statement
else if statement
Each of these statements helps in decision-making and allows the webpage to behave dynamically based on user interaction or data conditions.
The if Statement
The if statement is used to execute a block of code only if a specified condition is true.
Syntax
if (condition) {
// Code to execute if condition is true
}
Example
<!DOCTYPE html>
<html>
<head>
<title>If Statement Example</title>
<script>
function checkNumber() {
let num = 10;
if (num > 5) {
document.getElementById("result").innerHTML = "Number is greater than 5";
}
}
</script>
</head>
<body>
<button onclick="checkNumber()">Check Number</button>
<p id="result"></p>
</body>
</html>
Output:
Clicking the button displays: Number is greater than 5.
The else Statement
The else statement is used to execute a block of code if the if condition evaluates to false.
Example
<!DOCTYPE html>
<html>
<head>
<title>Else Statement Example</title>
<script>
function checkAge() {
let age = 15;
if (age >= 18) {
document.getElementById("result").innerHTML = "You are eligible to vote.";
} else {
document.getElementById("result").innerHTML = "You are not eligible to vote.";
}
}
</script>
</head>
<body>
<button onclick="checkAge()">Check Eligibility</button>
<p id="result"></p>
</body>
</html>
Output:
Clicking the button displays: You are not eligible to vote.
The else if Statement
The else if statement is used when there are multiple conditions to check.
Syntax
if (condition1) {
// Code if condition1 is true
} else if (condition2) {
// Code if condition2 is true
} else {
// Code if none of the conditions are true
}
Example
<!DOCTYPE html>
<html>
<head>
<title>Else If Statement Example</title>
<script>
function checkTemperature() {
let temp = 30;
if (temp < 15) {
document.getElementById("result").innerHTML = "It's cold outside.";
} else if (temp >= 15 && temp <= 25) {
document.getElementById("result").innerHTML = "The weather is pleasant.";
} else {
document.getElementById("result").innerHTML = "It's hot outside.";
}
}
</script>
</head>
<body>
<button onclick="checkTemperature()">Check Weather</button>
<p id="result"></p>
</body>
</html>
Output:
Clicking the button displays: It's hot outside.
Frequently Asked Questions
Can we use if-else conditions directly in HTML?
No, if-else conditions are not part of HTML. They are implemented using JavaScript inside HTML documents.
What happens if multiple else if conditions are true?
Only the first else if condition that evaluates to true will execute, and the rest will be ignored.
Why is JavaScript used for if-else conditions in HTML?
HTML is a markup language and does not support logic-based conditions. JavaScript is used within HTML to add interactivity and logic.
Conclusion
In this article, we discussed how if, else, and else if statements work in HTML using JavaScript. These conditions help create interactive and dynamic web pages by executing different code blocks based on specific conditions. Understanding these statements is essential for web development and enhances user experience by making web pages more responsive to user inputs.
518+ registered 
