HTML Attributes

-

HTML Attributes

Attributes provide additional information about HTML elements.

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"

    The href Attribute

    HTML links are defined with the <a> tag. The link address is specified in the href attribute:

    Example

    <a href="https://www.google.com/">This is a link</a>You will learn more about links and the <a> tag later in this tutorial.

    The src Attribute

    HTML images are defined with the <img> tag.
    The filename of the image source is specified in the src attribute:

    Example

    <img src="imagelocation.jpg">

    The width and height Attributes

     HTML images also have width and height attributes, which specifies the width and height of the image:

    Example

    <img src="imagelocation.jpg" width="500" height="600">The width and height are specified in pixels by default; so width="500" means 500 pixels wide.
    You will learn more about images in our HTML Images chapter.

    The alt Attribute

    The alt attribute specifies an alternative text to be used, if an image cannot be displayed.
    The value of the alt attribute can be read by screen readers. This way, someone "listening" to the webpage, e.g. a vision impaired person, can "hear" the element.

    Example

    <img src="imagelocation.jpg" alt="Girl with a jacket">

The style Attribute

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

Example

<p style="color:red">This is a paragraph.</p>
You will learn more about styling later in this tutorial, and in our CSS Tutorial.

The lang Attribute

The language of the document can be declared in the <html> tag.
The language is declared with the lang attribute.
Declaring a language is important for accessibility applications (screen readers) and search engines:
<!DOCTYPE html>
<html lang="en-US">
<body>

...

</body>
</html>
The first two letters specify the language (en). If there is a dialect, add two more letters (US).

The title Attribute

Here, a title attribute is added to the <p> element. The value of the title attribute will be displayed as a tooltip when you mouse over the paragraph:

Example

<p title="I'm a tooltip">
This is a paragraph.
</p>
We Suggest: Use Lowercase Attributes
The HTML5 standard does not require lowercase attribute names.
The title attribute can be written with uppercase or lowercase like title or TITLE.

Chapter Summary

  • All HTML elements can have attributes
  • The title attribute provides additional "tool-tip" information
  • The href attribute provides address information for links
  • The width and height attributes provide size information for images
  • The alt attribute provides text for screen readers

    HTML Attributes

    Below is an alphabetical list of some attributes often used in HTML, which you will learn more about in this tutorial:
    AttributeDescription
    altSpecifies an alternative text for an image, when the image cannot be displayed
    disabledSpecifies that an input element should be disabled
    hrefSpecifies the URL (web address) for a link
    idSpecifies a unique id for an element
    srcSpecifies the URL (web address) for an image
    styleSpecifies an inline CSS style for an element
    titleSpecifies extra information about an element (displayed as a tool tip)

[Related content]

For more this type of content or If you want to know amazing facts , tricks ,tips about technology or you want to learn coding then follow
coder__bhai on instagram





Comments

Post a Comment

Popular posts from this blog

HTML Text Formatting

-
Image
HTML  Text Formatting Text Formatting This text is bold This text is italic This is   subscript   and  superscript HTML Formatting Elements In the previous chapter, you learned about the HTML  style attribute . HTML also defines special  elements  for defining text with a special  meaning . HTML uses elements like  <b>  and  <i>  for formatting output, like  bold  or  italic  text. Formatting elements were designed to display special types of text: <b>  - Bold text <strong>  - Important text <i>  - Italic text <em>  - Emphasized text <mark>  - Marked text <small>  - Small text <del>  - Deleted text <ins>  - Inserted text <sub>  - Subscript text <sup>  - Superscript text HTML <b> and <strong> Elements The HTML  <b>  element defines  bold  text, without any extra importance. Example < b > This text is bold < /b > The HTML  <strong&g
Read more

CSS3 LOADING ANIMATIONS

-
Image
CSS3 Loading animations HTML CODE <body>      <div  class = " content " >        <h3> CSS3 Loading animations </h3>          <div  class = " load-wrapp " >              <div  class = " load-1 " >                  <p> Loading 1 </p>                  <div  class = " line " ></div>                  <div  class = " line " ></div>                  <div  class = " line " ></div>              </div>          </div>          <div  class = " load-wrapp " >              <div  class = " load-2 " >                  <p> Loading 2 </p>                  <div  class = " line " ></div>                  <div  class = " line " ></div>                  <div  class = " line " ></div>         
Read more

Galaxy Z Flip

-
Image
Galaxy Z Flip: Don't buy it, until you read this Looking at buying Samsung's new folding phone? Read this first. 1. People will ask you about it The Z Flip is arguably the best-looking  folding phone  so far, particularly in the flashy purple color option. It folds into a lovely neat square and transforms into a vibrant, full-screen phone. That sort of thing catches the eye and I've already had multiple people asking me about it when I'm out and about, and I've overheard several whispers of, "Oh, that's that new folding phone."  Does that matter? Well, depends on your sensibilities. On the one hand, if you're the shy, retiring type then you may find this a little embarrassing. However, you probably don't spend that sort of cash on new technology without wanting to show it off a little, so my suggestion would be to embrace it and use it as a conversation starter. See if you can impress a barman enough to get a free drink.
Read more