Automatically closing label devouring its counterpart

When 2 tags are self-closed, should they be in the same position in hierarchy, or should the next tag be the child of the first one?

I used to believe that both structures were syntactically identical:

Example 1

<div>
<div class="bordered"></div>
<div class="bordered"></div>
</div>

Example 2

<div>
<div class="bordered"/>
<div class="bordered"/>
</div>

However, jsFiddle tells me that the second one is equivalent to:

Example 3

<div>
<div class="bordered">
  <div class="bordered"></div>
</div>
</div>

I noticed this behavior when I updated jQuery in my npm dependencies. Previous versions up to 3.4.1 converted Example 2 to Example 1, but the latest version (3.5.0) converts Example 2 to Example 3.

Which behavior do you think is correct?

Answer №1

Unlike void elements like <br>, the DIV element is not self-closing according to modern HTML standards.

While browsers may attempt to correct this mistake, using <div .../> instead of <div> can result in the closing tag </div> being inserted incorrectly, often referred to as an "intelligent" placement.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing Scrollify for seamless section scrolling with overflow effects

I have been experimenting with the Scrollify script (https://github.com/lukehaas/Scrollify) and facing an issue where my sections are longer than the user's screen, requiring them to scroll down to view all content. However, Scrollify doesn't al ...

Reactjs Addition: Combining Two Numbers

I'm looking to create a simple calculation feature using ReactJS. I have two input boxes where users can enter numbers, and my goal is to display the sum of these numbers in a span element. However, instead of adding the numbers together, they are bei ...

A pale box located at the lower part of a screen

There seems to be a persistent white box at the bottom of my page/view that I can't seem to remove. Even when inspecting elements, there are no visible elements present in that space, not even within the body or html tags. I have attempted various sol ...

Element boilerplate template for Jquery plugin development

I am currently working on a plugin development project using jquery-boilerplate-v3.1 and I find myself struggling with understanding the difference between "this" and "$(this)". in the plugin ... $.fn[pluginName] = function ( options ) { ...

The image sits on the edge of the container, not fully contained

.sub2 { background-color: #FFFFBF; margin-top: 30px; height: 410px; width: 100%; } h1.sub2 { font: bold 100px american captain; text-decoration: underline; float: right; } p.sub2- { font: italic 25px american captain; margin-top: -300px; ...

What is the best way to retrieve Select button values from a MySQL database and pass them to a different page?

I've been trying to code it, but I keep running into issues. The main objective was to allow the user to select a value from a MySQLi database and then send that value to another page. I know people recommend using AJAX for this purpose, so I attempte ...

Preventing background scrolling while using a fixed overlay in jQuery/CSS

I'm working on an overlay box that is fixed and centered on the screen. The page it's being used on is pretty lengthy and has a vertical scrollbar. My goal is to prevent scrolling of the main page when the overlay is displayed. However, I can&ap ...

Refreshing all parts of a webpage except for a single div

Currently, I am in the process of creating a simple web page that includes a small music player (niftyPlayer). The individuals I am developing this for request that the player be located in the footer and continue playing when users navigate to different s ...

The watermark feature in HTML may not appear when printed on every page

I'm facing an issue with adding a watermark style. The watermark displays only on the first page when attempting to print in Chrome. It works perfectly in Firefox and IE. <style type="text/css"> #watermark { color: #d0d0d0; font-size: 90pt; ...

How can we iterate through a JSON response containing arrays like [1, 1], [2, 3], [5, 1] using jQuery?

I received a JSON response that contains an array structured like this: [1, 1] [2, 3], [5,1] This array represents the data as [project_id, unreadCount] <div> <li id="project-1>0</li> <li id="project-2>0</li> <li id ...

Error message indicating that an image is not found, causing the image to flicker

I have implemented a solution to display a 'no image found' placeholder when the original image fails to load. The src attribute of the img element is being updated very frequently, resulting in rapid changes. This leads to flickering of the err ...

Simple method for integrating alert pop-ups on every page of current Asp.Net MVC (RazorView) application

Our current ASP.NET MVC 4 application utilizes RazorView for its structure. We now have a need to display information messages as pop-ups on each page. This information may come from an ajax call to a metadata service, or after a form submission operation ...

Incorporate a dynamic PowerPoint presentation directly onto my website

In my situation, on the client side, users can select image files (jpg|png|gif), PDF files, and PPT files which are then stored in a database. When viewing these selected files in the admin panel, I am using conditional statements to display them appropr ...

Wrapbootstrap offers dynamic design options for Java-based web applications

I recently obtained a bootstrap theme from the website wrapbootstrap to use in my Java web application. However, I am unsure of where to begin with it. Despite having already added the bootstrap css to my application, I now wish to remove it and replace it ...

Customize the appearance of the 'Update' or 'Publish' WordPress button using code from functions.php or style.css

Current issues with permissions to core files and stylesheets are prompting me to seek ways to customize the LOCATION and APPEARANCE of the 'Update / Publish' button in Wordpress CMS posts/pages. Any tips on how to achieve this despite the challe ...

Moving the remaining columns to the following page in PHP: a step-by-step guide

Hello everyone, I've been scouring the internet but have yet to find a solution. I have a code that generates a table. The issue I am facing is that all columns are displayed on one page and I want them to be split into groups of 10 columns per page. ...

When the button is clicked, HTML buttons toggle and collapse information while toggling all other buttons

As a beginner in HTML and CSS, I've successfully created buttons that display more information when clicked. However, I'm struggling to figure out how to collapse the information being shown by other buttons when a new one is clicked. I've t ...

How to redirect a form submission using jQuery

Is there a way to make this code work upon submission instead of on click? This is the form I am working with: <form> <input type="radio" name="value" value="http://google.com"><span>Google</span><br> <input type= ...

The number of TH elements does not match the number of columns in the table

Is there a way to make only one th span the full width of the table, even with 5 columns below? I want to color the background of the th to cover the entire width. However, since the rest of the table contains 5 columns, the single th only stretches acros ...

The behavior of Elementor lightbox buttons upon being clicked

When using Android, I've noticed that the lightbox briefly displays a semitransparent cyan bar on the left and right buttons when they are pressed. Is there a way to control or prevent this behavior? Any suggestions would be appreciated! Thanks in adv ...