Overview of AngularJS

AngularJS is an open source web application framework. It is now maintained by Google. The most of the code can be eliminated by using the angular data-binding and dependency injection.

Features :

• It provides an option to the developers to write the client side application in a clean MVC (Model View Controller)format.
• It automatically handles the JavaScript code which is been suitable to the browser.
• It is a powerful JavaScript based development framework to create a Rich Internet Application (RIA).
• It is open source i.e. completely free. It is licensed under Apache License Version 2.0.

The main core features are also been described below :

Data-binding : 

It automatically synchronizes the data between the model and view components.

Scope : 

The scope is the binding part between HTML and the JavaScript i.e. view and controller. Scope is an object which contains the available properties and methods.

Controller :

Controllers are regular JavaScript Objects. These control the data of the AngularJS applications. All the angularjs applications are been controlled by controllers and ng-controller directive defines the application controller.

Services :

AngularJS has built-in services. For example $http request to make XMLHttpRequests. These all are singleton objects which are been instantiated only for once in the app.

Directives :

AngularJS lets us to extend the HTML with new attributes called Directives. These are the markers on the DOM element. AngularJS has built-in directives and also we can define our own directives.

Filters :

Filters can added to format data in AngularJS .  The filters can be added to expressions by using pipe character i.e. | and followed by filter name.

Routing :

It helps our application to become a single page application. If we want to navigate to different pages in the application and also we wanted it to be single page i.e. no page reloading then we can use ngRoute Model. The ngRoute will routes the model without reloading the page.

Dependency Injection :

AngularJS has a built-in dependency injection which will help the developer by making the applications to develop easier, understand and test.

Model View :

MVC is a design pattern for dividing an application with different parts called Model View Controller. 

Advantages :

• It creates single page application (SPA).
• The code is unit testable.
• It also provides reusable components.
• Here we write less code and get more functionality.
• It has a data-binding capability to the HTML.
• The main advantage is AngularJS applications can run on all major browsers and also on smart phones which include both android and IOS phone/tablets.

Disadvantages :

• server side authentication and authorization must be required in order to keep the application secured otherwise it may not be secured.
• If JavaScript is disabled for the application by the user then only the basic page will be seen to the user and nothing else will be seen.

Importance of AngularJS :

Few important features of the angularjs are been mentioned below in the image :

Components :

The AngularJS Framework is divided into three major directive parts. They are :

1. ng-app : This directive will link the angular application to the HTML.

2. ng-model : This directive will bind the values of angular application to the HTML view input controls.

3. ng-bind : This directive binds the angularjs application data to the HTML tags.

MVC Architecture :

It is known as Model View Controller or MVC Architecture. It is a software design pattern for developing web applications. This is made up of three parts. They are :

Model :  It is responsible for maintaining the data.

View : It displays the specific portion of the data to the user.

Controller : It controls the interaction between model and view.

MVC View :

The controllers receives all the requests from the application and then it works with model to prepare the data which is been needed by the view. The view will be the final representation response with the given data by controller.

Model will manage the application data. It updates the data based on controller information and it will respond the request from the view

View will present the data in a particular format and the controller will trigger the view to present the data and every decision is been decided by the controller.

Controller will perform the interactions on the data model objects. The control receives input, validates it and then sends a request to the model to update the data.

Angular JS Digest Life Cycle

AngularJS offers an excellent feature known as two-way data binding. Data binding means when the value is been changed in the view, then the scope model will automatically gets updated and in the similar way of the scope model changes then the view will be updated itself by the new value. Now how this is been done ??

For this, angularJS will set up a watcher on the scope model, it will be updated on the view and same if the view changes it will be updated in the scope model.

Syntax :

$scope.$watch('updateValue', function(newvalue, oldvalue) {
//here it will update the DOM element with the new value
});

        Here, the second argument which is been passed to the $watch() is known as the listener function and it is called whenever the value of updateValue changes. It is easy for us to remember that when the value changes the listener will be called, with updating the expression in HTML. Now we get a doubt that how does angular will know when the updateValue is been changed so that it can call it's respective listener. So, to solve this $digest cycle comes into the picture.

            The $digest cycle starts with a call of $scope.$digest(). For Example the scope function can be changed in the handler function through the ng-click directive or it can be any other directive . In this case when the scope gets changed the angular will call the $digest cycle by calling the $digest() and it will then fire the each watch. These watchers will check if the current value of the scope model is different from the old value. If yes, then the respected listener function will be executed. As a result, if there are any expression in the view they will be updated. In addition to this event, there are several other directives/services which will let you change models and automatically triggers a $digest cycle.

              Angular will never call the $digest() method directly. Instead of this, it calls $scope.$apply() which will in turn call the $rootScope.$digest(). So, the digest cycle starts with the $rootScope and it will visit all the child scopes by calling the watchers.

