By: Danz
HTML attributes provide additional information about
HTML elements.
• All HTML elements can have attributes
• Attributes provide additional information about
elements
• Attributes are always specified in the start tag
• Attributes usually come in name/value pairs like:
name="value"
The <a> tag defines a hyperlink. The href attribute specifies
the URL of the page the link goes to:
EXAMPLE:
<a href="https://www.w3schools.com">Visit W3Schools</a>
The <a> tag defines a hyperlink. The href attribute specifies
the URL of the page the link goes to:
EXAMPLE:
<a href="https://www.w3schools.com">Visit W3Schools</a>
1. Absolute URL - Links to an external image that is hosted on
another website. Example:
src="https://www.w3schools.com/images/img_girl.jpg".
Notes: External images might be under copyright. If you do not get
permission to use it, you may be in violation of copyright laws. In
addition, you cannot control external images; it can suddenly be
removed or changed.
2. Relative URL - Links to an image that is hosted within the
website. Here, the URL does not include the domain name. If the
URL begins without a slash, it will be relative to the current page.
Example: src="img_girl.jpg". If the URL begins with a slash, it will be
relative to the domain. Example: src="/images/img_girl.jpg".
Tip: It is almost always best to use relative URLs. They will not break
if you change domain.
The <img> tag should also contain the width and height
attributes, which specify the width and height of the image
(in pixels):
EXAMPLE:
<img src="img_girl.jpg" width="500" height="600">
The required alt attribute for the <img> tag specifies an
alternate text for an image, if the image for some reason
cannot be displayed. This can be due to a slow connection,
or an error in the src attribute, or if the user uses a screen
reader.
Example
<img src="img_girl.jpg" alt="Girl with a jacket">
Example
See what happens if we try to display an image that does
not exist:
<img src="img_typo.jpg" alt="Girl with a jacket">
The style attribute is used to add styles to an element, such
as color, font, size, and more.
Example
<p style="color:red;">This is a red paragraph.</p>
You should always include the lang attribute inside the
<html> tag, to declare the language of the Web page. This
is meant to assist search engines and browsers.
The following example specifies English as the language:
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
The title attribute defines some extra information about an
element.
The value of the title attribute will be displayed as a tooltip
when you mouse over the element:
Example
<p title="I'm a tooltip">This is a paragraph.</p>
•
•
