Home/ Questions/Q 7897995
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T08:18:51+00:00

I’m coding a jQuery plugin which is basically run on a single <div> .

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0