In this lesson we are going to learn some HTML Attributes with examples.
HTML Attributes



HTML ATTRIBUTE:


HTML attributes are used to add more information to an HTML Element.

Important Things to Remember


• HTML attributes are found in HTML tags.

• HTML attributes only appear at start tags. It will never be on end tags.

• HTML elements can have multiple attributes. 

• HTML attributes are composed of
name/value pairs.

• There are some attributes that can be used on all HTML Elements though they may not have effects on some elements. They are called Global Attributes. Click for an example.

An HTML attribute is composed of:


⚫ an attribute name

⚫ an equal sign • a value surrounded by quotation marks "value"

It looks like this: attributename="value"


You can also use single quotation marks
depending on the situation esp. when the value

contains double quotes. We will only use double quotation marks

throughout the entire tutorial.

In this lesson we are going to learn some HTML Attributes with examples.

Attribute lang Example:


<!DOCTYPE html>

<html lang="en-US">

<!-- html document/file content goes

</html>

We use the lang attribute to define the language of an HTML file.

The language defined above is American English.

Attribute href Example:


<a href="http://www.example.com">Go

TRY IT YOURSELF


Links are defined using the anchor <a> element.

On the example above we used the href
attribute to tell the browser where to go.

When clicked the user will be redirected to http://www.example.com.

Attribute title Example:


<a href="#link" title="I serve as a t </a>

TRY IT YOURSELF


Output:


Link

The title attribute provides a tooltip for HTML Elements.

Unfortunately, it doesn't work on mobile devices.

If you want to see how it works click the "Try it Yourself" button then save the file as "filename.html" and open it on a browser using a desktop, laptop etc.

Attribute style Example:


<p style="font-size: 40px; color: gol I am a paragraph with a size of 40

</p>


TRY IT YOURSELF:


Output:


I am a paragraph with a font-size of 40 pixels and my color is gold.

On the example given above we have created a paragraph using the <p> element.

We also used the style attribute to change its

font-size and color.

Attributes id and class Example:


<div class="name">

<!--some content goes here -->

</div>

<div class="name">

<!--some content goes here -->

</div>

<div id="name">

<!--some content goes here -->

</div>

The id and class attributes give references to elements inside an HTML document.

Multiple elements can have the same class values/names.

The id 's value should be unique for each

element.

These help us select elements in style sheets and scripts.