For Example : 

when we attach a ng-click directive to a button and a pass a function name to it. Now, when the button is clicked, the angular will just wrap the function call in the $scope.$apply() and next the digest() comes in to verify whether the changes are been reflected in the view or not.

$scope.$apply() will automatically call the $rootScope.$digest(). The $apply() is of two types.

The first is function will be taken as argument, evaluates it and triggers a $digest cycle.

The second doesn't take any arguments, it just starts a $digest cycle when it is been called.

For all built-in directives angular will wrap the code in $apply() and starts $digest() cycle. There would be a chance for us to call the $apply() manually i.e. if the model is been changed outside of the angular context then we need to inform angular the changes by calling the $apply() manually. It is like we are informing angular that the you are changing some models and the watchers need to be fired so that your changes can be done properly.

For Example : 

If we use setTimeout() function to update a scope model. Angularjs doesn't know what has been changed. so for this we  need to call $apply() to make sure that the changes take effect.

angular.module('myApp',[]).controller('MessageController', function($scope) { 

     

     $scope.getMsg = function() {

          setTimeout(function() {

               $scope.msg = 'fetched message after 3 seconds';

               console.log($scope.msg);

          }, 2000);

      }

     $scope.getMsg();

    });

Here, we need to see that the model needs to get updated after a two second interval but doesn't get updated because we didn't apply the $apply() function. So, we need to add $apply() function in the above code as shown :

$scope.getMsg = function() {

          setTimeout (function() {

              $scope.$apply(function() { 

                   $scope.msg = 'fetched message after 3 seconds';

                   console.log($scope.msg);

               }

          }, 2000);

      }

          $scope.getMsg();

       });

Now the view gets updated after two seconds and the only change in the code is $scope.$apply() which will automatically trigger $rootScope.$digest so the watchers will be fired and the data will be updated.

Always we need to use version $apply() that accepts a function argument because when a function is passed to the $apply() it will wrap the code in the code in try...catch block and if any exception occur then it will be passed to the $exceptionHandler service.

jQuery Attributes

The basic components which can be done related to DOM elements are the properties and attributes which are been assigned to the elements.

Most of the attributes are been available in JavaScript as a DOM node properties. The most used properties are :

• id
• tagName
• className
• href
• title
• src

For Example consider a div element :

< div id="newDiv" class="selected" title="This is my first element." > This is my Div < /div > 

< span id="span1" > < /span >

In this element, the tagname is div and the id,class,title are the element's attributes. Each one consists of a name and value. In jQuery we can manipulate an elements attributes easily.

Get Attribute Value :

The attr() can be used in get attribute value. It is used to fetch the value of an attribute from the first element or to set the value onto all matched elements.

Example :

Here, the below example will fetch the title from the div and that title value is stored in the variable called title and set this text to the span for the id of "span1".

output:

This is my Div

This is my first element

Set Attribute Value :

The attr(name,value) method will set the named attributes to all elements by using the passed value.

output :

As the alt attribute value is been changed from Sample image to the Image couldn't be loaded and also the image path is not available in the source. So, the alt value is set to the updated one.

So, the output will be :

Image couldn't be loaded.

Applying class to the elements :

The addClass method is used to add the classes to all the matched elements. The multiple classes can be separated by space.

Example :

output :

This is my first div

This is first paragraph.

Methods for Attribute :

1. removeClass( class ) :

The removeClass method removes all the mentioned classes from the matched elements.

Parameter : class i.e. the name of the class name which has to be removed from the elements.

Syntax :

selector.removeClass( class );

Example :

output :

This is my first div

This is first paragraph.

2. hasClass( class ) :

The hasClass( class ) method will check whether the specified class has the matched elements or not. If the class is present it returns true or else it returns false.

Syntax :

selector.hasClass( class );

Parameter :

class : The name of the class.

Example :

output :

