HTML Attributes
- 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:
<!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.w3schools.com">This is a link</a>
</body>
</html>
Output:
HTML links
are defined with the a tag. The link address is specified in the href
attribute:
This is a link
The src Attribute
HTML
images are defined with the <img> tag.
The
filename of the image source is specified in the src attribute:
<!DOCTYPE
html>
<html>
<body>
<h2>The
src Attribute</h2>
<p>HTML
images are defined with the img tag, and the filename of the image source is
specified in the src attribute:</p>
<img
src="img_cloud.jpg" width="500" height="600">
</body>
</html>
Output:
HTML images are defined with the img tag, and the
filename of the image source is specified in the src attribute:
The alt Attribute
<!DOCTYPE html>
<html>
<body>
<h2>The alt Attribute</h2>
<p>The alt attribute should reflect the image
content, so users who cannot see the image gets an understanding of what the
image contains:</p>
<img src="img_cloud.jpg" alt="clouds"
width="660" height="660">
</body>
</html>
Output:
The alt
attribute should reflect the image content, so users who cannot see the image
gets an understanding of what the image contains:
The style Attribute
The style attribute is used to specify the styling
of an element, like color, font, size etc.
<!DOCTYPE html>
<html>
<body>
<h2>The style Attribute</h2>
<p>The style attribute is used to specify the
styling of an element, like color:</p>
<p style="color:red">I am a
paragraph.</p>
</body>
</html>
Output:
The style
attribute is used to specify the styling of an element, like color:
I am a paragraph.
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 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:
<!DOCTYPE html>
<html>
<body>
<h2 title="I'm a header">The
title Attribute</h2>
<p title="I'm a tooltip">
Mouse over this paragraph, to display the
title attribute as a tooltip.
</p>
</body>
</html>
Output:
The title Attribute
Mouse
over this paragraph, to display the title attribute as a tooltip.
No comments