HTML Lecture 03 - The Attributes

HTML Attributes are used to provide additional information about elements. They are always specified in the start tag in name/value pairs like: name = 'value'.

Today we will go through some of the most common attributes used in HTML.

The href attribute

The <a> tag defines the hypertext link. We use href attribute inside the starting <a> tag to specify the URL of the page the link goes to. For Example:

<a href="https://www.jackofall.org">Jack Of All</a>

The result of this code is going to be:

The src attribute

The <img> tag is used to embed an image in an HTML page and it is a self-closing tag which means it does not require a closing tag. The src attribute defines the path of the image. For example:

<img src= "https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" >

The result of this code is going to be:

The width and height attribute

The <img> tag can also contain width and height attributes to define the dimensions of an image in pixels. For example:

<img src= "https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" height = "20" width = "20">

The result of this code is going to be:

The alt attribute

The <img> tag also must have an alt attribute. It is used to display alternative text in case of an image being unable to load. For example:

<img src= "cat.jpg" alt = "The cat">

The result of this code is going to be:

The title attribute

The title attribute defines some extra information about the element. It is used as a tooltip when you hover over the element it will display the text defined by title attribute. For example:

<p title="paragraph 1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vel condimentum velit. Curabitur id porta ipsum, eget aliquet odio. Sed aliquet cursus lorem, ut placerat diam aliquet at. Cras eget felis sed felis consectetur gravida eu nec tortor. In vitae erat vehicula, finibus purus lobortis, varius libero. Aliquam diam enim, iaculis in pharetra sit amet, elementum quis neque. </p>

The result of this code is going to be:

This lecture explains some of the attributes used in HTML, although there are many more attributes and we will go through them as we move forward with the lectures.