HTML Attributes

HTML attributes provide additional information about HTML elements.

  • All HTML elements can have attributes

  • Attributes provide additional information about elements

  • Attributes are always specified in the start tag

  • Attributes usually come in name/value pairs like: name="value"

The href, src, alt, width, height, style, lang Attribute

The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link goes to.

The <img> tag is used to embed an image in an HTML page. The src attribute specifies the path to the image to be displayed.

The <img> tag should also contain the width and height attributes, which specify the width and height of the image (in pixels).

The required alt attribute for the <img> tag specifies an alternate text for an image, if the image for some reason cannot be displayed. This can be due to a slow connection, or an error in the src attribute, or if the user uses a screen reader.

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

You should always include the lang attribute inside the <html> tag, to declare the language of the Web page. This is meant to assist search engines and browsers.

<!DOCTYPE html>
<html lang="en">
    <body>
        <a href="https://www.google.com">Visit Google</a>
        <img src="img_girl.jpg">
        <img src="img_girl.jpg" width="500" height="600">
        <img src="img_girl.jpg" alt="Girl with a jacket">
        <p style="color:red;">This is a red paragraph.</p>
        <p title="John 'ShotGun' Nelson">
        <h1 style="font-size:60px;">Heading 1</h1>
    </body>
</html>

Summary

  • All HTML elements can have attributes

  • The href attribute of <a> specifies the URL of the page the link goes to

  • The src attribute of <img> specifies the path to the image to be displayed

  • The width and height attributes of <img> provide size information for images

  • The alt attribute of <img> provides an alternate text for an image

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

  • The lang attribute of the <html> tag declares the language of the Web page

  • The title attribute defines some extra information about an element

Last updated