Wednesday, May 10, 2017

HTML Attributes


What are HTML Attributes?

HTML Attributes is a modifier of an HTML element. All HTML element have the attribute. All Attributes often have in name/value pairs for example: name="value". It gives additional information about an element.

Following are a core attribute of HTML:

1) name
2) id
3) class
4) style
5) title

The name attribute

The name attribute is used to specify input control name inside of form elements.
The name attribute is used to specify the name of input control elements.
Using name attribute, we can specify reference in JavaScript.

For Example:

<html>
<title>This is the example of name Attribute of HTML element</title>
<body>

<form action="/Test/Labonstack">
User Name: <input type="text" name="UserName" />
Password: <input type="text" name="Password" />
<input type="submit" value="Login">
</form>

<body>
</html>


The id attribute

The id attribute is unique in a single web page. It is used to uniquely identify HTML element. When we have two same name element in the document then using id we have to differentiate them.

For Example:

<html>
<title>This is the example of id Attribute of HTML element</title>
<body>

<h1 id="h1Test">This is heading of your site</h1>
<div id="divTest">Hello World!!!</div>

<body>


</html>


The title attribute

The title attrib reference in JavaScript.ute is used to specify additional "tool-tips" information.
When we hover the mouse on HTML attribute then it will show the title of HTML element.

For Example:

<html>
<title>This is Example of title attribute of HTML element</title>
<body>

<div title="My First Web Application">This is my first web application. </div>

</body>
</html>


The style attribute

The style attribute is used to specify CSS (Cascading Style Sheet) rules within the HTML element.

For Example

<html>
<title>This is the example of style Attribute of HTML element</title>
<body>

<div style="color: red;">This is example of style attribute</div>

<body>
</html>


The class attribute

The class attribute used to specify one or more class name for an HTML element. Using external or internal style we can specify the class property.


For Example:

<html>
<title>This is the example of class Attribute of HTML element</title>

<style>
.color-red
{
color: red;
}
</style>

<body>

<div class="color-red">This is example of class attribute</div>
<p class=”color-red”>Hello World</p>

<body>
</html>


Following are the common attribute of HTML:

Attribute
Description
Example
lang
Used to specify language of the elements content.
<p lang=”en”>Hello World</p>
size
Used to specify input control width.
<input type=”text” size=”30” />
alt
Used to specify alter text when element cannot render.
<img src=”text.jpg” alt=”Test Image” />
href
Used to specify URL link of page.
width and height
Used to specify width and height of HTML element.
<img src=”text.jpg” width=”50” height=”50” />
background
Used to specify background of HTML element.
<body background=”test.jpg”></body>
bgcolor
Used to place background color behind an HTML element.
<body bgcolor=”green”></body>
align
Used to specify horizontal align for an HTML element. Right, left and center are the align types.
<p align=”center”>Hello World</p>
valign
Used to specify vertical aligns of an HTML element. Top, middle and bottom are the types of valign.
<p valign=”middle”>Hello World</p>
Accept
Used to specify type of file that server will accept.
<input type=”file” accept=”test/*.jpg”>
cite
Used to specify URL.
<blockquote cite="http://www.labonstack.com/">
LabonStack shares on tech news, google guide, web tech, programming, tech security, software and an interesting thing.
</blockquote>




No comments:

Post a Comment