Reputation: 2114

Meta tags in body (for Javascript)

I'm coding a jQuery plugin which is basically run on a single <div>. I'm considering providing configuration values for it using plugin-specific <meta> tags inside the <div>.

Is it valid HTML5 if I put <meta> tags inside the document body, and is it reasonably safe that old browsers won't move all <meta> tags to the head when parsing the page?

data- attributes are a good solution, but I plan to have a lot of them, so I though something like <meta> would be neater.

Upvotes: 1

Answers (4)

Ardan Michael Blum

Reputation: 11

The META element can be used to identify properties of a document (e.g., author, expiration date, a list of key words, etc.) and assign values to those properties. This specification does not define a normative set of properties.

Each META element specifies a property/value pair. The name attribute identifies the property and the content attribute specifies the property's value.

For example, the following declaration sets a value for the Author property:

<META name="Author" content="Dave Raggett">

The lang attribute can be used with META to specify the language for the value of the content attribute. This enables speech synthesizers to apply language dependent pronunciation rules.

In this example, the author's name is declared to be French:

<META name="Author" lang="fr" content="Arnaud Le Hors">

Note. The META element is a generic mechanism for specifying meta data. However, some HTML elements and attributes already handle certain pieces of meta data and may be used by authors instead of META to specify those pieces: the TITLE element, the ADDRESS element, the INS and DEL elements, the title attribute, and the cite attribute.

Note. When a property specified by a META element takes a value that is a URI, some authors prefer to specify the meta data via the LINK element. Thus, the following meta data declaration:

<META name="DC.identifier"
  content="http://www.ietf.org/rfc/rfc1866.txt">

might also be written:

<LINK rel="DC.identifier" href="content="http://www.ietf.org/rfc/rfc1866.txt">

More / Source :

http://www.w3.org/TR/html4/appendix/notes.html#h-B.4 and http://www.w3.org/TR/html4/struct/global.html#h-7.4.4.2

Upvotes: 1

zzzzBov

Reputation: 179066

The <meta> element is only valid in the <head> of an HTML5 document (Metadata content model is only acceptable in the <head>). What you should be using for an HTML5 jQuery plugin to pass configuration data is to use data-* attributes which can be accessed from jQuery using .data().

So your markup could be:

<div class="widget" data-foo="bar"><div>

And your jQuery would be:

$('.widget').widget({...options...});

Which would be a function that uses:

$.fn.widget = function (...) {
    return this.each(function () {
        ...code...
        options.foo = $(this).data('foo'); //gets the value 'bar'
        ...more code...
    });
};

In reply to OPs comment:

There's no limit to how many data-* attributes you use, if it's simply for formatting, split them on multiple lines. White space is condensed in HTML:

<div class="widget"
    data-foo="bar"
    data-fizz="buzz"
    data-lorem="ipsum"
    ...
    data-xyz="abc">
    ...contents...
</div>

If you have a good reason to keep the data separate from the <div> you could use an <input> field with type="hidden" I typically use this when I have an interactive form widget that needs to be submitted with a form.

Upvotes: 3