HTML
ATTRIBUTES
GRADE 8
• HTML attributes provide additional
information about HTML elements.
• 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 “href” ATTRIBUTE
<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:
<a href="https://www.w3schools.com">Visit
W3Schools</a>
THE “src” ATTRIBUTE
<img src="img_girl.jpg">
The <img> tag is used to embed an image in
an HTML page. The src attribute specifies the
path to the image to be displayed
<img src="img_girl.jpg">
WAYS OF SPECIFYING URL IN src
ATTRIBUTE
• Absolute URL - Links to an external image
that is hosted on another website.
Example:
src="https://www.w3schools.com/images/img_
girl.jpg".
WAYS OF SPECIFYING URL IN src
ATTRIBUTE
• 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.
WAYS OF SPECIFYING URL IN src
ATTRIBUTE
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".
• Absolute URL
- Needs permission to the image host.
- You have no control.
- It can suddenly be removed or changed by
the hosting site.
• Relative URL
- Will never break even if you change
domain
THE width AND height ATTRIBUTES
<img src="img_girl.jpg" width="500" height="
600">
THE width AND height ATTRIBUTES
The <img> tag should also contain
the width and height attributes, which specify
the width and height of the image (in pixels)
THE alt ATTRIBUTE
<img src="img_girl.jpg" alt="Girl with a
jacket">
THE alt ATTRIBUTE
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.
THE style ATTRIBUTE
<p style="color:red;">This is a red
paragraph.</p>
THE style ATTRIBUTE
The style attribute is used to add styles to an
element, such as color, font, size, and more.
THE lang ATTRIBUTE
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
THE lang ATTRIBUTE
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 lang ATTRIBUTE
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 lang ATTRIBUTE
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>
THE title ATTRIBUTE
<p title="I'm a tooltip">This is a
paragraph.</p>
THE title ATTRIBUTE
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
SUGGESTIONS ON USING ATTRIBUTES
• Always Use Lowercase Attributes
• Always Quote Attribute Values
- Good
- <a href="https://www.w3schools.com/html
/">Visit our HTML tutorial</a>
- Bad
- <a href=https://www.w3schools.com/html/
>Visit our HTML tutorial</a>
