HTML if else

Home › Forums › Web Design › HTML › HTML if else

  • This topic is empty.
  • Creator
    Topic
  • July 18, 2024 at 11:13 am #6331
    design
    Keymaster
      Up
      0
      Down
      ::

      HTML itself does not have conditional statements like “if-else” as it is primarily a markup language used for structuring content on web pages. However, you can achieve conditional behavior and dynamic content on web pages by using other technologies in conjunction with HTML, such as JavaScript or server-side scripting languages like PHP. Here’s how you can incorporate conditional logic in HTML:

      Using JavaScript (Client-side):

      JavaScript is a scripting language that runs in the browser and can manipulate HTML elements and respond to user actions. You can use JavaScript to create conditional statements and update HTML content dynamically based on conditions.

      Example:

      <!DOCTYPE html>
      <html lang=”en”>
      <head>
      <meta charset=”UTF-8″>
      <title>Conditional HTML Example</title>
      <script>
      function showGreetings() {
      var currentHour = new Date().getHours();
      var greeting;

      if (currentHour < 12) {
      greeting = “Good morning!”;
      } else if (currentHour < 18) {
      greeting = “Good afternoon!”;
      } else {
      greeting = “Good evening!”;
      }

      document.getElementById(“greeting”).innerHTML = greeting;
      }
      </script>
      </head>
      <body onload=”showGreetings()”>
      <div id=”greeting”></div>
      </body>
      </html>

      • Explanation:
        • This HTML document uses JavaScript (<script> tag) to define a function showGreetings().
        • The function calculates the current hour (new Date().getHours()) and assigns a greeting based on the time of day.
        • The greeting is then displayed dynamically in the <div> element with id “greeting” (document.getElementById("greeting").innerHTML = greeting;).
        • The onload="showGreetings()" attribute in the <body> tag ensures that the showGreetings() function is called when the page loads.

      Using Server-side Scripting (e.g., PHP):

      Server-side scripting languages like PHP can generate HTML content dynamically before sending it to the browser. They can use conditional statements to determine which HTML content to include based on server-side conditions (e.g., data from a database, user authentication status).

      Example (PHP):

      <!DOCTYPE html>
      <html lang=”en”>
      <head>
      <meta charset=”UTF-8″>
      <title>Conditional HTML Example</title>
      </head>
      <body>
      <?php
      $isLoggedIn = true; // Example condition (replace with actual logic)
      if ($isLoggedIn) {
      echo “<h1>Welcome, User!</h1>”;
      } else {
      echo “<h1>Please log in to continue.</h1>”;
      }
      ?>
      </body>
      </html>

      • Explanation:
        • This PHP script embeds HTML within <?php ... ?> tags.
        • Depending on the value of $isLoggedIn, it outputs different HTML content (<h1> tags) dynamically.
        • This allows the HTML displayed to vary based on server-side conditions.

      While HTML itself doesn’t support if-else conditional statements, you can achieve dynamic and conditional behavior on web pages using JavaScript for client-side interactions or server-side scripting languages like PHP for generating dynamic HTML content before it reaches the browser.

    • Creator
      Topic
    Share
    • You must be logged in to reply to this topic.
    Share