Is Nesting a `` Inside a `` Element Considered Correct HTML?-CSS Tutorial-php.cn

Is Nesting a `` Inside a `` Element Considered Correct HTML?

Is It Proper to Nest a

Inside a Element?

In Bootstrap, it's common to use horizontal forms. However, one might encounter the need to avoid creating IDs for each element. As a workaround, some consider nesting a

inside a with a custom CSS class to force it to behave as a block element.

Specifically, the following code demonstrates this approach:

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label class="block">
      <span class="col-lg-2 control-label">Email</span>
      <div class="col-lg-10">
        <input type="email" class="form-control">
      </div>
    </label>
  </div>
</form>

Copy after login

And the custom CSS:

.block {
  display: block;
}

Copy after login

The Correct Approach

According to the HTML specification, a element is not allowed to contain a

element. From the specification:

"Content model:
Phrasing content, but with no descendant labelable elements unless it is the element's labeled control, and no descendant label elements."

Phrasing content refers to text and elements that mark up text at the intra-paragraph level, including , , , and , among others.

is not included in this list. Therefore, nesting a inside a is considered incorrect HTML. It may result in unexpected behavior or validation errors. The above is the detailed content of Is Nesting a `` Inside a `` Element Considered Correct HTML?. For more information, please follow other related articles on the PHP Chinese website!

source：php.cnPrevious article：How Can I Query Div Elements with Multiple Class Names? Next article：How to Get Mouse Click Coordinates Relative to a Target Element in jQuery? Statement of this Website The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn Latest Articles by Author How to Find Differences Between Two SQL Server Tables? 2025-01-13 16:36:47 How to Ignore Class Properties in Entity Framework Code First? 2025-01-13 16:32:43 How Can I Identify Discrepancies Between Two SQL Tables? 2025-01-13 16:31:43 No Copilot? No Problem! Get Free AI in VSCode Now 2025-01-13 16:29:42 Easily handle dates and times operations in your application using Day.js 2025-01-13 16:28:47 How Can I Speed Up PostgreSQL for Faster Agile Testing? 2025-01-13 16:27:43 CC ↔ HP Converter 2025-01-13 16:26:43 Golang Dependency Injection - Just in inutes! 2025-01-13 16:25:47 How Can I Selectively Dump Data from Specific SQLite3 Tables into SQL or CSV Format? 2025-01-13 16:24:42 How Can I Optimize PostgreSQL for Swift Testing to Match SQLite's Speed? 2025-01-13 16:23:44 Latest Issues function_exists() cannot determine the custom function Function test () {return true;} if (function_exists ('test')) {echo "test is function... From 2024-04-29 11:01:01 0 3 2460 How to display the mobile version of Google Chrome Hello teacher, how can I change Google Chrome into a mobile version? From 2024-04-23 00:22:19 0 11 2602 The child window operates the parent window, but the output does not respond. The first two sentences are executable, but the last sentence cannot be implemented. From 2024-04-19 15:37:47 0 1 2194 There is no output in the parent window document.onclick = function(){ window.opener.document.write('I am the output of the child ... From 2024-04-18 23:52:34 0 1 2069 Where is the courseware about CSS mind mapping? Courseware From 2024-04-16 10:10:18 0 0 2168 Related Topics More> String array assignment method Why disabling automatic updates in Windows 11 is invalid How to embed CSS styles in HTML The difference between official replacement phone and brand new phone Can't open app store The role of parseint function Android desktop software recommendations Ethereum today's market price

Popular Recommendations How to set css to exceed the display ellipses How to set font size in css How to use hover in css How to set character spacing in css What are the new features of css3 Popular Tutorials More> Related Tutorials Popular Recommendations Latest courses The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course) 1427640 PHP introductory tutorial one: Learn PHP in one week 4278125 JAVA Beginner's Video Tutorial 2579261 Little Turtle's zero-based introduction to learning Python video tutorial 510484 PHP zero-based introductory tutorial 867635 The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course) 1427640 times of learning JAVA Beginner's Video Tutorial 2579261 times of learning Little Turtle's zero-based introduction to learning Python video tutorial 510484 times of learning Quick introduction to web front-end development 216289 times of learning Master PS video tutorials from scratch 899924 times of learning [Web front-end] Node.js quick start 8237 times of learning Complete collection of foreign web development full-stack courses 6569 times of learning Go language practical GraphQL 5421 times of learning 550W fan master learns JavaScript from scratch step by step 747 times of learning Python master Mosh, a beginner with zero basic knowledge can get started in 6 hours 27711 times of learning Latest Downloads More> Web Effects Website Source Code Website Materials Front End Template [form button] jQuery enterprise message form contact code [Player special effects] HTML5 MP3 music box playback effects [Menu navigation] HTML5 cool particle animation navigation menu special effects [form button] jQuery visual form drag and drop editing code [Player special effects] VUE.JS imitation Kugou music player code [html5 special effects] Classic html5 pushing box game [Picture special effects] jQuery scrolling to add or reduce image effects [Photo album effects] CSS3 personal album cover hover zoom effect [Front-end template] Home Decor Cleaning and Repair Service Company Website Template [Front-end template] Fresh color personal resume guide page template [Front-end template] Designer Creative Job Resume Web Template [Front-end template] Modern engineering construction company website template [Front-end template] Responsive HTML5 template for educational service institutions [Front-end template] Online e-book store mall website template [Front-end template] IT technology solves Internet company website template [Front-end template] Purple style foreign exchange trading service website template [PNG material] Cute summer elements vector material (EPS PNG) [PNG material] Four red 2023 graduation badges vector material (AI EPS PNG) [banner picture] Singing bird and cart filled with flowers design spring banner vector material (AI EPS) [PNG material] Golden graduation cap vector material (EPS PNG) [PNG material] Black and white style mountain icon vector material (EPS PNG) [PNG material] Superhero silhouette vector material (EPS PNG) with different color cloaks and different poses [banner picture] Flat style Arbor Day banner vector material (AI+EPS) [PNG material] Nine comic-style exploding chat bubbles vector material (EPS+PNG) [Front-end template] Home Decor Cleaning and Repair Service Company Website Template [Front-end template] Fresh color personal resume guide page template [Front-end template] Designer Creative Job Resume Web Template [Front-end template] Modern engineering construction company website template [Front-end template] Responsive HTML5 template for educational service institutions [Front-end template] Online e-book store mall website template [Front-end template] IT technology solves Internet company website template [Front-end template] Purple style foreign exchange trading service website template