0

I am pretty new to web design, falling into javascript design with bootstrap, but every now and then, I CAN find some attributes in tags that seems not supported anywhere. I am really confused.

For example: the following code about "nav" tag

<nav id="myNavmenu" class="navmenu navmenu-default navmenu-fixed-left offcanvas"     role="navigation">
  <a class="navmenu-brand" href="#">Brand</a>
<ul class="nav navmenu-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</nav>
<div class="navbar navbar-default navbar-fixed-top">
<button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target="#myNavmenu" data-canvas="body">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>

why we can have "role" attribute here for "nav" tag? I have searched all the possible resources: http://www.w3schools.com/tags/tag_nav.asp suggested [Global Attributes in HTML.] and [Event Attributes in HTML.] are supported for "nav", however "role" is in neither of them.

I am just wondering How can we add attributes that are not allowed seemingly at will?

Could someone please help explain How bootstrap javascript matching works that just by adding data-toggle and data-target, we can have certain active effects on certain target？

amphetamachine
  • 27,620
  • 12
  • 60
  • 72
sthbuilder
  • 561
  • 1
  • 7
  • 22
  • 1
    http://www.w3.org/TR/wai-aria/usage – isherwood Nov 13 '14 at 19:39
  • You didn't try searching, did you? http://stackoverflow.com/questions/10403138/what-is-the-purpose-of-the-role-attribute-in-html – Terry Nov 13 '14 at 19:40
  • 1
    You seem to be asking several questions. The `role` attribute is an accessibility feature. See the links we've provided. Then, you can create your own HTML-compliant attributes by prefixing `data-` to just about anything. – isherwood Nov 13 '14 at 19:41
  • 2
    Just as a note, w3schools is not the official documentation for web standards. They are also not always up to date. On the other hand, w3.org (with which w3schools has *no* affiliation) is the official spec website. – ajp15243 Nov 13 '14 at 19:42
  • There is nothing fancy about the attributes in the tag. You are just using a horrendously unreliable site as a reference. Consider consulting the authoritative HTML references. – Jukka K. Korpela Nov 13 '14 at 20:40

1 Answers1

1

Bootstrap has jquery plugins that parse the page and use those data-xxxx attributes to instrument their elements with handlers. Although it is not always a good idea to create your own attributes (normally intellisense will balk unless you add the "data-" or "x-" prefix) there is nothing keeping you from doing it. It will mean nothing to the DOM but Javascript and jQuery can still use them as though they were valid attributes.

Christopher White
  • 298
  • 1
  • 8