HTML Attributes

sri parthusri parthu
3 min read

HTML Attributes

  • HTML element attributes provide additional information about HTML elements. They are always specified with the starting tag. These attributes usually provide name="value".

The href Attribute

  • The <a> tag defines a hyperlink. The href attribute provides the link to the web page. Here href is the name and "some info" is the value for the attribute.
<a href="https://www.linkedin.com/in/devops-parthu-45927a2a2/">This is the link of LinkedIn</a>

The src Attribute

  • The <img> tag is used to include an image in an HTML page. The src attribute specifies the image to display in the HTML page. Here, src is the name and ".jpg" is the value.
<img src="https://res.cloudinary.com/dj9xxg3xs/image/upload/v1719747684/my_logo_j8lme1.png">

The width and height Attributes

  • The <img> tag is used to include an image in the HTML page. The height and width attributes are used to increase and decrease the image size. Here, height and width are the names, and "500" and "250" and other numbers are the values.
<img src="https://res.cloudinary.com/dj9xxg3xs/image/upload/v1719747684/my_logo_j8lme1.png" height="250" width="500" >

The alt Attribute

  • The <alt> attribute for the <img> tag specifies the alternative text for the image. If, for some reason, the image does not display due to a slow connection or an error in the src, then the user can read the alternative text.
<img src="https://res.cloudinary.com/dj9xxg3xs/image/upload/v1719747684/my_logo_j8lme1.png" alt="This is DevOpsParthu logo" height="500" width="500">

Example error in src or slow connection

<img src="https://res.cloudinary.com/dj9xxg3xs/image/upload/v1719747684/my_logos_j8lme1.png" alt="This is DevOpsParthu logo" height="500" width="500">

The style Attribute

  • The style an attribute is used to add style to elements such as color, font, size, and more.

Color:

<p style="color:red;">This is red paragraph.</p>

Font:

<p style="font-family:Cursive;">This paragraph is in cursive</p>

Size:

<p style="font-size:300%;">This is font size</p>

The title Attribute

  • The title attribute provides some extra information about an element. The title attribute will be displayed as a tooltip when you mouse over the element.
<p title="About DevOps">This is devops</p>

Summary

  • All HTML elements have attributes.

  • <a> tag defines a hyperlink. It has an attribute called href (Hyperlink Reference).

  • <img> tag is used to add an image to a webpage. It has attributes called src (source), height, and width for the image, and also an alt attribute which means alternative text for the image.

  • <style> attribute is used to style the elements inside the body element within the <p> element, such as font, color, size, etc.

  • <title> attribute is used to show some extra information about the element.


Happy Learning

Thanks For Reading! :)

-SriParthuπŸ’πŸ’₯

0
Subscribe to my newsletter

Read articles from sri parthu directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

sri parthu
sri parthu

Hello! I'm Sri Parthu! 🌟 I'm aiming to be a DevOps & Cloud enthusiast πŸš€ Currently, I'm studying for a BA at Dr. Ambedkar Open University πŸ“š I really love changing how IT works to make it better πŸ’‘ Let's connect and learn together! πŸŒˆπŸ‘‹