Semantics vs DOM Manipulation

Question

What are all of your thoughts on semantic markup vs DOM manipulation?

For example, I can have an error message under a field like

<label for="email">Email:</label>
<input type="email" name="email" id="email">
<div class="error" id="email-error">Please enter a valid email address.</div>

where the error class would be hidden, and displayed on an error with javascript. This obviously requires little DOM Manipulation, but is it semantic markup?

The other option would be to leave the error div out, and do something like

var element = $('#email');

if($("#EmailError").length==0) {
     $(element).after('<div class="error" id="email-error">Please enter a valid email address.</div>');
}

and only put it in if there is actually an error. What do you all think?

That's subjective, but usually it's advised that you add the error div with JavaScript (otherwise, search engines will index it). — bfavaretto, May 10 '13 at 17:41
html5 validation is more semantic than both since it's formally defined and implemented in most A.T.s — dandavis, May 10 '13 at 17:41

score 0 · Answer 1 · answered May 10 '13 at 17:59

As dandavis wrote:

<input type="email">

is the way to go. On the other hand, if you want to signal an error without html5 validation, you should use an additional label-element instead of a div.

<label for="email" class="error">Please enter a valid email</label>.

score 0 · Accepted Answer · answered May 10 '13 at 18:08

0

Adding content with JavaScript is significantly better then having wrong, but invisible, content (which will be consumed by search engines and people without CSS).

answered May 10 '13 at 18:08

Quentin

800,325
104
1,079
1,205

Semantics vs DOM Manipulation

2 Answers2