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

jPaulB · Aug 12, 2023

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>

BigDady · Aug 12, 2023

The 'a PopUp rectangle, a Log-In form' should be a DIV! And the <style> section S/B in the <head> not the <body>.

VBService · Aug 12, 2023

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>

VBService · Aug 12, 2023

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>

jPaulB · Aug 12, 2023

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?

BigDady · Aug 13, 2023

Here is a page and a learning site that should help you with everything you're worried about: https://www.w3schools.com/howto/howto_css_login_form.asp

And for heavens sake do not use an <iframe>

VBService · Aug 13, 2023

BigDady said:
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.

jPaulB said:
HTML document which already has its' own notion of <body>
What can I do to avoid any issues from the second <body> tag?

VBService · Aug 13, 2023

@jPaulB can you explain more clarity, why you need use two HTML documents to create Log-in form?

VBService · Aug 15, 2023

Maybe you wanna use some part of HTML code inside main document, try with <template>.

jPaulB · Aug 15, 2023

VBService said:
@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.

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.

BigDady · Aug 15, 2023

Read the page I gave you.

How to position the tooltip comment on these buttons?	9	Nov 4, 2023
XHTML - how extend/create ELEMENT body in my DTD?	0	Oct 29, 2019
Trying to make a "Jump to" in a Frequently Asked Question page	1	Jan 8, 2025
Aligned to the left	3	Apr 19, 2023
Hello I am learning how to code and I tried making a calculator with HTML and js with some CSS I am stuck at thing, Like the screen value is	0	Mar 13, 2025
Need help with <rowspan> in an HTML table	1	Nov 6, 2024
HTML Site Problems	11	Nov 25, 2019
? Trouble with: passing dragElement(e.target.id);	8	Jan 11, 2023

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

jPaulB

BigDady

VBService

VBService

jPaulB

BigDady

VBService

VBService

VBService

jPaulB

BigDady

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads