Learning HTML: Part 3: Attributes

Learning HTML

HyperText Markup Language (HTML) is the de facto language of web documents. Created in part from existing languages and tools in 1991, it first became standardized in 1995 and has grown in popularity and usage over the last decades. Nearly all webpages are now written in HTML, and it is understood by all major web browsers.


 

Attributes

Elements are not limited to simply describing text. They can also have information contained within their code. These types of entries are called attributes.

Similar to describing an animal, the most general type would be simply that, animal. However, what if there were lots of things around called “animal?” There would need to be a way to find a single entry among the large number of them. That’s where attributes are used in HTML.

ID

The singular most useful attribute in HTML is the ID of an element. In the metaphor of the collection of animals, an ID can be thought of a unique way to find a single animal among a crowd of them.

Screenshot 2018-09-09 12.32.18

In HTML, an ID is given to an element by writing it inside the initial, opening tag. The ID, like other attributes, starts with its name “id” and is followed by the equal sign and then the value, in quotations.

This pattern of using the equal sign is borrowed from other programming languages and is read, from left to right as “the ID is equal to the value.” The use of quotations is also important. Because sometimes HTML can be very complex for large, interconnected websites, the use of quotations helps contain the value.

There are also two important rules for the ID attribute: there are no spaces allowed and it cannot start with a number. The value of an ID attribute must start with a letter and is also case-sensitive. This means that the values “SecondParagraph” and “secondParagraph” are different.

Class

Along with an ID, something unique within a HTML document, this is also another common attribute: class. Coming back to the metaphor of animals, a single, individual animal would have an ID and could thus be found among many of them. But what if a group of them was wanted?

The attribute Class can help. It can be thought of as “classification”: a way to group different elements together. In fact, since a classification is more general than a unique ID, elements can have both.

Screenshot 2018-09-09 12.42.04

An animal might have various classifications. It might be a cat found in the forest or a bat found in a cave. Thinking of loose classifications, an animal might have as many as is useful to help classify it.

The same is also true of elements. They can have multiple values for their Class attribute. Each new value is separated by a single space.

Screenshot 2018-09-09 12.45.33

Codepen Example:

See the Pen Learning HTML: Attributes by Dan Cox (@videlais) on CodePen.

Mozilla Thimble:

Remix on Mozilla Thimble!

2 thoughts on “Learning HTML: Part 3: Attributes

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s