This is first paragraph.

This is second paragraph.

true

false

3. attr( properties ) :

The attr( properties ) method will set key/value object as the properties to all the matched elements.

Syntax :

selector.attr({ prop1:val1,prop2:val2})

Parameters :

property : css property of the matched element.

value : value which has to be set.

Example :

output :

As the image src is empty and first the alt is none and then it is changed to Logo. So, the attr method will update the alt value to Logo.

Logo.

4.  html() and html( val ) :

html() will get the html content of the  first matched element and the html( val ) will set the value for the specified element.

Syntax :

selector.html();

selector.html( val );

Example :

output :

Here the second div content is replaced by the first div content.

This is first div.

This is first div.

4. text() and text( val ) :

The text() will combine the text contents of all the matched elements and the text ( val ) will set the text contents of all the matched elements.

Syntax :

selector.text();

selector.text( val );

Example :

output :

Here, the text of the div is stored in data1 and data2. Div2 data is replaced with div1 and div3 data is been replaced with div2. But the CSS doesn't change.

This is first div.

This is first div.

This is second div.

6. val() and val( val ) :

The val() will get the input value for the first matched element and the val ( val ) will set the input for the every matched element

Syntax :

selector.val();

selector.val( val );

Parameter : 

val : If it is called on input element it will set for every matched element but if it is called for select tag with the option value then only the passed value will be selected or if it is called for checkbox or radio box then all the selected radio box and check box which are matched will be checked.

jQuery

jQueryBasics :

The jQuerylibrary defines a single global function i.e. jQuery(). As this function is been used most frequently so a shortcut is been defined for it i.e. $. The value which is been returned by this function represents a set of zero or more DOM elements and is known as a jQuery object. The jQuery() is a factory function rather than a constructor: it returns a newly created object but is not used with the new keyword and the jQuery objects define many methods for operating on the sets of elements they represent.

Example :

$("p.newContent").css("background-color", "yellow").show("fast");

Explanation :

In the above example, css() method will be operated on the jQuery object returned by $(), and it will return the same object, so that the show() method can be invoked next in a compact “method chain.”
This method chaining idiom is common in jQuery programming.

How to obtain jQuery :

The jQuery library is a free software. we can download it from the http://jquery.com. Once the downloading is done we can include the src it in the script tag as :
< script >
src="jquery-1.4.2.min.js"
</ script >

The min in the file name is the minimised version of the library i.e. the unnecessary comments, whitespaces are been removed and the internal identifiers are been replaced with shorter one's.

