HTML Attributes

       No comments

 


What is an HTML Attribute?

  • HTML attributes provide additional information about HTML elements. 
  • Attributes are always specified in the start tag
  • Attributes usually come in name/value pairs like name="value"
  • Name: Specifies the property for that element.
  • Value: Sets the value of that property for the element.


    <html lang="en">

ID Attribute

  • The ID attribute is used to assign a unique identifier to an HTML element. 
  • Each element with an ID has its own unique identity,
  • Multiple elements cannot have the same ID.

Example

  <p id="html">This is an HTML</p>
  <p id="python">This is a Python</p>

Class Attribute

  • The class attribute can be used with all HTML elements.
  • multiple elements can share the same class.

<style>
    .box {
        background:
            skyblue;
        font-family: sans-serif;
        padding: 10px;
    }

    .bar {
        border: 1px solid black
    }
</style>

<p class="box bar">Setting 'box' and 'bar' class to the element.</p>

Title Attribute

  • The title attribute provides additional information about an element 
  • and is often displayed as a tooltip when the mouse hovers over it.

Example:

  <h4 title="hello, motto">Title attribute</h4>

Style Attribute

  • The style attribute in HTML is used to define inline css in our element.
  • It is used in conjunction with CSS properties to directly style individual elements within the HTML code.


<body style="background:steelblue;">
    <h2 style="font-size: 40px;">Heading of the page</h2>
    <p style="color:yellow">This is a paragraph.</p>
</body>


Other useful HTML attributes

href Attribute

  • The href attribute is used to link to another page or another web address. It is used in  a tag

<a href="https://devjunctionpoint.blogspot.com/"> Home </a>

src Attribute

  • src attribute is used to define file location. It accepts the URL of the resource. It is used with <img> , <iframe>, <audio>, <video>, etc.


<img src="../images/E3CCA633-C689-4DD9-8B20-79E7C5A88487.jpg"
alt="Clickable World Map"/>

alt Attribute

  • The alt attribute is added as an alternate text in a <img> tag. It holds a description of the image.

HTML Attribute List

AttributeUsed inDescription
alt<img>Description of the image
src<img>URL of the image
width<img>Width of the image
height<img>Height of the image
href<a>URL of the link
target<a>Target of the link
rel<a>Relation of the link
langhtmlLanguage of the text
styleAlmost all elementsStyle of the element
classAlmost all elementsClass of the element
idAlmost all elementsId of the element
titleAlmost all elementsTitle of the element
dirAlmost all elementsDirection of the text
colspan<td>Number of columns to span
rowspan<td>Number of rows to span
for<label>For which element the label is
placeholder<input>Placeholder of the input
autofocus<input>Focus the input
required<input>Input is required
checked<input>Input is checked
disabled<input>Input is disabled
readonly<input>Input is readonly
max<input>Maximum value of the input
min<input>Minimum value of the input
action<form>Action of the form
method<form>Method of the form


0 Comments:

Post a Comment

Do leave your comments