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 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="">
<meta name="description" content="Helping you with ALL your computer questions">
<meta name="keywords" content="computer, technical, free, help, support">


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


=> 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’); 
for (var i = 0; i < sessionStorage.length; i++) {
    var key = sessionStorage.key(i);   
    var value = sessionStorage.getItem(key);   

Local Storage

localStorage.setItem (‘key’,’value’); 


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>  


fieldset is used to group multiple form-controls

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


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