Technology Programming

What is an HTML Attributes | Learn HTML Attributes Online

The HTML Attribute

What is an Attribute in HTML?

HTML Attributes define additional properties or characteristics of the element such as height or width of an image. Attributes in HTML are always specified in the opening tag and usually consists of name/value pairs like name=”value”

The attribute in HTML values should always be enclosed in quotation marks.

HTML attribute provide additional HTML element details. i.e, HTML links are defined by a tag. The link/hyperlink address is specified in the “href” attribute. Note that attributes in HTML are always enclosed in quotes.

HTML attributes have a few key characteristics:

  • HTML attributes provide additional information on HTML elements
  • HTML Attributes are always specified in the beginning tag
  • Attributes HTML are presented in name/value pairs such as name=value

Also, some attributes are required for certain elements. For instance, an <img> Src and alt attributes.

In the below example, src inside the <img> tag is an HTML attribute and image path provided is its value. Similarly href  inside the <a>  tag is an attribute and the link provided is its value, and so on.

<img src=image.png width=30 height=30 alt=Smiley>
<a href=https://www.google.com/ title=Search Engine>Google</a>
<abbr title=Hyper Text Markup Language>HTML</abbr>
<input type=text value=Mark Alex>

General HTML Attributes

There are some HTML attributes, such as:

title, id, class, style, etc. that you can use on the majority of HTML elements. The following section describes their usages.

1-The title Attribute

The title HTML attributes is used to provide an element or its content with advisory text. Check out the example below.

<abbr title=Project Management Professional>PMP</abbr>
<a href=images/Ball.jpg title=Click to view a larger image>
         <img src=images/Balls-thumb.jpg alt=Balls>
</a>

2-The id HTML Attribute

The id attribute is used to give an element within a document a unique name or identifier. This makes it very easy to select the element using JavaScript or CSS.

<input type=text id=firstName>
<div id=container>Read content</div>
    <p id=“infoText”>This is the first paragraph.</p>

 

3-The class HTML Attribute

Like the Id attribute, elements are also identified with the class attribute. But unlike id, the class attribute doesn’t have to be unique in the document. This means you can apply the same class to multiple elements in a document, as shown in the below example:

<input type=text class=highlight>
<div class=box highlight>Some content</div>
<p class=highlight>This is a paragraph.</p>

 

4-The style HTML Attributes

The style attribute allows you to specify CSS styling rules such as font, color, border, etc. directly within the element.

<p style=”color: red;>This is the second paragraph.</p>
<img src=images/car.jpg style=”width: 300px; alt=yellow car>
<div style=”border: 1px solid red;>Some content</div>

See Also
How to create a web page in HTML
How to Link One Page to Another in HTML