🏷️HTML tag attributes

giving information to objects on a webpage

We can add information about the objects of a webpage (i.e. headings, paragraphs, images, etc.) onto the objects themselves!

If tags were physical objects, think of the attribute as a dimension like height and width:

• For an object with a height of 120 pixels, think of

  • height as the attribute

  • 120 as the value

<img src="image.jpg" height="120">

Also, coming from other backgrounds:

• We may know the attribute as a property in other programming languages and in science

  • e.g. "the properties of helium" in chemistry

• In linguistics, attributes resemble adjectives as they describe the object (i.e. the HTML tag)

Universal HTML attributes

Some attributes can appear on almost any tag, such as:

• id whose value can only appear once per page

  • of course, to uniquely identify one element!

• class whose value usually describes a quality

  • ...and possibly its membership in a group of related elements

<section id="chapter-12">
<!-- "chapter-12" can appear only once per page -->

    <div class="container-sized">
    <!-- "container-sized" can appear again on the same page -->
    
        <h1>Row 1</h1>
        
    </div>
    
    <div class="full-width">
    
        <h1>Row 2</h1>
    
    </div>
    
    <div class="container-sized">
    
        <h1>Row 3</h1>
        
    </div>
    
</section>

Special HTML attributes

The following tags have nearly inalienable and specialized attributes:

<a> (links)

This tag introduces us to tag attributes because it almost always has an attribute:

• The most common attribute for the link, href , means "hypertext reference"

In this example, the href attribute consists of the full URL of the page to which we want to link:

<a href="https://www.google.com">Google</a> 

• Another useful attribute for this tag called target involves opening the link in a new tab

<a href="https://www.google.com" target="_blank">Google</a>

By specifying the value "_blank" for the target attribute, we specify that the link will open in a new window (or, in most modern browsers, a new tab!)

<img> (images)

Another tag that will almost always have an attribute, as it relies on outside information:

• The most common attribute for the image, src means "source"

In this example, the src consists of the full URL of the page to which we want to use:

<img src="https://www.placehold.it/300x300.jpg" />

(Any tag that has to do with a media file usually has an attribute that indicates the filename!)