Is the title in the legend really valid? <Legend> <h1> Heading </h1> </ legend>

Question

I use this in visual studio, but the compiler claimed that h1 cannot be nested in the legend element, but the browser can display it anyway, so I got confused if it really is or not?

 <fieldset> <legend> <h1>Caption</h1> </legend> </fieldset> 

Answer 1

There are many things that browsers do that are not required by standards :-)

This page here (HTML4) indicates the legend keyword and indicates that it may contain inline elements of which the headers are not part. He has others, possibly useful ones, such as big or strong .

In addition, the corresponding H1 page does not list legend as one of the elements permitted for content. You can also use the id , class or style attributes of a legend to set basic text properties.

Answer 2

no, it is not valid inside the legend. you can use wc3 validator to check your code

Answer 3

The HTML5 elements allowed inside the <legend> elements contain the Phrasing Content elements. In documents:

The content of phrases is the text of the document, as well as the elements that highlight this text at the level inside the paragraph.

Answer 4

A legend element in a set of fields is not intended to create child elements unless they are considered "phrased content." While most browsers will not complain (thus making it valid in pratice), you probably would be better off using a style to set the appearance of your legend element, since this is what css uses, the elements should be used for logical grouping / identifying content does not style it.

Legend: http://www.w3.org/TR/html5/forms.html#the-legend-element

Phrase content: http://www.w3.org/TR/html5/content-models.html#phrasing-content

Answer 5

if you check the html standards, it says:

 <!ELEMENT LEGEND - - (%inline;)* -- fieldset legend --> 

The %inline means that it should contain only character level elements and text strings. Therefore, while it is rendering, you should not use it that way because html is really invalid.

Answer 6

In HTML 5.2, this looks correct:

10/04/16. Legend Element Content Model: Content phrases and headings (h1-h6 elements).

https://w3c.imtqy.com/html/sec-forms.html#the-legend-element

This is very good news, because in complex forms, legends serve the same purpose as headings, and, for example, screen trainers only announce legends when focusing a form element.

Answer 7

In HTML5, you can use <h1> for the same purpose that the legend serves in a set of fields, since the set of fields is considered the root for the partition. Therefore, if you want to be free of legendary fancy styles, use this available markup:

 <fieldset role="group" aria-labelledby="heading"> <h1 id="heading">Caption</h1> <p>Other stuff...</p> </fieldset>