One place for hosting & domains

      How To Use HTML Attributes

      Part of the 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 site.

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

      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:

      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.

      Source link

      Leave a Comment