I'm about to get in trouble with the HTML <body></body> tags

Joined
Aug 16, 2022
Messages
52
Reaction score
2
Hi everybody,
I just know this is gonna bite me.
There is supposed to be only one <body> </body> tag in an HTML page.
The example below is supposed to be a PopUp rectangle, a Log-In form actually. It will be called from within another
HTML document which already has its' own notion of <body>
What can I do to avoid any issues from the second <body> tag?
I'm pretty sure I should not do it the way I am setting it up.

HTML:
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
</head>

<body>
    <style>
        body {
            font-size: 0.75rem;
            position: relative;
            left: 6.25rem;
            height: 12.5rem;
            width: 50rem;
        }
    </style>
</body>

</html>
 
Joined
Nov 13, 2020
Messages
302
Reaction score
38
The 'a PopUp rectangle, a Log-In form' should be a DIV! And the <style> section S/B in the <head> not the <body>.
 
Joined
Jul 4, 2023
Messages
400
Reaction score
44
You can use e.g. <iframe>, this allows you to use another HTML document inside current HTML document.

HTML:
<!DOCTYPE html>
<html>
  <head>
      <title>Untitled</title>
  
    <style>
      body {
        font-size: 0.75rem;
        position: relative;
        left: 6.25rem;
        height: 12.5rem;
        width: 50rem;
      }
    </style>
  </head>
  <body>
  
    <iframe>
      <!DOCTYPE html>
      <html>
        <head>
          
        </head>
        <body>
          
        </body>
      </html>
    </iframe>

  </body>
</html>
 
Last edited:
Joined
Jul 4, 2023
Messages
400
Reaction score
44
You can use even <a> element to load Log-in form document e.g.

HTML:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Home page</title>

    <style>
      html,
      body {
        margin: 0;
        padding: 0;
        width: 100vw;
        overflow-x: hidden;
      }
      header {
        --padding: 1rem;
        position: fixed;
        top: 0;
        width: calc(100% - (var(--padding) * 2));
        background-color: rgba(0, 0, 0, .8);
        padding: var(--padding);
      }
      nav ul {
        display: flex;
        gap: 1rem;
        align-items: center;
        list-style: none;
        margin: 0;
        padding: 0;
        font: 500 1rem/1 system-ui, monospace;
        user-select: none;
      }
      nav li.logo + li {
        margin-left: 2rem;
      }
      nav .logo {
        color: orange;
        font-size: 2rem;
        pointer-events: none;
      }
      nav a {
        display: block;
        padding: .25rem .75rem;
        text-decoration: none;
        color: white;
      }
      @media (any-hover: hover) {
        nav a:hover {
          background-color: rgba(0, 0, 0, .2);
        }
      }
      nav li:last-child { /* Log-In */
        margin-left: auto;
      }
    </style>
  </head>
  <body>
 
    <header>
      <nav>
        <ul>
          <li class="logo">&#9784;</li>
          <li><a href="index.html">Home</a></li>
          <li><a href="about_us.html">About us</a></li>
          <li><a href="contact.php">Contact</a></li>
      
          <!-- call for another HTML document with Log-In form -->
          <li><a href="login.php">Log-In</a></li>
        </ul>
      </nav>
    </header>
 
  </body>
</html>
 
Joined
Aug 16, 2022
Messages
52
Reaction score
2
Hi again, Everybody

I have moved the <style> </style> to inside the <head> </head> structure. That second <body> is where I am defining the
PopUp box display-selectors.
What I worry about is when I call the PopUp box and am finished with it, I'll JavaScript my way back to the calling page.

Will that calling page display itself properly, or be influenced by the second <body> selectors, such as height: 12.5rem; for example?
 
Joined
Jul 4, 2023
Messages
400
Reaction score
44
And for heavens sake do not use an <iframe>

It's about clarification, you shouldn't (@jPaulB) make the login form as an html document used in the <iframe>.

<iframe> is officially described on MDN Web Docs and is not deprecated, the other thing is that it shouldn't be used for login form.
I mentioned about <iframe> because part of the question (@jPaulB) was if it possible to put one HTML document inside another.
HTML document which already has its' own notion of <body>
What can I do to avoid any issues from the second <body> tag?
 
Joined
Aug 16, 2022
Messages
52
Reaction score
2
@jPaulB can you explain more clarity, why you need use two HTML documents to create Log-in form?
It would be my pleasure. Thank you...
This is the general design I have in mind. Rectangles "A" and "B" are PopUps that could be called from the buttons on the top-right of the webpage.

Example.jpg


PopUp "A" would be a simple Log-In form and PopUp "B" a larger Registration form, so the two boxes will have different Height: and Width: selectors. I'll just focus on PopUp "A".

HTML:
<head>
    <style>
         body {
             font-size: 0.800rem;
            position: relative;
            left: 6.25rem;
            height: 8rem;
            width: 47.5rem;
        }
    </style>
</head>
<body>

</body>
</html>


I am afraid that (after I've learned the necessary code to display the form, accept and retain the information with mySQL) and return to the starting webpage that the Height: and Width: selectors will have been permanently changed because of the PopUp. In which case, the starting webpage will not display properly.

Is this the kind of thing I ought to worry about in the first place?

Again, thanks for giving me some of your time.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,836
Messages
2,569,748
Members
45,545
Latest member
rapter____0

Latest Threads

Top