HTML Attributes

In simple words HTML Attributes are the HTML Element’s property which describes HTML Elements.

Modifier of an HTML Element Type

HTML attribute is a modifier of an HTML element type. An attribute either modifies the default functionality of an element type or provides functionality to certain element types unable to function correctly without them.

  • In HTML syntax, an attribute is added to an HTML start tag.
  • All HTML elements can have attributes.
  • HTML Attributes provide additional information about an element.
  • Attributes are always specified in the start tag.
  • The HTML Attributes usually come in name/value pairs for Example : attribute="value"

Syntax example in attributes

<!DOCTYPE html>
<html>
   <body>
      <open_tag attribute="value">content to be modifies by the tag</close_tag>
   </body>
</html>

Syntax example

<a href="https://www.gdatamart.com/" id="mygLink">I'm a link</a>

Example Explanation

In this element <a> contains two attribute i.e. href and id, these two attribute have their own value defined within “ ”.

  • Attribute href is used to provide a link to other page or other Element
  • Attribute id is used to uniquely identify an Element in HTML document
  • The value of both attribute href and id is given after = of attribute within " "
  • Attribute is always written in opening tag, we never write it in closing tag

The href HTML Attribute

The href html attribute is a link it are defined with the <a> tag. The link address is specified in the href attribute

Describe with example

<!DOCTYPE html>
<html>
   <body>
      <a href="https://www.gdatamart.com/">This is a Link</a>
   </body>
</html>

The src & alt HTML Attribute

The src & alt HTML Attribute use in Image tag, HTML images tag are defined with the <img> tag.

  • The filename of the image source is specified in the src attribute.
  • The alt HTML used to describe about image, when an image cannot be displayed.
  • The value of the attribute can be read by screen readers.
  • The alt attribute is also useful if the image does not exist.

Describe with example

<!DOCTYPE html>
<html>
   <body>
      <img src="cute_cat.jpg" alt="sleeping cat in ground" />
   </body>
</html>

Width, and Height HTML Attributes

You can set width, and hieght in Images with HTML size attributes, which specifies the width and height of the image

Describe with example

<!DOCTYPE html>
<html>
   <body>
      <img src="cute_cat.jpg" alt="sleeping cat in ground" width="200" height="200" />
   </body>
</html>

HTML Style Attribute

The style attribute is used to specify the styling of an element like color, font-size, background-color, and position etc.

Describe with example

<!DOCTYPE html>
<html>
   <body>
      <p style="color:red; font-size:20px;"> This is a Paragraph </p>
   </body>
</html>

Lang HTML Attribute

The language is declared with the lang attribute. Declaring a language is important for accessibility applications and search engines

  • The first two letters specify the language (en).
  • And Second letters specify th Country.
<!DOCTYPE html>
<html lang="en-US">
   <body>
      <p> My first paragraph </p>
   </body>
</html>

Title Attribute

A title attribute is added to the <p>, <h> element. The value of the title attribute will be displayed as a tooltip when you mouse over the Header or paragraph -

<!DOCTYPE html>
<html>
   <body>
      <h1 title="This is a Header"> My Firts Heading </h1>
      <p title="This is a paragraph"> My first paragraph </p>
   </body>
</html>

HTML Attributes

Attribute Description
Disable Specifies that an input element should be disabled
id A unique id for an element
title Extra information about an element
Lang We use lang attribute to tell web browser the language of HTML document, see how we define.

Why we use HTML Attributes?

It is very important to understand why we need HTML Attributes, Just like if we want to change our look we wear some different kinds of dresses, in same sense to add some feature in HTML Elements we use HTML Attributes.

These can be used to change default property values or to add some extra property value to HTML Element.

For example if there is a HTML Element and we wants to provide it a height then we can use height attribute of that HTML Element to provide a height to that HTML Element.

Policy

GDATAMART.COM is optimized for learning & job information; The users try to improve your knowledge and practical experience through this site but we cannot warrant full correctness of all content... Learn More → | Sitemap →

© 2020 GDATAMART | All Rights Reserved