<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html-global atributes</title>
<style>
body{
background-color: white;
padding:0;
margin:0;
}
.top{
padding:20px 0 20px 0;
text-align:center;
font-family:monaco,sans-serif;
font-size:30px;
font-weight:bold;
background-color: #5dade2;
color:white;
box-shadow:0px 1px 5px 0px white;
margin:0;
}
.attr-list-main{
width:65%;
display:table;
margin:auto;
background: #f7f9f9;
}
.description{
padding: 10px;
margin-top:2em;
margin-bottom:3em;
margin-left:3em;
margin-right:1em;
text-align:left;
font-size:17px;
word-spacing:4px;
background-color: #d4efdf ;
border-radius:5px;
}
textarea, .editable{
resize:none;
text-align:center;
margin-left:4em;
}
.editable{
width:200px;
height:50px;
border:1px solid green;
border-radius:10px;
line-height:50px;
margin-left:4em;
overflow:hidden;
}
.description ol li{
margin:1em 0 0 0;
text-align:left;
}
</style>
</head>
<body>
<div class="top">Global Attributes</div>
<div class="attr-list-main">
<ul class="global-attr">
<li class="accesskey">
<h3>accesskey:</h3>
<div class="description">
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 <code><a></code> tag it will be clicked but on <code><div></code> element will do nothing.therfore <code>:foucs</code> psd-class will have no impact on a tag with <code>accesskey</code> attribute value.finally incase of two tags with the same <code>accesskey</code> attribute value the browser will show small tab at the bottom with the name of the last element accessed via(<code>alt+shift+key</code>) on windows os then i need to press <code>Enter</code> to choose wich to be used-this was tested with <code><a></code> tag.</div>
<textarea rows="1" cols="80"><a href="" accesskey="l h s">different accesskeys to use this link- l,h and s.</a></textarea>
</li>
<li class="class">
<h3>Class:</h3>
<div class="description">be descriptive.always.class is good in css specifity.</div>
<textarea rows="1" cols="40">go next!</textarea>
</li>
<li class="contenteditable">
<h3>contenteditable:</h3>
<div class="description">
it takes three values: <code>true false & inherit</code>.this attribute is not boolean however.it is enumurated instead,that is inorder for tag element to be editable <code>true</code> value need to be assigned.<code>false</code> will stop the element from being editable.inherit when tested showed nill effect.speaking of making element tag editable,<code>conteneditable</code> 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 <b>editable</b> it will inherit this attribute if it's parent is.</div>
<div class="editable" contenteditable="true"> <span style="color:red; font-size:18px;"> editable text</span></div>
</li>
<li class="contextmenu">
<h3>contextmenu:</h3>
<div class="description">only firefox supports this attribute for now.it is used with <code><menu></code> tag.</div>
<textarea rows="1" cols="40">go next!</textarea>
</li>
<li class="data-*">
<h3>data-*:</h3>
<div class="description">relted to DOM.go next.</div>
<textarea rows="1" cols="40">go next!</textarea>
</li>
<li class="dir">
<h3>dir:</h3>
<div class="description">changes the <b>text</b> directionality.MDN says that it is better to use this attribute rather than CSS related properties <code> direction & unicode-bidi</code> incase of css is not activated.it takes values <code>rtl ltr</code> and <code>auto</code>.always set it to <code>auto</code> if it is impossible to know what language to be used(user input) the browser will decide depending on user input.<b>important</b> 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 <code>dir</code> is <code>rtl</code> it won't cause it to be like this: hsilgne.this only happens when used with element <code><bdo></code>.</div>
<textarea rows="1" cols="40"><span dir="rtl">����</span><span dir="ltr">......english</span></textarea>
</li>
<li class="dragable">
<h3>dragable:</h3>
<div class="description">relted to DOM.go next.</div>
<textarea rows="1" cols="40">go next!</textarea>
</li>
<li class="dropzone">
<h3>dropzone:</h3>
<div class="description">relted to DOM.go next.</div>
<textarea rows="1" cols="40">go next!</textarea>
</li>
<li class="hidden">
<h3>hidden:</h3>
<div class="description">effectively hides elements similar to display: none in CSS.however css <code>display</code> overrides the presence of <code>hidden</code> attribute.</div>
<textarea rows="1" cols="40"><div hidden>this is and it's decsendants are hidden from user</div></textarea>
</li>
<li class="lang">
<h3>lang:</h3>
<div class="description">defines the language of the document or the element.i need to read more on this along with typography.</div>
<textarea rows="1" cols="40"><div lang="en-us">this is english text.</div></textarea>
</li>
<li class="slot">
<h3>slot:</h3>
<div class="description">relted to shadwo DOM.go next.</div>
<textarea rows="1" cols="40">go next!</textarea>
</li>
<li class="spellcheck">
<h3>spellcheck:</h3>
<div class="description">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 <code>lang</code> attribute need to be defined along with <code>spellcheck</code> 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 <code>contenteditable</code> set on.it makes sense since only editable elements are exposed to spelling errors-when a user insert new text.</div>
<textarea rows="1" cols="40"><div lang="en-us" spellcheck>edit the text</div></textarea>
</li>
<li class="style">
<h3>style:</h3>
<div class="description">used for inline-styling purposes.one thing to note here is:it should not be used to hide tags.<code>hidden</code> attribute should be used instead-or css <code>display</code>is even better since it overrides <code>hidden</code>.</div>
<textarea rows="1" cols="40"><span style="color:red;">red text!</span></textarea>
</li>
<li class="tabindex">
<h3>tabindex:</h3>
<div class="description">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 <b>foucsable</b> element.in general <code>tabindex</code> attribute takes integer number as a value:
<ol>
<li><code>tabindex="0"</code> the attribute changes the state of the element to be foucsable within the normal source order of the document.</li>
<li><code>tabindex="-1"</code> 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.<p><h4>note:</h4> a tag is <b><i>visually foucsable</i></b> is <code><i>foucsed</i></code> on the screen and users are interacting with it.</p></li>
<li><code>tabindex="1"</code> or any positive integer-read <a href="http://adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html">this</a></li>
</ol>
</div>
<textarea rows="1" cols="40">
<div tabindex="0">this tag became foucsable using <i>tabindex</i> attribute.</div>
<a href="">this tag (anchor) is foucsable by default.</a>
</textarea>
</li>
<li class="title">
<h3>title:</h3>
<div class="description">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>
<textarea rows="1" cols="40"><div title="search engine optimization">seo</div></textarea>
</li>
<li class="translate">
<h3>translate:</h3>
<div class="description">not supported yet.</div>
</li>
</ul>
</div>
</body>
</html>
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.