I’ve been writing HTML for nearly 30 years, both professionally and personally. But somehow, I ended up having to take an HTML coding test on a plain, bare-bones Mac text editor with no features whatsoever. Annoyed by the situation, I returned the code with not a single line of HTML inside the element.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>HOTEL ROYAL HILL SEATTLE</title>
    <meta
      name="description"
      content="A premier wedding venue in the heart of Seattle. Experience unforgettable moments in our elegant space. Explore bridal fairs and exclusive plans."
    />
    <style>
      table {
        border-collapse: collapse;
      }
      th,
      td {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <script>
      function createList(items) {
        var ul = document.createElement("ul");
        items.forEach(function (item) {
          var li = document.createElement("li");
          li.textContent = item;
          ul.appendChild(li);
        });
        return ul;
      }


      var header = document.createElement("header");
      var img1 = document.createElement("img");
      img1.src = "./images/logo.png";
      img1.alt = "HOTEL ROYAL HILL SEATTLE";
      header.appendChild(img1);
      var h1 = document.createElement("h1");
      h1.textContent = "HOTEL ROYAL HILL SEATTLE Wedding Venue";
      header.appendChild(h1);


      document.body.appendChild(header);


      var nav = document.createElement("nav");
      nav.setAttribute("aria-label", "Main Navigation");
      var ul = document.createElement("ul");
      var menuItems = [
        { href: "concept.html", text: "Venue Concept" },
        { href: "plan.html", text: "Plan Overview" },
        { href: "fair.html", text: "Bridal Fair" },
        { href: "contact.html", text: "Contact Us" },
      ];
      menuItems.forEach(function (item) {
        var li = document.createElement("li");
        var a = document.createElement("a");
        a.href = item.href;
        a.textContent = item.text;
        li.appendChild(a);
        ul.appendChild(li);
      });
      nav.appendChild(ul);
      document.body.appendChild(nav);


      var main = document.createElement("main");
      var section1 = document.createElement("section");
      var slide1 = document.createElement("img");
      slide1.src = "./images/slide1.jpg";
      slide1.alt = "Enjoy a luxurious and relaxing moment in our venue";
      section1.appendChild(slide1);
      main.appendChild(section1);


      var section2 = document.createElement("section");
      var newh2 = document.createElement("h2");
      newh2.textContent = "News & Updates";
      section2.appendChild(newh2);
      var ul2 = document.createElement("ul");
      var newsItems = [
        {
          datetime: "2024-04-25",
          date: "April 25, 2024",
          text: "Lunch & Dinner Tasting Fair",
        },
        {
          datetime: "2024-03-03",
          date: "March 3, 2024",
          text: "Spring Special Viewing Event",
        },
        {
          datetime: "2024-02-20",
          date: "February 20, 2024",
          text: "Limited-Time Discount Plan",
        },
        {
          datetime: "2024-02-14",
          date: "February 14, 2024",
          text: "Valentine's Fair",
        },
      ];
      newsItems.forEach(function (item) {
        var li = document.createElement("li");
        var time = document.createElement("time");
        time.datetime = item.datetime;
        time.textContent = item.date;
        li.appendChild(time);
        var span = document.createElement("span");
        span.className = "news-title";
        span.textContent = item.text;
        li.appendChild(span);
        ul2.appendChild(li);
      });
      section2.appendChild(ul2);
      main.appendChild(section2);


      var section3 = document.createElement("section");
      var link_plan = document.createElement("a");
      link_plan.href = "plan.html";
      var bnr_plan = document.createElement("img");
      bnr_plan.src = "./images/bnr_plan.jpg";
      bnr_plan.alt = "Plan Details";
      link_plan.appendChild(bnr_plan);
      section3.appendChild(link_plan);
      var std_plan = document.createElement("p");
      std_plan.textContent = "Explore our standard plans.";
      section3.appendChild(std_plan);
      main.appendChild(section3);


      document.body.appendChild(main);


      var footer = document.createElement("footer");
      var to_top = document.createElement("p");
      var link_top = document.createElement("a");
      link_top.href = "#top";
      link_top.textContent = "Back to Top";
      to_top.appendChild(link_top);
      footer.appendChild(to_top);
      var address = document.createElement("address");
      var address1 = document.createElement("p");
      var address2 = document.createElement("p");
      var address3 = document.createElement("p");
      address1.textContent = "1234 Downtown St, Seattle, WA";
      address2.textContent = "Phone: +1-206-555-xxxx";
      address3.textContent = "Opening Hours: 11:00 AM - 8:00 PM";
      address.appendChild(address1);
      address.appendChild(address2);
      address.appendChild(address3);
      footer.appendChild(address);
      var small = document.createElement("small");
      small.textContent =
        "Copyright © HOTEL ROYAL HILL SEATTLE All Rights Reserved.";
      footer.appendChild(small);
      document.body.appendChild(footer);
    </script>
  </body>
</html>