HTML Attributes - Lena Design

Each HTML element/tag can also feature attributes (and each element has a different set of attributes applicable to the element.

All we should remember about HTML Attributes are:

a) all HTML elements can have attributes

b) attributes provide additional information about an element

c) attributes are always specified in the start tag

d) attributes usually come in name/value pairs like: name=”value”

There are many attributes often used in HTML. Here are some attributes which you can use while designing your website:

1. href attribute
2. style attribute
3. title attribute

1. Href attribute

Below is an example of adding the href attribute to the <a> tag (which is used for creating a hyperlink to another website).

The herf attribute specifies the location of the website that we’re linking to.

Example:

<!DOCTYPE html>
<html>
<body>

<p>HTML links are defined with the a tag. The link address is specified in the href attribute:</p>

<a href="https://www.lenastanley.com">My blog.</a>

</body>
</html>

Output:

HTML links are defined with the a tag. The link address is specified in the href attribute:

My blog.

2. Style attribute

Another very commonly used attribute is the style attribute. The style attribute is used to provide various CSS effects to the HTML (like increasing font-size, changing font-family, or colouring).

Example:

<!DOCTYPE html>
<html>
<head>
    <title>Style Attribute</title>
</head>
<body>
    <h2 style="font-family:Chaparral Pro Light;">Style Attribute.</h2>
    <h3 style="font-size:15px;">Style Attribute.</h3>
    <h2 style="color:#B22222;">Style Attribute.</h2>
    <h2 style="text-align:center;">Style Attribute.</h2>
</body>
</html>

Output:

3. Title attribute

The next one is the title attribute. The title attribute is used to specify extra information about the tag/element. When the mouse moves over the element then it shows the information.

Example:

<!DOCTYPE html>
<html>
<body>

<p><abbr title="This is a title attribute">Title attribute </abbr>you will learn here:</p>
<p title="Web tutorials">www.lenastanley.com</p>

</body>
</html>

Output:

Title attribute you will learn here:

http://www.lenastanley.com

There are many different attributes in HTML like alt, disabled, id, src… but I would like to look into them closer in a different post in the future. In case you would like to know them faster I am posting them below with a short description.

Edit: To see how to use these attributes click here.

alt– specifies an alternative text for an image, when the image can not be displayed.
disabled– specifies that an input element should be disabled.
id– specifies a unique id for an element.
src– specifies the URL (website address) for an image.

Enjoy coding!

Share this: