HTML Basics Part 8: HTML Attributes

In this part of the HTML Basics series, I will continue with talking about HTML attributes in detail.

In the previous part of this tutorial, we mentioned that HTML Elements can have attributes. The reason why we need attributes is to better define the elements on a web page. Let's take a look at the following example first and then we will continue with the important points of HTML attributes.

<a href="http://www.example.com/">My Site</a>
<img src="logo.jpg" width="200" height="120" title="My Site">
<p class="tutorial">This is a paragraph.</p>

In the above example, a link, an image and a paragraph element are given with attributes. The below table shows each element, its attributes and the attribute values.

ElementAttributeValue
<a>hrefhttp://www.example.com/
<img>srclogo.jpg
width200
height120
titleMy Site
<p>classtutorial

Important Points About HTML Attributes

- HTML elements take attributes to provide information about web page elements.
- All HTML elements can take attributes.
- An HTML element can take multiple attributes, e.g. <img>.
- The start tag holds the attributes.
- Attributes store the information in their value which is given inside quotes.

When quoting attribute values, you can use either single or double quotes. We will be using double quotes throughout our tutorials because it is more common. Single quotes are mostly used where necessary when you add scripts (PHP, JavaScript etc.) to your code or when there is a double quote in the value of the attribute such as title='My "Favorite" Image'.

You can use lowercase or uppercase letters for attributes and attribute values in your HTML code, but you should know that using lowercase letters is a recommendation of World Wide Web Consortium (W3C) for HTML 4 and a requirement in XHTML.

For a detailed list of attributes and their descriptions, please check the HTML Reference section.

Up to now, we talked about the sytax and general use of tags and elements in HTML. We will start going into details with the main elements of an HTML page in the next part.

Was this post helpful?

If you found this post to be helpful, please share it! Thank you :)

f t g+ in