accesskey:

a character on the keyboard is assigned to the element.elements can have space seprated list of key characters the first one recognized that is in the keyboard used will be assigned.however this attribute will not make the element foucsed-it will be used like.for example when tested on anchors <a> tag it will be clicked but on <div> element will do nothing.therfore :foucs psd-class will have no impact on a tag with accesskey attribute value.finally incase of two tags with the same accesskey attribute value the browser will show small tab at the bottom with the name of the last element accessed via(alt+shift+key) on windows os then i need to press Enter to choose wich to be used-this was tested with <a> tag.
<a href="" accesskey="l h s">different accesskeys to use this link- l,h and s.</a>
Class:

be descriptive.always.class is good in css specifity.
go next!
contenteditable:

it takes three values: true false & inherit.this attribute is not boolean however.it is enumurated instead,that is inorder for tag element to be editable true value need to be assigned.false will stop the element from being editable.inherit when tested showed nill effect.speaking of making element tag editable,conteneditable attribute mostly used on text to be modified by users,but it also work on images-can be resized.al that said with one problem the image tag element needs to be inside a container-no explination why and set the attribute of that image container to be editable.now let's speak some inheritance.if a tag element is not set to be editable it will inherit this attribute if it's parent is.

editable text
contextmenu:

only firefox supports this attribute for now.it is used with <menu> tag.
go next!
data-*:

relted to DOM.go next.
go next!
dir:

changes the text directionality.MDN says that it is better to use this attribute rather than CSS related properties direction & unicode-bidi incase of css is not activated.it takes values rtl ltr and auto.always set it to auto if it is impossible to know what language to be used(user input) the browser will decide depending on user input.important note is that changing the directionality of element will change the direction of rendering and document flow inside it accordingly.keep in mind that using this attribute will not cause the text characters to be flipped.example if text is in english and dir is rtl it won't cause it to be like this: hsilgne.this only happens when used with element <bdo>.
<span dir="rtl">��</span><span dir="ltr">......english</span>
dragable:

relted to DOM.go next.
go next!
dropzone:

relted to DOM.go next.
go next!
hidden:

effectively hides elements similar to display: none in CSS.however css display overrides the presence of hidden attribute.
<div hidden>this is and it's decsendants are hidden from user</div>
lang:

defines the language of the document or the element.i need to read more on this along with typography.
<div lang="en-us">this is english text.</div>
slot:

relted to shadwo DOM.go next.
go next!
spellcheck:

this attribute takes enumerated data values and not boolean.it takes either true or false.basically it checks for errors in spelling of the text.checking for spelling errors needs to know the language at wich the text is written for better results.hence lang attribute need to be defined along with spellcheck attribute.when specified on non-editable tags it will have no effect since browsers mainly do not check for spelling erorrs however it has full effect on editable elements-elements that have contenteditable set on.it makes sense since only editable elements are exposed to spelling errors-when a user insert new text.
<div lang="en-us" spellcheck>edit the text</div>
style:

used for inline-styling purposes.one thing to note here is:it should not be used to hide tags.hidden attribute should be used instead-or css displayis even better since it overrides hidden.
<span style="color:red;">red text!</span>
tabindex:
there are two kinds of elements:first foucsed elements by default.second is elements that can be set to be foucsed.the result is a foucsable element.in general tabindex attribute takes integer number as a value:
1. tabindex="0" the attribute changes the state of the element to be foucsable within the normal source order of the document.
2. tabindex="-1" the attribute changes the state of the element to be foucasble along with the use of script-only a script can take care of making it visually foucsable.keyboard will not.
  note:
  a tag is visually foucsable is foucsed on the screen and users are interacting with it.
3. tabindex="1" or any positive integer-read this
<div tabindex="0">this tag became foucsable using <i>tabindex</i> attribute.</div> <a href="">this tag (anchor) is foucsable by default.</a>
title:

title mostly presented for users as a toll tip box.however smartphones,touch-screen devices and keyboard-users do not support this behavior.screen readers and accessibility readers also have this in common.avoid useles usage of title attribute.
<div title="search engine optimization">seo</div>
translate:

not supported yet.

accesskey:

Class:

contenteditable:

contextmenu:

data-*:

dir:

dragable:

dropzone:

hidden:

lang:

slot:

spellcheck:

style:

tabindex:

note:

title:

translate: