Tutorial

How To Use HTML Attributes

Updated on August 9, 2021
Default avatar

By Erin Glass

Senior Manager, DevEd

How To Use HTML Attributes

HTML attributes can be used to change the color, size, and other features of HTML elements. For example, you can use an attribute to change the color or size of a font for a text element or the width and height for an image element. In this tutorial, we’ll learn how to use HTML attributes to set values for the size and color properties of HTML text elements.

An HTML attribute is placed in the opening tag like this:

<element attribute="property:value;">

One common attribute is style, which allows you to add style properties to an HTML element. While it’s more common to use a separate stylesheet to determine the style of an HTML document, we will use the style attribute in our HTML document for this tutorial.

Using the Style Attribute

We can change multiple properties of an <h1> element with the style attribute. Clear your “index.html” file and paste the code below into your browser. (If you have not been following the tutorial series, you can review instructions for setting up an index.html file in our tutorial Setting Up Your HTML Project.

<h1 style="font-size:40px;color:green;">This text is 40 pixels and green.</h1>

Before we load the file in our browser, let’s review each of the parts of this HTML element:

  • h1 is the name of the tag. It refers to the largest-sized Heading element.
  • style is the attribute. This attribute can take a variety of different properties.
  • font-size is the first property we’re setting for the style attribute.
  • 40px; is the value for the property font-size, which sets the text content of the element to 40 pixels.
  • color is the second property we’re setting for the style attribute.
  • green is the value for the property color, which sets the text content color to green

Note that the properties and values are contained by quotation marks, and that each property:value pair ends with a semicolon ;.

Save the file and reload it in your browser. (For instructions on loading the file in your browser, see our tutorial here.) You should receive something like this:

This text is 40 pixels and green.

You have now learned how to use the style attribute to change the font size and font color of a text element. Note that certain elements require attributes, such as the <a> element which allows you to add a link to a text or image, and the <img> element, which allows you to add an image to the document. We’ll cover those two elements in the next tutorials and learn about additional attribute usage for <div> containers and other HTML elements later on in the tutorial series.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us


Tutorial Series: How To Build a Website with HTML

This tutorial series will guide you through creating and further customizing this website using HTML, the standard markup language used to display documents in a web browser. No prior coding experience is necessary but we recommend you start at the beginning of the series if you wish to recreate the demonstration website.

At the end of this series, you should have a website ready to deploy to the cloud and a basic familiarity with HTML. Knowing how to write HTML will provide a strong foundation for learning additional front-end web development skills, such as CSS and JavaScript.

About the authors
Default avatar

Senior Manager, DevEd

Open source advocate and lover of education, culture, and community.

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel