MENU


Global Attributes

These global attributes can be used on almost any element:
......accesskey=key: the shortcut to activate a tag
......autocapitalize= {
          off |
          none: no autocapitalization; |
          on |
          sentences: first letter of each sentence |
          words: first letter of each word |
          characters: all letters
} Works on mobile virtual keyboard or voice input only
......class=space-separated list: for style sheets and microformats
......dir={rtl | ltr}:the direction of content
......hidden: hides and disables the element
......id=text: unique element identifier
......inputmode=virtual keyboard configuration hint
......slot
......spellcheck={“true”|”false”}: checks the spelling
......style=CSS_style: an inline style
......tabindex=number: the tabbing order
......translate={yes | no}: whether to translate the text content when the webpage is localized by the browser.
......lang=two_letter_language_code

This informs the browser about the language of the webpage.
<html lang="en">


......contenteditable: whether it can be edited
......title=text: information to display on mouseover

......is=custom name: tries to extend a built-in element.

Below, we try to extend a <p> element to a word-count element for the container/parent element (<article>).

......part=name: styles shadow elements with ::part; space-separated like the 'class' attribute.(examples here)
......draggable={ true | false | auto }: draggable?
......dropzone={ copy | move | link }: when dragged

This example illustrates the drag-and-drop events. More about CSS, DOM, and JavaScript will be described in the later chapters.

Microdata is used to nest metadata within HTML documents so that search engines and browsers can provide a richer browsing experience to visitors.
......itemscope
......itemtype=vocabulary URL: only on elements with an 'itemscope' attribute
......itemid=unique_identifier: only on elements with 'itemscope' and 'itemtype' attributes specified
......itemprop=property
......itemref=list of ids: only on elements with an 'itemscope' attribute


<dl itemscope itemtype="http://vocab.example.net/book" itemid="urn:isbn:0-330-34032-8">
  <dt>Title</dt>
    <dd itemprop="title">The Reality Dysfunction</dd>
  <dt>Author</dt>
    <dd itemprop="author">Peter F. Hamilton</dd>
  <dt>Publication date</dt>
    <dd>
      <time itemprop="pubdate" datetime="1996-01-26">
          26 January 1996</time>
    </dd>
</dl>

<div itemscope itemtype="http://schema.org/Movie">
  <h1 itemprop="name">Avatar</h1>
  <span>Director:
    <span itemprop="director">James Cameron</span>
    (born August 16, 1954)</span>
  <span itemprop="genre">Science fiction</span>
  <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a>
</div>

<div itemscope id="amanda" itemref="a b"></div>
<p id="a">Name:
  <span itemprop="name">Amanda</span></p>
<div id="b"
  itemprop="band"
  itemscope itemref="c"></div>
<div id="c">
 <p>Band:
   <span itemprop="name">Jazz Band</span></p>
 <p>Size:
   <span itemprop="size">12</span> players</p>
</div>

<div itemscope itemtype="http://schema.org/Product">
  <span itemprop="brand">ACME</span>
  <span itemprop="name">Executive Anvil</span>
</div>

......data-* defines custom data attributes 


<h1>Secret agents</h1>
<ul>
  <li data-id="10784"> Jason Walters, 003: Found dead in "A View to a Kill".</li>
  <li data-id="97865">Alex Trevelyan, 006: Agent turned terrorist leader; James' nemesis in "Goldeneye".</li>
  <li data-id="45732">James Bond, 007: The main man; shaken but not stirred.</li>
</ul>

<img class="spaceship cruiserX3" src="shipX3.png"
  data-ship-id="324" data-weapons="laserI laserII"
  data-shields="72%"
  data-x="414354" data-y="85160" data-z="31940"
  onclick="spaceships[this.dataset.shipId].blasted()"/>