HTML Attributes

Attribute names and attribute values are case-insensitive. However, the World Wide Web Consortium (W3C) recommends lowercase attributes/attribute values in their HTML 4 recommendation.

HTML Attributes

  • All HTML elements can have attributes
  • Attributes provide additional information about an element
  • Attributes are always specified in the start tag
  • Attributes usually come in name/value pairs like: name="value"

Core Attributes

The four core attributes that can be used on the majority of HTML elements (although not all) are:

  • id
  • title
  • class
  • style

The id Attribute

The id attribute of an HTML tag can be used to uniquely identify any element within an HTML page.  If an element carries an id attribute as a unique identifier, than it becomes possible to identify just that element and its content with id reference. It is just like unique name to each elements in HTML Document.

<p id="One">This para has ID "one"</p>
<p id="Two">This para has ID "two"</p>

The title Attribute

The title attribute gives a suggested title markup for the element. 

<h3 title="Hello HTML!">Bring your mouse over me to read title.</h3>
<a href="https://w3clan.com" title="Check out w3clan.com!">Titled Heading Tag Example</a>

The class Attribute

The class attribute is used to associate an element or group element of similar nature for major purpose of CSS. For an example, you may need to have similar heading of "same size, color and font" , in that case, you can simple create class with the given value and all element will have similar property and presentation.

<!DOCTYPE html>
<html>
<head>
<style>
    .myOwnType { color: yellow;background:black;padding:10px; }
</style>
</head>
<body>
        <p class="myOwnType">Some text...</p>
<p>Some text...</p>
<p>Some text...</p>
<p>Some text...</p>

        <p class="myOwnType">Some text...</p>
<p>Some text...</p>
<p>Some text...</p>
<p>Some text...</p>
<p>Some text...</p>
</body>
</html>

The style Attribute

The style attribute allows you to specify Cascading Style Sheet (CSS) rules within the element.

<!DOCTYPE html>
<html>
<head>
<title>The style Attribute</title>
</head>
<body>
<p style="font-family:arial; color:#FF0000;">Some text...</p>
</body>
</html>

Generic Attributes

Here's a table of some other attributes that are readily usable with many of the HTML tags.

Attribute Options Function
align right, left, center Horizontally aligns tags
valign top, middle, bottom Vertically aligns tags within an HTML element.
bgcolor numeric, hexidecimal, RGB values Places a background color behind an element
background URL Places a background image behind an element
id User Defined Names an element for use with Cascading Style Sheets.
class User Defined Classifies an element for use with Cascading Style Sheets.
width Numeric Value Specifies the width of tables, images, or table cells.
height Numeric Value Specifies the height of tables, images, or table cells.
title User Defined "Pop-up" title of the elements.

Loading ...

Related Results :

  1. HTML Attributes
Note :
  • Related Posts are generally User Blog posts.
  • or Other tutorials from other networks of w3clan.com.
  • Any registered user can create related posts based on search term tags.

About the Author