HTML Tips

html javascript

Listing out some HTML Tips for future use.

Linking script and stylesheet in HTML

<script src="main.js"></script>
<link href="style.css" rel="stylesheet"></link>

New in HTML5

canvas | audio | svg | header | footer | aside | article | nav | section etc…

————–

CSS Reset – Removes browser default styles
Normalize.css – Sets a stndard across all browsers

———–

parseInt(“20″) + 20 = 40;

—–

Semantic HTML – Semantic tags like header, nav, section, footer, etc are used that convey infomation about the content.

HTML4 vs HTML5

=> HTML4 DOCTYPE declaration was too length, while in HTML5, it’s just <!DOCTYPE html>
=> HTML5 has more semantic tags and also has multimedia supporting attributes
=> HTML4 is compatible with almost all browsers, where HTMl5 is picking up fast.

——————-

New input types – DateTime, Placeholder, Number, Tel, Email

————————————-

What are Meta tags in HTML

Meta tags or meta elements provide more information about the contents of a web page. They are also used by search engines to show descriptions.

<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta name="author" content="www.computerhope.com">
<meta name="description" content="Helping you with ALL your computer questions">
<meta name="keywords" content="computer, technical, free, help, support">
...

HTML APIs

=> DOM Level 1
=> DOM Level 2 Core
=> DOM Level 2 HTML
=> DOM Level 3

HTML5 APIs

=> Media API – To control the audio and video elements on the page
=> Text Track API – To interact with subtitles, captions, etc=> Drag and Drop – To drag and drop elements in the browser by setting the draggable property to true on an element
=> Application cache – Storing files on the local by defning them in a manifest file, thus making them available offline
=> User Interaction – Setting contenteditable property and using localStorage can make it easy to track user made changes
=> History – Allows to manipulate entries in the user’s hsitory, holding data to restore page-state, and update url without refershing page.
=> Geolocation, IndexedDB, Selectors, Filesystem, etc

——————–

WebSQL – A database in the browser to store information. It is obsolete.
indexedDB replaces the WebSQL, with features like Creating transactions, creatint tables, inserting to table, reading data and deleting data.

—————

A minimum of 3 tags, namely, HTML, head and body are required to create a HTML page

—————-

A custom data attribute starts with data- (data-level=”complex”), and they can be accessed using JavaScript APIs

————

Cookies drawbacks
=> Being sent with every request, slows down the request
=> Limited to 4KB, sometimes not enough.

—————–

Storage happens only in String format
Session Storage

sessionStorage.setItem (‘key’,’value’); 
sessionStorage.getItem(‘key’); 
sessionStorage.removeItem(‘key’); 
sessionStorage.clear(); 
for (var i = 0; i < sessionStorage.length; i++) {
    var key = sessionStorage.key(i);   
    var value = sessionStorage.getItem(key);   
}

Local Storage

localStorage.setItem (‘key’,’value’); 
localStorage.getItem(‘key’);
localStorage.removeItem(key);
localStorage.clear()

———————

datalist is used for autocomplete feature of input

<input type="text" list="countries" name="country" /> 
<datalist id="countries">   
    <option value="India">India</option>   
    <option value="United States"></option>  
</datalist>

——————-

fieldset is used to group multiple form-controls

<fieldset>  
<legend>Personal Information</legend>  
First Name: <input type="text" />  <br/><br/>
Last Name: <input type="text" />  <br/><br/>
p_Address: <input type="text" />  
</fieldset>  

———————-

Features available to WebWorker – Can access
=> The navigator object
=> The location object
=> XMLHttpRequest
=> setTimeOut/clearTimeOut/setInterval/clearInterval
=> importScripts
=> spawning other WW

Limitations of WebWorker – Can’t access
=> DOM elements
=> window object
=> document object
=> parent object

————————–

You can read more on HTML from MDN.

For reading more, please visit this for JavaScript and this for CSS.

Leave a Reply

Your email address will not be published. Required fields are marked *