codescracker


html

HTML Attributes



« Previous Tutorial Next Tutorial »


HTML attributes are used to provide some more informations about HTML elements. Attributes are in name and value pairs like, name="value".

HTML Attribute Example

Here is an example of HTML attributes:

<!DOCTYPE html>
<html>
<head>
	<title>HTML Attributes Example</title>
</head>
<body>

<p align="left">Using HTML Attribute (left)</p>
<p align="center">Using HTML Attribute (center)</p>
<p align="right">Using HTML Attribute (right)</p>
<p style="background-color:black;color:white;">Using HTML Attribute (white color with black background)</p>

</body>
</html>

Here is the sample output produced by the above HTML attribute example code:

HTML Attributes Example

HTML id Attribute

HTML id attribute is basically used to identify any element in an HTML page uniquely. Here is an example uses id attribute in HTML:

<p id="left_float">This will identified by id left_float</p>
<p id="right_float">This will identified by id right_float</p>

Here is an example uses id attribute in HTML.

<!DOCTYPE html>
<html>
<head>
	<title>HTML Attribute Example</title>
	<style>
		p#styling
		{
			border : 5px solid red;
			padding : 5px;
			margin : 10px;
		}
	</style>
</head>
<body>

<h2>HTML Attribute Example</h2>
<p>This is HTML Attribute Example</p>
<p id="styling">This is HTML Attribute Example</p>
<p>This is an example of HTML Attribute</p>

</body>
</html>

Here is the output displayed by the above HTML id attribute example code:

html id attribute

To learn more about styling HTML elements using the Style tag, then refer to HTML CSS tutorial. And to learn all about styling or CSS, then refer to CSS Tutorial.

HTML title Attribute

HTML title attribute is used to give a title for the HTML elements. Here is an example uses HTML title attribute:

<!DOCTYPE html>
<html>
<head>
	<title>HTML title Attribute Example</title>
</head>
<body>

<p title="I am the HTML title attribute">Using HTML title Attribute</p>

</body>
</html>

Here is the sample output displayed by the above HTML title attribute example code:

HTML Title Attribute Example

Here is the live demo output of the above title attribute example code in HTML.

Using HTML title Attribute

You can see from the above output, if you place the mouse cursor over the line Using HTML title Attribute, you will watch the title I am the HTML title attribute is coming out as a tooltip of the cursor.

HTML class Attribute

HTML class attribute is used to give a class to an HTML element. You can give same class name to more than one elements. Here is an example uses class attribute in HTML:

<p class="par1">Using HTML class Attribute (1)</p>
<p class="par2">Using HTML class Attribute (1)</p>
<p class="par1">Using HTML class Attribute (1)</p>

Here is an example shows how to use class attribute in HTML to style HTML elements.

<!DOCTYPE html>
<html>
<head>
	<title>HTML Attribute Example</title>
	<style>
		p.styling
		{
			border : 5px solid red;
			padding : 5px;
			margin : 10px;
		}
	</style>
</head>
<body>

<h2>HTML Attribute Example</h2>
<p class="styling">This is HTML Attribute Example</p>
<p>This is HTML Attribute Example</p>
<p class="styling">This is an example of HTML Attribute</p>

</body>
</html>

Here is the output produced by the above HTML class attribute example code:

html class attribute

HTML style Attribute

HTML style attribute is used to style HTML elements. Here is an example shows how to style HTML elements using the style attribute:

<!DOCTYPE html>
<html>
<head>
	<title>HTML style Attribute</title>
</head>
<body>

<p style="font-family:arial; color:red;">Using HTML style Attribute (font-family=arial and color=red)</p>

</body>
</html>

It will display the following in the browser:

HTML Style Attribute Example

To learn more about styling HTML elements, then refer CSS Tutorial.

HTML dir Attribute

HTML dir attribute is used to indicate the direction to the browser in which the text should flow. Here is an example uses dir attribute in HTML:

<!DOCTYPE html>
<html dir="rtl">
<head>
	<title>HTML dir Attribute Example</title>
</head>
<body>

This is how IE 5 renders right-to-left directed text.

</body>
</html>

It will display the following in browser:

HTML dir Attribute Example

HTML lang Attribute

HTML lang attribute is used to indicate the main language used in the document. Here is an example uses lang attribute in HTML:

<!DOCTYPE html>
<html lang="en">
<head>
	<title>HTML lang Attribute Example</title>
</head>
<body>

This web page is using English Language.

</body>
</html>

Here is the output displayed by the above lang attribute example in HTML.

html attributes

HTML Size Attributes

HTML size Attribute is used to define size of an image in an HTML document. To define size, then use width and height attribute as shown in the following example:

<!DOCTYPE html>
<html>
<head>
	<title>HTML size Attribute Example</title>
</head>
<body>

<img src="img1.jpg" width="142" height="142">

</body>
</html>

It will display the following in the browser:

HTML Size Attribute Example

HTML alt Attribute

HTML alt attribute is used to specify an alternative text to be used to display when an HTML element can't be displayed. Here is an example uses alt attribute in HTML:

<!DOCTYPE html>
<html>
<head>
	<title>HTML alt Attribute Example</title>
</head>
<body>

<img src="unknown.jpg" alt="mountain pic" width="142" height="142">

</body>
</html>

As unknown.jpg is non-existing file, so the alternative text will be displayed, which is mountain pic here:

HTML alt Attribute Example

« Previous Tutorial Next Tutorial »



Tools
Calculator

Quick Links
Signup - Login - Give Online Test