And Here goes the another way to use jQuery in your web applications i.e. is to allow a content distribution network to serve it using a URL like (any URL can be used from the below mentioned one's):
            http://code.jquery.com/jquery-1.4.2.min.js
            http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js
            http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js

But most recommended is to use the downloaded file. where our data will be loaded faster and if the URL is been used sometimes the data may be received late because of network issues.

The jQuery() function :

The jQuery() function is the most important one in jQuery library.  The function can be invoked in four different ways i.e.

         The first way is to invoke $() to pass a CSS selector to it. When it is been called this way, it returns the set of elements from the current document that matches the selector. jQuery supports most of the CSS3 selector syntax, and also some extensions of its own. An element or a jQuery object can be passed as the second argument to $(), it will return only the matching descendants of the specified element or elements. A starting point is been defined for the jQuery by the optional second argument and is often called the context.

The second way is to invoke $() i.e. to pass it to a window or element or document object. It will simply bind the element, document or window in a jQuery object and it will return that specified object. By this it allows us to use jQuery methods to manipulate the element rather than using it as  raw DOM methods. The jQuery programs call $(document) or $(this). 

Example :

jQuery objects can be able to represent more than one element in a document, and you can also pass an array of elements to $(). So, the returned jQuery object represents the set of elements in an array.

         Now third way is to invoke $() i.e. to pass it a string of HTML text. Then the jQuery will create the HTML element or elements described by that text and then it returns a jQuery object representing those elements. If we are passing a plain text when you invoke $() in this way, or jQuery then it will think you are passing a CSS selector. For this format, the string which is been passed to $() must include at least one HTML tag with angle brackets.

       When invoked in this third way, $() will accept an optional second argument. A  Document object can be passed to specify the document with which the elements are to be associated or normally an object can be passed as a second argument. If you do this, the object properties are assumed to specify the names and values of HTML attributes to be set on the object. But if the object is been included with the properties containing any of the following names “css”, “html”, “text”, “width”, “height”, “offset”, “val”, or “data”, or properties that contains the same name as any of the jQuery event handler registration methods, then the  jQuery will invoke the method of the same name on the newly created element and pass the property value to it.

Now, the fourth way to invoke $() is to pass a function to it. The function which is been passed by us 

will be invoked when the document has been loaded and the DOM is ready to be manipulated. This is the jQuery version of the onLoad() function.

jQuery(function() { // Invoked when the document has loaded

// All jQuery code goes here

});

This will be invoked when the document is ready and DOM is ready.

The function which is been passed to jQuery() will be invoked with the document object as its

this value and with the jQuery function as its single argument. This means that we can undefine the global $ function and still use that convenient alias locally with  noconflict() :

jQuery.noConflict(); 

jQuery(function($) { 

});

Difference between $() and querySelectorAll() :

The $() function is similar to the Document method querySelectorAll() that was described both take a CSS selector as their argument and return an array-like object that holds the elements that match the selector. The jQuery implementation uses querySelectorAll() in browsers that support it, but there are good reasons to use $() instead of querySelectorAll() in your own code:

• querySelectorAll() has only recently been implemented by browser vendors but the $() works in older browsers as well as new ones.

• Because jQuery can perform selections “by hand,” the CSS3 selectors supported by $() work in all browsers, not just those browsers that support CSS3.

• The array-like object returned by $() (a jQuery object) is much more useful than the array-like object (a NodeList) returned by querySelectorAll().

each() :

• looping over all elements in a jQuery object. we can call the each() method instead of writing a for loop. The each() method is like a ECMAScript 5 forEach() array method. 
• It expects a callback function as its sole argument, and it invokes that callback function once for each element in the jQuery object . 
• The callback is invoked as a method of the matched element, so within the callback the this keyword refers to an Element object. 
• each() also passes the index and the element as the first and second arguments to the callback. 
• The second argument are raw document elements, not jQuery objects. 
• If we want to use a jQuery method to manipulate the element, we need to pass it to the $() first.
• jQuery’s each() method has one feature that is quite different than forEach().
• If the callback returns false for any element, iteration will be terminated after that element.
• each() returns the jQuery object on which it is called, so that it can be used in method chains.

jQuery has released in January 2006 by John Resig at BarCamp NewYork. It is currently headed by Timmy Wilson and it is been maintained by the team of developers. Nowadays, the jQuery is been used by so many websites.

jQuery Release Dates :

Version No                                                   Release Date

   
    1.0                                                               26-Aug-2006
   
    1.1                                                               14-Jan-2007

    1.2                                                               10-Sep-2007

    1.3                                                               14-Jan-2009

    1.4                                                               14-Jan-2010

    1.5                                                               31-Jan-2011

    1.6                                                               3-May-2011

    1.7                                                               3-Nov-2011

    1.8                                                               9-Aug-2012

    1.9                                                               15-Jan-2013

    1.10                                                             24-May-2013

    1.11                                                             24-Jan-2014

    2.0                                                               18-Apr-2013

    2.1                                                               24-Jan-2014

JavaScript Tricky Questions

1. return statement :

function first(){
      return {
       name : "sita"
      };
}
function second(){
      return
      {
         name : "ram"
       };
}

call both the functions

first();
second();

The first() will return the Object =>  { name : "sita"} and the function second() will return undefined both doesn't give the same result because here it adds semicolon for the return statement. It will be inserted immediately at the end of the return statement and the block of the code will never get executed but it doesn't throw any error because the  remainder of the code is valid.

2. Equality :

console.log(0.1 + 0.2 );
console.log(0.1 + 0.2 == 0.3);

Here, our guess goes to true for the second log but it log false. The numbers in JavaScript are treated as floating point. So, unexpectedly the output will be :

0.30000000000000004
false

3. NaN :

NaN means "not a number".
NaN compared to anything or itself returns false.
console.log(NaN == NaN )
output : false
the typeof NaN is number
console.log(typeof NaN == "number")
output :   true

4. If we add strings with numbers : 

console.log(1 +  "2" + "5");
output :
125 // If a string is added after the number then the numbers will be concatenated but not added.

console.log(1 +  +"2" + "5");
output : formula : (  + * + = +)
35 // It string is followed two plus symbols then the first and second numbers are added and the third one is concatenated.

console.log(1 +  -"1" + "5");
output :
35
As formula says ( + * - = -)  here the numbers are subtracted  and the third number is concatenated.

console.log(+"1" +  "5" + "7");
output :
157
Because all are strings.

console.log( "A" - "B" + "5");
output :
NaN5
As, "A"-"B" is not valid so, it returns NaN and the other string 5 is valid it concatenates 5 to NaN.

console.log( "A" - "B" + 5);
output :
NaN
Here, 5 is a number and adding all those is not valid. So, NaN is returned.

5. Boolean false Equality :
console.log(false == '0'); // true
console.log(false === '0'); //false

In JavaScript, we have two equality operators i.e. triple equal and double equal operator. Triple equal will returns true if the two expressions on either side has same type and same value whereas double equal just compares the value.

6.  var y = 10;
var foo =  function() {
console.log(y);
var y = 15;
};
foo();

output :
undefined

The output is not 10 or 15. Then we just get a doubt that if it is not taking a local variable why can't it take global variable the answer is : when the function is getting executed it checks that the local variable y is present but it isn't declared yet so it will not look for the global variable.

7. typeof
 typeof undefined == typeof NULL

output :

true

Because NULL is treated as any other undefined value.

8. console.log(typeof typeof 10);

what would this returns?

output :
string
Because the typeof 10 will result "number" and the typeof "number" will result in string.

9. Delete operator : 
var output = (function(y){
    delete y;
    return y;
  })(0);
 
  console.log(output);

output :
0

Because here delete operator is used delete properties from an object. As y is a local variable, it is not an object. So, no changes will be done.

10. Deleting an array element :
var sample = ["apple","banana","grapes","kiwi","orange"];
delete sample[3];
console.log(sample.length);

output :
5

After deleting the sample[3] it creates an empty space but doesn't get effected to the length of the array. Only the value gets removed and undefined will be placed at that index.

Functions

Functions are set of statements that perform a task. The Function keyword can be used to define a function inside the expression. These can be defined in two ways i.e. function constructor or function expression.

Function Expression :

Functions can be created by function expression. These functions are known as anonymous function i.e. it doesn't have any change.

Syntax :

var myFunc = function [name]([param1[,param2[,...,paramN]]]){
//statements
}

Parameters :

name : name is the function name and this is not mandatory. So, it can be omitted, in this case it will be an anonymous function.

params : params are the name of the argument which are been passed to the function.

statements : The statements will be body of the function.

Examples :

var a = function(a) {
        console.log(a);
}
a(1);

output :

1

Function Expression are convenient when passing a function as an argument to another function.

Example :

function firstFunc(anotherfunc){
anotherfunc();
}
function secondFunc(){
console.log("secondFunc() is passed as an argument to the firstFunc()");
}
firstFunc(secondFunc);

output :

secondFunc() is passed as an argument to the firstFunc()

Function Declaration :

Function declaration is also known as function definition or function statement.
A Function which is been created with a function declaration will be a function object and it has all the properties, methods, behavior of function objects. By default the return type of function is undefined and to return any value the function must have a return statement that will specify the value to be returned.

It consists of :

• name of the function.
• list of parameters that is been passed inside the parenthesis separated by comma.
• body which is been enclosed in the curly braces {}.

Example :

function a(){
console.log("hi");
}
a();
output :
hi

If the object is passed as a parameter and the function changes it's object properties then change is effected even outside the function.

Example :

function first(a){
          a.name = "john";
}
var details = { name:'joy', gender:'female' };
var x,y;
console.log(details.name);
first(details);
console.log(details.name);

output :

joy
john

The main difference between function expression and function statement :

• function statement is the function name which can be omitted in the function expression which will be defined as anonymous function.
• This function Expression can be used as Immediately Invoked Function Expression. As, it can run as soon as it is been defined.
• Function Expression are not hoisted as Function declaration.

Example :

 

b(1);

var b = function(a) {
        console.log(a);
}

It throws an error by saying that prototype of undefined.

Named Function Expression :

To refer a current function inside the function we create a named function expression. This name is accessible only to the function body scope and this also avoids non-standard property.

Anonymous function Example :

var a = function(b){

console.log(b + b);

} 

a(5);

output :

10

Naming Conflict :

When two variables or arguments have the same name then it would be a name conflict. Inner scope will have the highest precedence and the outer scope will have the least precedence. This is scope chain.

Example :

function outer(){
    var x = 10;
    function inner(x){
          return x * 10;
     }
     return inner;
}
outer()(20);

output :

200

Here, the name conflict is the variable x. So, the inner x will take the scope the outer x and the output will be 200 instead of 100.
 

HTML BLOCK AND INLINE ELEMENTS

Block-level Elements :

A Block level Element always starts with a new line and it takes up the full width.

Block level Elements in HTML are :

address :

This tag defines the contact information for the owner/author of a document or an article. If this tag is defined inside the body element then the contact information is for  the document. If this tag is defined inside the article element then the contact information will be for the article . The text is rendered in italic for the address element.

article :

This tag specifies independent, self-contained elements. An article should make sense on its own and it has to be relevant with the data.

Example :

Facebook :
       Facebook is an American online social media and social networking service company based                 in Menlo Park, California. The Facebook website was launched on February 4, 2004, by Mark               Zuckerberg.

div :

This tag defines a division or a section in a HTML document. It is used to group elements to format them with CSS.
<div style="color:red">
  <h3>This is a heading</h3>
  <p>This is a paragraph.</p>
</div>

dd,dt,dl:

dd is used to describe the term/name in a description list.
dt is used to define the term/name in a description list.
dl will define the description list.

Example :

Fruits

Apple 

Banana

Mango

footer :

This tag defines a footer for the document or for a section and the information must be related to it's contact information.

The footer element may contain information about :

1. author information.
2. contact information.
3. related documents
4. to revert to top of the page and so on.

form :

This tag is used to create HTML form to accept user inputs. The form tag contains following elements. They are :

input: This allows user to enter the data and it can be in many ways. It depends on the type attribute.

textarea :  This tag defines a multi-line text holder. This can hold unlimited number of character. This textarea can be specified by the cols and rows attribute.

This is a text area.

label : This tag defines a label for a input element

button : This defines a clickable button and the button element can also contain content like text or images.

select: The selection element is used to create a drop down list.

option : The option element is defined inside the selected element to show the available options list.

fieldset : To group a related elements in a group we use fieldset element and this tag draws a box around the related elements.

optgroup : This element is used to group the related options in the drop down list.

h1 to h6 : These tags are used for HTML Headings. h1 is the most important heading and h6 will be least important heading.

Heading1

Heading2

Heading3

Heading4

Heading5

Heading6

header : This tag is used to introduce the content and this may contain any of these heading elements i.e, h1 to h6 and may contain any icon or logo.

ol :This tag defines an ordered list and this can be numerical or alphabetical.
li : li is the list item. It is uses in ol and ul i.e. ordered list and unordered list.
nav : This tag is used to navigate the links.

noscript:  This tag is used to disable scripts in your browser. This tag can be used with in the body and head element. sometimes content will be displayed is it is not supported.

p : This defines paragraph. And the browser will automatically adds some space before and after the p tag and margins can be modified with styles.

section : The section tag defines a section in a document. such as headers,footers,chapters or it can be any other sections.

video : This tag defines a video or a video stream or it can be movie clip.

The mime types which are been supported are :

video/mp4
video/webm

video/ogg

main : This tag specifies the main content in the document. The content inside the main element must be unique such as navigation links, logos etc.

INLINE ELEMENTS :

Inline Elements doesn't start on a newline and it takes only as much as width it needed.

The Inline Elements are :

span : This tag is used as a container for some text and it is used group inline elements in a document.

a : This tag is for hyperlink, used to link from one page to another and most important attribute is href i.e. to indicate it's destination.

Google

b : This tag specifies bold text.
bold text

br : This is break tag which will insert a single break line and it doesn't have any closing tag.
Hello,
this is my blog

i : This tag will display the text in italic.
italic

script : script element is used to define client-side scripting. It may contain scripting statements or external source files through the source attribute.

strong : This tag defines an important .

Important

sub : subscript text.

Hello _blog

sup : superscript text.

2⁴

img : Image tag define an image in the HTML page. This has two attributes i.e. src and alt.
src is the image path to retrieve and set it on the HTML page and text is been given in alt parameter when the image is not able to loaded then this particular text will be displayed.