(PDF) HTML Attributes with Example :- Infinity4Education
HTML Attributes
An HTML attribute provides additional information
about an HTML element.
- All HTML elements can have attributes
- Attributes provide additional
information about an element
- Attributes are always specified in the
start tag
- Attributes usually come in name/value pairs
like: name="value"
The href Attribute
HTML links are defined with the <a> tag. The link address is
specified in the href attribute:
Example
<a href="https://www.Infinity4Education.blogspot.com">This
is a link</a>
The src Attribute
HTML images are defined with the <img> tag.
The filename of the image source is specified in
the src attribute:
Example
<img src="img_tree.jpg">
The width and height Attributes
HTML images also have width and height attributes, which specifies the
width and height of the image:
Example
<img src="img_tree.jpg" width="500" height="600">
The width and height are specified in pixels by
default; so width="500" means 500 pixels wide
The alt Attribute
The alt attribute specifies an alternative text to be
used, if an image cannot be displayed.
The value of the alt attribute can be read by screen readers. This
way, someone "listening" to the webpage, e.g. a vision impaired
person, can "hear" the element.
Example
<img src="img_girl.jpg" alt="Girl with a jacket">
The alt attribute is also useful if the image cannot
be displayed (e.g. if it does not exist):
Example
<img src="img_typo.jpg" alt="Girl with a jacket">
The style Attribute
The style attribute is used to specify the styling of
an element, like color, font, size etc.
Example
<p style="color:red">This is a red
paragraph.</p>
The lang Attribute
The language of the document can be declared in
the <html> tag.
The language is declared with the lang attribute.
Declaring a language is important for accessibility
applications (screen readers) and search engines:
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>
<html lang="en-US">
<body>
...
</body>
</html>
The first two letters specify the language (en). If
there is a dialect, add two more letters (US).
The title Attribute
Here, a title attribute is added to the <p> element. The value of the title
attribute will be displayed as a tooltip when you mouse over the paragraph:
Example
<p title="I'm a tooltip">
This is a paragraph.
</p>
This is a paragraph.
</p>
Use Lowercase Attributes
The HTML standard does not require lowercase
attribute names.
The title attribute can be written with uppercase
or lowercase like title or TITLE.
Use Quote Attribute Values
The HTML standard does not require quotes around
attribute values.
The href attribute can be written
without quotes:
Example
<a href= https://www.Infinity4Education.blogspot.com >
<a href=" https://www.Infinity4Education.blogspot.com ">
<p title=About Infinity4Education>
Single or Double Quotes?
Double quotes around attribute values are the most
common in HTML, but single quotes can also be used.
In some situations, when the attribute value itself
contains double quotes, it is necessary to use single quotes:
<p title='John "ShotGun" Nelson'>
Or vice versa:
<p title="John 'ShotGun' Nelson">
HTML Attributes Summary
- All HTML elements can have attributes
- The title attribute provides additional "tool-tip"
information
- The href attribute provides address information for links
- The width and height attributes provide size information for images
- The alt attribute provides text for screen readers
- At Infinity4Eduaction we always use lowercase attribute
names
- At Infinity4Education we always quote attribute
values
HTML Attributes
Below is an alphabetical list of some attributes
often used in HTML, which you will learn more about in this tutorial:
|
Attribute
|
Description
|
|
alt
|
Specifies an alternative text for an image, when
the image cannot be displayed
|
|
disabled
|
Specifies that an input element should be
disabled
|
|
href
|
Specifies the URL (web address) for a link
|
|
id
|
Specifies a unique id for an element
|
|
src
|
Specifies the URL (web address) for an image
|
|
style
|
Specifies an inline CSS style for an element
|
|
title
|
Specifies extra information about an element
(displayed as a tool tip)
|
Comments
Post a Comment