Label-Element / input umschließen? display:block?

[Gunther]

@@Gunnar:

nuqneH

Welches der folgenden Möglichkeiten ist besser bzw. korrekter?
Oder ist das im Sinne eines suaberen HTML5 Codes im Grunde egal?

1. <label>Name</label><input>
2. <label>Name<input></label>

Für sauber halte ich 1).

Dann solltest du aber auch explizit erwähnen, dass das Label Element dann zwingend ein for Attribut braucht, dessen Wert mit dem des id Attributs des zugehörigen Input Elements übereinstimmt.

Und deine angeführte Begründung kann ich auch nur bedingt nachvollziehen.
So oder so sind ein Label und ein Input Element "fest" miteinander verbunden. Übersichtlicher im Quellcode ist da sicherlich Variante 2.

Außerdem ermöglicht 1), mit CSS auf Änderungen des input zu reagieren (:checked, :valid, :invalid).

Inwiefern sollte/ muss man da bei dem jeweiligen Label Element drauf reagieren können?
Das Input Element ist doch dasselbe ...!

Außerdem "erledigen" moderne Browser das von selber (form validation).

Gruß Gunther