Using markup to control the output of element.

Question

I am trying to get my radio button to work as fancy buttons instead of just dots as they are by default, a question has crossed my mind. Many websites/snippet got it like

 <input id="rad1" type="radio" name="rad"><label for="rad1">Radio 1</label>
<input id="rad2" type="radio" name="rad"><label for="rad2">Radio 2</label>

but the semantic mark up is more like

   <label for="rad1"><input id="rad1" type="radio" name="rad">Radio 1</label>
    <input id="rad2" type="radio" name="rad"><label for="rad2">Radio 2</label>

does the later markup is valid, as people are more able to control the layout

input[type="radio"]:checked+label{ font-weight: bold; }

but isn't the latter real valid?

Run your code through [a validator](https://validator.w3.org/) if you want to know if the markup is valid... — Heretic Monkey, Nov 14 '16 at 17:33

score 0 · Accepted Answer · answered Nov 14 '16 at 18:39

From my experience with markup languages everything looks fine in your example. If you really want to check your inputs, you can do so by putting them in one of this basic validators here -> https://validator.w3.org/#validate_by_input. I hope this answers your question!

Using markup to control the output of element.

1 Answers1