HTML Attributes with Example - Code4xu

byPriyanka •
0
  •  HTML attributes are a modifier of an HTML elements type. 
  • Attributes provide additional  information   above elements.
  •  Attributes are always specified in the start tag.
  • Attributes are always written inside the Html element.
  • Attribute value always written in double quotes (" ").
<p title="I'm a tooltip"">This is a paragraph.</p>
Some common and Important Atrributes
  1. lang
  2. href
  3. title
  4. src
  5. alt
  6. style
  7. width & Height
  8. Align
::::: lang attribute :::::
  • It tells the browser and Search engine that the webpage is in which language.
  • Syntax- lang="en"

Example

Input:  <DOCTYPE html>
        <html lang="en">
        <body>
        <p>
            Hello World
        </p>
        </body>
        </html>
Output:   Hello World


::::: href attribute ::::::

  • It  specifies specifies the location (URL) of the external resource (most often a style sheet file).
  • Syntax- href="URL / file_location"

Example

Input:    < a href = " https://www.code4xu.blogspot.com "> Visit code4xU < /a >
Output:    Visit code4xU


    ::::: title attribute :::::

    • It specifies extra information about an element.
    • The information is most often shown as a tooltip text when the mouse moves over the element.
    • Syntax-  title="text"

    Example

    Input:    <p title="Free Web Tutorials">Code4xu</p>
    Output:   Code4xu.com

    ::::: src attribute :::::

    • It specifies the URL of the media file to play.  
    • This attribute is required when <source> is used in <audio> and <video> .
    • Syntax- src="URL"

    Example

    Input:        <img src="img_logo.jpg">
    Output: 


    ::::: alt attribute :::::

    • It  specifies an alternate text for an image, if the image cannot be displayed.
    • The alt attribute provides alternative information for an image if a user for some reason cannot view the image then in that case alternative name is shown in the pplace of image.

    Example

    Input:    <img src="img_logo.jpg" alt="code4xu_logo">
    Output: 


    ::::: style attribute :::::

    • It  specifies an inline style for an element.
    • The style attribute can be used on any HTML element.

    Example

    Input:    <p>This is a normal paragraph</p>
              <    p style="color:aqua;">This is a style paragraph</p>
    Output:     This is a normal paragraph
                This is a style paragraph
    • Not only color property you can use all CSS properties in style attribute.

    ::::: width & height attribute :::::

    • This attribute is used to specify the height and width of the element. 
    • The values are set in px i.e. pixels.
    • We need to use the attributes height and width to set the height and width of the image in pixels.

    Example

    Input:    <img src="img_logo.jpg" alt="code4xu_logo" width="80px">
    Output: 

    ::::: Align attribute :::::

    • It specifies the alignment of an element according to the surrounding element.
    • The element is an inline element (it does not insert a new line on a page), meaning that text and other elements can wrap around it.

    Example

    Input:    <p align="left">This text is left</p>
              <p align="right">This text is right</p>
              <p align="center">This text is center</p>
    Output:
    This text is left
    This text is right
    This is center



    Example

    <!DOCTYPE html> <html lang="en"> <body> <h1 title="heading">Welcome To</h1> <a href="URL"> <h2>Code4xU</h2></a> <p>This is paragraph</p> </body> </html>

    Tags:

    Post a Comment