Guide to Using HTML Attributes in a HTML Document

HTML Attributes

HTML Attributes are additional forms used to manipulate, format, or control the properties of a tag.

They are composed of two parts: the attributes name and the value in a quotation mark as follows:

<tag attribute_name="attribute_value">Example of an attribute</tag>

Use of Quotation Marks in HTML Attributes

Although double-quotes are commonly used around attribute values, single quotes can be used as well. More importantly, they can be used in situations when the value of the attribute itself contains double-quotes. As shown below:

<tag attribute_name='The boy "Smith" went away'>Example of an attribute containing double quotes in between single quotes.</tag>

<tag attribute_name="We won't say never">Example of an attribute containing a single quote in between double quotes.</tag>

Types of HTML Attributes and their uses

Let's explore TML Attributes beginning from the most commonly used attributes

This tutorial aims show the various types of attributes. With this in mind, if any of these tags are new to you, don't worry we will get back to them in future tutorials.

• The class HTML Attribute class=""

  The class attribute is used to assign a general identification (property) to one or more HTML tags. Afterward, they are used in stylesheets or scripts to give more characteristics to the tags. Several tags can be identified with a single class and a single tag can have more than one class.

  • HTML

  
  <p class="class_name1 class_name2 class_name3">Example of an attribute.</p>
  <p class="class_name1 class_name2">Example of an attribute.</p>
  <p class="class_name1 class_name3">Example of an attribute.</p>
  

• The id HTML Attribute id=""

  The id attribute is used to assign an identification that is specific to only one tag. Afterward, it is a unique identifier used in stylesheets or scripts to give meaning to that specific tag only. Although HTML doesn't penalize the use of the same id for multiple tags, it is advisable to use one id per tag.

  • HTML

  
  <p id="id_one">This is a unique paragraph.</p>
  <p id="id_two">This is a unique paragraph.</p>
  

The values of the ids and classes used in the example above "id_one" and "class_name1" are merely for consistency and clarity in this tutorial series. Ids and classes can be given any value.

• Sikademy Tips

• The title HTML Attribute title=""

  The title attribute is used to give extra information about a tag in form of a tooltip. The tooltip is displays when you hover the mouse over the tag.

  • HTML

  
  <p title="Yes, It's a unique paragraph.">This is a unique paragraph.</p>
  

  Place your mouse cursor over the printed text:

  • Output

  This is a unique paragraph.

• The style HTML Attribute style=""

  The style attribute is used to display CSS styling such as font-size, color, etc. directly on a tag without the need for a separate CSS file.

  • HTML

  
  <p>Normal paragraph without style.</p>
  
  <p style="font-size:50px; color: green; font-weight: bold;">This is a unique paragraph.</p>
  

  Place your mouse cursor over the printed text:

  • Output

  Normal paragraph without style.

  
  

  Big Green Text

• The href HTML Attribute href=""

  The href attribute is used on anchor tags <a>...</a> to create links from one link address to another.

  • HTML

  
  <a href="https://www.sikademy.com">Sikademy Home</a>
  

  Click on the link to go to Sikademy Home Page:

  • Output

  Sikademy Home

• The src HTML Attribute src=""

  The src attribute is used on an image tag to define the location of an image to display on the web page.

  
  <img src="image_folder/image.jpg" >
  

• The alt HTML Attribute alt=""

  The src attribute is used on an image tag to specify an alternative text for the browser to show when the image doesn't display. It is used alongside the src attribute.

  
  <img src="image_folder/image.jpg" alt="Image of a cute puppy" >
  

• The width width="" & height height="" HTML Attribute 

  The width and height attribute is used on an image tag to specify the width and height of the displayed image. It is also used alongside the src attribute.

  
  <img src="image_folder/image.jpg" alt="Image of a cute puppy" width="100%" height="50px" >
  

• The lang HTML Attribute lang=""

  This attribute is used on an HTML tag<html>...</html> to declare the language of the HTML document.

  
                          <!DOCTYPE html>
  
                          <html lang="en">
                              <head>
                                Tags that defines the header info
                              </head>
                              <body>
                                  <h1>Welcome To the World Wide Web</h1>
                                  <p>Cheers! From Sikademy.</p>
                              </body>
                          </html>
  

Finally

If you run into any challenge, notice an error, or have questions or concerns about this tutorial. Don't hesitate to let us know using the buttons below the exercise.

Exercise #6