Search code examples
jqueryhtmlcssjquery-mobilesemantic-markup

Do you think markup of jQuery mobile is semantically perfect, can I modify?

To make a simple list it uses too much code

3 div inside li and 1 blank span

<li data-theme="a" class="ui-btn ui-btn-icon-right ui-li ui-btn-up-a">
<div class="ui-btn-inner ui-li">
<div class="ui-btn-text">
<a href="footer-persist-a.html" class="ui-link-inherit">Persistent footer nav bar</a>
</div>
<span class="ui-icon ui-icon-arrow-r"></span>
</div>
</li>

enter image description here

http://jquerymobile.com/test/experiments/scrollview/#/test/docs/toolbars/footer-persist-a.html

and it also uses these attributes

<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">

Are these attributes of ul W3C valid?

So if I use jQuery mobile in a project is it necessary to follow it's only HTML? or can I modify to better way if possible and still use jQuery mobile.

Solution

  • It is perfectly valid html 5

    I believe the extra elements are there to create good looking touch friendly controls and if you want to modify the source code, you'll have to change CSS and JavaScript, then test it on all devices jQuery mobile caters for (Apple/Android/Blackberry).

    Do you have a problem with this sort of mark-up? Perhaps it may not be too SEO friendly and may not work in Internet Explorer prior to v9 but other than that it serves its purpose, doesn't it?