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

See the Pen Untitled by Web Coding Center (@webcodingcenter)on CodePen.

......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>).

See the Pen Untitled by Web Coding Center (@webcodingcenter)on CodePen.

......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.

See the Pen Untitled by Web Coding Center (@webcodingcenter)on CodePen.

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()"/>