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.
<img> — used for images, such as this easy button image
width and height are attributes of the <img> tag
<a> — used to create links
href is an attribute of the <a> tag
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.
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.