HTML attributes and Caches
HTML Global Attributes
| Attribute | Description |
| class | Defines one or more class names for an element. See Classes and IDs. |
| contenteditable | Sets whether the content of an element can be edited. |
| contextmenu | Defines a context menu shown when a user right-clicks an element. |
| dir | Sets the text direction for text within an element. |
| draggable | Sets whether an element can be dragged. |
| hidden | Hides an element not currently in use on the page. |
| id | Defines a unique identifier for an element. See Classes and IDs. |
| lang | Defines the language of an element's content and its text attribute values. See Content Languages. |
| spellcheck | Sets whether to spell/grammar check the content of an element. |
| style | Defines a set of inline CSS styles for an element. |
| tabindex | Sets the order in which elements on a page are navigated by the tab keyboard shortcut. |
| title | Defines additional information about an element, generally in the form of tooltip text on mouseover. |
| translate | Defines whether to translate the content of an element. |
Content editable Attribute
<p contenteditable>This is an editable paragraph.</p>
Upon clicking on the paragraph, the content of it can be edited similar to an input text field. When the contenteditable attribute is not set on an element, the element will inherit it from its parent. So all child text of a content editable element will also be editable, but you can turn it off for specific text, like so:
<p contenteditable>
This is an editable paragraph.
<span contenteditable="false">But not this.</span>
</p>
Note that an uneditable text element inside an editable element will still have a text cursor as inherited from its parent as well.
HTML 5 Cache
Basic Example of HTML5 cache
this is our index.html file
<!DOCTYPE html>
<html manifest="index.appcache">
<body>
<p>Content</p>
</body>
</html>
then we will create index.appcache file with below codes
CACHE MANIFEST
index.html
write those files that you want to be cached load index.html then go for offline mode and reload the tab
Note: The two files must be in the same folder in this example
HTML Event Attributes
HTML Form Events
Events triggered by actions inside an HTML form (applies to almost all HTML elements, but is mostly used in form elements):
| Attribute | Description |
| onblur | Fires the moment that the element loses focus |
| onchange | Fires the moment when the value of the element is changed |
| oncontextmenu | Script to be run when a context menu is triggered |
| onfocus | Fires the moment when the element gets focus |
| oninput | Script to be run when an element gets user input |
| oninvalid | Script to be run when an element is invalid |
| onreset | Fires when the Reset button in a form is clicked |
| onsearch | Fires when the user writes something in a search field (for <input="search">) |
| onselect | Fires after some text has been selected in an element |
| onsubmit | Fires when a form is submitted |
Keyboard Events
| Attribute | Description |
| onkeydown | Fires when a user is pressing a key |
| onkeypress | Fires when a user presses a key |
| onkeyup | Fires when a user releases a key |
ATutorialHub Related Guide
-
.png "Sea battle game only using HTML and CSS")
Sea battle game only using HTML and CSSAdmin
sea battle game where using only HTML and CSS and animation in css and html tags sea battle game2021-09-20 03:43:36
HTML Tutorials Comments (8)
User Comments
panduranga gupta
2021-07-05 07:03:13good website for learning and help me a lot
raju
2021-09-25 14:58:47The awsome website i am looking like for a long time, good work atutorialhub team keep doing
Shivani
2021-09-01 15:03:56Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience
Harshitha
2021-09-10 15:05:45It is very helpful to students and easy to learn the concepts
Sowmya
2021-09-14 15:06:41Great job Tutorials are easy to understand Please make use of it
Zain Khan
2021-09-18 15:07:23Great content and customized courses.
Rudrakshi Bhatt
2021-09-09 15:08:10Well structured coursed and explained really well!
Pavana Somashekar
2021-09-11 15:09:08Good platform for beginners and learn a lot on this website
Leave a Comment