HTML Tag Attributes – Part 2

Last week, I kicked off a HTML series with the post — Intro to HTML.  The Intro article discusses the languages users can employ in Text Areas and introduced the concept of HTML tags.  It concluded by specifying a few tags to practice with in order to get comfortable with HTML.  This week, I will talk HTML tag attributes because you won’t get very far in HTML without attributes.  I started this post thinking I was also going to dive into what CSS is and how it fits in with HTML, but the post got long quickly.  That will be the subject for next week.  So, let’s look at attributes!

HTML Tag Attributes Examples

I’m going to explain what an attribute is, but before I do that, here are two examples in the code.

Example 1

<img> — used for images, such as this easy button image

width and height are attributes of the <img> tag

HTML Tag Attributes Example 1

Example 2

<a> — used to create links

href is an attribute of the <a> tag

HTML Tag Attributes Example 2

Characteristics of Attributes

Now that you know what you are looking at, here are the important things to know about attributes (sourced from W3Schools HTML Attributes).

  • All HTML elements (tags) can have attributes.
  • Attributes provide additional information about an element.
  • They are always specified in the start tag.
  • Attribute syntax is usually a name/value pair like: name=”value“.  Separate the name from the value with an equals sign and put the value in double quotes.
    • <h1 align=”center;”>Header</h1>
    • <p align = “center;” </p>
    • <a href=”hope.html”>Computer Hope</a>
  • Add multiple attributes to a single tag.  Separate them with a space as shown in Example 1.
  • Some attributes can be used across multiple elements, such as the align attribute shown above.  Other attributes may be unique to a tag.
  • Not all tags and attributes are supported in Spotfire.

Googling attributes for individual tags is very easy, and W3Schools has a great attribute reference.  To help you get started, here is a list of a few common attributes that users will employ in Spotfire.

  • Attributes for <div>, <p> and <h1-h6>
    • align — to specify text alignment
  • Attributes for <img>
    • height — to specify the height of images
    • width — to specify the width of images
    • border — to specify whether or not an image should have a border and how thick it should be
  • Attributes for <hr>
    • size — changes the size or width of the line
    • color — changes the color of the line
  • Attributes for <font>
    • size — changes font size
    • face — changes font style
    • color — changes font color

Here is an example of each of these attributes.

HTML Tag Attributes Example 3

Now, I am intentionally not diving very deep into attributes, and that is because next week, I will talk about CSS and formatting.  You will do much more with CSS than with simple HTML tag attributes.  Until then, take a look at the tags used in your existing DXPs.  Google their associated attributes and see what you can add to the Text Area.

 

 

Guest Spotfire blogger residing in Whitefish, MT.  Working for SM Energy’s Advanced Analytics and Emerging Technology team!

3 thoughts on “HTML Tag Attributes – Part 2

Leave a Comment

Your email address will not be published. Required fields are marked *