Categories
HTML Web development

HTML Attributes

Today I am posting the short note about HTML Attributes, which I was mentioning them a few times in my previous posts so far. To go further with HTML code and making our website more functional, we need to understand what the HTML attribute is.

We know now what is HTML tag, so 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 projecting your website:

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

1. Href attribute

Below 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 web site that we’re linking to.

Example:

<!DOCTYPE html>
<html>
<body>

<h2>The href Attribute</h2>
<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:

2. Style attribute

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

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:

There are many different attributes in HTML like alt, disabled, id, scr..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 the 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.


scr- specifies the URL (website address) for an image. 

See you soon 🙂

Enjoy coding!

Leave a Reply

Your email address will not be published. Required fields are marked *