What are HTML Attributes?

HTML, or HyperText Markup Language, is the language that web pages use to display their content. It’s made up of different elements which tell the web browser how to show it’s information. In today’s online world, understanding how websites work is crucial. Here are the only basics you need to know in HTML!

Table of Contents hide

1 Attributes

Attributes

Attributes give extra information as to how data is to be displayed. Any element can have an attribute. They give extra information about these elements. Its format is nearly always: name=”value”

The ‘name’ specifies the attribute to be set while the ‘value’ specifies what it should be set to. Attributes must be specified in the start tag. For example:

align = “left”

Align Attribute

<p align = “left” >  This paragraph will be left  </p>
<p align = “right” >  This paragraph will be right  </p>
<p align = “center” >  This paragraph will be centred  </p>

The align attribute is used to assign an element to the left, right, or centre of a web page.

Title Attribute

<p title = “Text displayed goes here” The text to be displayed when the mouse hovers over it goes here </p>

The title attribute is used to specify extra information about an element.

ID Attribute

<p id = “introduction”>  This is the introductory paragraph  </p>
<p id = “survey”>  This paragraph surveys the work done  </p>

The ID attribute is used by web developers to make it easier to find and identify important elements.

Style Attribute

 <h1 style = “font-family:arieal: colour:#FF0000;”>  Text goes here  <h1>
<h2 style = “height:50px; color:blue” >  Product Categories  </h3>

The style attribute is used to link Cascading Style Sheets (CSS) to a web page.

Class Attribute

<head>
    <style>
        p.important {color: green; }
    </style>
</head>

    <body>
        <p>  A paragraph  </p>
        <p class="important“>  Note that this is an important paragraph  </p>
    </body>

The class attribute is used to specify one or more class names for an element.

Link attribute

<a href="https://www.google.com"> This will bring you to Google's homepage </a>

The link attribute ‘href’ is used to specify what page URL you wish links to go to.

Image attributes

<img src="apple.jpg" width="500" height="500" alt="This is an image of an apple.">

Images can have numerous attributes. The ‘src’ attribute is used to link the desired image to your webpage. The ‘width’ and ‘height’ attributes specify what size you want the image to be displayed as. The ‘alt’ attribute is used to describe what’s in the image. If the photograph can’t load, then this text will be displayed instead so the reader knows what’s meant to be shown.

Read more about programming here!