CODEWITHSUNDEEP
htmlsemantic-markup
tau
tau

Reputation: 6749

Semantically appropriate input title and field tag

I have a form that lists the name of the input, the input, and possibly some help text. It is generally going to appear to be tabular, but I don't want to use a table or div because I imagine there is a more semantically-appropriate option by now.

Here is what it would look like without styles:

Name:    <name input>
Address: <address input>
         <address help info>
Phone:   <phone input>

Notice how it all lines up like a table.

Any ideas for the most appropriate HTML for this?

Upvotes: 0

Views: 89

Answers (3)

unor
unor

Reputation: 96577

Use dl. It got redefined in HTML5 so that it’s a "description list" instead of a definition list.

<dl>

  <dt>Name:</dt>
  <dd>…</dd>

  <dt>Address:</dt>
  <dd>…</dd>

  <dt>Phone:</dt>
  <dd>…</dd>

</dl>

If it’s a form with input, don’t forget to use label.

Note that it’s not "required" to use an additional structure, so a form like this is totally fine without dl/table:

<label for="form-name">Name:</label>
<input type="text" id="form-name" name="form-name">

<label for="form-address">Address:</label>
<textarea id="form-address" name="form-address"></textarea>

<label for="form-tel">Telephone:</label>
<input type="tel" id="form-tel" name="form-tel">

Upvotes: 1

stln
stln

Reputation: 11

A real good question for which it's hard to find one correct answer. According to what I've found, either a table and div would be OK. Even though I would agree neither one of them feels like a real good solution.

Tables:

At http://www.w3.org/TR/html5/tabular-data.html#the-table-element it says:

Tables should not be used as layout aids.

...and...

[...] tables in HTML as a way to control their page layout making it difficult to extract tabular data from such documents.

But you're not really using tables for layout purposes here. You would be using it to present the form input data in a readable manner. As stated in the following sentence (also found in the table spec):

The table element represents data with more than one dimension, in the form of a table.

To me, that means it should be OK to use tables in this case.

Divs

Regarding the div the W3 spec says:

Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable.

But when reading the section spec it says this about the div:

When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead.

To me, that means that you can also choose to use div for styling or layout purposes. I've tried to put togehter some thoughts about the use of div in this blog post: http://htmlusedtobeeasy.wordpress.com/2013/07/01/divisions-and-sections/

Sorry for the long answer (my first), hope it helps!

Upvotes: 1

Barry
Barry

Reputation: 86

Why is a table not semantically-appropriate if the data will appear tabular? Use a table, problem, solved.

Upvotes: 4

Related Questions