HTML Attributes

HTML attributes | What are HTML attributes? | How to specify HTML attributes?

NAWA
by NAWA April 12, 2021

 Now you are gonna learn about HTML Attributes.

HTML attributes | What are HTML attributes? | How to specify HTML attributes?
HTML COURSE

Things to remember:

1.Attributes are additional information providers about HTML elements.

2. Attributes are always laid out in the beginning tag of a component.

3. HTML attributes normally come in name pairs or value pairs, you will see examples below to understand more.

4. All HTML elements can have their attributes.

1.The href Attribute:

The <a> tag describes a hyperlink. The href attribute is used to specify the URL of the page the link related to:

<a href="https://nawacomputers.blogspot.com/">Visit nawacomputers</a>

2.The src Attribute:

The <img> tag is used to place an image in an HTML page. The src attribute is used to specify the root to the image to be displayed:

<img src="img_computer.jpg">

Ways to specify URLs:

There are two ways to specify the URL within the src attribute:

1. Absolute URL:

Links to an external image that's hosted on another website.

Example to understand:
Warning: You can face copyright issues if you use external images. Moreover, these images are really difficult to manage. They can suddenly be removed or changed.

2. Relative URL: Links to a picture that's hosted within the website. Here, the URL doesn't have the name. If the URL begins without a slash, show this is relative to the present page.

Example to understand:
src="img_computer.jpg".
But URLs that start with a slash, show these are relative to a domain.
Example to understand:
src="/images/img_computer.jpg".

Are you thinking about which are the best URLs to use?

Then the Best answer is to use relative URLs. They will not show an error if you change the domain.

src="https://nawacomputers.blogspot.com/images/img_computer.jpg".

3.The width and height attributes:

The <img> tag should also contain the width and height attributes, which specifies the width and height of the image (in pixels):

<img src="img_computer.jpg" width="400" height="500">


4.The alt attribute:

The alt attribute required for the  src = "img_computer.jpg" alt = "Computer">

5. The lang attribute:

You must always include the lang attribute within the <html> tag to declare the language of the web page. This is intended to help search engines and browsers.

The following example specifies English as the language:


<html lang = "en">
<body>
.........
</body>
</html>

Country codes can also be added to the language code in the lang attribute. So the first two characters define the language of the HTML page and the last two characters define the country.
The following example specifies English as the language and the United States as the country:


<html lang = "en-US">
<body>
...
</body>
</html>

6. The title attribute:

The title attribute defines some extra information about an element.

The value of the caption attribute will be displayed as a tooltip when you mouse over the element:

Example

Important Suggestion:

 Always Use Lowercase Attributes
All the attributes can be written with uppercase or lowercase like title or TITLE.

Important Suggestion:

 Always Quote Attribute Values
The HTML standard does not require quotes around attribute values.

Display Correctly:

<a href="https://www.nawacomputers.com/html/">Visit our HTML Site </a>

Not Display Correctly:

<a >Visit our HTML tutorial</a>
Sometimes we have to use quotes. Due to space, the code in the above example will not work correctly.
Example
<p title=About My Site>

Single or Double Quotes?

Double quotes around attribute values are mostly used in HTML, but single quotes can also be used within the tag. In some conditions, when the attribute value itself contains double quotes, it is necessary to use single quotes.