Guide to Using HTML Attributes in a HTML Document

We wrapped off our discussion on HTML Tags in the previous tutorial. In this tutorial, you will learn a new concept called "Attributes"
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>
The use of quotation marks isn’t always essential, but it is a good practice to ensure consistency and clarity. For the same reason, attributes should be written in lowercase even though they are case-insensitive.
- Sikademy Tips
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.
<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.
<p id="id_one">This is a unique paragraph.</p> <p id="id_two">This is a unique paragraph.</p>
- 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.
<p title="Yes, It's a unique paragraph.">This is a unique paragraph.</p>
Place your mouse cursor over the printed text:
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.
<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:
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.<a href="https://www.sikademy.com">Sikademy Home</a>
Click on the link to go to Sikademy Home Page:
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 thesrc
attribute.<img src="image_folder/image.jpg" alt="Image of a cute puppy" >
The width
width=""
& heightheight=""
HTML AttributeThe
width
andheight
attribute is used on an image tag to specify the width and height of the displayed image. It is also used alongside thesrc
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>
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.